Would you like to tell us how we are doing?

You bet No thanks

Screen structure

Action bar

An action bar is an area along the bottom of the screen that gives you a compact way to include actions and tabs that apply to the screen. The convenient location of the action bar lets users access actions and tabs easily and effectively.

You can set up your action bar to include a signature action (an action that is primary to the current screen, or performed often). Signature action icons are highlighted with a circular background in a theme-controlled color, and are elevated just above the action bar so that they stand out. Signature action icons float above the rest of the user interface when the user interacts with the screen (for example, scrolling a list), to ensure that they are always easy to interact with.

An action bar with a signature action.

Use when

You want to include your app's most frequently used and relevant actions.

Don't use when

You want to include less frequent actions. Use an action menu instead. For example, include Delete at the bottom of an action menu instead of in an action bar.

Best practices

Fix action bars along the bottom of a screen. For immersive views, such as photos or videos, let the action bar disappear. Show it again when a user taps the screen.

Avoid filling up an action bar just because there's room, even if it means that only one action is displayed in the action bar. Try and avoid placing more than three actions on a bar.

Consider placing very important actions on the screen. For example, if the most important action for a photo is a user to comment on it, let the user drag the photo to reveal space for adding comments. Place other important actions, such as sharing, editing, and setting the photo as wallpaper, in the action bar.

Use the signature action, but only in contexts where it can help the user get things done faster. The function that you choose to be the signature action should be a high-volume feature (for example, Compose).

Device showing an action bar associated with a photo.

Title bar

Device showing a title bar.

A title bar is an area along the top of the screen that can contain a title, a segmented control, or actions. A title can help users understand the context of the current screen.

Use when

There's only one way to view the content and the context is not apparent.

Don't use when

The content conveys the context in a richer way. For example, a contact card can identify the context more easily with a picture and a name than a title can.

Tabs appear at the bottom of the screen.

Segmented controls

Segmented controls are a group of horizontally stacked buttons that let users see different aspects of the same content type (for example, top applications, top free applications, or recently released applications).

Use when

There are two to four ways for users to view the content and they might switch views frequently.

Don't use when

You're not sure whether to use segmented controls or tabs. Use tabs instead. Tabs are easier for users to interact with and understand.

Best practices

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, show the content from the last filtered state. When users close an app and open it again, show the content from the segment in the far left position.

segmented_control_screen

Don't allow segmented controls to scroll out of view unless you must show more content on the screen.

Make the font size smaller if a label doesn't fit in 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 tabs the primary method of navigation and make sure that the segmented control filters content within a specific tab.

Actions in a title bar

If you implement a touch screen keyboard on a screen, actions in a title bar can help prevent users from submitting information accidentally by providing a physical separation between the action buttons and the keyboard.

Use when

You have a sheet and you want to help users complete and dismiss it easily. Learn more about sheets.

Don't use when

You need back navigation in a drill down navigation structure. Use the Back button in the action bar instead. An exception is if the screen is highly focused on text input or if back navigation is a primary action. In these cases, place the Back button in the title bar so that it isn't hidden by a touch screen keyboard.

Best practice

Place positive actions at the top-right corner of the screen(actions such as Send, Accept, and Save). Place destructive actions, such as Cancel, Close, and Back, at the top-left corner of the screen.

Menus

Action menus

Action menus contain actions that are less frequently used than actions that appear in the action bar.

Context menus

Context menus give users a quick way to access the most common actions for an item. Users don't have to open an item to act on it.

Device showing an action menu.
Device showing a context menu.

Application menus

Application menus hold important actions that are independent of context and common across the app (for example, Settings, Log Out, and About).

Learn more about menus.

Device showing an application menu.


Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus