diff --git a/apps/formbricks-com/components/shared/Footer.tsx b/apps/formbricks-com/components/shared/Footer.tsx index 0983f28472..95792bedd6 100644 --- a/apps/formbricks-com/components/shared/Footer.tsx +++ b/apps/formbricks-com/components/shared/Footer.tsx @@ -26,6 +26,7 @@ const navigation = { { name: "Terms", href: "/terms", status: true }, { name: "GDPR FAQ", href: "/gdpr", status: true }, { name: "GDPR Guide", href: "/gdpr-guide", status: true }, + { name: "Feedback Icon", href: "/feedback-icon", status: true }, ], bestPractices: [ { name: "Interview Prompt", href: "/interview-prompt", status: true }, diff --git a/apps/formbricks-com/pages/feedback-icon/colored-comments-feedback-icon.svg b/apps/formbricks-com/pages/feedback-icon/colored-comments-feedback-icon.svg new file mode 100644 index 0000000000..7d6906a804 --- /dev/null +++ b/apps/formbricks-com/pages/feedback-icon/colored-comments-feedback-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/formbricks-com/pages/feedback-icon/comment-dots.svg b/apps/formbricks-com/pages/feedback-icon/comment-dots.svg new file mode 100644 index 0000000000..9d22c399c6 --- /dev/null +++ b/apps/formbricks-com/pages/feedback-icon/comment-dots.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/formbricks-com/pages/feedback-icon/comments-icon-2.svg b/apps/formbricks-com/pages/feedback-icon/comments-icon-2.svg new file mode 100644 index 0000000000..f9c839b67b --- /dev/null +++ b/apps/formbricks-com/pages/feedback-icon/comments-icon-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/formbricks-com/pages/feedback-icon/comments-icon.svg b/apps/formbricks-com/pages/feedback-icon/comments-icon.svg new file mode 100644 index 0000000000..4dcbc0b46d --- /dev/null +++ b/apps/formbricks-com/pages/feedback-icon/comments-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/formbricks-com/pages/feedback-icon/feedback-envelope-icon.svg b/apps/formbricks-com/pages/feedback-icon/feedback-envelope-icon.svg new file mode 100644 index 0000000000..98d2ffb92a --- /dev/null +++ b/apps/formbricks-com/pages/feedback-icon/feedback-envelope-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/formbricks-com/pages/feedback-icon/feedback-icon.svg b/apps/formbricks-com/pages/feedback-icon/feedback-icon.svg new file mode 100644 index 0000000000..b6149670f3 --- /dev/null +++ b/apps/formbricks-com/pages/feedback-icon/feedback-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/formbricks-com/pages/feedback-icon/feedback-message-icon.svg b/apps/formbricks-com/pages/feedback-icon/feedback-message-icon.svg new file mode 100644 index 0000000000..8f3bbc43d1 --- /dev/null +++ b/apps/formbricks-com/pages/feedback-icon/feedback-message-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/formbricks-com/pages/feedback-icon/feedback-tooltip-icon.svg b/apps/formbricks-com/pages/feedback-icon/feedback-tooltip-icon.svg new file mode 100644 index 0000000000..e90982b016 --- /dev/null +++ b/apps/formbricks-com/pages/feedback-icon/feedback-tooltip-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/formbricks-com/pages/feedback-icon/index.tsx b/apps/formbricks-com/pages/feedback-icon/index.tsx new file mode 100644 index 0000000000..fda3ce6eb7 --- /dev/null +++ b/apps/formbricks-com/pages/feedback-icon/index.tsx @@ -0,0 +1,261 @@ +import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation"; +import HeroTitle from "@/components/shared/HeroTitle"; +import Layout from "@/components/shared/Layout"; +import Image from "next/image"; +import Link from "next/link"; + +import ColoredCommentsIcon from "./colored-comments-feedback-icon.svg"; +import CommentsIcon2 from "./comments-icon-2.svg"; +import CommentsIcon from "./comments-icon.svg"; +import FeedbackEnvelopeIcon from "./feedback-envelope-icon.svg"; +import FeedbackIcon from "./feedback-icon.svg"; +import FeedbackMessageIcon from "./feedback-message-icon.svg"; +import FeedbackTooltipIcon from "./feedback-tooltip-icon.svg"; +import EmailFeedbackIcon from "./send-email-feedback-icon.svg"; + +const icons = [ + { + iconPath: FeedbackIcon, + iconName: "feedback-icon.svg", + altText: "download feedback icon", + }, + + { + iconPath: FeedbackTooltipIcon, + iconName: "feedback-tooltip.svg", + altText: "download feedback tooltip icon", + }, + + { + iconPath: CommentsIcon, + iconName: "comments-icon.svg", + altText: "download feedback icon for comments", + }, + + { + iconPath: ColoredCommentsIcon, + iconName: "colored-comments-icon.svg", + altText: "download colored feedback icon", + }, + + { + iconPath: CommentsIcon2, + iconName: "comments-icon-2.svg", + altText: "download feedback icon for comments", + }, + + { + iconPath: FeedbackMessageIcon, + iconName: "feedback-envelope.svg", + altText: "download envelope feedback icon", + }, + + { + iconPath: EmailFeedbackIcon, + iconName: "send-email-feedback-icon.svg", + altText: "download send email feedback icon", + }, + + { + iconPath: FeedbackEnvelopeIcon, + iconName: "gui-feedback.svg", + altText: "download message icon for feedback", + }, +]; + +export default function FeedbackBoxPage() { + const handleDownload = (iconPath: string, iconName: string) => { + const link = document.createElement("a"); + link.href = iconPath; + link.setAttribute("download", iconName); + document.body.appendChild(link); + link.click(); + link.remove(); + }; + + return ( + + +
+ {icons.map((icon) => { + const { iconPath, iconName, altText } = icon; + return ( +
handleDownload(iconPath, iconName)} + className="h-40 w-40 cursor-pointer rounded-md border-slate-300 bg-slate-200 p-6 + transition-transform duration-150 hover:scale-110 dark:border-slate-500 dark:bg-slate-700"> + {altText} +
+ ); + })} +
+
+
+

