How to design a great search bar

Tegra - August 1, 2019 - 0 comments

How to design a great search bar

Search is everywhere

It can be a great tool but also a huge frustration if it doesn't work as expected. Here are a couple of practical tips on how to design search bars.

The basics of it at least cause it can become very complex very fast. A lot of things needs to be considered besides UX practices like how fast will users receive results? How can you optimize that?

Here are a couple of problems I needed to solve in some of the projects I've worked on:

💡Consider designing the search results in a separate page. If there are many result types that can be filtered, a separate page might be a great idea (not just suggestions in a dropdown). This is because when you select a search result and find out it's not what you're looking for, you can just hit back and you're back in the search results. Otherwise, you need to research

💡If you can search for lots of results and many types of content, consider organizing the results under categories. Something I implemented before was placing results under tabs. This meant an extra step for the user but a much faster and accurate search result. Especially handy when you're not Google and you can't optimize your search for 15 years!

💡Also, a good idea to show recent searches when accessing the search, before typing anything.

💡Tools to easily create the perfect design: Webflow, Flowkit, Leadpages.

Be free to send us any feedback by reply or reach using DM on Instagram

Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Courtesy of @uxbites

Don't collapse your searchbar (at least on the desktop). Collapsing the search makes it less discoverable& interaction costUse placeholders for suggestions. Placeholders let users know what can be searched.Use the magnifying glass for submitting queries. Searching with pressing enter is fine but it's not fully accessible.This is how autocomplete should work. Every information type should be shown differently.

Any personal experience you would add? Let us know in the comments 👇

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *