Home > Dealing With Data > let users search? > Search – Search bar

Search – Search bar

It works like this:

The search bar is anchored at the top of the screen and replaces the action or title bar. It contains 3 elements: a text field for letting users type in search terms, a search button on the right to start the search, and an optional pop-up selector on the left, for selecting a search mode. Presence of the pop-up selector is shown by an indicator pointing down.

  1. When the search bar is launched or activated, the text field is selected, and a cursor is displayed, indicating the user can start typing.

  2. Also the keyboard slides in from the bottom. Together with launching the search bar and keyboard, a list of previous search terms related to the selected icon in the pop-up selector is displayed. Note that the terms have secondary information, next to the label. To switch search mode the icon for the pop-up selector is tapped.

  3. The pop-up selector opens, in which the user can choose the desired search mode. The text field is not selected when the pop-up selector is opened. Tapping on a different icon…

  4. … opens the corresponding search mode. The text field is selected again.

  5. When the user starts typing, suggestions are presented. The user can start the query by tapping the search-button…

  6. … or by tapping the enter-button, which usually displays the text ‘Search’, or ‘Done’.

  7. When the query has been made, the results are displayed in a list.

Use when

The search bar has to be applied consistently for all searches, i.e. search bars at a fixed location on top of the screen, but also searches coming from a dedicated button in the action bar, a hard key, or an option in the option icon menu. They should all work alike.
Use a dedicated search bar at the top of the screen if searching for relevant items from a lot of content within the app will be used often by the user.

The Good

  • Easily recognizable, because it works the same for every app
  • Multiple search modes available, which makes filtering possible

The Bad

  • It is not so obvious that multiple search modes are offered. The user has to notice the indicator.
  • There are devices without a dedicated search button (the international Galaxy S, for example). (Greg K.)

Examples

Google Search

1 Google search can be reached by a widget on the user

2 As soon as the user starts typing, the button for voice input changes into the regular search button, and suggestions are shown.

3 In the pop-up selector of google search, the user can add or discard searchable items, by tapping the target in the top right corner of the pop-up.

4 When the user selects to search the applications mode, only suggestions from installed applications are searched.

Wapedia

1 Wapedia

2 When the text field is tapped, the keyboard comes up. Under the pop up selector-icon a line of text shows which part of Wikipedia will be searched.

3 The search term is typed, and the results are shown.

4 When the icon is tapped, the pop up selector opens.

5 An other Wiki is selected, the pop up selector closes, and the results change.

One Response to Search – Search bar

  1. jitendra says:
    November 13, 2013 at 6:12 am

    please send the search home screen design

Leave a comment