There’s a lot of repetition in the iOS Human Interface Guidelines and it isn’t particularly pleasant to read. I’ve set out to remove the noise and assemble the information of value into this multipart series. This in no way supersedes Apple’s guidelines, think of it as an accompaniment.

Arguably the most important section for UI designers, in this section each system-supplied iOS UI element is described, along with how they should be used. Each element includes its class reference.

Contents

  1. Bars
  2. Content views
  3. Alerts, action sheets, and modal views
  4. Controls
  5. System-provided buttons and icons

1. Bars

1.1 Status bar

On iPhone, the status bar can be gray, black, and transparent black. On iPad it’s always black. The status bar shows info such as the network connection, time of day and battery charge.

If you don’t include the status bar in your app, keep in mind this will force users to exit your app if they need any status info. Due to the abundance of space on the iPad it makes sense to keep it. If you do include it, you can hide it when displaying full screen media.

Class reference: UIStatusBarStyle.
Top

1.2 Navigation bar

The navigation bar is foremost for navigating, although you can include controls for managing content onscreen. It usually displays the title of the current screen in the centre, and should contain no more that the title, the back button, and one control that manages the view’s contents. All controls in the navigation bar include a bezel around them.

You can specify a custom colour for the navigation bar, and make it transparent. On the iPad, the navigation bar doesn’t necessarily have to extend across the full width of the screen like the iPhone. On iPhone take into account the automatic change in navigation bar height that occurs on device rotation (thinner in landscape).

When the user navigates to a new level, two things should happen:

  1. The title updates.
  2. A back button should appear to the left, labeled with the previous level’s title, or ‘Back’.

Don’t create a multisegment back button (shown below). It leaves no room for a title, and you can’t programmatically create a selected state.

You can use a segmented control (shown below) in the navigation bar at the top level of an application. Useful if doing so helps to flatten your information hierarchy. If you use a segmented control you shouldn’t include the title or any other controls. Segmented controls are covered in more detail further on in this section.

Navigation controllers in View Programming Guide for iOS.
Class reference: UINavigationBar.
Top

1.3 Toolbar

Performs actions that users can take in the current context. You can specify the colour or transparency of a toolbar. Maintain the 44 pixel hit area for each toolbar item. Use system-provided toolbar icons according to their documented meaning. See Standard buttons for use in toolbars and navigation bars.

On iPhone a toolbar always appears at the bottom, while on the iPad it can appear at the top too. On the iPhone take into account the auto change in height that occurs on device rotation (thinner in landscape).

Displaying a navigation toolbar in View Controller Programming Guide for iOS.
Class reference: UIToolbar.
Top

1.4 Tab bar

A tab bar gives people the ability to switch between different subtasks, views or modes in your app. Don’t use a tab bar that lets users act on elements in the current mode or screen (that’s what the toolbar’s for). It should be accessible from every level in the app, and helps flatten the app’s information hierarchy.

A tab bar always appears at the bottom. It’s height and transparency remain the same regardless of orientation. When users select a tab, it indicates a selected state. On iPhone a tab bar can display no more than five tabs at a time. If the app has more tabs, the More tab is shown, which reveals the additional tabs in a list.

A tab can display a badge (red oval containing either white text or an exclamation point) that communicates app specific info. Consider badging a tab bar icon to indicate that there’s new info associated with that view or mode.

On iPad you can use a tab bar in a split view pane or a popover to switch or filter the content within that view. Preferably though use a segmented control because it coordinates better with the popover and split view appearance.

Use system-provided tab bar icons according to their documented meaning. See Standard icons for use in tab bars.

Tab bar controllers in View Controller Programming Guide for iOS.
Class reference: UITabBar.
Top

2. Content views

2.1 Popover (iPad only)


What is it?
A popover is a transient view that hovers above the contents of a screen. It can be revealed when people tap a control or an onscreen area. A popover can contain objects such as:

  • Table, image, map, text, web, or custom views.
  • Navigation bars, toolbars, or tab bars.
  • Controls or objects that act upon objects in the current app view.

In iPad apps, an action sheet (described further on) always appears inside a popover.

When do I use it?
You can use a popover to:

  • Display additional information or a list of items related to the focused or selected object.
  • Display the contents of the left pane when a split view-based app is in portrait.
  • Display an action sheet that contains a short list of options that are closely related to something on screen.

