Best practices

Tabs

  • Place the most frequently used tab in the middle tab position. This position is the easiest for users to target.
  • Include tabs on the first level of an application hierarchy only. 
  • When users tap a tab, display the content at the top of the screen. If users tap an item within a tab (for example, a list item), include a Back button so that users can navigate to the first level in the hierarchy. You should only allow a Back action to navigate within one tab.
  • Include a maximum of four tabs in an action bar. You can include additional tabs in a tab menu.
  • In a tab menu, place the most frequently used tabs at the top. Place any tabs in the first level of the hierarchy at the top of the list.

Action bars

  • Only include the most frequent and relevant actions for the entire screen in action bars even if it means that just one action is displayed in the action bar. Avoid filling up an action bar just because there’s room. Make primary actions more prominent by placing less frequent actions in an action menu.
  • Fix action bars along the bottom of screen. For immersive views, such as pictures or videos, you can allow an action bar to disappear from the screen. Display the action bar again when users tap the screen.
  • In some cases, you might consider placing very important actions inline on the screen or in a context menu. For example, if the most important action for a picture is to comment on it, you can allow users to drag the picture to reveal space to add comments. You can place other important actions, such as sharing, editing, and setting the picture as wallpaper, in the action bar.
  • Don’t include a Delete action in an action bar. Include it at the bottom of an action menu.

Segmented controls

  • Place the segment that's most frequently used in the far left position. If you include an “All content” segment, place it in the far left position.
  • When users return to a view, display the content from the last filtered state. When users reopen an application after exiting it, display the content from the far left segment.
  • Avoid allowing segmented controls to scroll out of view unless you must show more content on the screen.
  • Make the size of the font smaller if the name of each segment does not fit within the segment.
  • If users can filter only some of the content on a screen, place segmented controls directly above the content that can be filtered.
  • If you combine segmented controls with tabs, make sure that tabs are the primary method of navigation and that the segmented control filters content within a specific tab.
  • If you are not sure whether to use segmented controls or tabs, try using tabs. Tabs are easier for users to interact with and understand.

Was this information helpful? Send us your comments.