Product recommendations shoppers actually want

Search on mobile: the thumb-first layout that decides whether shoppers find anything

Half your shoppers search on a phone, one thumb, on a train. If the search box is not where the thumb is, the search does not happen.

Baymard found that 56 percent of sites do not adequately support search, and mobile is where that failure shows up first. The search box sits at the top of the page, the thumb sits at the bottom of the phone, and the shopper has to stretch to reach it. The results list is built for a desktop screen and squeezed onto a phone, and the filters hide behind a menu nobody opens. Mobile search is not desktop search made smaller. It is a different layout, and it decides whether the shopper finds anything at all.

The thumb zone is the search zone

The thumb zone is the bottom two-thirds of the phone screen, where a thumb rests without stretching. The search box on most stores sits at the top, outside that zone, because the desktop header was copied onto the phone. The shopper has to shift their grip to reach it, and many do not bother. A sticky search bar at the bottom of the screen, or a search icon fixed where the thumb already is, costs nothing to build and changes whether the search happens at all.

The test is simple. Hold the phone the way a shopper does, one hand, on a train, and try to start a search without shifting your grip. If you cannot, the layout is wrong.

Autocomplete is the mobile shortcut

Typing on glass is slow, error-prone, and hated by everyone who does it. Autocomplete is the shortcut that makes mobile search usable: a suggestion after two or three characters, a tap to complete the query, and no full word typed at all. On desktop, autocomplete is a convenience. On mobile, it is the difference between a search and a surrender, because a shopper who has to type a full product name on a phone keyboard will often give up after the first typo.

The suggestions should be products and popular queries, not categories. A shopper who types two letters wants to see what the store has, not a list of departments.

Filters that fit a phone

Desktop filters are a sidebar with twelve options. Mobile filters cannot be a sidebar, so stores hide them behind a menu, and the menu is where they die. The fix is to show two filters on the results page, the ones shoppers actually use, and put the rest behind a single tap. Price and category, or size and color, depending on the catalog. The rest can wait.

Shopify's Search and Discovery tool lets a store set synonym groups and merchandising rules, and those rules matter more on mobile, because the shopper will not scroll past the first screen of results to find the right product. The first screen is the store, on a phone.

What to measure

Measure mobile search separately from desktop, because the numbers are different and the problems are different. Mobile search rate, the share of mobile sessions that use search. Mobile search conversion, the share of mobile searches that end in a purchase. And the gap between mobile and desktop on both, because a gap that grows over a quarter is a layout problem, not a traffic problem.

Baymard's finding, that 56 percent of sites do not adequately support search, is a desktop number. On mobile, the share is worse, and the fix is a layout, not a feature.

Keep reading

Frequently asked questions

Where should the search box sit on mobile?

Within thumb reach: the bottom of the screen, or a sticky bar that follows the shopper down the page. A search box at the top of a phone screen is a search box the thumb cannot reach, and a shopper who has to stretch to search will browse instead, or leave.

Is autocomplete more important on mobile than desktop?

Yes. Typing on glass is slow and error-prone, so every keystroke autocomplete saves is a keystroke the shopper does not have to make. On desktop, autocomplete is a convenience. On mobile, it is the difference between a search and a surrender.

How many filters should a mobile search show?

Two, at most three, and they should be the ones shoppers actually use: price and category, or size and color. The rest belong behind one tap, not in a drawer with twelve options. A mobile filter list with twelve options is a desktop filter list that was never redesigned.

Do mobile shoppers search differently than desktop shoppers?

Yes. Mobile shoppers search in shorter bursts, with shorter queries, and they abandon faster when the results are wrong. They also search more often, because the phone is always in their hand. The behavior is different, and the layout has to match it.