How should it work?
Rather than providing a button to dismiss a popover, it should close automatically once an action item is selected from it. If a popover enables a task, it could display buttons that complete or cancel the task and simultaneously dismiss the popover. In general, save users’ work when they tap outside a popover’s borders. Discard their work only if they tap a cancel button. This facilitates any accidental loss of work if they dismiss the popover by tapping outside its bounds unintentionally.

Ideally a popover should be at least 320 points wide, but no greater than 600 points. Don’t display anything over a popover, like a modal view, unless it’s an alert. Most of the other popover guidelines are common sense. You can read them all in the Guidelines.

Class reference: UIPopoverController.
Top

2.2 Split view (iPad only)

A split view is a full-screen view that consists of two side-by-side panes. The width of the left pane, the master pane, is fixed at 320 points in all orientations and cannot be resized. The right pane is called the detail pane.

Both panes can contain a wide variety of objects and views, such as:

  • Table, image, map, text, web, or custom views.
  • Navigation bars, toolbars, or tab bars.

When people select an item in the left pane, the right pane should display the related information. In general, indicate the current selection in the left pane in a persistent way.

When an app uses a split view in landscape, it displays the contents of the left pane in a popover when it rotates to portrait.

There are more, commonsense details in the Guidelines.

Class reference: UIPopoverController.
Top

2.3 Table view

A table view displays data in rows and can be divided by section (plain view) or separated into groups (grouped view). Users can tap to select rows and use table view controls to add or remove rows, select multiple rows, see more info about a row item, or reveal another table view. There are two styles of table views:

2.3.1 Table view: Plain

Plain tables contain rows can be separated into labeled sections and an optional index can appear vertically along the right edge of the view. A header and footer can be used in the list. By default the row background is white.

2.3.2 Table view: Grouped

Grouped tables display rows of groups that can be preceded by header text and followed by footer text. By default groups are displayed on the blue pin-striped background. A grouped table view does not have an option for an index.

2.3.3 Table-view elements

Element Name Description
image: ../Art/checkmark.jpg Checkmark Indicates that the row is selected
image: ../Art/disclosure.jpg Disclosure indicator Displays another table associated with the row
image: ../Art/detail_disclosure.jpg Detail disclosure button Displays additional details about the row in a new view (for information on how to use this element outside of a table, see “Detail Disclosure Button”)
image: ../Art/row_reorder.jpg Row reorder Indicates that the row can be dragged to another location in the table
image: ../Art/row_add.jpg Row insert Adds a new row to the table
image: ../Art/delete_control.jpg Delete button control In an editing context, reveals and hides the Delete button for a row
image: ../Art/delete_button.jpg Delete button Deletes the row

2.3.4 Table view styles
iOS 3 and later defines four table-cell styles that implement the most common layouts:

2.3.4.1 Default (UITableViewCellStyleDefault)
Good for displaying a list of items that do not need to be differentiated by supplementary information.

2.3.4.2 Subtitle (UITableViewCellStyleSubtitle)
Provides supplementary text information.

2.3.4.3 Value 1 (UITableViewCellStyleValue1)
No images. Detail text is right aligned.

2.3.4.4 Value 2 (UITableViewCellStyleValue2)
No images. Labels are aligned toward each other.

An indicative grouped table using the value 1 cell style:

For full details see the Guidelines.
See Table View Programming Fuide for iOS.
Class reference: UITableView.
Top

2.4 Text view

A text view accepts and displays multiple lines of text. It supports scrolling when the content is too large to fit inside its bounds. If the text view supports user editing, a keyboard appears when the user taps inside the text view.

You have control over the font, colour, and alignment of the text in a text view. You can’t set multiple styles (eg two different fonts), although you can use a web view instead of a text view, and style the text using HTML. You can also specify different keyboard styles.

Class reference: UITextView.
Top

2.5 Web view

A web view is a region that can display rich HTML content. If you have a webpage or a web app, you can use a web view to wrap it as an iOS app. If you plan on doing this check the Safari Web Content Guide.

In addition to displaying web content, a web view performs some automatic processing on web content, such as converting a phone number to a phone link.

Class reference: UIWebView.
Top

3. Alerts, action sheets, and modal views

These are all temporary views that appear when something requires the user’s attention. People can’t interact with an application while one of these views is on the screen.

See Modal View Controllers in View Programming Guide for iOS.

3.1 Alert

The infrequency with which alerts appear helps users take them seriously, so try to minimise their use. The background appearance, width and text alignment of an alert is system-defined and cannot be changed.

