This is the second in a series of blog posts around mobile UX and UI. We'll be covering topics ranging from product display to site navigation to checkout.
The search bar dominates desktop. It greets you when you open your favorite search engine and is likely to be prominently featured at the top of your favorite commerce site.
With a search bar, the online world is your oyster. You can find anything you need with a few keyboard strokes and a click or two of a mouse.
But does a prominently displayed search bar work well on mobile?
We studied nearly 100 million smartphone sessions from a subset of the leading commerce sites whose mobile experiences we power and made some surprising discoveries.
Smartphone shoppers who use the search bar convert at more than twice the rate of users who do not interact with the search bar.
And exposing the search bar, rather than hiding it behind an icon, makes smartphone shoppers nearly twice as likely to use search.
HOW POPULAR ARE EXPOSED SEARCH BARS ON MOBILE?
Our first question was: How common are exposed search bars on leading brands’ mobile sites?
We looked at 25 top Fortune 500 sites.1 And we found that on mobile, search bars slightly edge out search icons, with 56% of sites featuring an exposed search bar.
On desktop, however, 80% of those top sites have an exposed search bar. So replacing the search bar with an icon is a mobile optimization.
But is it an effective one?
OUT OF SIGHT, OUT OF MIND
Mobile users don’t always recognize commonly used navigation bar icons, like the map pin for the store locator feature or the magnifying glass icon for search.
In the case of the hamburger menu, for example, we found that a leading travel site had to actually label the hamburger button with the word “Menu” in order to increase engagement with the icon. Once they added the “Menu” label, engagement increased by 61%.
This made us wonder: Do mobile shoppers know what the magnifying glass icon means? Or are they confused, as in the case of the hamburger menu?
And more importantly, even if they do recognize the icon, do they then tap it to conduct a search?
We found that making users tap on a magnifying glass icon in order to see the search bar leads to far lower use of search.
Mobile shoppers on sites with exposed search bars were 75% more likely to use the search bar, versus mobile shoppers on sites with the search bar hidden behind an icon.
SO WHAT IF SHOPPERS USE THE SEARCH BAR?
It’s all well and good that smartphone shoppers are 1.8 times as likely to interact with your search bar if it’s exposed.
But is there an inherent value in smartphone users conducting searches?
We studied 45 million visits across nearly three dozen commerce sites and found that smartphone visitors who used the search bar had a conversion rate that was more than 2.4 times that of visitors who did not conduct any searches on the site, on average.
That’s right. Use of the search bar coincided with more than double the conversion rates. Boom.
TO EXPOSE OR TO HIDE
Bottom line, should all commerce sites with hidden search bars on mobile opt to instead expose their search bars?
On average, the use of the search bar by mobile shoppers led to drastically higher conversions - but not in every case.
And as with many mobile UX best practices, it’s all about optimizing your mobile experience and testing what works best for your users.
But if you’re looking for a good rule of thumb, exposing your mobile search bar will drive more smartphone user searches and ultimately higher mobile conversions.
1Based on 25 top Fortune 500 companies with services or products on their sites.