Entry sheet

Important: This information is out of date; for up-to-date information on using these design patterns, as implemented in Firefox OS building blocks, go to our Firefox OS building blocks page.

An entry sheet is used to edit a single setting or option in your app that either contains a large number of possible values (such as a text entry form or a long list of choices) or requires multiple inputs or selections, such as configuring and connecting to a WiFi network.

Characteristics

  • Occupies the entire screen.
  • The user should be given the impression that they're on the same page as whatever user interface element that caused the entry sheet to open; the entry sheet should be perceived as a temporary modal overlay. The user hasn't navigated deeper into a hierarchy of interface pages. To reinforce this impression:
    • Valid animations when opening an entry sheet include things like sliding in from the top or bottom, a cross-fade, scaling in, and the like.
    • "Cancel" buttons should be used instead of "Back" buttons.
  • Every element in the entry sheet must be related to adjusting a single setting, and there should not be links to other pages, lists, or dialog boxes.
  • The user will typically have two options to close an entry sheet: a Cancel button, and a button that accepts the user's data (this may be labeled "Done", "Send", "Join", or the like—it should be a verb describing what action will occur when the sheet is closed).

Visuals

These mockups give a basic representation of what an entry sheet might look like.

need screen shots

 

See also

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, murali24, kscarfone, Sheppy
 Last updated by: chrisdavidmills,