Alert buttons are either light or dark. In a one-button alert, the button is always light. In an alert with two buttons, the button on the left is always dark and the button on the right is always light.

A single button doesn’t give users much control over a situation, so always try to include two options (eg Read and Dismiss). In a two button alert, always put the button users are most often or likely going to select on the right. In a two-button alert that proposes a potentially risky action, the button that cancels the action should be on the right.

Pressing the Home button while an alert is visible should quit the app as expected, but also be an identical action to canceling the alert.

These are the fundamental requirements of alerts, for further details see the Guidelines.
Top

3.2 Action sheet


iPhone action sheet


iPad action sheet

An action sheet displays a set of choices related to a task the user initiates. An action sheet always contains at least two buttons that allow users to choose how to complete their task. It doesn’t include a title or explanatory text because it appears in immediate response to a user action.

Use an action sheet to:

  • Provide alternate ways a task can be completed without giving these choices a permanent place in the user interface.
  • Get confirmation before completing a potentially dangerous task. An action sheet prompts users to think about the potentially dangerous effects of the step they’re about to take and gives them alternatives.
  • On iPhone include a Cancel button so users can easily and safely abandon the task.
  • On iPad choose whether to display an action sheet with animation or without animation. See the Guidelines for a detailed outline on when and when not to use animation with an action sheet.

On iPhone, an action sheet always emerges from the bototm of the screen and hovers over the app view. On iPad an action sheet is always displayed within a popover. An action sheet can cause a popover to appear within another popover that’s already open.

Class reference: UIActionSheet.
Top

3.3 Modal view

A modal view provides self-contained functionality in the context of the current task or workflow. It covers the entire application screen, so you feel like you’re entering a separate, transient mode in which to accomplish something. A modal view generally includes a button that completes the task and dismisses the view, with a Cancel button.

Modal view styles (iPad only)

  • Full screen. Good for presenting potentially complex tasks.
  • Page sheet. Has a fixed width of 768 points. The sheet height is the current height of the screen. In portrait the view covers the entire screen; in landscape the screen is visible on both sides of the modal view but dimmed. For an example compose a message in Mail.
  • Form sheet. Has fixes dimensions of 540 x 620 points and is centered on the screen. Outside the view is dimmed.
  • Current context. Has the same size as its parent view. Good for displaying a modal view within a split view pane, popover or other non-full screen view.

Modal view transition styles (both devices)

  • Vertical (default). Slides up from the bottom and slides back down when dismissed.
  • Flip. Current view flips over to reveal the modal view.
  • Partial curl. The page-curl behavior used in Maps on iPhone. One corner of the current view curls up to reveal the modal view underneath. Good for displaying configuration options.

On iPad don’t display a modal view on top of a popover. On both devices display a title that identifies the task, if appropriate.

Composing a message in Mail is an example of a modal view on the iPhone:

Class reference: UIViewController.
Top

4. Controls

Controls are UI elements that users interact with to perform an action.

4.1 Activity indicator


Shows that a task or process is progressing.

Class reference: UIActivityIndicatorView.
Top

4.2 Date and time picker

A date and time picker can have up to four independent wheels and has four modes:

  • Date and time (default). Calendar date, hour and minute values with the optional addition of AM/PM.
  • Time. The time mode displays wheels for the hour and minute values, with the option for AM/PM.
  • Date. Displays wheels for month, day and year.
  • Countdown timer. Displays wheels for the hour and minute. You can specify the duration, up to a max of 23 hours and 59 minutes.

You can changes the interval in the minutes wheel. For example rather than an option for every minute, you can specify intervals of 15 minutes.

On iPad, present a date and time picker only within an popover. It’s not suitable for the full width of the main screen.

Class reference: UIDatePicker.
Top

4.3 Detail disclosure button

Users tap a detail disclosure button to reveal additional info or functionality related to a specific item. The additional details or functionality are revealed in a separate view.

Class reference: UITableViewCellUITableViewCellAccessoryDetailDisclosureButton and UIButton.
Top

4.4 Info button

An info button reveals configuration details about an application, often causing the screen to flip to the back of view.

iOS includes a dark-coloured “i” on a light background and a light-coloured “i” on a dark background. It glows briefly when the user taps it.

On iPhone, use an info button to flip the screen and reveal more info. On an iPad avoid flipping the screen.

Class reference: UIButton.
Top

4.5 Label

A label displays static text.

