Show star ratings at the top of the page.

• Place star ratings directly at the top of the product page so that users can quickly see the overall rating of the product without having to scroll all the way down to the review section.
• Include both the user rating average and the total number of ratings next to the star ratings so users quickly get an overview of the product ratings.
• Have a textual element that can anchor the user down to the reviews section.

Provide a quick view to the star ratings.

• Consider implementing a tooltip-like dropdown from the star ratings that allows the user to see a quick breakdown of the reviews before navigating to the review section.
• By having a CTA or link in the dropdown, you can anchor the user straight to the review section on the page.

Encourage users to write a review.

• In close proximity to the review section or within the review summary itself, have a “Write a Review” CTA that users can see clearly.
• Include another “Write a Review” CTA next to the star ratings at the top of the page so users can navigate to the review form without having to scroll down to the review section.
• Use approachable and informative copy around the CTA that can entice the user to leave a review.

Include a review summary with key information.

Have a review summary at the top of the review section that can better help users understand the product at a glance.

This can include:

• Quality, value, length, durability, or any other relevant features of the product.
• Most popular or helpful reviews. Overall recommendation of the product.
• A breakdown of the star ratings.

Present this information in engaging but easy-to-skim visuals, such as scales, percentages, progress bars, or horizontal bar charts.

Implement a sort feature for reviews.

• Implement search filters, such as ‘most recent,’ “lowest rated,” or ‘most helpful’ to ensure that users can easily find relevant reviews.
• Have the sort feature set to ‘relevance’ by default to ensure that users are seeing a natural mix of both positive and negative reviews, as well as reviews that are relevant to their needs, early on.
• Make sure that the sort tool is easily findable and recognizable on the page. Place the tool by the start of the reviews list. Have a ‘Sort By’ label either labeling a sort dropdown or as a headline above any sort links.
• Use familiar language when writing filter options.

Use search filters.

Add relevant search filters that can find reviews that are better tailored to the specific user. This can include:

• Size, height, and weight.
• Common keywords.
• Verified purchases.
• Reviews with images.

Like the sort options, ensure that these filters are findable and recognizable on the page. Keep the filters close to the sort feature, and use easy and familiar language for all search filter labels, whether it be in dropdowns or as text links.

Keep key functions and features above the fold.

1. Make sure the global navigation remains sticky to the top of the page.
2. Provide breadcrumbs so that users can navigate back towards their path.
3. Keep the filters and sort sticky to the the page so users can easily apply and reapply filters as they browse past the fold line.
4. Indicate the number of results there are. Ensure that at least the first product row is visible above the fold line.

Provide key features to ease browsing.

• ‍Provide a way to navigate to other sub-categories within the same parent category.
• Allow users to save or compare any product listing. Use listing space to promote a specific product or campaign.
• ‍Avoid overcrowding the listing with too much information.
• Provide a Back to Top button as a user goes further down the page, especially on a PLP that infinite scroll.

Understand when to use list view versus grid view.

1. A list view:

• Has more space for textual elements.
• Ideal for lists in which users rely on important details for decision-making.
• Deal for lists users can skim text quickly If users read from left to right, place the most important details on the left

2. A grid view is:

• Ideal for lists where the image is the main focus for decision-making
• Better for lists that do not require detailed textual elements
• Ideal for users that are exploring rather than searching for something specific

Allow users to "Load More."

Many sites often implement either pagination or infinite scrolling for their product listings.

1. Pagination:

• can overwhelm the user with its number of pages.
• may result in users viewing less products than with infinite scroll.
• can help users keep a mental location of where products are they would like to view again.
• can be perceived by the user as slow to load.

2. Infinite scroll:

• may cause users to feel a lack of control due to the never-ending results.
• Impedes access to the footer or other content that may contain vital links.
• can begin browsing a wealth of information without waiting for everything to load.
• does not do an effective job at having its scroll bar represent how many more results there are. Users may lose their place when moving away from the list and coming back.

Be purposeful.

Ask yourself these questions before creating this microinteraction:

• What does your user need?
• What is the objective of this microinteraction?
• Will this bring value to the user experience?

Deliver feedback asap.

• ‍Avoid user confusion and frustration; deliver feedback immediately after the microinteraction has been triggered.
• ‍Avoid using microinteractions that would affect the functionality of your product.

Keep it simple.

‍Overcomplicated microinteractions will overwhelm the user. Remove any unnecessary details and elements. Simple microinteractions can lead to a happier user, which can lead to increased user engagement

Keep it consistent.

‍Build the user’s mental model of this microinteraction so that they know what to expect every time. Keeping microinteractions consistent can help build user habits.

Be human.

Incorporate elements that speak to user emotions, which have a big impact in the user experience.

