Safari Developer Library

Developer

iOS 7 Design Resources iOS Human Interface Guidelines

Download PDF

Controls

Activity Indicator

An activity indicator shows that a task or process is progressing (shown below with text labels).

image: ../Art/activity_indicator_2x.png

An activity indicator:

  • Spins while a task is progressing and disappears when the task completes

  • Doesn’t allow user interaction

Use an activity indicator in a toolbar or a main view to show that processing is occurring, without suggesting when it will finish.

Don’t display a stationary activity indicator. Users associate a stationary activity indicator with a stalled process.

Use an activity indicator to reassure users that their task or process hasn’t stalled. Sometimes it’s more important to simply reassure users than to suggest when processing will finish.

Customize an activity indicator to harmonize with the view it’s in. If appropriate, coordinate the size and color of an activity indicator with the background of the view it’s in.

Contact Add Button

A Contact Add button lets the user add an existing contact to a text field or other text-based view.

image: ../Art/contact_add_7_2x.png

A Contact Add button:

  • Displays a list of the user’s contacts

  • Helps users add a contact to the view that contains the Contact Add button

Use a Contact Add button to give users an easy way to access a contact without using the keyboard. For example, users can tap the Contact Add button in the To field of the Mail compose view instead of typing a recipient’s name.

Because the Contact Add button functions as an alternative to typing contact information, it’s not appropriate to use the button in a view that doesn’t accept keyboard input.

Date Picker

A date picker displays components of date and time, such as hours, minutes, days, and years.

image: ../Art/date_picker_2x.png

A date picker:

  • Displays up to four independent wheels, each of which displays values in a single category, such as month or hour

  • Uses dark text to display the current value in the middle of the view

  • Can’t be resized (the size of a date picker is the same size as the iPhone keyboard)

  • Has four modes, each of which displays wheels containing a set of different values:

    • Date and time. The date and time mode (the default mode) displays wheels for the calendar date, hour, and minute values, and an optional wheel for the AM/PM designation.

    • Time. The time mode displays wheels for the hour and minute values, and an optional wheel for the AM/PM designation.

    • Date. The date mode displays wheels for the month, day, and year values.

    • Countdown timer. The countdown timer mode displays wheels for the hour and minute. You can specify the total duration of a countdown, up to a maximum of 23 hours and 59 minutes.

Use a date picker to let users pick—instead of type—a date or time value that consists of multiple parts, such as the day, month, and year.

As much as possible, display a date picker inline with the content. It’s best when users can avoid navigating to a different view to use a date picker. On iPad, a date picker can appear within a popover or inline with content.

If it makes sense in your app, change the interval in the minutes wheel. By default, a minutes wheel displays 60 values (0 to 59). If you need to display a coarser granularity of choices, you can set a minutes wheel to display a larger minute interval, as long as the interval divides evenly into 60. For example, you might want to display the quarter-hour intervals 0, 15, 30, and 45.

Detail Disclosure Button

A Detail Disclosure button reveals additional details or functionality related to an item.

image: ../Art/detail_disclosure_2x.png

A Detail Disclosure button reveals a separate view that contains additional information or functionality related to a specific item.

When a Detail Disclosure button appears in a table row, tapping elsewhere in the row doesn’t activate the Detail Disclosure button; instead, it selects the row item or results in app-defined behavior.

Typically, you use a Detail Disclosure button in a table view to give users a way to see more details or functionality related to a list item. However, you can also use this element in other types of views to give users a way to see more information or functionality related to an item in that view.

Info Button

An Info button reveals configuration details about an app, sometimes on the back of the current view.

image: ../Art/info_button_2x.png

iOS includes two styles of Info button: a dark-colored button that looks good on light content and a light-colored button that looks good on dark content.

Use an Info button to reveal configuration details or options about an app. You can use the style of Info button that coordinates best with the UI of your app.

Label

A label displays static text.

image: ../Art/labels_2x.png

A label:

  • Displays any amount of static text

  • Doesn’t allow user interaction except, potentially, to copy the text

Use a label to name or describe parts of your UI or to provide short messages to the user. A label is best suited for displaying a relatively small amount of text.

Take care to make your labels legible. It’s best to support Dynamic Type and use the UIFont method preferredFontForTextStyle to get the text for display in a label. If you choose to use custom fonts, don’t sacrifice clarity for fancy lettering or showy colors. (For guidelines about using text in an app, see Color and Typography; to learn more about Dynamic Type, see “Text Styles” in Text, Web, and Editing Programming Guide for iOS.)

Network Activity Indicator

A network activity indicator appears in the status bar and shows that network activity is occurring.

image: ../Art/network_activity_indicator_7_2x.png

The network activity indicator:

  • Spins in the status bar while network activity proceeds and disappears when network activity stops

  • Doesn’t allow user interaction

Display the network activity indicator to provide feedback when your app accesses the network for more than a couple of seconds. If the operation finishes sooner than that, you don’t have to show the network activity indicator, because the indicator is likely to disappear before users notice its presence.

Page Control

A page control indicates the number of open views and which one is currently visible (shown here in Weather).

image: ../Art/page_control_weather_2x.png

