Revision 363539 of Multi select

  • Revision slug: Mozilla/Firefox_OS/UX/Patterns/Multi_select
  • Revision title: Multi select
  • Revision id: 363539
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment added link to coding guide page

Revision Content

Multi select mode is used to let the user perform "bulk actions;" that is, to select a number of items and then perform a single action on all of them at once. This may be something like deleting six emails from the user's inbox or choosing two photos to email to a friend. This mode is always used on lists of items—either a vertical list (such as a list of email messages) or a grid (such as a grid of photos in a photo gallery app). See the Coding guide for details on how to implement this user interface pattern.

Characteristics

  • It's important to note that this is a mode, not a context switch. Animation and visual design should give the user the impression that they're in a temporary mode within the original view, not in a new view.
  • Multi select mode may also be known as "edit mode" or "select mode" depending on the use case.
  • The header text should indicate the action the user is preparing to take, such as "Select photos" or "Select messages." When an item is selected, the header should be changed to indicate how many messages have been selected.
  • The view should exit multi select mode when the user either selects a button that performs an action (such as a "Delete" button) or taps a cancel button.
  • If the user has taken action (such as deleting three message threads), a status bar should appear to confirm the action.

Visuals

Interaction

See also

Revision Source

<p>Multi select mode is used to let the user perform "bulk actions;" that is, to select a number of items and then perform a single action on all of them at once. This may be something like deleting six emails from the user's inbox or choosing two photos to email to a friend. This mode is always used on lists of items—either a vertical list (such as a list of email messages) or a grid (such as a grid of photos in a photo gallery app). See the <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Multi_select/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Multi_select/Coding">Coding guide</a> for details on how to implement this user interface pattern.</p>
<h2 id="Characteristics">Characteristics</h2>
<ul>
  <li>It's important to note that this is a <strong>mode</strong>, not a context switch. Animation and visual design should give the user the impression that they're in a temporary mode within the original view, not in a new view.</li>
  <li>Multi select mode may also be known as "edit mode" or "select mode" depending on the use case.</li>
  <li>The header text should indicate the action the user is preparing to take, such as "Select photos" or "Select messages." When an item is selected, the header should be changed to indicate how many messages have been selected.</li>
  <li>The view should exit multi select mode when the user either selects a button that performs an action (such as a "Delete" button) or taps a cancel button.</li>
  <li>If the user has taken action (such as deleting three message threads), a <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status">status bar</a> should appear to confirm the action.</li>
</ul>
<h2 id="Visuals">Visuals</h2>
<h2 id="Interaction">Interaction</h2>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Multi_select/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Multi_select/Coding">Multi select coding guide</a></li>
  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Firefox OS user experience</a></li>
</ul>
Revert to this revision