Find-in-page
Collapse the table of content
Expand the table of content

Guidelines for find-in-page

Find-in-page enables users to find text matches in the current body of text. Document viewers, readers, and browsers are the most typical apps that provide find-in-page.

Recommendations

  • Place a command bar in your app with find-in-page functionality to let the user search for on-page text. For placement details, see the Examples section.

    • Apps that provide find-in-page should have all necessary controls in a command bar.
    • If your app includes a lot of functionality beyond find-in-page, you can provide a Find button in the top-level command bar as an entry point to another command bar that contains all of your find-in-page controls.
    • The find-in-page command bar should remain visible when the user is interacting with the touch keyboard. The touch keyboard appears when a user taps the input box. The find-in-page command bar should move up, so it's not obscured by the touch keyboard.

    • Find-in-page should remain available while the user interacts with the view. Users need to interact with the in-view text while using find-in-page. For example, users may want to zoom in or out of a document or pan the view to read the text. Once the user starts using find-in-page, the command bar should remain available with a Close button to exit find-in-page.

    • Enable the keyboard shortcut (CTRL+F). Implement the keyboard shortcut CTRL+F to enable the user to invoke the find-in-page command bar quickly.

    • Include the basics of find-in-page functionality. These are the UI elements that you need in order to implement find-in-page:

      • Input box
      • Previous and Next buttons
      • A match count
      • Close (desktop-only)
    • The view should highlight matches and scroll to show the next match on screen. Users can move quickly through the document by using the Previous and Next buttons and by using scroll bars or direct manipulation with touch.

    • Find-and-replace functionality should work alongside the basic find-in-page functionality. For apps that have find-and-replace, ensure that find-in-page doesn't interfere with find-and-replace functionality.

  • Include a match counter to indicate to the user the number of text matches there are on the page.
  • Enable the keyboard shortcut (CTRL+F).

Examples

Provide an easy way to access the find-in-page feature. In this example on a mobile UI, "Find on page" appears after two "Add to..." commands in an expandable menu:

Find-on-page example 1

 

After selecting find-in-page, the user enters a search term. Text suggestions can appear when a search term is being entered:

Find-on-page example 2

 

If there isn't a text match in the search, a "No results" text string should appear in the results box:

Find-on-page example 3

 

If there is a text match in the search, the first term should be highlighted in a distinct color, with succeeding matches in a more subtle tone of that same color palette, as seen in this example:

Find-on-page example 4

 

Find-in-page has a match counter:

Example of find-in-page search counter

Additional usage guidance

Implementing find-in-page

  • Document viewers, readers, and browsers are the likeliest app types to provide find-in-page, and enable the user to have a full screen viewing/reading experience.
  • Find-in-page functionality is secondary and should be located in a command bar.

For more info about adding commands to your command bar, see Quickstart: Adding a command bar.

[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 .]

Related topics

For designers
How to disable text and image selection
Guidelines for search
For developers (HTML)
Quickstart: Adding a command bar

 

 

Show:
© 2016 Microsoft