Blueprint

Search Function

How to build a better UX for search

6 Tasks

Created by:

Kevin Hon Chi Hang

01 Search Icon

Visual Cues – People usually recognize that a magnifying-glass icon indicates a search tool, even when it has no label.

02 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.

03 Input Box

Nielsen Norman Group studies have shown that having an input capable of housing 27 characters covers the needs of 90% of the users.

04 Placeholder

It is important that you use appropriate copy for the input’s placeholder text, usually an hint of what users can search for. This ensures they know what to search for and are not frustrated by writing bad queries. It is known that humans have little short term memory. Keep the copy used for placeholder text short and direct. Using a long hint will end up harming user experience by increasing cognitive load.

05 Autocomplete

The goal isn’t to make the search faster, but to provide a little bit of help in query construction.

06 Search Suggestion

The goal isn’t to make the search faster, but to provide a little bit of help in query construction.