Guidelines and checklist for find-in-page

  • Article

This topic describes best practices for implementing find-in-page functionality in your Windows Store apps.

  • Implementing find-in-page
  • User experience guidelines
  • Related topics

Implementing find-in-page

The following table presents the practices recommended for implementing find-in-page.

Practice Description

Implement find-in-page to enable users to find matches in the current body of text.

Find-in-page enables users to find matches in the current body of text.

  • Document viewers and readers are the most likely kind of apps to provide find-in-page.
  • The primary purpose of these apps is to enable the user to have a full screen viewing/reading experience.
  • Find-in-page functionality is secondary and should be located in an app bar, along other functionality provided for the user that they use when needed.

For more info about adding commands to your app bar, see Quickstart: Adding an app bar.

Don't use the Search charm to find text in the current body of text.

The Search charm enables searching through a set of items, like web pages, movies, and events. The user enters a query into the search box, and a related result set is returned. Often, these results are sorted by using a relevance algorithm.

 

User experience guidelines

The find-in-page user experience in Internet Explorer.
The find-in-page user experience in Internet Explorer in the new Windows UI.

 

The find-in-page user experience in the reader app.
The find-in-page user experience in the reader app.

 

The following table presents the practices recommended for adding find-in-page to an app.

Practice Description

Use an app bar to let users find text with your app.

Find-in-page functionality is secondary and should be located in an app bar.

  • Apps that provide find-in-page should have all necessary controls in an app bar.
  • If your app includes a lot of functionality beyond find-in-page, you can provide a Find button in the top-level app bar as an entry point to another app bar that contains all of your find-in-page controls.

The find-in-page app bar should remain visible when interacting with the touch keyboard.

The touch keyboard appears when a user taps the input box. The find-in-page app 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 app 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 app 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

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.

Avoid summary panes.

Summary panes are redundant and should not be included in find-in-page functionality.

  • The easiest way for a user to identify the match they are looking for is to see it in the document, because seeing the match inline gives much more context than a summary-of-results pane.
  • Users can move quickly through the document by using the Previous and Next buttons and by using scroll bars or direct manipulation with touch.
  • If you choose to include a summary pane, follow these guidelines.
    • Users should be able to access the summary pane by using a toggle button.
    • When the summary pane is toggled on, it should be visible whenever text is in the input box.
    • If the user closes the find-in-page app bar, then the summary pane should not be visible until the next time that the user enters text in the input box.
    • If the summary pane is toggled off it should not show again until the user toggles it back to the on state.

 

Guidelines for selecting text and images

Quickstart: Adding an app bar

 

 

Build date: 9/16/2013