iOS control guidelines

iOS specific controls are inputs that are part of the iPhone or iPad operating software. These controls are optimized for mobile, meaning that users can more easily navigate and input information on smaller screens.

Keyboard

A keyboard allows the user to input plain text and rich text (text including basic formatting, emojis, and images).

Most users prefer to use the keyboard while their phone is in a vertical position, which allows them to see the rest of the screen. This is helpful to ensure that they are accurately replying to a previous message or so that they can see the rest of the form. However, a few users prefer to type with their phone in the horizontal position, which makes the keyboard bigger.

---

iOS picker

Many users experience the following issues when trying to use dropdowns on mobile devices:

• Their fingertips are too large to accurately hit the option they are trying to select.
• Depending on the mobile website, the dropdown may be too far from the user’s thumb.
• While scrolling through the options in a dropdown, the user’s thumb may block the options from their view.

iOS pickers are a solution to these user experience issues. They are big enough that users can scroll through and read the list, and they are positioned such that users can comfortably use their thumbs without obscuring the list items.

Another feature of the iOS picker is that it can contain multiple dropdowns or selectors in one display. This is very useful for selecting time, dates, birthdays, etc.

---

iOS menu

The iOS menu, or iOS settings menu, is a collection of links and settings laid out in a hierarchical structure that allows for easy navigation. Some links also give you a preview of the currently selected setting.

Toggle

A toggle allows the user to turn a setting on or off by tapping it. An iOS toggle is set to the right-hand side of the phone, making it easier for right-handed users to interact with it.

Submenu on a different screen

The iOS menu is made up of multiple submenus that allow the user to drill down to what they are looking for. Depending on the type of setting or submenu, they may behave or look differently.

Standard submenu

A standard submenu link contains the submenu name as well as an arrow (sometimes called a chevron). It sometimes also has an icon on the right, depending on how high up in the hierarchy it is. A submenu will usually have settings (including radio buttons and toggles) as well as more submenu links.

Standard submenu with selection preview

Like the standard submenu link, this type of link will take you to a new screen. However, it has an additional feature: it gives the user a preview of the main setting in the submenu it opens. In the example below, the on/off state of Bluetooth is more important than what is currently connected, so that is what is previewed.

Single selector with selection preview

While this link can look like a link with a settings preview, it’s actually just a simple preview for a single selector or radio button. This preview allows the user to know what option is currently selected without having to open the full list of options.

Information icon and selection preview

Sometimes submenus are hidden behind an info or “i” icon. When you tap the icon, it will reveal more advanced settings and options. In the example below, you can also see a checkmark on the left indicating what is currently selected.

Two links in one row

Sometimes text can work like a toggle, as we can see in the example below. If you tap the words “Not Connected”, it will trigger an event to try to connect the earbuds. If you tap the info icon, it will take you to a submenu with more information.

System links

Unlike submenu links, system links usually bring up overlay actions, the main types being buttons and forms. Sometimes, a system link can also open up a link in your default browser app.

Overlay buttons

For actions that require the system to delete, disconnect, or forget, it’s always advisable to have a confirmation step. When in the context of an iOS menu, it will usually bring up button overlays at the bottom of the screen, with the lowest one being “cancel.”

Overlay form

For actions that require adding something, it will usually bring up a form overlay.

Website link

For “Learn more” actions that require a more in-depth description, you can have a link to a website. When a user taps the link, it will open up the link in the device’s default browser app.

Tables

iOS menus don’t have to always be settings and submenus; they can also be used to display information. Due to its design, an iOS menu can work as a table with the “label” column on the left and the variables in the right-aligned column.

---