Human Interface guidelines for iOS developers iOS design themes • Clarity • Deference • Depth Design principles • Aesthetic Integrity • Consistency • Direct Manipulation • Feedback • Metaphors • User Control Interface Essentials The interface elements provided by UIKit fit into three main categories: • Bars. Tell people where they are in your app, provide navigation, and may contain buttons or other elements for initiating actions and communicating information. • Views. Contain the primary content people see in your app, such as text, graphics, animations, and interactive elements. Views can enable behaviors such as scrolling, insertion, deletion, and arrangement. • Controls. Initiate actions and convey information. Buttons, switches, text fields, and progress indicators are examples of controls. App Architecture Loading • Make it clear when loading is occurring. • Show content as soon as possible. • Educate or entertain people to mask loading time. • Customize loading screens. Modality Modality is a design technique that presents content in a temporary mode that’s separate from the user's previous current context and requires an explicit action to exit. Presenting content modally can: • Help people focus on a self-contained task or set of closely related options • Ensure that people receive and, if necessary, act on critical information Interactivity and responsiveness Navigation • Hierarchical Navigation • Flat Navigation • Content-Driven or Experience-Driven Navigation Onboarding • • • • • • • • • • Provide a launch screen. Launch in the appropriate orientation Get to the action quickly. Anticipate the need for help. Stick to the essentials in tutorials. Make learning fun and discoverable. Avoid asking for setup information up front. Avoid showing in-app licensing agreements and disclaimers. Don’t ask people to rate your app too quickly or too often Don’t encourage rebooting. Requesting Permission • Request personal data only when your app clearly needs it. • Explain why your app needs the information. • Request permission at launch only when necessary for your app to function. • Don’t request location information unnecessarily. • Use the system-provided alert. Settings • Infer what you can from the system. • Thoughtfully prioritize configuration options within your app. • Expose infrequently changed configuration options in Settings. • Provide shortcuts to Settings when appropriate. User Interaction 3D touch On devices running iOS 13 and later, people can use the touch and hold gesture to open a context menu, regardless of whether the device supports 3D Touch. On 3D Touch devices, the gesture can reveal the context menu more quickly. On the Home screen of a device running iOS 13 or later, apps can display a context menu when people touch and hold the app icon (on a 3D Touch device, people press briefly on the icon to see the menu). On a device running iOS 13 or later, people activate a Live Photo by resting their finger on the photo; on a 3D Touch device, people press briefly on a Live Photo. For design guidance, see Live Photos. Apple Pencil • • • • • • • • • Support expected behaviors. Provide a consistent Apple Pencil and finger experience. Let people make a mark the moment Apple Pencil touches the screen. Embrace expression. Use visual feedback to indicate a direct connection with content. Design a great left- and right-handed experience. Whenever possible, respect the user’s settings for the double-tap gesture. Give users a way to enable custom double-tap behavior if necessary. Never use the double-tap gesture to perform an action that modifies content. Audio • • • • Adjust levels automatically when necessary, but not the overall volume. Permit rerouting of audio when appropriate. Use the system-provided volume view to allow audio adjustments. Use the system’s sound services for short sounds and vibrations. • • • • • Categorize your audio if sound is essential to your app. Resume audio playback when appropriate after an interruption occurs. Let other apps know when your app finishes playing temporary audio. Respond to audio controls only when it makes sense. Don’t repurpose audio controls. Authentication • If you don't use Sign in with Apple, use Password AutoFill. • Delay sign-in as long as possible. • Explain the benefits of authentication and how to sign up for your service. • Minimize data entry by showing appropriate keyboards. • Never use the term passcode. Face ID and Touch ID • Whenever possible, support biometric authentication. • Present people with a single way to authenticate. • Initiate authentication only in response to user action. • Always identify the authentication method. • Reference authentication methods accurately. • In general, avoid offering a setting for opting in to biometric authentication within your app. • Don't use icons to identify system authentication features. Data Entry • When possible, present choices. • Get information from the system whenever possible. • Provide reasonable default values. • Enable advancement only after collecting required values. • Dynamically validate field values. • Require field values only when necessary. • Ease navigation through value lists. • Show a hint in a text field to help communicate purpose. Drag and Drop • Make drag and drop available for all selectable and editable content. • Allow content to be dropped on controls when applicable. • Use standard text views and text fields whenever possible. • For greater efficiency, consider supporting multi-item drag and drop. • Determine whether dragging and dropping content within your app should result in a move or a copy. • Whenever possible, let people undo drag and drop. • Consider enabling spring loading. Providing Dragged Content • Customize the drag item preview if necessary. • Whenever possible, offer multiple representations of dragged data, ordered from highest to lowest fidelity. • When applicable, present native versions of custom objects as the richest form of data. • Implement a file provider extension when the transfer of your app’s content is time consuming or resource intensive. • Supply progress information when your app’s content needs time to transfer. Accepting Dropped Content • Use visual cues to identify potential destinations and preview the effect of dropping content. • Automatically scroll the contents of a destination when appropriate. • Extract and display the richest possible representation of dropped content. • When applicable, extract only the relevant portion of dropped content. • Show placeholders in table views and collection views after content is dropped. • Show progress when dropped content needs time to transfer. • Provide feedback when dropped content initiates a process. • Inform the user when dropping fails. • Apply appropriate styling to dropped text. • Consider providing a subtle, intuitive way to opt out when the user can't immediately undo drag and drop. Feedback • Unobtrusively integrate status and other types of feedback into your interface. • Avoid unnecessary alerts. File Handling • Instill confidence that work is always preserved unless canceled or deleted. • Don't provide an option to create local-only files. • Implement an intuitive and graphical file browsing interface. • Let users preview files without leaving your app. • Consider sharing files with other apps. Gestures • As a general rule, use standard gestures. • Avoid using standard gestures to perform nonstandard actions. • Avoid interfering with systemwide screen-edge gestures. • Offer shortcut gestures to supplement, not replace, interface-based navigation and actions. • Use multifinger gestures to enhance the experience of some apps. Standard Gestures Tap, Swipe, Pinch, Drag, Flick, Double tap, Touch and hold, Shake, Rotate Designing with Haptics Build a clear, causal relationship between each haptic and its trigger. Use haptics in ways that complement other feedback in your app. Use haptics judiciously. Use haptics consistently. Avoid overusing a haptic. Be sure to test the haptics in your app. Make haptics optional. In a game, consider ways to use custom haptics to enhance the player's experience. • Be conscious that playing haptics might impact other user experiences. • • • • • • • • Creating Custom Haptic Patterns In iOS 13 and later, Core Haptics provides two basic building blocks that generate custom haptic patterns: • Transient events, which are brief, compact experiences that feel like taps or impulses, such as the experience of tapping the Flashlight button on the Home screen • Continuous events, which feel like sustained vibrations, such as the experience of the lasers effect in a message Near Field Communication An app can enable single- or multiple-object scanning when the app is active, and display a scanning sheet whenever the user is expected to scan something. Don't encourage people to make contact with physical objects. Use approachable terminology. Provide succinct instructional text for the scanning sheet. Support both background and in-app tag reading Use Don't use Scan the [object name]. Scan the NFC tag. Hold your iPhone near the [object name] to learn more about it. To use NFC scanning, tap your phone to the [object]. Undo and Redo • Briefly and precisely describe the operation to be undone or redone. • If you use the shake gesture for undo and redo, don’t use it for other actions • Provide undo and redo buttons sparingly. • Perform undo and redo operations in the current context only. System Capabilities Multitasking • Design an adaptable interface that looks great when running in split view. • Be prepared for interruptions, and be ready to resume. • Make sure your interface works with a double-high status bar. • Pause activity that requires attention or active participation. • Respond appropriately to external audio. • Finish user-initiated tasks in the background. • Use notifications sparingly. Multiple Windows on iPad Although in most cases you should use a primary window, whether to use an auxiliary window depends largely on the type of content people want to view when they open a new window in your app. Regardless of whether people open a new window by dragging an item to the side of the screen or by choosing an "Open Item in New Window" command, consider the following heuristic. • If the item is a folder of content, use a primary window. • If the item is an individual document or file, and people are likely to close the new window when they're finished interacting with the item, use an auxiliary window. Notifications Notification Behavior You can also enable visibility in Notification Center and on the lock screen, enable app icon badging, and choose one of these notification styles: • Banner. Appears at the top of the screen for a few seconds while the device is in use, then disappears. • Alert. Appears at the top of the screen while the device is in use and stays there until manually dismissed. Printing Your app can take advantage of the system’s built-in AirPrint technology to enable wireless printing of images, PDFs, and other content to compatible printers. While viewing printable content in an AirPrintenabled app, people typically tap an action button in a navigation bar or toolbar and then tap a Print action to display a printer view. This view provides a list of available printers and any customizable options, such as the number of copies and page range, and provides a button to initiate printing. Make printing discoverable. Enable printing only when it's possible to print. Provide printing options that add value. Quick Look Within your app, Quick Look lets people preview Keynote, Numbers, Pages, and PDF documents, as well as images and other types of files, even if your app doesn't support those file formats. Mail uses Quick Look for viewing attachments. After downloading an attachment, Mail shows the attachment’s icon and file name within the message. Tapping the icon displays a preview of the attachment. Ratings and Reviews • Ask for a rating only after the user has demonstrated engagement with your app • Don’t interrupt the user, especially when they’re performing a timesensitive or stressful task. • Don’t be a pest. Screenshots • A user can capture what’s displayed on their screen by taking a screenshot. Starting in iOS 11, screenshots briefly appear in preview form at the bottom of the screen after being taken. The user can swipe a preview to the side to dismiss it (a preview auto-dismisses after a few seconds if the user does nothing) or tap a preview for quick access to Instant Markup and sharing tools. Screenshots are saved into a Screenshots album in Photos. • Don’t change your app’s interface when local screenshots are taken. TV Providers Beginning and Resuming Playback The TV app automatically opens your app and sends it a notification when the user initiates content playback within your app. Ensure a smooth transition to your app. Show the expected content immediately. Don’t ask whether the user wants to resume playback. Make sure content plays for the correct user. Loading Content • If loading takes more than two seconds, consider showing a single, black loading screen with a centered activity spinner and no surrounding content. • Avoid loading screens whenever possible. • Start playback as soon as possible. • Design black loading screens. • Minimize content on loading screens. Exiting Playback The user remains in your app after exiting playback, rather than returning to the TV app. This experience shouldn’t cause the user to become disoriented. Show a contextually relevant screen. Be prepared for an immediate exit. Visual Design Adaptivity and Layout Auto Layout • Auto Layout is a development tool for constructing adaptive interfaces. Using Auto Layout, you can define rules (known as constraints) that govern the content in your app. For example, you can constrain a button so it’s always horizontally centered and positioned eight points below an image, regardless of the available screen space. Auto Layout automatically readjusts layouts according to the specified constraints when certain environmental variations (known as traits) are detected. You can set your app to dynamically adapt to a wide range of traits, including: Layout Guides and Safe Area Layout guides define rectangular regions that don’t actually appear visibly onscreen, but aid with the positioning, alignment, and spacing of content. The system includes predefined layout guides that make it easy to apply standard margins around content and restrict the width of text for optimal readability. You can also define custom layout guides. General Layout Considerations • • • • • • • • • Ensure that primary content is clear at its default size. Maintain an overall consistent appearance throughout your app. Use visual weight and balance to convey importance. Use alignment to ease scanning and to communicate organization and hierarchy. If possible, support both portrait and landscape orientations. Be prepared for text-size changes. Provide ample touch targets for interactive elements. Preview your app on multiple devices. Apply readability margins when displaying text on larger devices. Adapting to Changes in Context • Maintain focus on the current content during context changes. • Avoid gratuitous layout changes. • If it’s essential that your app run in a single orientation, support both variants. • Customize your app’s response to rotation according to context. • Make sure your app works on iPad, not just on iPhone. • Be mindful of aspect ratio differences when reusing existing artwork. Designing a Full-Screen Experience • Extend visual elements to fill the screen. • Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. • Inset essential content to prevent clipping. • Inset full-width buttons. • Don't mask or call special attention to key display features. • Be mindful of the status bar height. • If your app currently hides the status bar, reconsider that decision for fullscreen iPhones. • Allow auto-hiding of the indicator for accessing the Home screen sparingly. Animation • Use animation and motion effects judiciously. • Strive for realism and credibility. • Use consistent animation. • Make animations optional. Branding • Incorporate refined, unobtrusive branding. • Don’t let branding get in the way of great app design. • Defer to content over branding. • Resist the temptation to display your logo throughout your app. • Adhere to Apple's trademark guidelines. System Colors • Don't hard-code system color values in your app. In addition to tint colors, iOS also provides semantically defined system colors for use in background areas and for foreground content, such as labels, separators, and fill. These colors automatically adapt to both light and dark UI modes. Don’t redefine the semantic meanings of dynamic system colors. Don't try to replicate dynamic system colors. Apply color profiles to your images.(sRGB) Use wide color to enhance the visual experience on compatible displays. Provide color space-specific image and color variations when the experience calls for it. Preview your app’s colors on actual sRGB and wide color displays. Dark Mode • Focus on your content. • Test your design in both light and dark appearances. • Ensure that your content remains comfortably legible in Dark Mode when you adjust the contrast and transparency accessibility settings. • Use colors that adapt to the current appearance. • Ensure sufficient color contrast in all appearances. • Soften the color of white backgrounds. • Use SF Symbols wherever possible. • Design individual glyphs for light and dark appearances when necessary. • Make sure full-color images and icons look good. • Use system views to draw text fields and text views. Materials • Be guided by the materials the system uses. • Take advantage of the system-provided colors for text, fills, glyphs, and separators. • When possible, use SF Symbols. System-Defined Materials and Vibrancy – NEED TO CLARIFY Terminology • Use familiar, understandable words and phrases. • Keep interface text clear and concise. • Identify interactive elements appropriately. • Avoid language that might sound patronizing • Strive for an informal, friendly tone • Be careful when using humor. • Use relevant and consistent language and imagery • Refer to dates accurately Typography • Use built-in text styles whenever possible. • Emphasize important information. • Prioritize content when responding to text-size changes. • Use the correct font variant in interface mockups. • Minimize the number of typefaces you use in your interface. • Make sure custom fonts are legible • Implement accessibility features for custom fonts Video The system-provided video player offers two viewing modes: full-screen (aspect fill) and fit-to-screen (aspect). By default, the system selects a viewing mode based on a video's aspect ratio, and the user can switch modes during playback. Full-screen (aspect-fill) viewing mode. Fit-to-screen (aspect) viewing mode. Make sure custom video players behave as expected. Always display video content at its original aspect ratio. Image Size and Resolution • Supply high-resolution images for all artwork in your app, for all devices your app supports. • Use an 8px-by-8px grid. • Produce artwork in the appropriate format. • Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color. • Optimize JPEG files to find a balance between size and quality. • Provide alternative text labels for images and icons. App Icon Embrace simplicity. Provide a single focus point. Design a recognizable icon. Keep the background simple and avoid transparency. Use words only when they’re essential or part of a logo. Don’t include photos, screenshots, or interface elements. Don’t use replicas of Apple hardware products. Don’t place your app icon throughout the interface. Test your icon against different wallpapers. Keep icon corners square. Don’t add an overlay or border to your Settings icon. Custom Icons (iOS 12 and Earlier) • Create recognizable, highly-simplified designs. • Design icons as glyphs. • Prepare glyphs with a scale factor of @2x and save them as PDFs. • Keep your icons consistent. • Make sure icons are legible. • Use color to communicate selected and deselected states. • Avoid including text in an icon. • Don’t use replicas of Apple hardware products. • Provide alternative text labels for icons. Launch Screen • Design a launch screen that’s nearly identical to the first screen of your app • Avoid including text on your launch screen. • Downplay launch. • Don’t advertise. Bars Navigation Bars Navigation Bar Titles: - Consider showing the title of the current view in the navigation bar. - Use a large title when you want to provide extra emphasis on context. - Consider hiding the border of a large-title navigation bar. Navigation Bars Navigation Bar Controls - Avoid crowding a navigation bar with too many controls. - Use the standard back button. - Don’t include multisegment breadcrumb paths. - Give text-titled buttons enough room. - Consider using a segmented control in a navigation bar to flatten your app's information hierarchy. Search Bars • Use a search bar instead of a text field to implement search. • Enable the Clear button. • Enable the Cancel button when appropriate. • If necessary, provide hints and context in a search bar • Consider providing helpful shortcuts and other content below a search bar. Scope Bars • A scope bar can be added to a search bar to let people refine the scope of a search. • Favor improving search results over including a scope bar Status Bars • Use the system-provided status bar. • Coordinate the status bar style with your app design. • Obscure content under the status bar. • Consider temporarily hiding the status bar when displaying fullscreen media. • Avoid permanently hiding the status bar. • Use the status bar to denote network activity. Tab Bars • In general, use a tab bar to organize information at the app level • Use a tab bar strictly for navigation • Avoid having too many tabs • Don't hide a tab bar when people navigate to different areas in your app • Don’t remove or disable a tab when its function is unavailable • Always switch contexts in the attached view • Make sure tab bar icons are visually consistent and balanced • Use badging to communicate unobtrusively Toolbars • Provide relevant toolbar buttons • Consider whether icons or text-titled buttons are right for your app • Avoid using a segmented control in a toolbar • Give text-titled buttons enough room Views Action Sheets • Provide a Cancel button if it adds clarity. • Make destructive choices prominent. • Avoid enabling scrolling in an action sheet. Activity Views • Design simple template images to represent your custom activities. • Craft activity titles that succinctly describe your tasks. • Make sure activities are appropriate for the current context. • Use the Action button to display an activity view. Alerts Titles • Minimize alerts. • Test the appearance of alerts in both orientations. • Write short, descriptive, multiword alert titles. • If you must provide a message, write short, complete sentences. • Avoid sounding accusatory, judgmental, or insulting. • Avoid explaining the alert buttons. Buttons • Generally, use two-button alerts. • Give alert buttons succinct, logical titles. • Place buttons where people expect them. (cancel button on the left) • Label cancellation buttons appropriately. • Identify destructive buttons. • Allow people to cancel alerts by exiting to the Home screen. Collections • Avoid creating radical new designs when a standard row or grid layout is sufficient. • Consider using a table instead of a collection for text. • Use caution when making dynamic layout changes. Image Views • If possible, make sure all images in an animated sequence are consistently sized. Ideally, images should be prescaled to fit the view so the system doesn't have to do any scaling. If the system must perform scaling, it's easiest to achieve the desired results when all images are the same size and shape. Pages • If appropriate, implement a way to navigate nonlinearly. (for example, to random inconsistent pages ) Popovers Avoid displaying popovers on iPhones (generally it used on iPads) Use a Close button for confirmation and guidance only. Always save work when automatically closing a nonmodal popover. Position popovers appropriately onscreen. Show one popover at a time. Don’t show another view over a popover. (except for an alert) When possible, let users close one popover and open another with a single tap. • Avoid making a popover too big. • Make sure custom popovers look like popovers. • Provide a smooth transition when changing the size of a popover. • • • • • • • Scroll Views • Support zoom behavior appropriately. • Consider showing a page control element when a scroll view is in paging mode. • Don’t place a scroll view inside of another scroll view. • In general, display one scroll view at a time. Split Views • Choose a split-view layout that works well with your content. • Persistently highlight the active selection in the primary pane. • In general, restrict navigation to one side of a split view. • Provide multiple ways to access a hidden primary pane Tables iOS provides three styles of table: plain, grouped, and inset grouped. Table rows Text Views • Keep text legible • Show the appropriate keyboard type. Web Views • Enable forward and back navigation when appropriate. • Avoid using a web view to build a web browser. Controls Buttons Context Menus • Adopt context menus consistently. • Include only the most commonly used commands that apply to the item. • Use submenus to manage complexity. • Keep submenus to one level. • Place the most frequently used items at the top of the menu. • Use separators to group related menu items. • Avoid providing a context menu and an edit menu for the same item. • Avoid providing an action button that opens the item preview. Edit Menus • Show appropriate commands for the current context. • Adjust placement of edit options, if necessary. • Don’t implement other controls with the same functionality as the edit menu. • Allow potentially useful noneditable text to be selected and copied. • Don’t add edit options to a button. • Make edit operations undoable. • Expand edit options with useful custom commands. • Show custom commands after the system-provided ones. • Minimize the number of custom commands. • Keep custom command names short. Labels • Keep labels legible Page Controls • Don’t use a page control with hierarchical pages. • Don’t display too many pages. • Center page controls at the bottom of the screen.
