Product Recommendation Quiz - UX Design Patterns
A product recommendation quiz is a dynamic, interactive tool designed to guide users through a series of questions that gather insights into their preferences, tastes, and needs. These quizzes are typically embedded within e-commerce websites or apps, strategically placed to capture the user’s attention early in their journey.
A product recommendation quiz is ideal for explorative shopping. For instance, a user who lands on your homepage may only have a vague idea of what they are they’re looking for. A product recommendation quiz, or product finder, can guide a user to the product that is best suited for them. And because a product recommendation quiz narrows down the number of options for a user, it’s an ideal component for both satisficers and maximizers. "Satisficers" and "maximizers" are terms often used in psychology and decision-making theory to describe different approaches people take when making choices or decisions. Satisficers are individuals who want to make decisions or choices that are "good enough" or satisfactory to meet their minimum criteria or standards. Maximizers, on the other hand, are individuals who strive to make the best possible decision or choice by exploring all available options and alternatives.
Best Practices for Product Recommendation UI Design
Show the quiz on your homepage
The first step to designing a product recommendation UI is deciding where and how to implement it on your website. Since most users land on your homepage with a product-finding strategy already in mind, it’s important to place the quiz where it’s easily accessible. That way, you avoid having your users spend too much time looking for the right product to only then discover that the quiz was available to them.
Fitbit's website features a prominent header banner at the top of the homepage, making it easy for users to start their journey to discover the product that aligns best with their needs.
There are two ways to showcase the product recommendation quiz on your website’s homepage. First, add a highly visible call-to-action (CTA), such as on the main nav. Depending on how your main navigation is organized, the call-to-action such as “Help me choose” can be placed as a button to the far right or live inside the menu as a link.
For Xbox, the link within the menu is appropriately positioned within the product category titled "Consoles." It appears towards the end of the list, serving as a last step to assist users in locating the correct product after reviewing other available options.
In the case of Xbox, the link inside the menu is properly placed near the list of products named “Consoles”. It’s most likely shown at the bottom of the list as a final effort to help users find the right product after they’ve scanned through the other options.
The second method is to place the product recommendation quiz in a section on your homepage. Avoid promoting it in such a way that it looks like an ad banner. Banners that look like ads often suffer from “banner blindness” — a user’s tendency to ignore page elements.
iRobot has a product recommendation quiz banner located further down on their homepage. The lower it is on the page, the less likely users are to notice it.
Keep the number of steps to a minimum
If you are considering having a quiz with only 2 steps, it might be worthwhile to consider a short form instead. Ideally, the product recommendation quiz should be about 3-5 steps, with no more than 8 options per step. By keeping the number of options on each screen to a minimum, the user spends less cognitive effort completing each step. Conversely, more steps mean more clicks, which will require a higher interaction cost from the user.
Keep Hick’s Law in mind when designing your quiz UI. Hick’s Law states that the time required to make a decision is based on the number of options available.
Copy should be clear and concise
Include a heading on each screen that clearly describes what’s being asked of the user. You can also include a brief description underneath it to give the user more clarity. However, avoid non-essential or kitschy sentences that create noise. Be concise so that the user knows what to do next without feeling frustrated or overwhelmed.
Show Progress
It’s important to show progress to users so they’re not left wondering where they’re at in the process. Do this by showing how many steps there are total, and which step they’re on.
In Polaris's product recommendation quiz, progress is indicated by showing both the total number of quiz steps and the user's current step.
Give users control
Make sure to include a next, previous, and exit button within your quiz. This gives users a sense of control and allows them to quit midway through the process if needed.
Results Page
Finally, once users have reached the results page, consider these next few items.
Recommend a product, and highlight some of the reasons why that product is the right one for them. This can be in the form of a brief description or a checklist.
Polaris gives users a top recommendation on the results page of the product recommendation quiz.
Polaris provides a convenient rationale feature that allows users to quickly see why a particular vehicle was recommended.
Suggest a second and third option. A product recommendation quiz supports a non-compensatory decision-making process, meaning that the user uses filters to narrow down their options, and may not take into account other options that might be right for them. For example, if you are shopping for a car, you might rule out other vehicles based on price alone. However, a higher-priced vehicle might have some components that could weigh into your decision, such as safety features. By giving your user a second and third recommendation, you’ll meet a maximizer's need to evaluate all options. Additionally, giving slightly less-than-ideal options will help your user make a decision.
The comparison chart on Polaris’s results page simplifies the process for users to compare options and features before making a decision.
The quiz user interface at Polaris takes the results page a step further by offering a comparison chart just beneath the top three recommendations. This provides users with a nice way to quickly compare the options before making a decision. The benefit of presenting a recommendation at the top and then a comparison chart below is that it caters to both satisficers and maximizers. The satisficer will feel content with the component at the top while the maximizer will appreciate being able to see the features of the top three options being compared next to one another in an easy-to-understand chart.
Finally, be sure to include a “start over” button on the results page. This will provide the user with a convenient way to go through the process again without having to try to remember how they came across the quiz in the first place.
Wrapping Up
A modern product recommendation UI can help break up complex decisions into smaller, more digestible steps. In this article, we reviewed guidelines for creating a quiz user interface that helps users choose a product. This can be incredibly useful for both maximizers and satisficers. By implementing the recommendations provided here, you’ll give your users a pleasant shopping experience while giving your website an edge to boost conversions.