iOS Human Interface Guidelines for iOS-Platforms Mohammad Khalil, Mar$n Ebner Presentation & Content are based on: h,ps://developer.apple.com/library/ios/documenta;on/ UserExperience/Conceptual/MobileHIG/index.html * All images are CC0 from pixabay or shareable from source This work is licensed under a Crea;ve Commons A,ribu;on 4.0 Interna;onal License.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
• Place a standard banner view at or near the bottom of the screen.
• Don’t allow it to scroll off
• Place a medium banner where it doesn’t interfere with the content.
• Don’t allow it to scroll off
• Present full screen banner when there are context change or breaks.
Accessing User Data
“It allow apps to access the data people store in Contacts, Calendar, Reminders, GPS…etc.”
Make the statement clear, and understand why they’re being asked
Ask for permission at startup if your app can’t perform it on it’s own
Sound
• Ring/Silent (avoid sound if it is not explicitly set )
• Users use the device’s volume buttons to control all sounds their devices can play
• Users use headsets to hear sounds privately.
• Use the system-provided volume slider
Scenario
Game: Provide soundtrack, gameplay effects VoIP app: The ability to accept audio input
“You need to know how users expect sound to behave.”
VoiceOver “VoiceOver increases accessibility for blind and low-vision users, and for users with certain learning challenges.”
• Making your iOS app accessible to VoiceOver users can increase your user base and help you enter new markets.
• The more custom your UI is, the more
custom information you need to provide so that VoiceOver can accurately describe your app.
h,p://nd
l.mgccw
.com
/mu3
/app
/20141015/00/1413314384022/ss/3_sm
all.png
Routing
• Focus on the route
• Provide information for every step of a route
• Enrich map with additional info
• Respect user’s transit options
• Use push notification
Undo & Redo
“Users initiate an Undo operation by shaking the device, which displays an alert to undo what they just typed”
• Supply brief descriptive phrase to tell users what they’re undoing or redoing.
• Avoid overloading the shake gesture
UI Elements UI Elements UI Elements
Bars • Status Bar
• Navigation Bar
• Toolbar
• Tab Bar
• Search Bar
• Scope Bar
Status Bar
Default (dark) content Light content
• Do not create a custom status bar.
• Avoid putting content behind status bar.
• Think twice before hiding status bar
• It is an important bar, which includes battery, signal, H+,…etc.
“The status bar displays important information about the device and the current environment”
Navigation Bar (1/2) “A navigation bar enables navigation through an information hierarchy.”
• The navigation bar title should change to the new level’s title.
• A back button should appear in the left end of the bar.
• Make sure text-titled buttons have enough space
• Make sure customized back button looks and behave like a back button.
Navigation Bar (2/2)
• Consider hiding the navigation bar when users want to focus on the content.
• Consider a prompt to clarify what users can do in the current screen
Visible Hidden
Toolbar “A toolbar contains controls that perform actions related to objects in the screen or view.”
• Usually appears at the bottom on iPhone and can appear at the top of iPad screen.
• Include the most frequent used commands in the tool bar.
• Use icons if you need to put more than three items.
• Make sure text-titled buttons have enough space between them.
Toolbar & Navigation Bar Buttons
+ you can use the Info button in toolbar
Tab Bar “A tab bar gives people the ability to switch between different subtasks, views, or modes in an app.”
• Always appears at the bottom edge of the screen.
• Use tab bar to organize information at the app level.
• Avoid crowding the tab bar with too many tabs.
• “More” tab will show if you use more than 4 tabs.
• Don’t use a tab bar to give users control, instead use toolbar.
Common icons in tab bar
Search Bar “A search bar accepts text from users, which can be used as input for a search. ”
With different features…
Scope Bar
Only available with a search bar…
• it’s even better to improve search results so that users don’t need to scope their search
Content Views
• Activity
• Collection View
• Map View
• Page View Controller
• Web View
• Text View
• Scroll View
• Split View Controller
• Table View
• Popover
Activity
“ An activity represents a system-provided or custom service ”
• Each activity is represented by an icon and a title
• Use black & white with appropriate alpha transparency
• Make a brief title
• Give users access to a custom service
Collection View
“A collection view manages an ordered collection of items and presents them in a customizable layout.”
• Display set of items
• Make it easy for people to select an item (use 44x44 image size)
• Don’t choose collection view when table view is a better choice.
Map View
“A map view presents geographical data and supports most of the functionality provided by the built-in Maps app.”
• In general, let user interact with the map • Use the standard pin colors: ü Use red for a destination point ü Use green for a starting point ü Use purple for a user-specified point
Page View Controller
“A page view controller uses one of two styles to manage transitions through multipage content—scrolling or page-curl”
• Use a page view controller to present a text of a story
• Use a page view controller for content that naturally breaks into chunks (such as a calendar).
Web View
“A web view is a region that can display rich HTML content”
• Avoid using a web view to create an app that looks and behaves like a mini web browser
Instead, users would use Safari
Text View
“A text view accepts and displays multiple lines of attributed text.”
Scroll View
“A scroll view helps people see content that is larger than the scroll view’s boundaries”
• Support zoom behavior appropriately
• Consider using a page control with a paging-mode scroll view.
Split View Controller A split view controller is a full-screen view control ler that manages the presentation of two child view controllers.
• In iOS 7 and earlier was only available for iPad
• Avoid displaying a navigation bar in both panes at the same time.
• both panes can contain table, image, map, text…
Table View (1/2) “A table view presents data in a scrolling single-column list of multiple rows.”
Plain Grouped
• Always provide feedback when users select a list item.
• As much as possible, use brief text labels to avoid truncation.
• I f content is extensive , avoid waiting, Instead, fill the onscreen rows
Table View (2/2)
some table view elements that can extend functionality of the table view
Popover “A popover is a transient view that can be revealed when people tap a control or tap in an onscreen area.”
• save users’ work when they tap outside a popover’s borders.
• Make sure people can use a popover without seeing the app content behind it.
• Ensure that only one popover is visible onscreen at a time.
• Avoid making a popover too big.
Controls &
Temporary Views
Activity Indicator Contact Add Button
• Use it to reassure users that their the process has not stalled.
• Customize the color and the size to fit your needs.
• Use it to let users access contact easily without using the keyboard.
• Do not use it in a view that does not support keyboard input.
Date Picker Label
• Make it inline with the content.
• You can customize the minutes wheel to 0, 15, 30, and 45.
• Make sure to make your label Dynamic.
• It does not allow interaction, except to copy the text.
Page Control Picker
• Avoid displaying too many dots
• Use it when users are familiar with the set of values like Language or Countries.
• Make it inline with the content.
• Consider Table View if your set is too large.
Switch On Off
• Use it to show a binary state
Progress View Slider
• Make it suite the style of your app
• Do not use to display volume control. Instead, use the system-provided volume slider
2styles
Default Bar
Stepper
• Use it when you don’t want to display a value, and avoid it with large values
Segmented Control System Button
• Can contain images or text.
• Make sure each segment is easy to tab
• Avoid mixing text and images in a single segmented control.
• Has no border, and can contain icon.
• Use it as a verb phrase
• Avoid creating a long title and use CAPITALS.
• You can add background to a system button too
“It is a linear set of segments, each of which functions as a button…”
Text Field
“A text field accepts a single line of user input”
• Display the Clear button in the right end of a text field when appropriate.
• Display a hint in the text field if it helps users understand its purpose.
• Specify a keyboard type like Numbers to enter phone numbers or words for text.
Alert
If an alert does this:
Provides information related to the standard functioning of an app
Design an eye-catching way to display the information
Updates users on tasks that are progressing normally Use a progress view or activity indicator
Do this instead:
• Avoid creating unnecessary alerts
• Avoid “you, me, my, your”.
• Use Capitalization appropriately
• Use two-button Alert
• Avoid lengthening alert text
Action Sheet
“An action sheet displays a set of choices related to a task the user initiates.”
• Use red for the button that perform destructive actions like Delete.
• Include cancel button in compact environment.
• Avoid making users scroll, therefore limit number of options in the action sheet.
Modal View “a view presented modally—provides self-contained functionality in the context of the current task or workflow.”
• Don’t display a modal view on top of a popover.
• Display a title that identifies the task,
• Use correct modal view style (Full screen, Form sheet…etc.)
Icon and Image Design
Icon & Image Sizes
• Required (main App icon, App icon for app store, Launch file or image)
• Recommended (Spotlight search result icon, settings icon)
• Optional (Toolbar and Navigation bar, Tab bar, W
App Icon (1/3)
• It needs to be beautiful and memorable to attract people
• Get help from a professional graphic designer
• Embrace simplicity
• Make sure it looks good on different backgrounds
• Avoid transparency
• Create different sizes of the app icon
• Don’t use iOS app icon in your interface
App Icon (2/3)
• Mask is done automatically, so, make sure your icon has 90-degrees corners.
• When designing smaller sizes, they still should be easy to detect with the eyes and describe theirselves.
Launch Files/Images “A launch file (or image) provides a simple placeholder image that iOS displays when your app starts up”
• Design a plain launch image that improves the user experience.
• Should not be about/branding image • For Retina iPhone 6 Plus: 1242 x 2208 (@3x) for portrait 2208 x 1242 (@3x) for landscape • For Retina iPhone 6: 750 x 1334 (@2x) for portrait 1334 x 750 (@2x) for landscape h,