A page control:

  • Displays an indicator dot for each open view in an app (from left to right, the dots represent the order in which the views were opened)

  • By default, uses an opaque dot to represent the currently visible view and translucent dots to represent all other open views

  • Doesn’t allow users to visit views nonsequentially

  • Doesn’t shrink or squeeze together dots as more views are opened (if you try to display more dots than will fit in the view, the dots are clipped)

  • Doesn’t enable navigation between views by default; you must implement view-to-view navigation and update the page control’s state appropriately

Use a page control when it’s more important to show users how many views are open than it is to help them choose a specific view. A page control is designed for apps in which each view is a peer of every other view.

Don’t use a page control to display views in a hierarchy or other complex arrangement. A page control doesn’t show how views are related to each other and it doesn’t indicate which view corresponds to each dot, so it can’t help users navigate to a specific view.

Avoid displaying too many dots. More than about 10 dots are hard for users to count at a glance and more than about 20 open views are time consuming to visit in sequence. If users can open more than about 20 peer views in your app, consider displaying the views in a different arrangement that provides more information about the views and enables nonsequential navigation.

Vertically center a page control between an open view’s bottom edge and the screen’s bottom edge. In this position, a page control is always visible without getting in users’ way.

Picker

A picker displays a set of values from which a user picks one.

image: ../Art/picker_2x.png

A picker:

  • Is a generic version of the date picker (for more information about the date picker, see Date Picker)

  • Displays one or more wheels, each of which contains a list of values

  • Uses dark text to display the current value in the middle of the view

  • Can’t be resized (the size of a picker is the same size as the iPhone keyboard)

Use a picker to make it easy for people to choose from a set of values.

In general, use a picker when users are familiar with the entire set of values. Because many of the values are hidden when the wheel is stationary, it’s best when users can predict what the values are. If you need to provide a large set of choices that aren’t well known to your users, a picker might not be the appropriate control.

As much as possible, display a picker inline with the content. It’s best when users can avoid navigating to a different view to use a picker.

Consider using a table view, instead of a picker, if you need to display a very large number of values. This is because the greater height of a table view makes scrolling faster.

Progress View

A progress view shows the progress of a task or process that has a known duration (shown here with the Mail toolbar).

image: ../Art/progress_view_2x.png

A progress view:

  • Consists of a track that fills from left to right as the task or process proceeds

  • Doesn’t allow user interaction

iOS defines two styles of progress view:

  • Default. The default style includes an unfilled track appearance so that it can stand alone in a content area.

    image: ../Art/progress_view_default_2x.png

  • Bar. The bar style doesn’t include the unfilled track appearance because it’s intended to display with a bar, such as a navigation bar or a toolbar.

    image: ../Art/progress_view_bar_2x.png

Use a progress view to give feedback on a task that has a well-defined duration, especially when it’s important to indicate approximately how long the task will take.

If appropriate, coordinate the appearance of a progress view with the style of your app. By customizing a progress view, you can specify, for example, a custom tint or image for both the track and the fill of a progress view.

Refresh Control

A refresh control performs a user-initiated content refresh—typically in a table (shown here above the mailbox list).

image: ../Art/refresh_control_2x.png

A refresh control:

  • Looks similar to an activity indicator

  • Can display a title

  • Is hidden by default until the user initiates a refresh action by dragging down from the top edge of a table

Use a refresh control to give users a consistent way to tell a table or other view to update its contents immediately, without waiting for the next automatic update.

Don’t stop performing automatic content updates just because you provide a refresh control. Even though users appreciate being able to request that an update be performed now, they still appreciate content that refreshes itself automatically. If you rely on users to initiate all refreshes, users who are unaware of the refresh control are likely to wonder why your app displays stale data. In general, you want to give users the option to refresh contents immediately; you don’t want to make users responsible for every update.

Supply a short title only if it adds value. In particular, don’t use the title to describe how to use the refresh control.

Rounded Rectangle Button

The rounded rectangle button has been deprecated in iOS 7. Instead, use the system button—that is, a UIButton of type UIButtonTypeSystem. For guidelines, see System Button.

Segmented Control

A segmented control is a linear set of segments, each of which functions as a button that can display a different view.

image: ../Art/segmented_control.jpg

A segmented control:

  • Consists of two or more segments whose widths are proportional, based on the total number of segments

  • Can display text or images

Use a segmented control to offer choices that are closely related but mutually exclusive.

Make sure that each segment is easy to tap. To maintain a comfortable hit region of 44 x 44 points for each segment, limit the number of segments. On iPhone, a segmented control should have five or fewer segments.

As much as possible, make the size of each segment’s contents consistent. Because all segments in a segmented control have equal width, it doesn’t look good if the content fills some segments, but not others.

Avoid mixing text and images in a single segmented control. A segmented control can contain text or images. An individual segment can contain either text or an image, but not both. In general, it’s best to avoid putting text in some segments and images in other segments of a single segmented control.

If necessary, adjust the positioning of content in a customized segmented control. If you customize the background appearance of a segmented control, make sure that the automatic centering of the control’s content still looks good. Use the bar metrics APIs to adjust the positioning of the content inside a segmented control (to learn more about specifying bar metrics, see the appearance-customization APIs described in UISegmentedControl).

