Back to all posts

Best practice for designing a website search UI

Search box is a combination of input field and submit button. One may think that the search box doesn’t need a design; after all, it’s just two simple elements. However, on content-heavy websites, the search box is often the most frequently used design element. When users encounter a relatively complex sites, they will immediately look for a search box to get to their final destination quickly and painlessly. The design of the search box and its usability becomes a big deal.

Best practices

1. Use magnifying-glass icon

Always accompany search box with magnifying-glass icon. Icons are, by definition, a visual representation of an object, action, or idea.There are a few icons that have mostly universal recognition from users. Magnifying-glass icon is the one of such icons.

Users recognise magnifying-glass icon even without a textual label.

Tip: Use a schematic icon, the simplest version of the magnifying glass. Fewer graphic details speed up recognition.

 

2. Display search field prominently

If search is important function for your app/site you should be displayed prominently, as it can be the fastest route to discovery for users.

Left: The search functionality is hidden behind an icon. Image credit: thinkwithgoogle

It’s important to display full open-text field, because search hidden behind in icon makes search feature less noticeable and increases the cost of interaction:

Don’t use a progressive disclosure for search because it hides context. Image credits: AntonioJDN

 

3. Provide a search button for the search box

A button helps people recognise that there’s an additional step to trigger the search action — even if they decide to do this by pressing Enter.

Tips:

  • Size the submit button appropriately, so that users don’t have to point the mouse very precisely. A larger clickable area makes it easier to spot and to click.
  • Let users submit search using the Enter and by clicking the icon. Many users still have the habit of clicking an actual button to submit search.

 

4. Put the search box on every page

You should always provide access to the search box on every page because if your users cannot find the content that they are looking for, they will try to use your search regardless of where they are in your website.

 

5. Make search box simple

If you design a search box, make sure it looks like one and is as simple to use as possible. According to usability studies, it is more user-friendly to have no advanced search options displayed by default. Advanced search options (such Boolean search query in example below) can confuse users who will try to use it.

Boolean search

 

6. Put the search box where users expect to find it

It’s not good when users have to search for search box because it doesn’t stand out and is not easy to spot.

The chart you see below was taken from a study by A. Dawn Shaikh and Keisi Lenz: it shows the expected position of the site search form in a survey with 142 participants. The study found that the most convenient spot for users would be the top left or top right of every page on your site, where users could easily find it using the common F-shaped scanning pattern.

The figure illustrates the areas where participants expected the search to be found. The upper-right corner is still the first place users expect to find search.

Thus, place a search box in the upper-right or upper-center area of your layout and you’ll be sure that your users will find it where they expect it to be.

Content-heavy YouTube has its search in the upper-center.

Tips:

  • Ideally, the search box should fit the website’s overall design perfectly yet manage to stand out slightly when users need it.
  • The more content you have, the more prominently you want to display your search feature. If search is essential for your site, use plenty of contrast so that the field and icon stands out from the background and from the surrounding elements.

 

7. Proper Field Size

Making the input field too short is a common mistake among designers. Of course users can type long queries, but only a portion of the text will be visible at a time and this means bad usability, since users cannot review and edit easily their query. In fact, when search box has a limited number of visible characters users are forced to use short, imprecise queries, because longer queries would be hard and inconvenient to read. If input fields are sized according to their expected input they are both easier to read and to interpret for users.

A rule of thumb is to have a 27-characters text input (it would accommodate 90% of queries).

Amazon uses a properly sized search box.

Tip: Consider using a growing search box, which expands the text input field on click. This saves screen space while still giving the user enough visual cues to quickly find and execute search.

 

8. Use auto-suggestion mechanism

Auto-suggestions mechanism helps users to find a proper query by trying to predict it based on the entered characters. Auto-suggestion mechanism isn’t about speeding up the search process but rather about guiding the user and helping them in constructing their search query. Typical users are very poor at query formulation: if they don’t get good results on the first try, later search attempts rarely succeed. In fact, they often give up. When autocomplete suggestions work well they help the user articulate better search queries.

Google searches mastered this pattern, having implemented it since 2008. Because users tend to search the same things more than once, by remembering search history, Google saves time and creates a far more convenient experience.

Tips:

  • Ensure that auto-suggestions are useful. Poorly designed auto-suggestions can confuse and distract users. So use a spelling auto-corrections, recognition of root words, and predictive text in order to improve the tool.
  • You should provide auto-suggestions as quickly as possible, such as after third character is entered, to provide immediate value and reduce users data entry effort.
  • Present less than 10 items (and without a scroll bar) so the information doesn’t become overwhelming.
  • Allow for keyboard navigation for the list of suggestions. Once a user scrolls down past the last item, they should return to the top of the list. The Esc key should allow users to exit the list.
  • Highlight differences between the inputted information and
    suggested information (e.g., input text has a standard weight, while suggested terms have bold weight).
The autocomplete pattern saves the user time and may even suggest content or proper wording.

 

9. Make it clear what users can search for

It is a good idea to include a sample search query in the input field to suggest to users what the function can be used for. If the user can search for multiple criteria, use the input hint pattern to explain (i.e., IMDb in example below). HTML5 makes it easy to include text that as a placeholder inside the input field.

