Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Guidelines for search

[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]

Search is one of the top ways users can find content in your app. The guidance in this article covers elements of the search experience, search scopes, implementation, and examples of search in context.

Elements of the search experience

Input.  Text is the most common mode of search input and is the focus of this guidance. Other common input modes include voice and camera, but these typically require the ability to interface with device hardware and may require additional controls or custom UI within the app.

Zero input.  Once the user has activated the input field, but before the user has entered text, you can display what's called a "zero input canvas." The zero input canvas will commonly appear in the app canvas, so that auto-suggest replaces this content when the user begins to input their query. Recent search history, trending searches, contextual search suggestions, hints and tips are all good candidates for the zero input state.

Example of Cortana on a zero input canvas

 

Query formulation/auto-suggest.  Query formulation replaces zero input content as soon as the user begins to enter input. As the user enters a query string, they are provided with a continuously updated set of query suggestions or disambiguation options to help them expedite the input process and formulate an effective query. This behavior of query suggestions is built into the auto-suggest control, and is also a way to show the icon inside the search (like a microphone or a commit icon). Any behavior outside of this falls to the app.

Example of query/formulation auto-suggest

 

Results set.  Search results commonly appear directly under the search input field. While this isn't a requirement, the juxtaposition of input and results maintains context and provides immediate access to query editing or entering new searches. This connection can be further communicated by replacing the hint text with the query that created the results set.

One method to enable efficient access to both query editing and re-query is to highlight the previous query when the field is reactivated. This way, any keystroke will replace the previous string, but the string is maintained so that the user can position a cursor to edit or append the previous string.

The results set can appear in any form that best communicates the content. A list view provides a good deal of flexibility and is well-suited to most searches. A grid view works well for images or other media, and a map can be used to communicate spatial distribution.

Search scopes

Search is a common feature, and users will encounter search UI in the shell and within many apps. Although search entry points tend to be similarly visualized, they can provide access to results that range from broad (web or device searches) to narrow (a user's contact list). The search entry point should be juxtaposed against the content being searched.

Some common search scopes include:

Global.  Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more.

Web.  Search a web index. Results include pages, entities, and answers.

My stuff.  Search across device(s), cloud, social graphs, and more. Results are varied, but are constrained by the connection to user account(s).

Contextual/refine.  Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more.

Use hint text to communicate search scope. Examples include:

"Search Windows and the Web"

"Search contacts list"

"Search mailbox"

"Search settings"

"Search for a place"

Example of search hint text

 

By effectively communicating the scope of a search input point, you can help ensure that the user expectation will be met by the capabilities of the search you are performing and reduce the possibility of frustration.

Implementation

For most apps, it's best to have a text input field as the search entry point, which provides a prominent visual footprint. In addition, hint text helps with discoverability and communicating the search scope. When search is a more secondary action, or when space is constrained, the search icon can serve as an entry point without the accompanying input field. When visualized as an icon, be sure that there's room for a modal search box, as seen in the below examples.

Before clicking search icon:

Example of a search icon and collapsed search box

 

After clicking search icon:

Example of a search icon and expanded search box

 

Search always uses a right-pointing magnifying glass glyph for the entry point. The glyph to use is Segoe UI Symbol, hex character code 0xE0094, and usually at 15 epx font size.

The search entry point can be placed in a number of different areas, and its placement communicates both search scope and context. Searches that gather results from across an experience or external to the app are typically located within top-level app chrome, such as global command bars or navigation.

As the search scope becomes more narrow or contextual, the placement will typically be more directly associated with the content to be searched, such as on a canvas, as a list header, or within contextual command bars. In all cases, the connection between search input and results or filtered content should be visually clear.

In the case of scrollable lists, it's helpful to always have search input be visible. We recommend making the search input sticky and have content scroll behind it.

Zero input and query formulation functionality is optional for contextual/refine searches, in which the list will be filtered in real-time by user input. Exceptions include cases where query formatting suggestions may be available, such as inbox filtering options (to:<input string>, from: <input string>, subject: <input string>, and so on).

Example

The examples in this section show search placed in context.

Search as an action in the Windows tool bar:

An example of search as an action in the Windows tool bar

 

Search as an input on the app canvas:

Example of search on an app canvas

 

Search in a navigation pane:

Example of search in a navigation menu

 

Inline search is best reserved for cases where search is infrequently accessed or is highly contextual:

Example of inline search

Related topics

For designers
Guidelines for find-in-page
For developers (XAML)
SearchBox
Adding search
Quickstart: Adding search
For developers (HTML)
WinJS.UI.AutoSuggestBox
Adding search
Quickstart: Adding search

 

 

Show:
© 2015 Microsoft