Optimizing Mobile Category Pages

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?

Hero headers

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-ball-category

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!

ralph-lauren-slider

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.

Ftd-category-deal

Boys may balk at Belk’s Clinique cosmetics offer in the Men’s Hoodie category!

Belk-clinique-promo

Because category page headers compete with product results, they should always be tested against not using them.

Display controls

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-grid-list-toggle

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.

view-all-mobile

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.

Bealls-autoload

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.

load-more-mobile

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.

too-close-pagination

Alex and Ani’s (below, left) and Gemvara’s (below, right) paginated targets are easier to tap correctly.

Spaced-pagination-targets

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.

prev-next-buttons

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.

jcrew-back-to-top

Displaying product results

Image size

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?

large-vs-small-thumbnails

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.

art-orientation

Urban Outfitters accommodates four products per screen. Notice the header menu gets thicker in landscape mode, which cuts grid space.

uo-orientation

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.

Footlocker-portrait-category

footlocker-landscape-category

Product information

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.

Mouseovers

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.

belk-color-change

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.

fossil-bag-colors

List view

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.

jegs-specs

Lenovo’s list pages even include expand and collapse features typically found on mobile product pages.

lenovo-specs

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.

fragrancenet-category-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.

Summitracing-add-to-cart

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.

staples-add-to-cart

Omnichannel features

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.

gander-mtn-local

Sports-authority-stock-avail

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.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *