Loading Form...
Sep 21, 2011 | 5 minute read
written by Linda Bustos
Last post we covered tips for home page design for mobile web sites and, as promised, today's post will explore category pages. The goal of category pages is ultimately to keep the customer on-track to locating a product for purchase, thus usability and clarity of menu options and product results is key. Page layouts, sort and refine tools and navigation options all work in tandem to support this user goal. *Note: These tips can be applied to search results pages as well.
There are 2 types of category pages - top level categories, which list sub-category menus, and sub-categories, which list available items within the category. Top-level categories are most often a link-menu, but using thumbnail images can also be helpful, provided they are large enough to decipher and click. Remember, thumbnail images scaled down for mobile may not show the detail / size required to be helpful.
Left: Crate and Barrel top-level category page. Right: Crate and Barrel sub-category page.
When displaying product results, price, star rating, color/size availability, stock availability, shipping offers, promotions and even short product description details help "sell" the products. Including these attributes on mobile is as important as on the web. But when it comes to call to action placement, be careful that "Add to Cart" buttons, if you choose to use them, should be clearly associated with the correct product to avoid confusion on the "small screen."
Make Attribute Differentiators Clear When products may have various formats or attributes (for example, hard cover, soft cover, movie DVD, soundtrack or e-book), it's important to make these attributes very clear in category results. There are 50 results for "Goodnight Moon" from Barnes and Noble, including games, puzzles and Spanish translations, but this is not obvious. Don't rely on category filters, not all customers take advantage of them.
Refinement tools greatly assist users in winnowing down the number of products in your catalog, and support the goal of leading customers to the right product. Filters narrow results by product attribute, and may vary depending on the product type. For example your camera department may refine by Brand, Color, Mega-pixel, Optical Zoom and Price, while your camcorders would include Display Size and Sensor Technology. Sort tools should remain the same across your site (Price, A-Z, Bestsellers, Product Rating, Newest, etc). Your filters and sort tools should mirror your www site on your mobile site. Design and Usability Usability of sort and refinement tools is important, but the "visibility" of these tools is even more important. Sort/filter links and buttons can easily fade into the background of your site design, especially on small screens where navigation options must be clumped close together.
Left: Barnes and Noble's text links are small touch targets, and are placed on a darker background. Eye-tracking studies have shown eyes tend to jump from white space to white space. This method may create "banner blindness" on small screens. Right: The low contrast between text color and the background, combined with the small text size, may make this menu difficult to read on the small screen or in low light areas.
Left: ASOS' refine and sort tools are easy to spot on the white background. Secondary tools like the number of results on one page are faded as to not compete for attention. Right: A larger menu may be more user friendly.
Expand / collapse menus decrease page load speed and conserve space. eBags does a nice job with its design:
Treat your refine / sort links like a call to action - make them very noticeable and easy to "click" with a finger.
Breadcrumbs Breadcrumb links should be large and easy to "click," but like refinement tools, your design may camouflage larger buttons. User testing is a good idea to find out what works best.
Left: Small link targets may be difficult to click with fingers. Right: Large breadcrumb links may fade into the background.
Pagination Pagination is painful enough on the large screen, how much worse on the mobile web? Walgreens' tiny targets are terribly tough to tap.
Auto-appending results (page loads more products automatically when user hits the bottom of the page) is a double-edged sword -- scrolling to the top of a mobile device can be a nightmare. Providing controls for the number of results per page (ASOS, above) and a larger target for page links (ASOS, below) is a decent compromise.
Back Button A back button is very helpful to return to the top-level category and try another sub-category. Showing clear buttons at the top of results and at the bottom helps both "oops I this isn't the category I want" and "I can't find the right selection here" situations.
Comparison tools are critical to successful product selection for consumer electronics, and Crutchfield innovates by achieving this functionality for mobile devices. Clicking "Compare" enables the functionality right from category results:
Of course, there's limitations for mobile phones in the number of columns that will display nicely, but even comparing 2 options looks fine on a smartphone.
Remember, the main goal is to get your visitor clicking to a product page. Any testing you do should center around optimizing the calls to action to access the Refine / Sort tools and to view product and/or add directly to cart. When you're just starting out, it may be tempting to start to tweak elements within the existing design, for example, changing the color of your buttons or font sizes, rather than testing the design itself. Challenge yourself to break your existing design and test a different approach. If you use images for navigation, test it against a text-link or button menu. If you include "Buy Now" buttons in search results, test without the call to action. If you paginate, experiment with different numbers of loaded results or against an auto-append feature. Think "radical redesign," and base your A/B tests on initial rounds of user testing to know you're optimizing for problems customers are truly having, not just for the sake of testing. Next installment: Product pages. Back on Friday. Looking for help with mobile commerce strategy? Contact the Elastic Path consulting team at consulting@elasticpath.com to learn how our ecommerce strategy and mobile strategy services can improve your business results.