Smartphones’ small screen sizes make it challenging to optimize product list pages. When they’re not designed with mobile context in mind, customers abandon their purchase journey. What design considerations affect your mobile product list experience?
Whether on the home page or category page, on desktop or mobile, hero headers are too often superfluous graphics that add little value. They can even harm conversion by causing confusion. On mobile devices, the worst offending heros take up the entire “first” screen, pushing category titles, products and important interactive elements below the “portrait fold.”
Gaiam’s category hero image pushes the category title “Balance Ball Chairs” below the portrait fold (above, right) and the image’s cropping doesn’t help the customer understand where she is. The experience is even worse in landscape orientation.
Nearly as disruptive are hero sliders. Ralph Lauren’s slider flips quickly between sale banners for baby boys and baby girls, with text that is hard enough to read if held static!
While headers can be an effective way to persuade customers with special offers (especially those that arrive directly on category pages through search or social), they should always be either sitewide offers or directly related to the category being viewed.
It’s unclear whether FTD’s weekly deal is related to the Birthday category. If it’s not, hijacking the customer out of his category is not a good user experience.
Boys may balk at Belk’s Clinique cosmetics offer in the Men’s Hoodie category!
Because category page headers compete with product results, they should always be tested against not using them.
Sort and filter are so important, they’re covered in depth in their own chapter of Ecommerce Illustrated. In addition to sort and filter, giving customers the ability to control the number of results they see, toggle between grid and list view, and navigate back and forth through breadcrumb links is helpful.
Bealls supports grid and list view toggle
Because categories can contain a large number of results, and loading new pages can be a pain, allowing a customer to maximize the number of results via “Show ‘X’ Per Page” or “View All” links can help.
Pagination vs autoload
As covered in Ecommerce Illustrated’s chapter on pagination vs infinite scroll, infinite scroll is becoming increasingly popular on mobile commerce sites. While it takes the pagination pain out of the user experience and supports seamless browsing, a customer can get “lost” in the category once too many products have been auto-loaded, and footer content is impossible to access until all products have been loaded.
Autoloading “spinner” icons typically appear for a fraction of a second, not enough time for the user to access footer content
User testing research by Baymard Institute demonstrates the optimal alternative to pagination is to use “Load More” buttons combined with “lazy loading” (autoload as a user scrolls down, up to a certain number of results).
While both GlassesUSA (below, left) and Guess (below, right) use this approach, GlassesUSA’s button is more user friendly, indicating how many additional products will load next.
Baymard’s testing found users view more of the product list with autoload and load more buttons than with paginated results, but pay less attention to individual products. For this reason, you may opt to stick with pagination. If so, ensure there is enough space between link targets to avoid accidental activation. Hot Topic’s (below, left) and PromGirl’s (below, right) page links are a bit too close for comfort.
Alex and Ani’s (below, left) and Gemvara’s (below, right) paginated targets are easier to tap correctly.
Baymard’s testing also indicates users prefer to click “Next” buttons to individual page numbers, and rarely engage with actual page numbers, so make sure you include large, tappable buttons (or forward and back arrows). Revolve Clothing (below, left) uses them exclusively, while Road Runner Sports (below, right) provides a menu of pages as a back-up.
Regardless of whether you paginate or auto-load, “Back to Top” buttons are always useful on mobile product lists. Clear text labels are more usable than simple carrots, as the ^ icon may not be universally recognized as a jump control.
Displaying product results
The larger the product thumbnails in your category list, the fewer you can show in one screen, so balance quick scannability against the benefits of big pictures. Consider product and image context — is the customer influenced more by the visuals of a product or its, price, features or description? Is the item presented as part of an outfit, which shrunken down poorly displays its pattern, style, shape or other context?
Brooks Brothers’ large thumbnails (above, left) make it easy to see the details of its clothing and accessories. REI’s thumbnails (above, right) may be too small to make out the detail of items, and product titles take up as much space as images.
Portrait vs landscape
Most mobile shoppers use your site in portrait mode, but many mobile commerce sites neglect to accommodate landscape mode.
Art.com gracefully switches the user from a two-column to three-column grid when orientation changes.
Urban Outfitters accommodates four products per screen. Notice the header menu gets thicker in landscape mode, which cuts grid space.
The number of products per row in landscape mode is less important than context. Users should be able to view at least one full row in portrait mode (product image and complete list information such as name and price).
Footlocker’s category grid layout affects product context in landscape mode. The customer can’t visually connect pricing, star rating and other information to product thumbnails very well in one screen.
Which types of product information you include in your mobile category lists depends on:
a) The type of product shown (Is it a visually driven or spec driven purchase)?
b) Brand image and target customer (Do you sell premium goods or are price and star ratings more influential to the purchase?)
c) How customers shop for products in category (Can items be added directly to cart without viewing a product page? Should value propositions like “Exclusive” or “New” be called out?)
d) Your design context (Are you going for a clean and uncluttered design? How large are your thumbnails? etc)
Ideally, your mobile category lists contain the same product information as your desktop experience. However, there are some mobile-specific considerations you should keep in mind.
Many retailers’ product lists support mouseovers to show alternate thumbnail images or reveal additional content like Quick Look or Add to Cart options. Persisting this feature to mobile doesn’t work well, as users often unintentionally discover this effect while scrolling down a list (through momentary touch contact), only to find intentional interaction with list items activates a “click” through to the product page.
Until mobile devices can accommodate the hover state, it’s safer to disable anything that can be accidentally activated. Instead, support elements like thumbnail image swaps with tappable controls like Belk’s finger-friendly color swatches. Tapping the color box changes the thumbnail image, while tapping the thumbnail image or product title takes the visitor to the product page, as expected.
Some sites, like Fossil, choose to list each product’s color as its own SKU / product listing, eliminating the need for customers to interact with swatches in the category grid. This works okay if you have a small-ish catalog, without too many product results in each category list. Otherwise, increasing the number of list items means more pagination and auto-loading, which may detract from the user experience.
For “spec driven” purchases for which the product title and image are less influential to the purchase than product details, showing more product information in list view (versus grid view) in the category list page can reduce the need to pogo-stick between the category and product detail pages.
Jegs’ product list information includes an add to cart button, eliminating the need to view the product detail page.
Lenovo’s list pages even include expand and collapse features typically found on mobile product pages.
Keep in mind that when lists items too closely resemble product detail pages, they may be confused for them – especially when the second list result isn’t visible above the portrait fold. This may cause confusion and site abandonment. It also increases the amount of scrolling a customer has to do to view all list items. Ideally, product list information calls out only the most important, persuasive or relevant details to help the customer compare products (often, you don’t need everything).
Tap target spacing
Be careful about tappable links. Fragrancenet places the product’s brand links (that take the visitor to all products by that brand) dangerously close to the product name, which can trigger “accidental activation” of the wrong link.
Add to Cart buttons
Add to Cart buttons reduce pogo-sticking between category lists, product pages and shopping carts, but they only make sense when the category clearly supports the use case of selecting multiple products from a list without viewing more details. For example, industrial replacement parts, consumable household and grocery items and office supplies.
Staples uses a lightbox to indicate successful add-to-cart, providing very clear feedback for the action, while keeping the customer in the category list.
As mobile is often used to research offline purchases, supporting local inventory look-up is a helpful feature.
Gander mountain provides a store look-up tool, while Sports Authority indicates which products are online-only.
Pro tip: Create two mobile visitor segments in your Web analytics that a) exclusively includes visitors who engage with in-store inventory tools and b) filters them. Removing potential research-online-purchase-offline visitors can give you a different perspective of your mobile conversion rate, as well as mobile contribution rate to the omnichannel experience.
Your mobile category pages don’t need to mirror the desktop experience, nor should they. Optimal mobile product lists use header images judiciously, provide the right navigation controls and display product information clearly, all within the small-screened, tappable context of the smartphone.
Need help with your mobile UX? Drop me a line.
Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.