hci guidelines for ios platforms
TRANSCRIPT
![Page 1: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/1.jpg)
iOS Human Interface Guidelines
For iOS-Platforms
Markus Ebner
Presentation & Content are based on:
https://developer.apple.com/ios/human-interface-guidelines/
& slides from Mohammad Khalil
* All images are CC0 from pixabay or shareable from source
![Page 2: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/2.jpg)
Usability
And
The Ease
Of use
![Page 3: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/3.jpg)
htt
p:/
/ww
w.s
mar
tin
sigh
ts.c
om
/mo
bile
-mar
keti
ng/
mo
bile
-mar
keti
ng-
anal
ytic
s/m
ob
ile-m
arke
tin
g-st
atis
tics
/
Mobile Future
year: 2015
![Page 4: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/4.jpg)
From Desktop to mobile
![Page 5: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/5.jpg)
Case Study: Mail on iPhone
Highly focused screens, tappable
controls, Easy to navigate
![Page 6: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/6.jpg)
A good interface
• ease of use
• handle tasks more
efficiently
• intuitive usage
![Page 7: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/7.jpg)
Designing iOS
• Deference
• Clarity
• Depth
![Page 8: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/8.jpg)
It is not always
about the UI
But
It is also about
the
CONTENT
(1)Deference
![Page 9: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/9.jpg)
Take advantage of the whole
screen
![Page 10: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/10.jpg)
Focus on the content and let the UI
Plays a supporting role.
Shadows, Bezels, Colors, Animation
![Page 11: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/11.jpg)
Provide Translucency and blurring
behind your menus
Let them feel the content!
![Page 12: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/12.jpg)
(2)Clarity
![Page 13: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/13.jpg)
Borderless
ButtonsUse plenty
of negative
Space
![Page 14: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/14.jpg)
COLORS & Fonts
Image from: http://is5.mzstatic.com/image/thumb/Purple/v4/d5/9f/cd/d59fcd47-
f271-a2a1-1ed8-839bc645a463/source/1024x1024sr.jpg
![Page 15: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/15.jpg)
Yellow, highlights important
state
Adopt Dynamic font type
![Page 16: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/16.jpg)
Colors & Fonts
• Make sure colors work together
• Make your colors send the appropriate message
• Pay attention to color contrast
![Page 17: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/17.jpg)
Colors & Fonts
Recommended Not Recommended
Which one is better?
![Page 18: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/18.jpg)
• Use complementary colors throughout your app
• choose a limited color palette that coordinates with your app logo
• Avoid using the same color for interactive and noninteractive elements
Light color scheme Dark color scheme
![Page 19: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/19.jpg)
Colorblindness & different cultures
without color blindness Red-green color blindness
![Page 20: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/20.jpg)
(3)Depth to
communicate
![Page 21: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/21.jpg)
Translucent Backgrounds
Use layers for depth of
content
![Page 22: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/22.jpg)
Hierarchy indicates depth Zoom-in indicates depth Advanced Desc. do the same
![Page 23: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/23.jpg)
iOS Anatomy
![Page 24: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/24.jpg)
• Bars
• Content View
• Controls
• Temporary Views
iOS Anatomy
![Page 25: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/25.jpg)
Layout
![Page 26: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/26.jpg)
iOS automaticallychanges the layoutwhen the size classchanges
LayoutiPad
iPhone 6s
Other iPhones
![Page 27: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/27.jpg)
Recommended Not Recommended
Which one is better?
Layout
![Page 28: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/28.jpg)
Layout
Arrange how
important is
your screen!
![Page 29: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/29.jpg)
Layout
Right image from: https://wodtools.files.wordpress.com/2013/02/ios-simulator-screen-shot-2013-02-06-8-08-27-pm.png
Use
correct
visual
weight
Large and Easy to touch
![Page 30: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/30.jpg)
Orientation
• plan ahead
• provide great
experience in any
context
• maintain consistent
appearances
![Page 31: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/31.jpg)
Starting
& Stopping
![Page 32: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/32.jpg)
“ Don’t tell people to reboot their devices
after installing your app...”
Starting…
“ Start your app immediately...”
“ Make your app setup suite most of the users...”
“ Delay login info as long as possible”
Center Image from: www.computerworld.com
![Page 33: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/33.jpg)
Avoid asking people to rate
Your app too soon, or
read disclaimer
Launch your app in the device’s
current orientation
Starting…
![Page 34: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/34.jpg)
Stopping…
“iOS never displays Close Option!”
Save user data Save current state
Display an alert when you need
a service
Display such a screen when all app
features are unavailable!
![Page 35: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/35.jpg)
Navigation
“Users should always know where they are in
your app”
Page Control
Navigation Bar
Tab Bar
![Page 36: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/36.jpg)
Navigation
Experience Driven
Flat (Tabs)Hierarchy
![Page 37: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/37.jpg)
Interactivity,
Animation &
Branding
![Page 38: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/38.jpg)
Users know the standard Gestures
Gestures“Ensure that your app is easy to use,
therefore, try to limit the gestures you
require to the most popular ones”
![Page 39: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/39.jpg)
Modal Contexts “Get users’ attention but keep them
simple, easy to exit and respect their
preference for receiving notifications”
![Page 40: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/40.jpg)
Image from: http://i.stack.imgur.com/rRNvL.jpg
Animation
“Use Animation, but cautiously”
![Page 41: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/41.jpg)
Branding
Use your style for
branding, Do not make
them forced to watch
an advertisement
![Page 42: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/42.jpg)
Correct Wording in your App
http://i1.mirror.co.uk/incoming/article4521525.ece/ALTERNATES/s615/TEASER-This-road-sign-does-not-look-rihgt.jpg
• Watch out for Spelling & Grammar
• CAPITALS
• Use a friendly tone
• Understandable Description
![Page 43: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/43.jpg)
Design Strategies
• Design Principles
• From Concept to
Product
![Page 44: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/44.jpg)
Design Principles (1/2)
The app should function, AND should have a great appearance
![Page 45: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/45.jpg)
Design Principles (2/2)
Achieve consistency> Consistent with iOS standards, UI elements behave
the same throughout the entire app,…
Direct manipulation> Easy gestures, does rotate affect on screen objects…
Provide feedback> Update people with progress, show the results of an action…
![Page 46: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/46.jpg)
From Concept to Product (1/3)
1) Squeeze your brain and capture all
the tasks.
2) Determine who your users are.
3) Determine their needs.
4) Filter and set your app features.
![Page 47: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/47.jpg)
From Concept to Product (2/3)
Get the job done correctly
beautiful custom UI is a hindrance.
Let users predict what your elements do
“Think twice before redesigning a standard control”
![Page 48: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/48.jpg)
From Concept to Product (3/3)
Test, test and test…
![Page 49: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/49.jpg)
iOS Technologies
![Page 50: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/50.jpg)
3D Touch
Perform actions from home screen
With several templates…Icons to right Icons to left
![Page 51: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/51.jpg)
Live Photos
Motion-Rich experience + sound
Starting from iOS 9.
Recommendations:
• Display live photo as traditional in non-support environment
• Let the user distinguish between live photo and traditional
one using the badge
You can let users share a live photo using your app
![Page 52: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/52.jpg)
Wallet
A Wallet is for storing passes (tickets, coupons, memberships…)
• Use white company logo
• Use rectangular barcode
• Avoid using a plain white background
A rectangular barcode
fits well in the layout
A square barcode can
crowd other fields
![Page 53: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/53.jpg)
Apple Pay $$
Apple Pay UI contains three main steps:
• Button
• Apple Pay mark
• Payment Sheet
Make the button
large and clear
Show the payment
sheet right after the
pay mark
![Page 54: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/54.jpg)
Research + HealthKit (1/2)
![Page 55: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/55.jpg)
Research + HealthKit (2/2)
Let participants choose the data they want to
share with you
Use a dashboard to motivate participants and
show progress
![Page 56: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/56.jpg)
App Extensions
“App extensions increase the
reach of your app…”
Such as…
Share extension Custom Keyboard
![Page 57: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/57.jpg)
HomeKit
“HomeKit makes it easy to
use home automation apps
on people iOS devices…”
• Make it easy to add new accessories
• Give users different ways to find
accessories
• Use friendly language to make your app
easy to use
Bottom Image from: https://www.appfutura.com/blog/wp-content/uploads/2015/04/homekit-3.png
![Page 58: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/58.jpg)
Multitasking
Your app should:
• Carefully tune resource usage to avoid much cpu,
memory and screen space usage
• Handle interruptions such as the audio!
• Stop and restart, should be quickly and smoothly
• Behave responsibly when not in the foreground
![Page 59: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/59.jpg)
Notifications (1/2)
Today view
displays an
editable list of
widgets. For
example, Calendar
widget
Notifications view
displays recent
notification items
from apps that
users are
interested in
![Page 60: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/60.jpg)
Notifications (2/2)
“To ensure that users can customize their notification experience,
you should support as many as possible of notifications…”
Banner Alert SoundBadge
• Do not send multiple notifications for the same event
• Do not include your app name in notif. It is shown
automatically
![Page 61: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/61.jpg)
Social Media
• Enable signups, but avoid
asking for signing in
• Share experience, results
![Page 62: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/62.jpg)
iCloud “iCloud lets people access the content they care about regardless
of which device they’re currently using…”
• Respect the user’s iCloud space.
• Avoid asking people which doc to
store in iCloud.
• Make your app behaves reasonable
when iCloud is not available (such as in
Airplane mode).
• Update content automatically.
![Page 63: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/63.jpg)
In-App Purchase
“In-App Purchase lets people buy digital products within
your app, in a store that you design.”
• Upgrade a basic version to premium version
• Renew subscription
• Purchase virtual items like a weapon in a
game
Use simple description
Don’t alter the confirmation alert
(use the default one)
![Page 64: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/64.jpg)
AirPrint “Using AirPrint, people can wirelessly print content from
your app and use Print Center app to check on a print job.”
• Use the system-provided Action
button. Use the familiar button, no
need to create new one.
• Provide additional printing options
to users.
• Don’t display print UI unless the
user’s device can print.
![Page 65: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/65.jpg)
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
![Page 66: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/66.jpg)
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.”
![Page 67: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/67.jpg)
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.
![Page 68: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/68.jpg)
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
https://itunes.apple.com/at/app/busbahnbim/id489482120?mt=8
![Page 69: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/69.jpg)
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
![Page 70: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/70.jpg)
UI ElementsUI ElementsUI Elements
![Page 71: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/71.jpg)
Bars
• Status Bar
• Navigation Bar
• Toolbar
• Tab Bar
• Search Bar
• Scope Bar
![Page 72: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/72.jpg)
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”
![Page 73: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/73.jpg)
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.
![Page 74: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/74.jpg)
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
![Page 75: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/75.jpg)
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.
![Page 76: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/76.jpg)
Toolbar & Navigation Bar Buttons
+ you can use the
Info button in toolbar
![Page 77: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/77.jpg)
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
![Page 78: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/78.jpg)
Search Bar
“A search bar accepts text from users, which can be used as input for a search. ”
With different features…
![Page 79: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/79.jpg)
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
![Page 80: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/80.jpg)
Content Views
• Activity
• Collection View
• Map View
• Page View Controller
• Web View
• Text View
• Scroll View
• Split View Controller
• Table View
• Popover
![Page 81: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/81.jpg)
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
![Page 82: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/82.jpg)
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.
![Page 83: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/83.jpg)
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 84: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/84.jpg)
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).
![Page 85: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/85.jpg)
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
![Page 86: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/86.jpg)
Text View
“A text view accepts and displays
multiple lines of attributed text.”
![Page 87: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/87.jpg)
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.
![Page 88: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/88.jpg)
Split View Controller
A split view controller is a full-
screen view controller 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…
![Page 89: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/89.jpg)
Table View (1/2)
“A table view presents data in a scrolling
single-column list of multiple rows.”
Plain Grouped
![Page 90: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/90.jpg)
• Always provide feedback when users
select a list item.
• As much as possible, use brief text
labels to avoid truncation.
• If 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
![Page 91: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/91.jpg)
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.
![Page 92: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/92.jpg)
Controls
&
Temporary Views
![Page 93: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/93.jpg)
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.
![Page 94: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/94.jpg)
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 95: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/95.jpg)
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 TableView if your set is too large.
SwitchOn Off
• Use it to show a binary state
![Page 96: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/96.jpg)
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
2 styles
Default Bar
Stepper
• Use it when you don’t want to display a
value, and avoid it with large values
![Page 97: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/97.jpg)
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…”
![Page 98: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/98.jpg)
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.
![Page 99: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/99.jpg)
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
normallyUse 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
![Page 100: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/100.jpg)
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.
![Page 101: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/101.jpg)
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.)
![Page 102: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/102.jpg)
Icon and Image Design
![Page 103: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/103.jpg)
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
![Page 104: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/104.jpg)
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
![Page 105: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/105.jpg)
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.
![Page 106: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/106.jpg)
Ap
p I
co
n (
3/3
)
•So
me E
xam
ple
s
Image from http://www.designbolts.com/wp-content/uploads/2015/09/Free-iOS-9-Style-Social-Media-Icons-Set.jpg
![Page 107: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/107.jpg)
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 htt
ps:
//s-
med
ia-c
ach
e-a
k0.p
inim
g.co
m/2
36x/
bc/
f3/6
e/b
cf36
ebb
d98
c566
35c
f129
bd
5fa
3f3
6b
.jpg
![Page 108: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/108.jpg)
Template Icons
• Use standard icons.
• If you redesign yours, make two versions.
• They should be simple and understandable.
![Page 109: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/109.jpg)
Apple UI Design Resources
https://developer.apple.com/ios/human-interface-guidelines/resources/
![Page 110: HCI Guidelines for iOS Platforms](https://reader031.vdocument.in/reader031/viewer/2022022413/58eca5481a28abb3018b477b/html5/thumbnails/110.jpg)
Now, it is your turnhttps://developer.apple.com/ios/human-interface-guidelines/