How to design a great search bar

Ruslan Galba
@hellotegra
Published in
2 min readAug 1, 2019

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

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

--

--

Ruslan Galba
@hellotegra

Increasing revenue for DTC brands via Facebook / Google ads 🚀Growth Strategist 🤘 Founder @hellotegra growth team 🤖 $5M+ profitable ad spend in 2020