Getting the Search Pattern Right

If you are reading this article you have probably been put in charge of designing a website or application that would benefit from a search feature.

In my first article I will be covering 5 best practices that have helped me design better, more usable, search mechanisms.

Best Practices

1. Visual Cues

Giving your users the tools they need to scan the screen quicker is part of your job, when creating any kind of user interface. Doing this ensures that your user will know where to find exactly what he wants, when he wants and what happens once he interacts with it.

Magnifying Glass Icon

Use an icon. I can’t stress how much this speeds up finding the search bar. The simpler, the better. Less details allow the user to scan it quicker. Although, an icon just by itself, without an input container or button will actually make search harder to find.

People usually recognize that a magnifying-glass icon indicates a search tool, even when it has no label. Unfortunately, showing only the icon makes search more difficult to find. (KATIE SHERWIN in “The Magnifying-Glass Icon in Search Design: Pros and Cons” from Nielsen Norman Group)

An Actual Search Button

Not everyone is a millennial surfing the web, meaning, not everyone knows to press the Enter key once they’ve input their query. Having an actual button alongside your search input will help the user acknowledge their next action — thus, reducing the amount of cognitive load required by the user.

Tips:

Alternatively you can hide your input button until the text input has focus.

Make sure the button is sized properly so that clicking it feels natural.

2. Input Characteristics

Sometimes the shiniest, most powerful or bigger car just doesn’t do the trick. Same goes for the search pattern.

Style it like you mean it!

Design it to fit the theme of your website or app while making sure it stands out just enough.