Design a Perfect Search Box
by Nick Babich
Search box is a combination of the input field and the 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 relatively complex sites, they look for a search box because they think of it as a shortcut that will get to their final destination quickly. The design of the search box and its usability becomes a big deal.
In this article we’ll see how this element can be improved in order to save the user time in going where they want.
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 one of them.
Tip: Use a schematic icon, the simplest version of the magnifying glass. Fewer graphic details mean less visual clutter and better 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.
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:
3. Provide a search button for the search box
A button helps people recognize that there’s an additional step to trigger the search action .
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 the button.
- Let users submit search using the Enter and by clicking the icon. Many users still have the habit of clicking a keyboard 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 on your website. It’s especially important to provide a search box on 404 pages.
5. Make search box simple
If you design a search box, make sure it looks like and works as simple to use as possible. Be careful with advanced filters. Advanced search options (such Boolean search query in example below) can confuse users who will try to use it.
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.
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.
Tips:
- Ideally, the search box should fit the website’s overall design yet stand out slightly to help users find it when they need it.
- The more content you have on your website, the more prominently you should display your search box. If the search is essential for your site, use more visual weight for the search box (make it contrast so that the field and icon stand out from the background).
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 it becomes hard for users to review and edit easily their query. In fact, when search box has a limited number of visible characters users tend to use short (and usually less effective) queries because longer queries would be 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 accomodate 90% of queries).
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
Typical users are very poor at query formulation: if they don’t get good results on the first try, they can give up. A mechanism of autocomplete suggestions can help users articulate better search queries.
Auto-suggestions mechanism helps users to find a proper query by trying to predict it based on the entered characters. This mechanism isn’t about speeding up the search process but rather about guiding the user and helping them in constructing their search query. Because users tend to search the same things more than once, its worth remembering search history.
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.
- Provide auto-suggestions as quickly as possible, such as after third character is entered. By doing that you will reduce users’ data entry effort.
- Don’t overwhelm users with a lot of suggestions. Present less than 10 items in a list (and without a scroll bar) is enough.
- 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 (i.e. Google differentiate user input with different font styles—user input has a standard text weight, while suggested terms have bold weight).
9. Make it clear what users can search for
It is a good idea to include a sample search query in the input field as a placeholder to suggest to users what they can search for. If the user can search for multiple criteria, you can provide them like in the IMDb example below. HTML5 makes it easy to include text that as a placeholder inside the input field.
Tip: Try to limit your hint to just a few words that summarize key search categories.
Conclusion
Search is an integral part of most content-heavy apps or sites. Good search experience means good overall UX. Even minor changes such as a proper size of the input field can significantly increase search usability.
Thank you!
Learn how to design user interfaces
Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.
Follow UX Planet: Twitter | Facebook
Originally published at babich.biz
