Ecom Ideas
  • Homepages & nav
  • Category pages
  • Product pages
  • Cart pages
  • Checkout
  • Site search
  • Internationalization
  • Holiday ideas
  • Featured idea gallery
  • Topical articles
Subscribe
💡
Ecom Ideas
Mobile headers: Is an open search box better than an icon?
🔍

Mobile headers: Is an open search box better than an icon?

Tags
CROUX

If Forrester’s Research holds true, 43% of ecommerce visitors are “spear fishers” — they arrive knowing exactly what they want and make a bee-line to your search box (then proceed to convert 2x better than the hopeless browsing segment).

And with 110% of ecommerce traffic coming through mobile (I kid, but most sites are >80%), it makes sense to make your search box oh-so-easy to see in your mobile header.

You may see public A/B cases sharing that an open search field lifts mobile searches by 33% and think this is a sure shot.

Or, you may take my own anecdote that my client’s site showed initial skew towards the open box but regressed to the mean after 30 days, with a dead-even conversion and bounce rate, and pennies’ difference in revenue (in favor of the search icon!)

So some tests win, some are flat. What’s the takeaway?

💡 It’s about the site and the customer. Not all verticals are search-dominant. Some (like fashion) are more about browsing what’s new, or discovering through categories

💡 Showing an exposed box does not mean customers “see” it (or care)

💡 Today, if a user wants to search, they know (generally) where to find it — in your header, whether exposed or an icon (just don’t hide it behind your hamburger!)

💡 Mobile real estate is precious - sometimes a streamlined header is better

💡 If you let a test run to stat sig, you may find the test loses steam. Good, you learned something!

💡With all ecommerce design patterns, test it for yourself. And your mileage may vary

Is this a top testing priority?

Heck yeah. Site search is a major site feature and you should be testing this for yourself.

But be careful — how you design your test variants absolutely determines the outcome of your test. If you choose a sub-optimal design pattern for your test, it may lose, and you’ll forever conclude “this doesn’t work, let’s move on.”

In fact, it’s a great idea to keep iterating and keep testing your mobile header and search experience.

Consider these testing cases:

🧪 If your site currently hides search behind your hamburger, A/B/C test it (in one experiment) against both search icon and open box — this resulted in a 3% conversion and 6% revenue lift for my client (and time-on-site rose by over 60s)

🧪 If your box spans the screen width, and is white-on-white, try it against a contrasting field

Full-width boxes can be easily overlooked
Full-width boxes can be easily overlooked
High-contrast backgrounds make your box pop!
High-contrast backgrounds make your box pop!

🧪 If your box spans the screen width, consider testing a tighter box (for visibility and contrast)

Full-width boxes may cause “banner blindness” (and take up more vertical real estate)
Full-width boxes may cause “banner blindness” (and take up more vertical real estate)
If you can swing it, a tight box really pops
If you can swing it, a tight box really pops

🧪 If you use lengthy hint text, test it against simple “Search.” A Guess The Test case reports a 4.61% conversion lift over a style identical to Barnes & Noble’s, below.

Barnes & Noble shows a highly visible, open search field in its mobile header
Barnes & Noble shows a highly visible, open search field in its mobile header
Of course, this is a case where the original (with additional context) could outperform simple “Search.” BN’s instructions are highly relevant to their catalog
Of course, this is a case where the original (with additional context) could outperform simple “Search.” BN’s instructions are highly relevant to their catalog

🧪 If you use a color fill, test it against a conventional white field. These can easily be glossed over as they look like buttons or promo bars (aka, banner blindness)

Remember, we use the web on unconscious autopilot most of the time. Stick to visual conventions! And test to validate your creativity isn’t hurting usability
Remember, we use the web on unconscious autopilot most of the time. Stick to visual conventions! And test to validate your creativity isn’t hurting usability

🧪 If you use animated text for the love of all that is good and holy, test it against static “Search” — this tactic is risky as it’s distracting and can be off-putting to users

Animated search boxes that suggest popular searches or featured categories may be doing more harm than good. Just because you can, doesn’t mean you should (rhyme intended)
Animated search boxes that suggest popular searches or featured categories may be doing more harm than good. Just because you can, doesn’t mean you should (rhyme intended)

Advanced testing cases

Once you’ve covered the basics and found your solid winner, you can test more nuanced details and tactics…

🧪 Test colored hint text for that extra pop of visiblity

Anthropologie’s blue text style pops against other headlines and elements
Anthropologie’s blue text style pops against other headlines and elements

🧪 Test “value prop” hint text against simple “Search” - such as showing off your department range

First-time visitors may not understand the breadth of your product offering. Spelling it out can keep them engaged — “so it’s not just jewelry here…”
First-time visitors may not understand the breadth of your product offering. Spelling it out can keep them engaged — “so it’s not just jewelry here…”

🧪 Test submit button color just like CTA buttons, a juicy color could increase clicks

Grainger’s red jelly-button really pops in its header
Grainger’s red jelly-button really pops in its header
John Lewis’ search icon blends into the background
John Lewis’ search icon blends into the background

🧪 Test a combo-style to cover both bases — an icon in the top-header and open box in one pattern

e.l.f. makes double-sure you’ll see their search tool
e.l.f. makes double-sure you’ll see their search tool

Tip: Pair quantitative analytics with qualitative tools like Hotjar/Mouseflow to observe user behavior — most enable you to segment sessions by A/B test variant, provided your testing tool integrates with your screen recording application.

🧠
If you’re looking for a quick-scan gallery of top retailers’ mobile headers for design inspo, Baymard Institute has a great one they keep current and you can browse for free. Enjoy!

👉 Follow on LinkedIn for daily ideas 💡

Get daily ideas

LinkedIn