Ecommerce Guide to Site Search Design

Considering customers who use search are more likely to have purchase intent and are closer to purchase (hey, they have an idea of what they’re looking for), ensuring they can find the search box quickly and easily is critical. The search box should be treated as an important call to action!

While presenting a clear search box site-wide (with a colorful Search button) is a Web-age old convention, a recent design trend towards nearly invisible search tools threatens search engagement and revenue per visitor — and this trend is rampant amongst the Internet Retailer 500.

In Chapter 2 of Ecommerce Illustrated — our 52 week journey from home page through checkout — we examine the do’s and don’ts of site search design.

Conventional search box usability guidelines

Since pre-2000, Web usability guidelines for site search emphasize visibility and clarity of the “call to action” (in this case, the Search or Go button):

  • Place it in the top right hand corner (you can place it left or center, but it has to be extra bold and beautiful not to be missed)
  • Make it a search field, not an icon. Put a border around the search field so it stands out. We know from eye-tracking and usability studies that Web users are conditioned to seek search tools in the right corner, and will scan for an open field (white box).
  • Label it Search (or use a bold search icon) in a high-contrast color from your background

Tiger Direct’s search box stands out in its blue header, even though it’s placed in the center.

tiger-direct-site-search

BabyHaven frames its search box with bright blue, ensuring it gets noticed (though the search icon may be mistaken for a rattle!).

baby-age-site-search

Oriental Trading’s search box is tougher to spot on its baby blue backdrop.

oriental-trading-search-box

A solid frame around Oriental’s search box may improve search engagement and revenue per visitor. When Alinc Technologies tested a bolder border to its search box (right), it increased site search use by 13.2%.

alinc-test

Search button design also matters. Dell tested a button against a search icon, and the search button (right) increased revenue per visitor by 6.3%.

dell-search-test

Despite these guidelines, it’s a current design trend to break convention in favor of near-invisible search tools.

Dark arts

Light-on-dark is sexy, but not always the most usable. NastyGal slips its search between other menu items, even breaking the convention of placing the search button or icon to the right of the search field.

nasty-gal-search-box

Forever 21’s search box is as equally stealth.

forever-21-search-box

Since the time I captured the above screenshot, Forever 21 has redesigned with a more prominent yellow border.

forever-21-2

What if engagement and revenue per visitor could increased by testing a more conventional placement (upper right hand corner) and solid white search field, as in the following mock-up?

forever-21-3

Likewise, light-on-light suffers from the same visibility issues as dark-on-dark.

marciano-site-search

While luxury and apparel sites desire to keep design clean and minimalistic (some apparel sites include no search box), it’s a risky approach. It is possible to employ an easy-to-spot search box without hurting the brand. Coach’s search box is conventionally placed and contrasts with the header image (though it should be a bit bigger – it handles only 5 characters).

coach-site-search

Separate Search from menu links

Because the eye scans for open search fields, avoid baking your search into navigation menus.

For example, J.Crew, Vega and Dylan’s Candy Bar.

jcrew-factory-site-search

vega-search-box

dylans-search-box

Do it “right”

While some sites like Amazon and TigerDirect use a centered search box (which tend to be prominent enough to stand out), the safe approach is to place search boxes in the top right of the page.

tiffany-search-box

But be sure to distinguish it from the email sign up field (also commonly placed in navigation headers). Some users will confuse them!

bcbg-search-box

Mobile first?

bebe-search-box

Even the Apple Store does it.

apple-search-one

While Apple is arguably the brand best known for great design, its search tool may be very problematic. If you do recognize the magnifying icon as the search tool, you may miss the near-invisible cursor when the navigation bar wipes clear.

apple-search-two

Avoid scoped search, unless…

Scoped search (search within categories) complicates usability and is only advised for certain types of catalogs. If you have thousands or millions of SKUs, certain search queries may pull results from multiple (and diverse) categories, making search results less relevant to the customer.

For example, on sites like Indigo Books or Amazon, the query “Hunger Games” may return results from books, ebooks, movie, soundtrack categories and gifts categories. Scoped search provides the opportunity to filter before submitting the query.

indigo-scoped-search

Site search box placement and design can impact several KPIs: bounce rate, search engagement, add-to-cart, conversion rate and revenue per visitor. While it’s tempting to minimize it to fit minimalist design trends, it’s too important to break UX conventions. Make sure it’s easy to locate, and doesn’t visually compete with other navigation elements.

You may also like...

2 Responses

  1. You crushed it, Linda. Love the example how a slight change in search design improved usability. It’s funny: Apple is known for design, but they are usually behind the ball in my opinion. For the longest time their main site wasnt even mobile friendly.

    Looking forward to the rest of your series.

Leave a Reply

Your email address will not be published. Required fields are marked *