DRAFT - Content is subject to change
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.