Contributors
@andreea-macoveiciuc-content-expert
Business Benefits
Improve website usability and overall user experience, reduce site abandonment rates, and boost sales.
Use clickable areas separated by borders and visual cues like arrows, instead of small buttons or links to indicate where to tap.
- Maintain a consistent and conventional style. Never use blue or underline for text that isn’t a link.
- Make entire areas clickable instead of individual links and use borders to separate them from the rest of the page. For example, the product thumbnail, product name, price, and features on a product list item should all be one clickable area.
- Arrows are more effective than links or small buttons at indicating how and where to move on.
For example, Payless uses shadowed borders to show their products, indicating that users can tap them to go to the product page. Borders are also used for the Find a Store and Order Status buttons to show that they’re clickable. The placeholder text in the email input field lets users know they can tap the box to type in their email address.
Add only the most important information to product list items, like product name, price, and thumbnail.
For example, if you’re selling clothes, material might be an important piece of information to list. This helps users quickly and effortlessly decide which products they want to further inspect. The less space a list item takes up on the screen, the quicker users can get through the entire list.
For example, Lulu’s only shows the essential information: product names, pictures, prices, thumbnails, and available colors. The product thumbnails are large enough for users to get a good idea of what they’re looking at without taking up too much space.
Use multiple product thumbnails to show all available product variations and make it clear that users can tap them.
Use thumbnails that show different styles, colors, and angles. For example, Payless shows thumbnails with red borders that users can tap to view all possible product variations right from the product list.
Use list items large enough to take up one-third of the device screen in portrait mode.
This allows users to see the thumbnail clearly and read essential product information without having to zoom in, while also making them aware that there are more products to explore. Ask your web designer to configure your mobile product list design to ensure that each product list item takes up at least a third of the screen. For example, Hasbro’s product list gives list items sufficient space for users to get a good idea of each product, while showing enough products at a time to encourage browsing and exploration.
Use a plugin like Load More Products to enable Load more scrolling for lists with more than 15-30 products.
Having a Load more button ensures users can browse full product lists without feeling overwhelmed or losing access to the vital information stored in the footer. Ensure tapping the browser Back button takes users to the exact spot on the product list they were on before clicking Load More. Taking users back to the beginning of the product list could cause unnecessary frustration.
Keep all product page content on one page by using a single long product page instead of multiple pages.
Users are familiar with and comfortable scrolling on mobile. Chances are they’re willing to scroll and learn more if they’re already on a page. Most users won’t know or expect to navigate to additional pages for more information, especially on small mobile screens.
Show recommended products and compatible accessories in dedicated, labeled areas on individual product pages.
Recommended products should be secondary in the visual hierarchy to the primary product on the page. For example, if you sell laptops, display a list of compatible chargers on the product pages for individual laptops.
Use clear, large CTA buttons and position them in the center of the screen, as close to the top of the page as possible.
For example, Underarmour’s big, red Add to Bag CTA stands out and is large enough for users to easily tap.
Keep sentences short and separate copy into blocks of 3 to 4 lines to facilitate easy scanning.
Avoid complicated sentence structures and only include necessary and valuable information.
Use contrasting font colors, vary your text formatting, and add subheadings and images to avoid overwhelming users.
For example, Fresh uses a mix of subheadings, paragraphs and bullet lists, and an image to break up blocks of content in a way that’s easy for users to scan.
Last edited by @hesh_fekry 2023-11-14T11:40:18Z