In previous articles we’ve examined the e-commerce search engine logic (12 query types), autocomplete suggestions (8 design patterns), and the actual search results (contextual snippets) – but what about the search field? In this article we’ll go over our research findings on the design of the search field, and showcase how it can directly influence the user’s entire shopping and search behavior at your site.
The search field represents the initial step of the user’s search process (they must interact with it to even see the search results page), and the search field design is therefore a key aspect in crafting a great search experience. However, our recent large scale e-commerce search usability study shows that the design of the search field is instrumental at an even more fundamental level – the field design can influence the user’s entire approach to how they find products on the site.
To a large extent user’s see the prominence of the search field as an indicator of how strongly the site “recommends” search as a way to find products, versus the alternative of navigating categories via the site menus. During our usability testing the subjects adopted search as their primary product finding strategy much more frequently on sites that had a very prominent search field, while the test sites with a muted search field design saw increased category navigation.
In other words, the search field’s prominence (determined by its design and placement) influences the user’s likelihood of adopting search as their primary product finding strategy. It’s therefore paramount to ensure that the field’s prominence aligns with the importance of search to your site.
In industries where search is the preferred product finding strategy, it can be beneficial to “promote” the search field with a prominent design and placement, especially on the user’s landing page (e.g. the homepage). Meanwhile a more subdued search field is warranted on sites where category navigation is preferred. This is obviously highly unique to each site, though the preference for search vs category browsing typically falls as follows:
In terms of design and implementation, there are multiple ways to visually subdue or emphasize the search field in your overall layout. The exact method to employ will vary from site to site, depending greatly on the context the search field appears in (i.e., the overall site design). Let’s look at three examples, ranging from a highly subdued search field to a dominating one.
In terms of aesthetics, our e-commerce search study shows that site designers have a great degree of freedom so long as there’s agreement between the search field prominence and the importance of search as the primary product finding strategy.
In terms of design, there are three main factors that designers can tweak to increase or lower the search field’s prominence while still retaining a bespoke field design that matches the unique aesthetics of their brand:
Let’s look at a handful of “real-life” search field implementations to see how these three factors combined can influence the field’s prominence.
As seen in these six examples, designers have a lot of freedom in terms of the aesthetics of the search field – what’s important is that the field’s position, contrast and size is tweaked, so the prominence of the search field is in tune with the site’s specific context (industry, scope of products, category hierarchy, etc).
On the typical e-commerce site, some pages (such as the homepage) tend to be significantly more cluttered than other pages (such as a 2nd-level category page). Since the prominence of any given element is determined by its relative dominance to the other elements on the page, a search field which stands out on the less cluttered pages (i.e. nested category pages, help sections, etc) may be less obvious on the more busy pages (i.e. the homepage, product pages, etc).
This creates a dilemma when trying to design a search field with the appropriate level of prominence: should the field design be optimized for the busy pages (and thus stand out a little too much on the more calm pages)? Or should you design for the less cluttered pages but then suffer from a slightly too subdued search field on the livelier ones? Well, luckily we don’t have to trade one for the other: simply adjust the contrast of the search field dynamically so its relative prominence is always kept at the appropriate level to your site.
Dynamically altering the field’s relative prominence on the homepage can be done by tuning things like borders and backgrounds ever so slightly, enhancing the field’s contrast a little so it can better “compete” with the many attention-grabbing graphics typically present on the homepage. Meanwhile category pages (which, if the user is here, also suggest that they have already chosen a category browsing strategy) can benefit from having the field’s contrast tuned down a little.
While position and size could theoretically be manipulated too, we don’t recommend dynamically adjusting these factors as they can potentially confuse users – the changes should be subtle and ideally not be consciously noticed by the user. If the search field suddenly changed position users may have trouble finding it, think the site is buggy, and the “new field” carries another function. Tuning the contrast of the search field, on the other hand, doesn’t fundamentally change its appearance on the site.
When designing the site’s search field, there’s a lot of freedom in terms of its aesthetics – a unique visual style that suits the site’s general design and brand is perfectly fine.
However, because the prominence of the search field influences the degree to which users will adopt search as their primary product finding strategy, it’s important that there’s agreement between these, with the search field accurately indicating the “appropriateness” of search to this site’s particular context.
There are three main factors that you can tweak to adjust this dynamic while still retaining a unique search field design. They are: field position, contrast, and size. These factors can be manipulated to nudge users towards either search or category browsing. Search is typically preferred when users generally know the exact item they are looking for, while category browsing tends to be preferred when most users only know the type of product they are looking for.
Finally, in order to deal with the dilemma of varying levels of graphics across page types, you may want to consider dynamically adjusting the search field’s contrast to ensure its prominence is always kept at an appropriate level in relation to other page elements throughout the site.
Tip: you can browse the search field designs of 50 major e-commerce sites in the public part of our search benchmark database.
This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” on-site e-commerce search experience.
Join 25,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Under what category will Orbitz.com fall under where the ‘Search’ widget is hidden with under a menu. Click on user image on the top right corner and that should show you the search widget.
“As hidden as it gets”. But I guess “search” carry a different function on that site compared to most traditional e-commerce sites.
I would be interested to know if there were significant findings on search field label and button design.
There doesn’t seem to be strong convention about including the label in the field or not, the actual label text, whether to label the button with “Search”, include an icon, or rely solely on an icon, etc.
Brilliant article Jamie Appleseed!
I appreciate how you’ve taken the time to break down each step, and even add in screengrabs, to really illustrate your point. Sometimes things can be all text and I, for one, get a bit lost! I’ll definitely refer to this when I need to write blog posts and I need to decide on a title. Thanks again!
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 email@example.com