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.

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

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

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%.

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%.

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.

Forever 21’s search box is as equally stealth.

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

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?

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

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).

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.

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.

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

Mobile first?

Even the Apple Store does it.

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.

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.

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.