How to design simple search experience?

Users are constantly looking for information and your product is no different. They might be looking for a product, a blog post, a hotel to stay for the night or a taxi cab to go to the airport. The possibilities are only limited to what your product has to offer. That’s why it’s important to design a simple search experience for your users.

Here’s a detailed breakdown of how a simple searching experience should look and feel like.

View all Search UX Patterns

Userflow

1. Search Page

1

Active Search Bar

The search bar should be active by default so the user can begin typing immediately.
2

Placeholder Text

The place holder text should assist the user in understanding what they can search for.
3

Clear Search

Instead of long pressing the backspace/delete key on the keyboard the user can clear all.
4

Active Keyboard

Since the search bar is active by default, the keypad will be open for default. If you place any content on this page, be aware of the limited space.
5

Keyboard Search Button

Keyboard's action button will be set to “Search” and will be disabled until the user types their query.

1.1 Search Results Page

1

Number of results

It’s important to show users the number of results that could be found, giving user the ability to decide how long they want to spend looking through the results.
2

Results

Provide accurate and relevant results. Users typically would make a quick judgement of the quality or value your product provides based on the first few results.
3

Load More Button

A load more option can be used to extend the number of results being displayed. This helps with situations of low internet speeds and allows the data to load in progressive batches.

1.2 Search Results Empty State

1

Default Search Bar

The search bar should be set to default on search results page to make room for the results.
2

Query

Display the user’s search query so they can refer back to it or edit it if needed. Don’t remove it.
3

Clear Message & UX Copy

Clearly show the user in plain, simple language that there were no results found for their query.
4

Illustration or Imagery

Use an illustration that helps the user get visual context of the situation. Try using illustration that fits the context of your product.
5

Search Again Button

Prompt the user to take action and try a different keyword. This helps keep the user with the product instead of abandoning the product completely.

Required Elements

It’s easy to forget and miss out small details. When designing screens for a simple search experience you’ll need to design these elements.

Icons
  • Search Icon
  • Close or Cancel Icon
Buttons
  • Primary Button Default
  • Primary Button Hover
  • Primary Button Pressed
  • Secondary Button Default
  • Secondary Button Hover
  • Primary Button Pressed
Results
  • Results Card/List
Input Fields
  • Default Input Field
  • Focused Input Field
  • Typing Input Field
  • Filled Input Field
Imagery
  • Illustration or Image

More Search Patterns

Search — Filter

Search — Filter

Search — Simple

Search — Simple