Class reference: UILabel.
Top

4.6 Network Activity Indicator

Appears in the status bar and shows that network activity is occurring. Only display it when your app accesses the network for more than a couple of seconds. Users can’t interact with it.

In code you use the UIApplication method networkActivityIndicatorVisible to control the indicator’s visibility.
Top

4.7 Page Indicator

Indicates how many views are open and which one is currently visible. Use a page indicator when each view in your app is a peer of every other view. Navigate views by tapping an unselected dot. The guidelines specify that a ‘screen’ can accommodate approximately 20 dots, but doesn’t say which device or in what orientation.

Class reference: UIPageControl.
Top

4.8 Picker

A generic version of the date and time picker. Use a picker when people are already familiar with the entire set of values you wish to include, because most of the values are hidden when the wheel is stationary. A table view is generally better if you have a very large number of values.

On iPad, present a picker only within a popover.

Class reference: UIPickerView.
Top

4.9 Progress View

Shows the progress of a task or process that has a known duration. There are two styles:

  1. The default style is white and has a weight that makes it suitable for use in an app’s main content area.
  2. The bar style is thinner than the default style, which makes it well-suited for use in a toolbar. The bar style is also white.

Class reference: UIProgressView.
Top

4.10 Rounded Rectangle Button

Performs an app-specific action. For text on buttons use title-style capitalisation (capitalise every word except articles, coordinating conjunctions and prepositions of four or fewer letters). You can specify if the button should highlight when tapped and how the title should look when it highlights.

Class reference: UIButton.
Top

4.11 Search Bar

The search bar can be displayed in blue (default) and black. When tapped a keyboard appears. By default displays the search icon on the left side.

The search bar features a few optional elements:

  • Placeholder text in the search field.
  • Bookmarks button. This button can provide a shortcut to info users want to easily find again.
  • Clear button. Allows users to erase the contents of the seach bar with one tap.
  • A descriptive title, called a prompt, that appears above the search bar.

Class reference: UISearchBar.
Top

4.12 Scope Bar

Allows users to define the scope of a search. Only available in conjunction with a search bar. It adopts the appearance you specify for the search bar.

Class reference: UISearchBar.
Top

4.13 Segmented control

Each segment functions as a button that displays a different view. Use a segmented control to offer closely related, but mutually exclusive choices. When a segment is tapped, it displays a selected state.

Class reference: UISegmentedControl.
Top

4.14 Slider

Sliders consist of a track and a thumb (the circular control) and optional images that convey the meaning of the left and right values. Use a slider to give users fine control over values.

You can customise a slider:

  • Display horizontally or vertically.
  • Set the width.
  • Define the thumb’s appearance.
  • Define a different appearance for the track.

Class reference: UISlider.
Top

4.15 Switch

A switch presents two mutually exclusive choices or states. It displays the value that is currently in effect. Users slide the control to reveal the other value. Use a switch in a table row to give users two simple, diametrically opposed choices that determine the state of something, such as yes/no or on/off.

Class reference: UISwitch.
Top

4.16 Text Field

Accepts a single line of user input (shown here with a purpose description and placeholder text). When users tap a text field the keyboard appears. Use a text field to get a small amount of info from the user. Use placeholder text to make it obvious what the text field is for.

Class reference: UITextField.
Top

5. System-Provided Buttons and Icons

The system-provided buttons and icons are not provided as separate files. Instead use the API symbol names to specify them when you create standard UIKit buttons. You can also specify these symbol names in Interface Builder. In the attributes inspector for your bar button item, choose an icon from the Identifier pop-up menu. For more info see Setting Appearance of Bar Button Items in the Interface Builder User Guide.

Apple also provides guidelines for custom UI elements you wish to create. See Icons for Navigation Bars, Toolbars, and Tab Bars.

5.1 Standard buttons for use in toolbars and navigation bars

The buttons in the standard buttons table below are available in two styles:

  1. Bordered style. For example, the Add button in the navigation bar of the Contacts app on iPhone uses the bordered style. The style is suitable for both navigation bars and toolbars.
  2. Plain style. For example, the Compose button in the Mail toolbar. The style is suitable for toolbars only.

For symbol names to specify these buttons, see UIBarButtonSystemItem in UIBarButtonItem.

