Search bars are one of the most essential elements when it comes to large, content-heavy websites. They help the users to search and find pieces of content quickly with no need to dive through the website.

For such an important element, the quantity of websites that nowadays still offer poor search bars that users find annoying and useless is impressive.

Here you can find some must-haves and tips to make this element convenient and practical for your users.

Great communicator

Before any interaction from the users, a search bar should tell to the users examples about what they can search or find. By giving examples about type of content, you will be increasing the success of displaying the right content for your users.

Asos gives some examples about what the users can find.

After hitting the search bar, users should be able to see recent searches (in case they have used the search bar before) or popular searches (in case they haven’t). Talking about recent searches, your users should be able to clean them up, therefore allowing popular searches to appear again.

Nostradamus

Your search bar should be a sort of magician or Nostradamus. It should be able to predict what the users are typing and, thus, give suggestions related to the query.

Typing should return results in real time with keywords highlighted.

This is what we call “Autocomplete” function and it will be really useful when your users have to type queries that might be difficult to write.

Mediamarkt helps you to find specific models when typing. This is really helpful for users that know what they want but don’t know how to type the name (or model in this case).

Bigger is better

Having a prominent search bar becomes a fundamental element especially for content-heavy websites (like e-commerce websites such as Amazon, Asos or other sites like IMDB, etc).

This means that it should be very visual and easy to spot throughout the whole website, allowing the users to see it quickly in case they aren’t be able to find what they are looking for.

Categories matter

It is really common to have different types of content within a website. Your results should have a visual cue that allows the users to identify what type of content has been displayed. Is it an article? It is a news post? Tell to your users what kind of content each result is.

Lonely Planet uses icons to tell the users what kind of content is it (accommodation, itinerary, city…) since there could be content within the website with similar names.

In case you only use one type of content, think about what kind of information would be nice for your users to see at first glance. Imagine that your website is to find restaurants, it might be useful to display the distance that the restaurants are from the user.

Smarty-pants

Your search box should be the “first of its class”. This means that it should be able to provide suggestions when users typed something wrong or when your search box cannot find what the users are looking for.

Take into account that dropping your users on a page with no results could be frustrating. So, avoid dead-ends, tell your user similar words in case they have typed incorrectly or display similar content.

After typing something wrong, Ikea suggests some products that could be related to what I typed.

If you cannot be the fastest one, at least, tell me.

Show a progress indicator or a skeleton screen in case the results cannot be displayed immediately. This will make the users feel more comfortable and it will reduce the sense of waiting.

If you have the chance to use a good animation, don’t hesitate to use it. It will keep them engaged while waiting.

Rumbo, a flight search engine, shows a skeleton screen while loading the content.

Do the maths

Display how many search results are available in total, so users can expect how much time they could spend browsing through them.

Make it delightful

Think about what kind of content are you offering and how you can level the results page to the top. Is it based on the user’s location? If so, maybe you should consider the option of having a “map view” that will allow the users to have a better visual overview of the results.

Conclusion

Search bars are one of the most important elements for large websites. Enhance the user experience by offering a smooth and seamless search results page to keep your users in the loop.

Level-up your search results