Tip: Limit your hint to just a few words, otherwise you actually increase the cognitive load.

 

Conclusion

Search is a fundamental activity and a critical element of building a content-heavy app or site. Even minor changes such as a proper size for the input field or indicating what information goes in search field can significantly increase search usability together with overall UX.

This article was originally posted at:
https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c

Can we take you from stuck to unstuck?

We'd love to hear from you

Call to action (CTA)

A call to action is a marketing term that refers to a prompt that invokes a response leading to a sale. When referring to a call to action (CTA) in the digital design world we usually mean the interactive element that leads to the next step in the experience - something that needs to be clicked or tapped.

User testing

User testing refers to a technique used in the design process to evaluate a product, feature or prototype with real users. There are several reasons why you might want to undergo usability testing, the most common is that it allows the design team to identify friction in a user experience they are designing, so that it can be addressed before being built or deployed.

WYSIWYG

WYSIWYG (pronounced WIZ-ee-wig) is an acronym for "What You See Is What You Get". It helps identify an an interface that allows user input resulting in an output that is rendered in a similar way. For example; a word processor application interface might resemble a piece of paper,so when printed the user can see how the output will appear.

Content Management System

A content management system (CMS) is an tool that allows a website editor/administrator to manage the content that is displayed. Websites are made of HTML and CSS to create pages. Pages can be hard-coded but would require technical development skills to make changes. A CMS usually allows a person without coding knowledge to amend existing and add new content to a website using a WYSIWYG interface.

Responsive Web Design

Responsive web design refers to a web page that dynamically adapts its layout to fit the size and orientation of the device on which it is viewed. A responsive design allows for a more optimised user experience across desktop and laptop computers as well as smartphones and tablets of varying sizes.

User Stories

User stories allow the functionality of a product or service to be expressed as written descriptions of an experience as seen from the users perspective. The writing of user stories creates a list of design and development tasks to complete in order to create any required functionality.

User Interface

A user interface (UI) is a conduit between human and computer interaction - the space where a user will interact with a computer or machine to complete tasks. The purpose of a UI is to enable a user to effectively control a computer or machine they are interacting with, and for feedback to be received in order to communicate effective completion of tasks.

Personas

A persona in UX Design is the characterisation of a user who represents a segment of your target audience. On a project you might create any number of personas to be representative of a range of user needs and desires. The solutions you design must answer these needs in order to deliver value to your target audience.

Card sorting

A great, reliable, inexpensive method for discovering patterns in how users would expect to find content or functionality. Card sorting is used to test the taxonomy of data with a group of subjects, usually to help inform the creation of the information architecture, user flow, or menu structure on a project.

Brainstorming

A technique used to generate ideas around a specific topic. Often done in groups, but can be done individuals. The process usually involves writing down all ideas around a topic onto paper, a whiteboard or stickies often implying some kind of association.

Minimum Viable Product

An MVP is a product that has the minimum set of features to prove the most essential hypothesis for a product. Businesses building a new product can create a Minimum Viable Product to prove that an idea is viable and warrants further investment. A further benefit being that the next stage of development can be informed by feedback obtained from testing that MVP.

Sitemap

A sitemap is a diagrammatic representation of a hierarchical system. It usually depicts the parent-sibling relationship between pages in a website, showing how sub pages might be arranged underneath their parent groupings. This arrangement forms a map of the site.

User journey

A user journey represents a sequence of events or experiences a user might encounter while using a product or service. A user journey can be mapped or designed to show the steps and choices presented as interactions, and the resulting actions.

Prototype

A prototype is draft representation built to test ideas for layout, behaviour and flow in a system. Prototypes are an indispensable tool for resolving a large number of potential issues in a concept or business before too many resources are deployed to put a design into production.

Wireframes

A Wireframe is a visual schematic that conveys a basic level of communication, structure and behaviour during the design of a system. Wireframes are low-fidelity designs that bypass including a detailed user interface or visual design, conveying just enough to get across the core idea.

Usability

To say something is usable is a qualitative statement about how easy that thing is to use. Usability is an assessment of how learnable a system is and how easy a user finds it to use. The usability of a system or product is a key factor in determining whether the user experience is a good one.

Information Architecture

Information architecture is the design and organisation of content, pages and data into a structure that aids users understanding of a system. A more organised system enables users to more easily find the information they require and complete the intended tasks.

UI Design

User Interface Design is the discipline of designing software interfaces for devices, ideally with a focus on maximising efficiency, responsiveness and aesthetics to foster a good user experience.

UX Design

The practice of User Experience (UX) Design is the coming together of many specific design related disciplines to improve the usability, responsiveness, uptake and aesthetics of a product or service.

User Experience

A general term that covers all aspects of a user's participation while engaging with something that has been designed. Usually when talking about User Experience in the digital design field it refers to the interactions, reactions, emotions and perceptions while using an app, service, website or product.

Got a problem to solve with your service? 

We'd love to hear about it. We can add value to any business that has a digital product/offering.

Book a FREE 30 min consultation

You can also call +44(0)20 3653 1310 or email us

Book a FREE 30min consultation