Mode selector

It works like this:

  1. The user is viewing content, here displayed in a list.

  2. Attached to the action bar or title bar is the mode selector. It contains an indicator, so the user knows that he can switch between modes or sections (the element by which the mode selector is defined), and a title of the section that is currently viewed. This title of section or mode can also be displayed in the action bar or title bar.
    The mode selector can also be positioned on the left or right or inside the action bar or title bar.
    Tapping on the mode selector…

  3. … and a pane with all other sections slides into the screen.

  4. The pane can be closed by tapping on the indicator, or tapping outside the pane.

  5. When the user taps on an other section in the pane…

  6. … that specific section, containing the corresponding content is displayed…

  7. … and the mode selector indicates that this section is selected.

Use when

The Mode selector can be used when you have a lot of content to distribute, that can be divided into different modes or sections. The selector works as a filter on a vast amount of content.
Make sure that the sections you divide your content into are similar to each other. Don't add activities to the selector. When you want the user to toggle between different activities, use a tab bar instead.
When you don't want the content to be loaded by switching to an other section, you can use a segmented control.

The Good

  • You can distribute a large amount of content
  • The user gets a clear overview of the available content
  • It's a appealing way to toggle between sections for the user

The Bad

  • The indicator is often difficult to notice.
  • List usually covers actual content (this can be avoided scrolling content down) (dario)

Examples

Time Mobile

1 Time Mobile holds a lot of content, that is divided over multiple categories. Here the opening page, the 'Latest stories' section is shown. The title is displayed under the 'Time' logo.

2 When the user taps on the mode selector, the pane with all other available sections slides into the screen.

3 Because the pane holds a lot of sections the user can scroll down.

4 The section 'Videos' is selected...

5 ... the section is being loaded...

6 ... and displayed. Notice how the title of the section under the 'Times' logo has changed.

Engadget

1 Engadget shows a title bar in ahich on the right side a button with an indicator shows that the user can swith between sections.

2 Tapping on it, and a pane with the other 3 sections are shown. Notice how the indicator points up now. The pane can here be closed only when the indicator is tapped...

3 ... or when an other section is selected.

4 Upon selectiing an other section, the content is loaded first...

5 ... and than shown. The title bar here shows we have changed sections.

Twitter

1 In Twitter a very subtle indicator underneath the Tweets icon shows that the user can swith between modes.

2 Tapping on the icon, and a pop up is layered over the screen. Tapping on 'Favorites'...

3 ... first loads the corresponding content...

4 ... and secondly displays it.

Leave a comment