Stay on brand.

Microinteractions are powerful tools that can communicate your brand. Use simple and memorable elements that can enhance your brand and make it stand out from others.

Keep key elements above the fold line.

1. Keep the global navigation bar and any important utilities sticky to the top of the page so it is visible at all times.
2. ‍Provide a breadcrumb that is easily visible and legible. Make sure the crumb corresponding to the current page is disabled. Consider providing a ‘back to...’ button.
3. ‍Ensure the entire product image and thumbnails are visible above the fold line.
4. Upon hovering the product images, provide zoom functionality of the product in a modal that is easily removable.

Maintain visibility of the main CTA.

Render the main CTA and any related functionalities sticky to the bottom or top of the page once the user scrolls past the original placement.

• Use the space to also include elements such as the price, product name, a quantity selector/stepper and or a favorites button.

Allow ease of store location change.

1. Allow users to change their store location within the global navigation bar. Show key takeaway details about the store, such as address, distance, and store hours.

Provide key features to enhance browsing.

1. Allow users to see a product list of the specific brand they are viewing.
2. Allow users to use tabs (or anchors) to see reviews and product Q&A by clicking on the section titles. (Ensure there is a back to top button.)
3. ‍If there are color options, make sure to clearly indicate if a color is not available.
4. Provide information in a modal or non-modal pop-up about shipping details, installment payments or special member pricing, rather than directing users to a new page or extending the page height.
5. Allow users to save an item to a list for later view or purchase.

[OPTIONAL] Provide additional options / add-ons.

1. Allow users to add add-ons or warranty that complement the product well.
2. Allow users to add the item to their cart via delivery or pickup. Allow users to estimate delivery and pickup times—provide a way to edit users’ zip codes or store locations.

Address product details.

1. Try to keep a partial view of product details above the fold line. Keep product detail sections tabulated to avoid extending page height and decreasing exposure. Consider using secondary in-page navigation to help users anchor from section to section.
2. Give product detail text a clear hierarchy and structure using different sizes and/or color to make it easy to read or skim.
3. Make product details as visual as possible to communicate ideas and concepts quickly.
4. Consider allowing users to expand product details section if the information extends past a certain point, and the user wants to view more.

Use engaging visuals and media.

Using engaging visuals and media can add delight and interest for the user, encouraging them to engage.

Strategically use and copy labels.

Speak to the users’ interests and personalities. Engage them emotionally.

Provide ease of navigation.

Ensure that users can easily navigate to various gift guide categories. Avoid placing every product considered a gift on one page.

Reassure the use of gift cards from the cart page.

In the reassurance block, indicate to users that gift cards are accepted as a payment method.

Display the gift card option with other payment methods.

During checkout, display the gift card with other payment methods to provide equal visibility. It can keep user paths fluid and intuitive, while also removing confusion regarding where to add gift card numbers.

Determine the order in which you will display payment methods.

The order of displayed payment methods are often different from one website to another, depending on users’ profile and preferences. Use Contentsquare to determine the performance of each method. This will allow you to reorganize the payment method ranking based on users’ preferences.

Expand the gift card field.

When users click on their payment method and choose the gift card option, directly expand the fields on the page, rather than redirecting users to another step. This will avoid unnecessary extra steps that can hinder conversion.

Add field input suggestions to better guide users.

Add instructions above the field, to inform users of what steps to take. Add a field input suggestion to guide users on the proper format or card number to help users understand what is required of them.

Add a tooltip to give more information about the card.

Add a tooltip next to the title, to give users more details about using a gift card: The conditions of use of the card How it works Where to find the number etc. This helps reassure users on all necessary details about the gift card to avoid any confusion or hesitation.

Explicitly state password requirements.

‍Show the password requirements as the user is creating a password for their account. The user should be able to see the requirements at all times on the page. The requirements could be a checklist by the password form field that updates as you fulfill each point.

Allow users to show passwords.

Provide a button that can show or unmask the password as the user is typing it in. The user can check their work as they are typing, reducing cognitive load and also catching any mistakes.

Use Single Sign-On (SSO).

Single Sign-Ons (SSO) allow the user to access multiple platforms with a single username and password.

Allow the user to sign onto the site or app using one platform (i.e. Google, Apple, Facebook, etc.).

‍Hierarchize SSO by performance. Putting the most popular or most relevant at the top will allow users to access it quickly and easily.

SSO would eliminate the need for the user to remember multiple usernames and passwords, and reduce the number of incorrect logins and password resets

Implement physiological biometric sign-ins.

For mobile apps, implement biometric authentication, such as Touch ID, Face ID, or voice recognition, for quick and secure sign-ins. The user can quickly sign-in or approve a transaction without having to remember and enter a password.

