Use a picker when you want users to choose from 2-3 sets of interconnected values, such as the day, month, and year of an appointment or the hour and minute for a timer. You can also use a picker to simplify a complex UI and reduce the number of steps in a workflow by allowing users to select multiple values in one step.
Don't use when
Users only need to select from one set of values. Use a drop-down list instead.
Use a drop-down list when you want users to choose a single value from a larger set. Drop-down lists can make complex screens more compact and streamlined by collapsing many options into one element.
Don't use when
Users need to choose from 2-3 sets of interconnected values, such as the date and time of an appointment. Use a picker instead.
Don't use "Yes" and "No" as list values. Use a check box instead, and rephrase the option to describe the action.
For the default value, use the value users are most likely to choose.
A list item presents content in a list, usually as an entry point to the next step in the navigation hierarchy. Lists can be displayed in a stacked or grid layout. To read more about lists, see Screen views.
If you use images, start populating the list as soon as possible so that items can appear before all images have loaded.
Dividers and headers
Use dividers and headers to create visual hierarchy and separate groups of items that belong together.
Use a divider as a simple visual barrier, to separate items in a container or list.
Use a header to separate sections in a list. A header contains one or two strings to label the section.
Use a button to initiate an action.
Make the default button the one that users are more likely to use but don't make a button for a destructive action the default.
Use single-word labels where possible.
Use verbs that describe the associated action, such as "Cancel," "Delete," or "Save."
Text fields and text areas
Use a text field to let users input a single line of text (such as a contact name or a password).
Use a text area to let users input several lines of text (such as a comment or a message).
Include hint text in fields so that you need fewer labels. You might need a label if the field has a default value or if the field's description is too long for hint text.
Try to reduce the text users need to type. Let users choose items from pickers when you can. Try to store and display information that users enter so they don't have to type it repeatedly.
Only use word prediction in text fields with text that is likely to be in the dictionary (not in password, phone number, or name fields). The predictions might get in the way in these fields.
Activity and progress indicators
Use an activity and progress indicators to show users that your app is working and to show them the process and its progress.
Use an activity indicator when you want to show that your app is working, but you can't determine how long it will take.
Use a progress indicator when you can determine how long it will take.
Learn more about progress and activity indicators.
Always indicate progress when a process takes more than 3 seconds to complete.
If list content is being retrieved through the cloud (for example, third party pictures), populate the list as content is received so users can interact with the content that's available.
Incorporate an inline solution if you can.
For progress indicators, show users the progress state (for example, "Uploading 5 of 7 pictures," "Uploading 2.4/4Mb," or "4:24").
Check boxes, radio buttons, and toggle switches
Use check boxes, radio buttons, and toggle switches to allow users to select options.
Use check boxes when users can select multiple items or options.
Use radio buttons when users can choose between more than two mutually exclusive options.
Use a toggle switch when users are choosing between two distinct options, such as Off and On. You can also use a toggle switch if you want to make a setting harder for users to change accidentally.
Best practices for check boxes and radio buttons
Create a touch target area for the whole row and label. Check boxes and radio buttons have small visible areas.
Use positive labels where possible. For example, use "Show" instead of "Hide."
Best practice for toggle switches
Use terms that identify the state of the option, and not the action required to change the state. For example, "On" indicates the current state, while "Turn on" describes an action.
Use a slider to control settings with a wide range or to show a preview of the change (for settings like volume level or screen brightness). You can also use a slider for playing back media files.
Users drag the slider from left to right, or double-tap the slider to jump to predefined increments.
Combine sliders with images or strings that explain the context, such as the progress in a media file or the level of a filter that is being applied to a picture.