Slider

A slider allows users to make adjustments to a value or process throughout a range of allowed values (shown here with custom images on the left and the right).

image: ../Art/slider_2x.png

A slider:

  • Consists of a horizontal track and a thumb (a circular control that users can slide)

  • Can include optional images that convey the meaning of the right and left values

  • Fills the portion of the track between the minimum value (typically on the left) and the thumb

Use a slider to give users fine-grained control over values they can choose or over the operation of the current process.

If it adds value, create custom appearances for a slider. For example, you can:

  • Define the appearance of the thumb, so that users can see at a glance whether the slider is active

  • Supply images to appear at both ends of the slider to help users understand what the slider does

    Typically, these custom images correspond to the minimum and maximum values of the value range that the slider controls. A slider that controls image size, for example, could display a very small image at the minimum end and a very large image at the maximum end.

  • Define a different appearance for the track, depending on which side of the thumb it is on and which state the control is in

Don’t use a slider to display a volume control. If you need to display a volume slider, use the system provided volume slider available when you use the MPVolumeView class. Note that when the currently active audio output device doesn’t support volume control, the volume slider is replaced by the appropriate device name.

Stepper

A stepper increases or decreases a value by a constant amount.

image: ../Art/stepper.jpg

A stepper:

  • Is a two-segment control in which one segment displays a plus symbol and the other segment displays a minus symbol by default

  • Supports custom images

  • Doesn’t display the value that the user changes

Use a stepper when users might need to make small adjustments to a value.

Avoid using a stepper when users are likely to make large changes to a value. It makes sense to use a stepper to set the number of copies in the Printer Options action sheet, because users rarely change this value by very much. On the other hand, it wouldn’t make sense to use a stepper to help users choose a page range, because even a reasonable page range would require a lot of taps.

Make it obvious which value the stepper affects. A stepper doesn’t display any values, so you need to make sure that users know which value they’re changing when they use a stepper.

Switch

A switch presents two mutually exclusive choices or states.

On

image: ../Art/switch_on_2x.png

Off

image: ../Art/switch_off_2x.png

A switch:

  • Indicates the binary state of an item

  • Is used in table views only

Use a switch in a table row to give users a way to specify one of two options, such as yes/no or on/off, that govern the state of an item.

You can use a switch control to change the state of other UI elements in the view. Depending on the choice users make, new list items might appear or disappear, or list items might become active or inactive.

System Button

A system button performs an app-specific action.

image: ../Art/system_button_2x.png

A system button:

  • Has no border or background appearance by default

  • Can contain an icon or a text title

  • Supports custom decoration, such as a border or background image (to add a custom appearance, use a button of type UIButtonTypeCustom and supply a custom background image)

Use a system button to initiate an action. When you supply a title for a system button, follow this approach:

  • Use a verb or verb phrase to describe the action the button performs. An action-specific title shows users that the button is interactive and tells them what will happen when they tap it.

  • Use title-style capitalization. Capitalize every word except articles, coordinating conjunctions, and prepositions of four or fewer letters.

  • Avoid creating a title that is too long. Overly long text gets truncated, which can make it difficult for users to understand it.

image: ../Art/phone_bordered_buttons_2x.png

If appropriate, add a border or background appearance to a system button in a content region. Most of the time, you can avoid adding ornamentation to a button by crafting a clear call-to-action title, defining a tint, and providing contextual clues. In some content areas, however, it can be appropriate to focus attention on a button by adding a border or background appearance.

In Phone, for example, the bordered number keys reinforce the mental model of making a call and the background of the Call button gives users an eye-catching target that’s easy to hit.

Text Field

A text field accepts a single line of user input (shown here with a purpose description and placeholder text).

image: ../Art/text_field_2x.png

A text field:

  • Is a fixed-height field with rounded corners

  • Automatically displays a keyboard when users tap within it

  • Can include system provided buttons, such as the Bookmarks button

  • Can display text that uses multiple styles (to learn more about this, see UITextView)

Use a text field to get a small amount of information from the user.

Customize a text field if it helps users understand how they should use it. For example, you can display custom images in the left or right sides of the text field, or you can add a system-provided button, such as the Bookmarks button. In general, you should use the left end of a text field to indicate its purpose and the right end to indicate the presence of additional features, such as bookmarks.

Display the Clear button in the right end of a text field when appropriate. When this element is present, tapping it clears the contents of the text field, regardless of any other image you might display over it.

Display a hint in the text field if it helps users understand its purpose. A text field can display placeholder text—such as Name (or Address)—when there is no other text in the field.

Specify a keyboard type that’s appropriate for the type of content you expect users to enter. For example, you might want to make it easy for users to enter a URL, a PIN, or a phone number. iOS provides several different keyboard types, each designed to facilitate a different type of input. To learn about the keyboard types that are available, see UIKeyboardType in UITextInputTraits Protocol Reference. To learn more about managing the keyboard in your app, read “Managing the Keyboard” in iPhone Application Programming Guide. Note that you have no control over the keyboard’s input method and layout, because these attributes are determined by the user’s language settings.