Use One-Time Passwords (OTP).

A one-time password is a random code of numbers or characters that is used to authenticate the user for a single login attempt or transaction. OTP security is easy to adopt, difficult to guess, and resistant to attacks. The user typically receives OTP via text message or email.

Use Two-factor authentication (2FA).

‍Use two-factor authentication (2FA) as an extra layer of security to the user’s username and password. This will give the company more confidence in understanding the user’s identity.

Some forms of 2FA include a pin, password, card number, and biometric pattern. The user usually receives 2FA via text message or email.

Inform users about the purpose of cookies.

• Clearly explain what the purpose of cookies is on the site and whether this information is being shared with third party companies.
• Provide the user links to the website’s privacy policy and cookies page within the banner. The user can then easily navigate to those pages to read more and be informed before making a decision.

Allow users to accept or reject cookies.

• If explicitly asking users for cookies consent, provide two clear options to accept or reject.
• Provide a CTA to reject or decline cookies with an “X” or a CTA. The banner at the top of HubSpot’s page provides the user two CTAs to allow cookies or decline.

Adjust cookie settings from the banner.

• ‍Allow the user to customize their cookie settings from the banner. Have a button within or near the banner that allows the user to opt-in/opt-out of certain cookies on the site.
• Communicate the different cookie settings in an easy and digestible way.
• Use clear buttons such as toggles, checkboxes, or radio buttons that are transparent enough for the user to know what they can turn on and off.
• Also, include an option that allows the user to opt-in or opt-out of ALL options at once.

Have an opt-out form accessible on the page.

• Make sure that the site has a link or a button to an opt-out form on the homepage. This is commonly found in the footer of the website. The link or button is typically named, “Do Not Sell my Personal Information.”
• Users should then navigate to a page that includes the site’s privacy policy and an option to adjust cookie preferences.
• It is important to provide the user a clear way to withdraw from any prior consented cookies.

Inform users about implicit consent.

• Implied consent is permitted under the CCPA. Without needing to ask for permission to use cookies, inform the users about the consent that is implied as the user continues to use the website.
• Make sure to still explain the purpose of cookies on your site, provide links to the cookie policy, and cookie settings, so that users can adjust their preferences.
• This implicit cookies message can be presented as a banner, a notification, or a popin.

Implement an opt-out cookies pop-in.

Consider placing the cookie privacy terms on a popin that appears once they enter the site. This will ensure that the user will see the information and be properly informed before continuing. Adjust the size, color, and alignment of the popin/modal so that it is visually distinctive from its context.

Clearly differentiate pricing.

Ensure that member pricing is clearly distinguished from non-member pricing by adjusting the following:

• White space and padding
• Variant text colors
• Variant sizing
• Adding a clear headline  

Show the membership program as an add-on to the product listing.

Consider providing an option to add membership as an add-on directly within the listing itself.

Consider using constraints to encourage signing up.

Constraints can come in many forms, whether that is early access, or barriers to purchasing popular products. This can help trigger account signups, providing an opportunity for deeper connection even if the customer isn’t ready to purchase.

Subtly communicate program benefits.

Can actionable benefits be shown subtly on the website? Consider subtly communicating program benefits on the different areas of the site to entice users to sign up for a membership.

Provide earlier points of membership sign-in prior to the cart page.

Provide a way for users to sign up to be a member prior to the cart page, on the homepage and product page. This can help avoid conversion disruption when users get to the cart.

Key UX/UI considerations

• Consider showing one full new row each time the carousel arrow is clicked. (This applies to mobile as well.)
• Try to keep the carousel arrows outside the image containers rather than on top to avoid clutter or loss of visibility.
• Do users use the pagination dots to navigate the carousel? If so, you may want to consider using a thicker bar instead to increase the tap / click area of control (especially on mobile).

Use distinct arrow icons.

Use clear, distinct arrow icons. The carousel icons are clearly and boldly contrasted against the page. In addition, the arrow disappears from the page once the user is not able to go in that direction any longer.

Enable multiple actions for each product.

Provide clear UI for different actions for each product. If there are color swatches, allow users to click or hover the color swatches to view an alternate image within the carousel. If users can add to bag or quick-view the product, provide a separate CTA for these actions.

As this example also shows, select products with sizes also have a separate dropdown for size selection.

Offer clear navigation tools alongside carousels.

Provide a way for users to shop all items within the category. Should the user not be satisfied with the options within the carousel, provide a clear link to the full PLP of the carousel’s focused category.

Use tabs and offer alternative navigation.

Consider using tabs to help provide equal visibility to different cross-sells. Tabs can provide a good way for users to view different groups of products within the same line height. In this example, users are also provided an option to navigate to the full PLP of products within the same brand / collection / category.