How to get the best feedback from your users?

+

+ Getting feedback from users is an important part of any design and product building process. It + helps designers, builders and entrepreneurs to understand how users interact with a website or + application and identify areas for improvement. To get the best feedback from your users, consider + the following tips: +

+
    +
  • + Make it easy for users to provide feedback by using feedback icons, buttons, or other + interactive elements.{" "} + + Formbricks is a free and open source micro-survey tool + {" "} + which makes this really easy. It provides many best practices on how to collect feedback from + your users. +
  • +
  • + Encourage users to provide feedback by offering incentives such as discounts or rewards for + completing surveys or comment forms. +
  • +
  • + Use a variety of feedback tools such as surveys, comment boxes, or feedback icons to provide + users with multiple ways to provide feedback. +
  • +
  • + Act on user feedback by making changes to a website or application based on user suggestions or + comments. +
  • +
  • + Continuously seek feedback from users by regularly updating surveys or comment forms to gather + new feedback. +
  • +
+

+ By following these tips, designers can get the best feedback from their users and use that + feedback to improve the overall user experience of a website or application. +

+

Best practices for gathering user feedback

+

+ Gathering user feedback is an important part of the design and product building process. To gather + the best feedback from users, consider the following best practices: +

+
    +
  • + Interview Prompt: Target power users in your app and invite them to book an interview.{" "} + + Here is example and in-depth guide on how to do that. + +
  • +
  • + Product-market Fit Survey: Measure to what extend you have reached the omnious PMF!{" "} + + We've written up how to do that here. + +
  • +
  • + Onboarding Segmentation: During Onboarding, many people are used to sharing some insights + around how they found you.{" "} + + Make use of that with this survey template and guide. + +
  • +
  • + Churn Survey: These insights are pure gold! Sometimes user react annoyed but{" "} + + understanding why they churned is key to building a better product or service. + +
  • +
  • + Feature Chaser: Built a new feature? Follow up with users right after they used it with + highly targeted in-app surveys.{" "} + + Formbricks is an open-source survey solution which makes this easy. + +
  • +
  • + Feedback Box: Giving your users a quick and easy way to provide targeted feedback is + invaluable.{" "} + + Here is a guide on how to do that within a few minutes using Formbricks. + +
  • +
+
+ + +
+

The history of the feedback icon

+

+ The feedback icon is a visual representation of the feedback process. It is used to indicate that + a user can provide feedback on a particular element or feature of a website or application. The + feedback icon is typically displayed as a small icon or symbol that is easily recognizable and can + be clicked on to provide feedback. The feedback icon is often used in conjunction with other + elements such as text or buttons to encourage users to provide feedback. The feedback icon is an + important part of the user experience design process as it helps to make it easy for users to + provide feedback and helps to improve the overall user experience. +

+

Different types of feedback icons

+

+ There are many different types of feedback icons that can be used to indicate that a user can + provide feedback. Some common types of feedback icons include: +

+
    +
  • + Feedback envelope icon: This icon is typically used to indicate that a user can send an + email or message to provide feedback. +
  • +
  • + Feedback message icon: This icon is typically used to indicate that a user can provide + feedback by sending a message or comment. +
  • +
  • + Feedback tooltip icon: This icon is typically used to indicate that a user can provide + feedback by hovering over a tooltip or information box. +
  • +
  • + Feedback icon: This icon is typically used to indicate that a user can provide feedback + on a particular element or feature of a website or application. +
  • +
+

+ These are just a few examples of the many different types of feedback icons that can be used to + indicate that a user can provide feedback. Each type of feedback icon has its own unique design + and purpose, but they all serve the same basic function of encouraging users to provide feedback + on a website or application. +

+

+ How to get the most out of your feedback icon? +

+

+ Feedback icons can be used in a variety of ways to encourage users to provide feedback on a + website or application. Some common ways to use feedback icons include: +

+
    +
  • + Placing feedback icons next to important elements or features of a website or application to + encourage users to provide feedback on those elements. +
  • +
  • + Using feedback icons in conjunction with other elements such as text or buttons to encourage + users to provide feedback. +
  • +
  • + Using feedback icons in conjunction with other feedback tools such as surveys or comment boxes + to provide users with multiple ways to provide feedback. +
  • +
  • + Using feedback icons in conjunction with other design elements such as colors or shapes to make + them more visually appealing and engaging to users. +
  • +
+

+ By using feedback icons in these ways, designers can create a more engaging and interactive user + experience that encourages users to provide feedback and helps to improve the overall user + experience of a website or application. +

+
+
+
+ ); +} diff --git a/apps/formbricks-com/pages/feedback-icon/send-email-feedback-icon.svg b/apps/formbricks-com/pages/feedback-icon/send-email-feedback-icon.svg new file mode 100644 index 0000000000..91471bd885 --- /dev/null +++ b/apps/formbricks-com/pages/feedback-icon/send-email-feedback-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file