Best UX practices for search interface

Users tell you what they need, and you provide the information. That’s why the search interface has to be designed using the same user experience principles as the rest of your website.

Does the search box need any specific attention? It’s just one of the elements on your website, same as the clickable logo or the drop-down menu, right? Wrong. The search box the visitors see is just the tip of the iceberg, with the lengthy and thorough design process lying under the water. It’s easy to overlook the search (pun intended), but if your impatient and spoon-fed users don’t get along with the search interface, your business performance may suffer.

Let’s find out who needs a search that’s carefully thought through and what are some dos and don’ts of designing the search interface.

When do You Need Search on Your Website?

Not all websites need the search functionality – one-pagers without any intention to expand will do without it. However, there are many platforms where a convenient search is a life-or-death question. These are:

• big websites with hundreds of entries (libraries, encyclopedias)
• e-commerce websites
• news portals
• booking services

Search is faster than navigation, more intuitive and it provides priceless info about your users’ behavior and needs. It is a handy assistant to the business’s most valuable visitors – those who have a clear intent.

The potential of a great search UX is 13,8% of the site’s overall revenue. And despite this, the majority of e-commerce portals provide poor search UX:

The mobile experience is even more disappointing, and that’s in the times when a significant part of all purchases is done through the smartphones. Often, the progress bumps up against the proper organization of search – not only the part seen by the user but the whole backstage logic as well. By implementing the search interface the right way, you will get an edge over the competitors and experience a boost in sales.

Search UX consists of two components: the search box and the result page design. Today, we’ll talk about the first one – the best UX agencies’ practices for the search box design.

How to Design a Search Box According to the Best UX Practices?

Our main goal is customer satisfaction. We have to make sure the design of our search box brings the best experience possible and, therefore, leads to the required actions: long interaction, purchase, booking, etc. The experience shouldn’t depend on the device, location, browser or finger size. How do you take everything into account? Here’s a list of dos and don’ts Qubstudio designers use when working on the search box UX.

10 Dos for Great UX for Search

1. A universal symbol of search is a must

A magnifying glass is generally recognized as a search icon. Users subconsciously look for it when intending to type their query. So, if you use any other creative way to mark your search function, the visitors might get lost. The magnifying glass icon should be simple, with fewer details and a large and contrasting clickable area.

2. The box should be placed where users want to see it

The place of a search box on the website matters a lot. Historically, users expect to see a search box at the top center or top left of the page.

Website visitors usually scan the page in an F-shaped pattern, almost immediately spotting a universal magnifying glass. Still, you can use eye-tracking tools to find out other focus areas and experiment with search box location.

3. Adding the “submit” button is a good tone

The majority of users trigger search by pressing “enter,” but some people like a traditional “submit” button (usually a magnifying glass icon). Make it big enough so that the users won’t have to click or tap several times to hit the icon. Mind that the submit button should be added as one more option to start the search, and not instead of “enter.”

4. Every page should have a search box

In most cases, users don’t use the search immediately as they entered the website. They start by navigating through the menu options, pages, etc., and then, when they haven’t found the necessary thing right away, they type their request into the search box. That’s why it has to be placed on every page of your website. You wouldn’t want to return to the home page every time you want to type a query, would you?

5. Auto-suggestion is essential

Not only does auto-suggestion help to reduce the time of data input (which is especially appreciated on mobile devices) but it also guides users through the formulation of the search queries. Useful and well-thought auto-suggestions will help a person choose the right option. If a user is looking for boots, for instance, the auto-suggestion will provide the search options like rain boots, winter boots, hiking boots, kids’ boots, etc. As a result, you’ll have excellent search UX and satisfied users.

Another essential point is a spell check and typos recognition. Checking and re-typing every letter can drive anyone mad, especially while you’re browsing through a smartphone on the go. Recognizing the users’ intent and offering suggestions will be well-appreciated. The list of auto-suggestions usually appears after the third letter typed, and the list shouldn’t be longer than ten positions.

6. A wide search field will be appreciated on mobile

It’s a good idea to make the search field as wide as the screen on mobile devices. This way, a person will be able to easily type the request regardless of finger size, eyesight, with one free hand only, and so on.

It’s especially important for e-commerce websites since many users shop spontaneously or check the products online before buying them in the physical store.

7. Provide advanced search option on request

Can you imagine using Booking.com without an advanced search? Some websites cannot do without filters and specifications, like booking services and e-commerce stores. They have multiple layers, and manually searching through each one of them will take forever.

Information resources also need advanced search functionality sometimes, in case of massive data volumes or frequently refreshed content. That’s why it’s nice to offer advanced search options to your users on demand.

8. Consider adding voice search

Voice recognition technology is not new, and it’s spreading into more apps and platforms every day. Since the percentage of mobile users – and mobile shoppers – is predicted to increase steadily over the next years, the voice search functionality won’t go amiss. It can be integrated into almost any app, so consider adding a microphone icon to your search box.

9. Dealing with poor connectivity

Unfortunately, it’s still an issue in our advanced tech era. How do you keep a visitor on the website when the connectivity is poor, and the results page or suggestions are loading for too long? The least you can do is add a progress indicator.

This psychological trick makes users a bit more patient. Here’s where you can set your creativity free and think of funny to unconventional ways to show the progress instead of using a traditional bar or a sandglass. Another option is displaying the skeleton screen – to show users they’re almost there.

10. Use analysis tools to assure the best UX

When the search bar design is ready, and all the inputs, interactions and filters are implemented, check the users’ reaction. To leverage the search functionality to the fullest, try to monitor the customers’ behavior concerning the search box and optimize it according to their needs. Touch heatmaps, user recordings and journey trackers are the tools for that.

5 Dont’s to Avoid Frustration with the Search

1. Don’t hide the search among other elements

The search box has to be visible and contrasting. If it’s hidden behind an icon, lost in too many graphic details or masked in the header, people might fail to find it.

2. Don’t make the search field too short

Make the search box long enough to сontain the whole user’s query. Sometimes, we want to check what we’ve typed or correct the request. Why not make it convenient? When they see a short field, users tend to write shorter and less precise queries, which leads to poor search results and affects the UX. The ideal search box is 27 characters long, which accommodates 90% of queries.

3. Don’t make the Submit button too small

On mobile, it’s quicker to hit a “submit” button than “enter.” Being too small for a finger, it makes the people do additional work by moving to the keyboard or zooming the screen – not a sign of an excellent UX.

4. Don’t overdesign the search box

Creativity is good, but not in this case. A box must still be a box. If it’s overdesigned, it is harder to spot. The same thing is with combining the search with other forms (e.g., newsletter). It should be instantly recognized by the user as a field to type the search query. Don’t make your potential buyers search for the search. It won’t do you any good.

5. Don’t overload the search with advanced functionality

If the users see a big form they have to fill in to find the necessary thing, it freaks them out. Advanced functionality should be available on request: a button click, a drop-down menu, etc.

Booking services might be an exception, and still, they don’t provide the entire array of advanced search options right away.

These are the basic rules of a good search UX the way Qubstudio designers see it. Prediction of users’ needs, fast and precise response to their queries, aid in creating and specifying their requests, excellent performance on both desktop and mobile – all this leads to a smooth and pleasant interaction between the customer and your business. If you’ve noticed that your website search functionality needs improvement, don’t hesitate to contact us, and we’ll be happy to help you right away.