An attendee in the Visual Design for Mobile class asked me an interesting question: do images aid navigation, as opposed to purely textual menus? While I have observed users navigate through both types of designs in numerous mobile-usability studies, I had not recently compared these two design patterns for mobile phones. Thus, I decided to conduct a quick remote unmoderated usability test: websites to analyze were identified, tasks were written, and 3 days later the entire study was complete. My answer after all this? As with many topics within web design, it depends.
Text Menus Are More Efficient
Mobile users have a limited patience for long interaction times, even when browsing to kill time. Text-only menu items require less vertical space than an image would, allowing more list items to be displayed on the screen at a time. This allows users to review the available options more easily, with less (or no) scrolling necessary. In contrast, if image grids are used for navigation, the user often sees only 4 grid items at a time, which goes against the menu design guideline to keep all the navigation options visible, so people can rely on recognition rather than recall.
Compare the Men's Footwear page on the Sports Authority mobile website to the one on Dick's Sporting Goods: to review all the available subcategories, a user would have to scroll through 4 screen lengths of options on the Sports Authority page, as opposed to the 1 scroll needed on Dick's Sporting Goods. To make matters worse, all the users in my study who persevered to review all (or most) of the available subcategories eventually decided that one of the first navigation options was the most desirable option and scrolled back to the top of the page to navigate to the corresponding product listings. Thus, on the Sports Authority site, the lengthy grid layout meant that users went through about 8 scroll gestures (down and up) before selecting a product type.
The image grid of subcategories on the Sports Authority mobile website results in a much longer page than the text menu on the Dick's Sporting Goods mobile website. Its true that Sports Authority presents a greater number of options, but even displaying only 12 categories in a grid would run onto a third screenfull.
Text-only list menus are also more flexible than image grids because short lists of subcategories can be expanded in situ, via an accordion, below the category link, rather than requiring an entire new page to load. Additionally, the menu itself loads faster because there are no image requests slowing down the page load.
Text menus can be expanded using accordions, which save users from loading a new page to view subitems, as seen here on the homepage of Dick's Sporting Goods mobile website.
But as long as users do eventually find their desired option and traverse through the information hierarchy, are additional page loads and increased scrolling really problems? The issue here is that users might miss the optimal choice for their goal. Repeatedly scrolling to review all available options is tiring, and people often stop once they see an item that looks close enough to what they want. This is a risk of all flat and broad hierarchies because long lists with many options can overwhelm users. Adding images to even a medium-length list of options quickly adds to the page length, thereby increasing this risk.
In our testing of the West Elm mobile website, one user only scrolled far enough down the Furniture categories page to see the second row of options before making her selection. In this case, she was looking for a couch and stopped scrolling at the first category that did not seem related to that goal, rather than conducting a full review of all the categories. Had she continued browsing down this 12 screen-lengths long page, she would have discovered several more options for seating, along with the Sales subcategory that she later stated she would have liked to see.
West Elm mobile website: Only 4 of the 42 navigational options available on the Furniture categories page were reviewed before the user made her selection.
The problems surrounding scrolling and the number of visible options are not as noticeable on desktop as they are on mobile, as the larger screens allow more options to be exposed at a time so users can more easily compare all available offerings. On the desktop, displaying category information with only text links is a waste of the available screen real estate, and can also appear overwhelming if there are too many text links. For this reason, our guideline for desktop sites in the E-Commerce Homepages and Category Pages report maintains that images should be included on product listing and category pages.
Images Can Help Users Differentiate
Presenting images in a grid as a part of category navigation not only provides larger tap targets for touch screens, but also can help users make their selection in cases where text labels alone are unfamiliar or may not clearly communicate differences between options. For example, the West Elm mobile website displays images for the various subcategories of Bedding — All Bedding, Duvet Covers, Quilts + Coverlets, Sheet Sets, and so on. Here, the images allow users to recognize and understand the types of products available and make a more informed decision.
What's the difference between a "duvet cover" and a "coverlet?" If you aren't sure, the photos help differentiate these navigation categories.
Even in cases where the categories are vastly different, images allow users to skip reading altogether — and some users might do exactly that. As one user stated, “I prefer image menus so I don't need to do as much reading, but I don't mind text menus as long as the text is big, bold, and easy to read.” If you have a small number of visually distinct categories to present, a grid of tappable (and labeled) images may be the easiest and fastest design for people to use.
Of course, these images must contain helpful details and be presented at a large enough size to be recognizable. This is why images in a 2-column grid work well on mobile, while images presented as a tiny thumbnail within a list layout do not.
Lowes mobile website: The images used within the list of Appliances categories are too small to be helpful to users, and are likely to be ignored completely. At this size, they are simply added page weight, slowing down load time and increasing data usage. Most people know the difference between a dishwasher and a freezer (so images aren't that useful anyway), but if you don't know, these photos sure won't help.
Optimize for More Images per Scroll
Large images are almost always necessary for listing individual products. At this stage of the process, users care about the visual distinctions between items, and would rather scroll through a single long page than repeatedly switch between the list page and product-detail pages. When designing these layouts, pick the right size of images so that they are large enough to be recognizable, yet small enough to allow more products to be seen at a time.
During our study, one user noticed an icon at the top of the product-listings page for camping tents on the Sports Authority mobile website. Curious about what the icon meant, he tapped on it and discovered the ability to swap between a list view and grid for the products displayed. After toggling the view a few times, he eventually stayed on the default grid view. While this user did not state his reason for choosing one view over another (one downside to an unmoderated study is the inability to probe for more information), the grid view had a clear advantage: it allowed more products to be seen at a time — two slightly smaller images per row, as opposed to an image and title for a single product in the list view.
Sports Authority mobile website: An image within a list view causes each product to consume more screen real estate, a precious commodity with small phone screens.
So, Text Menus or Images?
If you've been debating whether to use a text-only list menu or an image-based grid for mobile navigation, know that they're each good at different levels in the site's information hierarchy:
- For the broadest and most diverse category levels, a text menu allows users to quickly navigate to the content in which they are interested.
- Once the differences between options become more nuanced, a grid of images helps users differentiate various offerings and make a more informed selection.
For most sites, this switch from text menus to an image-based design occurs at the product listings page or, at most, one level higher in the information architecture. (Much more about distributing items across multiple levels in the training course on how to organize and structure information to improve findability.)
