Mobile search design and functionality really matters to mobile context. Not only is navigating through category menus far more tedious on mobile devices than desktop, mobile is the preferred way to quickly locate an item when using mobile in-store.
Many of the design principles of mobile category list pages apply to mobile search results, including sort and filter, product grids and handling pagination. Rather than reiterate these tips covered extensively in previous chapters, this chapter focuses on best practices unique to the mobile search experience.
Search box design
Icon vs search box
Mobile devices provide far less space for header navigation and important sitewide elements. While it’s trendy to style search as a simple magnifying glass icon, a bold, open search field may be worth the real estate for your site and target customer (this is one of the first mobile navigation A/B tests you should conduct on your site).
While there are many ways to style your search box, it’s most effective to treat it like an important call-to-action — that means a bold treatment with contrasting color to your site’s header menu and background.
Both Petco and iHerb are great examples of this. To boot, both sites leverage in-field text, with iHerb.com sneaking a competitive value proposition, boasting its breadth of products.
Whether an icon or search box, search should be visible at a glance, and not hidden behind a hamburger menu.
Bambeco hides its search field behind its hamburger menu.
3balls and Target have both adopted the design trend of placing search smack in the middle of its header navigation, making it impossible to miss.
When using a search icon, ensure it’s not placed too close to other tappable elements, like Account or Cart.
Header menu items are prone to “accidental activation” if not provided enough pixel padding. Ideally, search icons are placed top right versus top left, as this is the most conventional placement across mobile websites and apps.
Search box behavior
It’s important that search icons pull up a visible search box. “Ghost fields” may be trendy, but they’re very difficult to use on the small screen.
Airsplat is one example, its search field is very stealth. It appears nothing has been triggered (bottom, right).
Mobile search always invokes a device’s native keyboard, but it’s up to you whether the autocorrect attribute is enabled or disabled.
Yoox (left) doesn’t invoke keyboard autocorrection, while Calendars.com (right) enables the keyboard autocorrection.
My recommendation is to leave autocorrect disabled for mobile search, as it presents a few usability challenges:
- It competes with autosuggest. If you’ve implemented autosuggest, you want customers to pay attention to this feature, not keyboard autocorrect. If autosuggest is doing its job, it will catch misspellings, whilst guiding your customer to suggestions relevant to your catalog.
- It takes screen space. Enabling autocorrect makes the keyboard overlay larger, leaving less available viewport for your autosuggest menu.
- The OS dictionary is not your search dictionary. The keyboard may attempt to autocorrect brand and product names that don’t exist in the standard English dictionary. All your hard work of tuning site search is thwarted if autocorrect successfully hijacks the search.
Often, autocorrect applies without the customer realizing. For example, this search for “hoverboard” was autocorrected on the sly to “hover board.” We know that not all sites serve consistent search results across keyword variants (and for the record, Hobbytron’s products use the version “hoverboard” consistently).
If you do use autocorrect in keyboard, use inline highlighting to alert the searcher to the potential error (which may draw attention to the autocorrect suggestion). This works best when you’re not using autosuggest.
When you’re ready to submit your search – what do you hit? The search box’s icon? “Done”? “Search” on the keyboard?
If you hit the “Done” link, all that happens is the keyboard disappears. No search is actually executed. You must hit either the keyboard button or the website’s search icon.
This isn’t completely intuitive, especially since native OS dropdown menus apply selections after hitting “Done.”
It’s very important to style your keyboard’s “Search” or “Go” button with a bold color, like Wine.com’s (below, right). Sears’ “return” label (below, left) is easy to overlook. Thankfully, its search “Go” button is bold and orange to compensate. Ideally, Sears would use two bold buttons labeled “Search” or “Go” instead of only one.
Avoid using “Cancel” buttons (the “X” is enough) or using only a decorative icon within your search box that’s not clickable. Tapping Dillards’ search icon doesn’t execute a search, rather it invokes iPhone’s text selection feature.
Relevance-tuning your autosuggestion feature is covered in depth in Chapter 19.
Link target size
Unlike desktops, laptops and tablets, smartphones leave little real estate for autosuggestions, which are almost always partially covered by the keyboard.
The solution to this is not to squish links, which only leaves them susceptible to accidental activation!
Larger links show less items above the keyboard-fold, but they’re easier to tap.
There’s a benefit when buttons are cut in half by the keyboard, it suggests there’s more below the keyboard-fold and encourages exploration. When link lists fit too perfectly in the viewport, it’s less obvious that more suggestions lie below.
Prioritize category suggestions
Consider showing category results before related query or product suggestions. On mobile, guiding customers to the most relevant category refinement may convert higher than suggesting product titles (which typically don’t offer enough context for the searcher to decide upon so early in the discovery stage).
Set menu caps
To reduce the amount of hidden options, limit menu length to 4 or 5 most relevant suggestions. This reduces the chances customers accidentally trigger “clicks” whilst scrolling through a long autosuggest menu.
Be careful that your autosuggest feature is not too sensitive. It’s not uncommon for autosuggest menus to vanish once tapped (bug) or load whatever the customer happens to tap as she scrolls (as with Sephora’s menu, below).
Search results page design
Style search results like a category list
When mobile commerce sites use different product list templates for category pages and search results, category pages typically have the better experience.
For example, search pages may have heavy headers containing sort and filter refinements which push product results much further down the search results page than category pages.
Bambeco’s category page
Bambeco’s search results page at the top (left), and after scrolling down the page (right)
Some list designs present and style product thumbnails and information much differently between the two page templates.
T-mobile’s category list results (left), search results (right)
T-mobile’s product results span multiple screen-lengths on the search results page
Merchandisers can design category pages to support guided selling. For example, Overstock’s Backpacks category encourages sub-category refinement at the top of the page (below, left). Its search page requires customers to engage with the filter menu to achieve the same scope.
Notice in the example above that category results are sorted by “Recommended,” meaning merchandising rules have been applied to product ranking, which may better reflect business logic than search’s “Relevance” sort.
Bike Bandit’s category pages embed product finders, but search pages show a filter menu.
Ideally, Bike Bandit would redirect searches for category names (navigational searches) directly to category landing pages to leverage their guided selling features. Dillard’s is one site that uses category redirection.
Treat filters as a call-to-action
Filters are even more important to the mobile search context than category browsing. Mobile searchers are more likely looking for a single or small set of desired products versus just checking out your wares, and filters help them hone in on the right products.
There’s nothing worse than receiving hundreds of matching items with no way to narrow them down!
But filters must be treated like calls-to-action. Filters shouldn’t blend in with header menus. Because our eyes are drawn to white space as the “content area,” Planet Shoes and Pacsun’s filters are susceptible to banner blindness.
Also avoid dark bars or buttons that span the width of the page, they are often overlooked as well or mistaken as title headers. Fragrancenet’s menu isn’t obviously clickable (below, left), while REI’s filter and sort buttons are more clearly executable.
Be careful when designing search results headers that content isn’t pushed too far below the “fold.” Visible product thumbnails reassure the customer the search has indeed returned results.
At-a-glance, Orvis’ search results resemble “no results found.” “Refine your search” is a phrase often associated with search failure. Users must scroll a full screen before seeing filters and sort or products.
Sprint and T-mobile both go heavy on the headers. Showing pagination links at the top (which resemble the bottom of a page) may also throw customers off.
Display the search query
Another difference between category lists and search results pages is the search query substitutes for the category title. Customers don’t have perfect recall, even when they performed a search just seconds before — don’t make them rely on memory.
This is especially important if you use autosuggest, as not only might customers click on an unfamiliar term, it’s possible they’ve mistakenly tapped the wrong suggestion. Let them always know where they’ve landed.
Gander Mountain (below, left) omits the search term, while Cabela’s not only repeats the term entered but clearly calls out the autocorrection.
Show number of product results
This is recommended on category list pages as well, but has even more benefit on mobile search results pages, as searchers want to see that their search has returned sufficient results (and if too many, will refine their query or use filter and sort).
Ensure error pages and zero results are mobile friendly
Ensure “zero results found” pages are mobile friendly. It’s easy to forget to optimize this template as it’s not a main page, but it’s a surefire way to lose mobile visitors.
Mobile search usability is very close to category list usability, with a few tweaks.
Need help with your mobile UX? Drop me a line.
Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.