Button Name Meaning
image: ../Art/UIButtonBarAction.jpg Action Open an action sheet that allows users to take an application-specific action
image: ../Art/UIButtonBarCamera.jpg Camera Open an action sheet that displays a photo picker in camera mode
image: ../Art/UIButtonBarCompose.jpg Compose Open a new message view in edit mode
image: ../Art/UIButtonBarBookmarks.jpg Bookmarks Show application-specific bookmarks
image: ../Art/UIButtonBarSearch.jpg Search Display a search field
image: ../Art/UIButtonBarNew.jpg Add Create a new item
image: ../Art/UIButtonBarTrash.jpg Trash Delete current item
image: ../Art/UIButtonBarOrganize.jpg Organize Move or route an item to a destination within the application, such as a folder
image: ../Art/UIButtonBarReply.jpg Reply Send or route an item to another location
image: ../Art/UIButtonBarStop.jpg Stop Stop current process or task
image: ../Art/UIButtonBarRefresh.jpg Refresh Refresh contents (use only when necessary; otherwise, refresh automatically)
image: ../Art/UIButtonBarPlay.jpg Play Begin media playback or slides
image: ../Art/UIButtonBarFastForward.jpg FastForward Fast forward through media playback or slides
image: ../Art/UIButtonBarPause.jpg Pause Pause media playback or slides (note that this implies context preservation)
image: ../Art/UIButtonBarRewind.jpg Rewind Move backwards through media playback or slides

In addition to these buttons there are text-labelled system buttons. These are suitable for both navigation bars and toolbars. Available in the bordered style only.

Button Name Meaning
image: ../Art/UIBarSystemItemEdit.jpg Edit Enter an editing or content-manipulation mode
image: ../Art/UIBarSystemItemCancel.jpg Cancel Exit the editing or content-manipulation mode without saving changes
image: ../Art/UIBarSystemItemSave.jpg Save Save changes and, if appropriate, exit the editing or content-manipulation mode
image: ../Art/UIBarSystemItemDone.jpg Done Exit the current mode and save changes, if any
image: ../Art/UIBarButtonSystemItemUndo.jpg Undo Undo the most recent action
image: ../Art/UIBarButtonSystemItemRedo.jpg Redo Redo the most recent undone action

Page curl

In iOS 4 and later you can use the system-provided page curl button. The page curl button allows you to give users a way to see information underneath your current screen. See Maps for an example. The button can’t be used in a navigation bar.

Class reference: UIBarButtonSystemItemPageCurl in UIBarButtonItem.
Top

5.2 Standard icons for use in tab bars

Icon Name Meaning
image: ../Art/UITabBarBookmarks.jpg Bookmarks Show application-specific bookmarks
image: ../Art/UITabBarContacts.jpg Contacts Show contacts
image: ../Art/UITabBarDownloads.jpg Downloads Show downloads
image: ../Art/UITabBarFavorites.jpg Favorites Show user-determined favorites
image: ../Art/UITabBarFeatured.jpg Featured Show content featured by the application
image: ../Art/UITabBarHistory.jpg History Show history of user actions
image: ../Art/UITabBarMore.jpg More Show additional tab bar items
image: ../Art/UITabBarMostRecent.jpg MostRecent Show the most recent item
image: ../Art/UITabBarMostViewed.jpg MostViewed Show items most popular with all users
image: ../Art/UITabBarRecents.jpg Recents Show the items accessed by the user within an application-defined period
image: ../Art/UITabBarSearch.jpg Search Enter a search mode
image: ../Art/UITabBarTopRated.jpg TopRated Show the highest-rated items, as determined by the user

Class reference: UITabBarSystemItem in UITabBarItem.
Top

5.3 Standard buttons for use in table rows and other UI elements

Button Name Meaning
image: ../Art/UIButtonTypeContactAdd.jpg ContactAdd Display a people picker to add a contact to an item.
image: ../Art/UIButtonTypeDetailDisclosure.jpg DetailDisclosure Display a new view that contains details about the current item.
image: ../Art/UIButtonTypeInfoDark.jpg Info Flip to the back of the view to display configuration options or more information.Note that the Info button is also available as a light-colored “i” in a dark circle.

Class reference: UIButtonType in UIButton.

Although the detail disclosure button is usually used in table rows, it can be used elsewhere. See Detail Disclosure Button. Class reference: UITableViewCellAccessoryDetailDisclosureButton in UITableViewCell.
Top

And that’s it for UI Element Usage Guidelines. Jump to the next and final section, Part 7: Custom Icon and Image Creation Guidelines. The previous section was Part 5: Technology Usage.

About these ads