Use a horizontal slider for mobile tabs.

A horizontal slider may be used to display multiple tabs on mobile. To accommodate for the smaller screen and multiple tabs on mobile, the user can slide between tab options to choose the most appropriate cross-sell.

Always keep search visible and accessible.

Ensure that search is always easy to find and access. Place it within the global navigation, and make it sticky to the page as users scroll.

‍Do not hide the search within the hamburger menu, as this decreases visibility. To display the search within the global navigation, you can opt for a search icon or a search bar, depending on the amount of space you have. However, avoid having the user click more than once or twice to enable the keyboard.

Use autocomplete to help users choose a new scope.

As users type within the search, use autocomplete to make suggestions to search the typed keyword in various categories, rather than a site-wide search. Surface recommended categories and subcategories, or auto-direct them to the matching list page. This helps avoid producing an overwhelming and irrelevant list of search results. Users may also miss out on beneficial features and functionality using a search results page rather than finding items through a main navigation category.

Keep any search suggestions and autocomplete above the fold line. 

The entire search window should be visible. Keep any search suggestions and autocomplete above the native keyboard by limiting the number of search suggestions. The entire search window should be visible as the user is typing. Users should not have to scroll through search suggestions to choose one.

Bold/Treat words other than keywords.

Bold the text style of the words that are not the keyword of the suggestions. This helps users understand what the differences are for each suggestion quickly. If you only highlight the keyword, it is difficult for the user to skim the suggested search topics.

Create an overlay as search is being used.

Create a dark overlay as the search function is being used to help contrast it from the white background that is usually found on websites. This helps de-clutter the screen and is easier on the eyes to focus on the search suggestions.

Consider providing a search scope selector

Consider providing a search scope selector, where the user can choose the category they would like to search within. A selector should be placed next to the search field.

Keep important elements above the fold line.

1. Make sure the menu and search are clearly, visible, legible, and sticky to the top of the page.
2. Keep primary call-to-actions (CTAs) clearly visible above the fold.
3. Add an element to prompt users to scroll, or partially show content to indicate there is more content.

Guide users to other parts of the website.

4. Easily guide users to browse product categories by displaying top category links.‍
5. Add elements to reassure users of shipping, delivery, and returns.‍
6. Encourage users to browse recommended products. Use carousels to avoid lengthy page heights.

Clearly list cart items and information.

1. Allow users to go back to their browsing experience.
2. Communicate the number of cart items and total cost immediately
3. Allow the user to easily adjust quantities, remove the item, or save it to a list for later.
4. Allow users to click the image or name to revisit the page or trigger a quickview.
5. Ensure the Saved for Later list is easy to find and access.
6. Allow users to choose delivery or store pickup options for each item (disable for particular items if one is not available).

Maintain visibility of the order summary.

1. Keep the order summary sticky to the side of the page. As the cart changes, the order summary should auto-update (without refreshing the page).
2. Ensure the order summary lists the subtotal of the products, any savings, and estimated shipping and tax.
3. Provide an area on the page to apply a promotional code so that users can anticipate the cost prior to checkout.

Maintain visibility for mobile websites.

1. Keep an expandable and collapsible version of the order summary at the top of the page to maintain visibility and accomodate for a mobile view.
2. Keep the checkout button sticky to the bottom of the page at all times for easy access.

Organize the cart based on delivery point.

1. As users choose which items should be delivered or picked up in store, automatically re-organize the cart into two sections. This should be done without refreshing the page to maintain continuity and avoid user confusion.

[Optional] Provide upsell elements or cart value increases.

1. Consider providing options for appropriate add-ons. Only provide what is most relevant to avoid frustrating users with too much information.
2. Consider surfacing recommendations that are frequently bought together.

Ensure its visibility and accessibility.

First-level categories, Search, and functions such as Account and Cart should be visible and available at any time (except the checkout process).

Differentiate the global navigation.

Ensure the global navigation clearly stands out from the page by using a strong, contrasted background. This helps differentiate the main navigation from all other content as a key feature of the site. 

Ensure the global navigation remains sticky.

By keeping the global navigation of the page sticky across the entire website, users can easily navigate to other areas of the site. This is especially true for retailers that have an extremely large product catalog, or lengthy pages.

Place and word categories strategically.

Place categories in order of performance in the standard direction of the region. Avoid industry jargon; use words that are familiar and easily discernible by your users, not what is used internally.

Give hover states to your menu, but avoid double hovers.

Many users expect menus to open as they hover on desktop. Ensure that menus pop open as users hover first-level categories on the global navigation. However, avoid double hovers as they can lead to hover errors. Instead, focus on guiding users to the category page.