How to design: accessible search bars

An in-depth guide to designing more accessible search bars.

One designer was asking for feedback about her app design and I was glad to help her out with that. I make the best out of sharing my knowledge with designers who ask for it because I want to bring them new value.

The search bar design was a problem I came. It may seem like a little problem but even these problems can influence the impression we create. We don’t want users to leave because of an inaccessible search.

Giving feedback about the app design inspired me to write this guide on designing functional and accessible search bars for everyone. It’s necessary to go through these things because our decisions will affect user experience.

This guide focuses on designing search bars for mobile devices, but there are principles that also apply for desktop. Feel free to take notes!

#1 — Search Icon

To help users recognize the search bar on a website or app, we may consider using a search icon as a visual symbol part of the search bar. The search icon makes a search bar more recognizable and easier to find for the users.

Nowadays, icons and images are really frequently used in web design because of visual perception. Human eyes can recognize them faster than texts and they tell more than words and require less space to be applied.

As a well-known and widely used icon, we will look into different search icon positions and what purpose they have. After that, we will find out how proper spacing around the icon can improve our work and user experience.

Search icon before the input text

The search icon is used as an indicator to make the search bar recognizable. With these search bars, we don’t have to click any buttons to see the results. Search results will appear under the search bar right after we enter a value.

The icon should be clickable if an app or website uses a hidden search bar. It means that the search bar will appear on the screen after clicking the icon. Search bars may have a cancel button which also hides the search if needed.