Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
iOS Human Interface Guidelines
For iOS-Platforms
Markus Ebner
Presentation & Content are based on:
https://developer.apple...
Usability
And
The Ease
Of use
http://www.smartinsights.com/mobile-marketing/mobile-marketing-
analytics/mobile-marketing-statistics/
Mobile Future
year:...
From Desktop to mobile
Case Study: Mail on iPhone
Highly focused screens, tappable
controls, Easy to navigate
A good interface
• ease of use
• handle tasks more
efficiently
• intuitive usage
Designing iOS
• Deference
• Clarity
• Depth
It is not always
about the UI
But
It is also about
the
CONTENT
(1)
Deference
Take advantage of the whole
screen
Focus on the content and let the UI
Plays a supporting role.
Shadows, Bezels, Colors, Animation
Provide Translucency and blurring
behind your menus
Let them feel the content!
(2)
Clarity
Borderless
ButtonsUse plenty
of negative
Space
COLORS & Fonts
Image from: http://is5.mzstatic.com/image/thumb/Purple/v4/d5/9f/cd/d59fcd47-
f271-a2a1-1ed8-839bc645a463/so...
Yellow, highlights important
state
Adopt Dynamic font type
Colors & Fonts
• Make sure colors work together
• Make your colors send the appropriate message
• Pay attention to color c...
Colors & Fonts
Recommended Not Recommended
Which one
is better?
• Use complementary colors
throughout your app
• choose a limited color palette
that coordinates with your
app logo
• Avoi...
Colorblindness & different cultures
without color blindness Red-green color blindness
(3)
Depth to
communicate
Translucent Backgrounds
Use layers for depth of
content
Hierarchy indicates depth Zoom-in indicates depth Advanced Desc. do the same
iOS Anatomy
• Bars
• Content View
• Controls
• Temporary Views
iOS Anatomy
Layout
iOS automatically
changes the layout
when the size class
changes
Layout
iPad
iPhone 6s
Other iPhones
Recommended Not Recommended
Which one
is better?
Layout
Layout
Arrange how
important is
your screen!
Layout
Right image from: https://wodtools.files.wordpress.com/2013/02/ios-simulator-screen-shot-2013-02-06-8-08-27-pm.png
...
Orientation
• plan ahead
• provide great
experience in any
context
• maintain consistent
appearances
Starting
& Stopping
“ Don’t tell people to reboot their devices
after installing your app...”
Starting…
“ Start your app immediately...”
“ Mak...
Avoid asking people to rate
Your app too soon, or
read disclaimer
Launch your app in the device’s
current orientation
Star...
Stopping…
“iOS never displays Close Option!”
Save user data Save current state
Display an alert when you need
a service
Di...
Navigation
“Users should always know where they are in
your app”
Page Control
Navigation Bar
Tab Bar
Navigation
Experience Driven
Flat (Tabs)
Hierarchy
Interactivity,
Animation &
Branding
Users know the standard Gestures
Gestures
“Ensure that your app is easy to use,
therefore, try to limit the gestures you
r...
Modal Contexts “Get users’ attention but keep them
simple, easy to exit and respect their
preference for receiving notific...
Image from: http://i.stack.imgur.com/rRNvL.jpg
Animation
“Use Animation, but cautiously”
Branding
Use your style for
branding, Do not make
them forced to watch
an advertisement
Correct Wording in your App
http://i1.mirror.co.uk/incoming/article4521525.ece/ALTERNATES/s615/TEASER-This-road-sign-does-...
Design Strategies
• Design Principles
• From Concept to
Product
Design Principles (1/2)
The app should function, AND should have a great appearance
Design Principles (2/2)
Achieve consistency
> Consistent with iOS standards, UI elements behave
the same throughout the en...
From Concept to Product (1/3)
1) Squeeze your brain and capture all
the tasks.
2) Determine who your users are.
3) Determi...
From Concept to Product (2/3)
Get the job done correctly
beautiful custom
UI is a hindrance.
Let users predict what your
e...
From Concept to Product (3/3)
Test, test and test…
iOSTechnologies
3DTouch
Perform actions from home screen
With several templates…
Icons to right Icons to left
Live Photos
Motion-Rich experience + sound
Starting from iOS 9.
Recommendations:
• Display live photo as traditional in no...
Wallet
A Wallet is for storing passes (tickets, coupons, memberships…)
• Use white company logo
• Use rectangular barcode
...
Apple Pay $$
Apple Pay UI contains three main steps:
• Button
• Apple Pay mark
• Payment Sheet
Make the button
large and c...
Research + HealthKit (1/2)
Research + HealthKit (2/2)
Let participants choose the data they want to
share with you
Use a dashboard to motivate partic...
App Extensions
“App extensions increase the
reach of your app…”
Such as…
Share extension Custom Keyboard
HomeKit
“HomeKit makes it easy to
use home automation apps
on people iOS devices…”
• Make it easy to add new accessories
•...
Multitasking
Your app should:
• Carefully tune resource usage to avoid much cpu,
memory and screen space usage
• Handle in...
Notifications (1/2)
Today view
displays an
editable list of
widgets. For
example, Calendar
widget
Notifications view
displ...
Notifications (2/2)
“To ensure that users can customize their notification experience,
you should support as many as possi...
Social Media
• Enable signups, but avoid
asking for signing in
• Share experience, results
iCloud “iCloud lets people access the content they care about regardless
of which device they’re currently using…”
• Respe...
In-App Purchase
“In-App Purchase lets people buy digital products within
your app, in a store that you design.”
• Upgrade ...
AirPrint “Using AirPrint, people can wirelessly print content from
your app and use Print Center app to check on a print j...
Accessing User Data
“It allow apps to access the data people store
in Contacts, Calendar, Reminders, GPS…etc.”
Make the
st...
Sound
• Ring/Silent (avoid sound if it is not explicitly set )
• Users use the device’s volume buttons to control
all soun...
VoiceOver
“VoiceOver increases accessibility for blind and low-vision users, and for
users with certain learning challenge...
Routing
• Focus on the route
• Provide information for every
step of a route
• Enrich map with additional info
• Respect u...
Undo & Redo
“Users initiate an Undo operation by shaking the device,
which displays an alert to undo what they just typed”...
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...
Navigation Bar (1/2)
“A navigation bar enables navigation through an information hierarchy.”
• The navigation bar title sh...
Navigation Bar (2/2)
• Consider hiding the navigation bar when
users want to focus on the content.
• Consider a prompt to ...
Toolbar
“A toolbar contains controls that perform actions related to objects in the screen or
view.”
• Usually appears at ...
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 app...
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...
ContentViews
• Activity
• CollectionView
• MapView
• PageView Controller
• WebView
• TextView
• ScrollView
• SplitView Con...
Activity
“ An activity represents a system-provided or custom service ”
• Each activity is represented by an icon and a ti...
CollectionView
“A collection view manages an ordered collection of
items and presents them in a customizable layout.”
• Di...
MapView
“A map view presents geographical data and
supports most of the functionality provided by the
built-in Maps app.”
...
PageView Controller
“A page view controller uses one of two styles to
manage transitions through multipage content—
scroll...
WebView
“A web view is a region that can display rich
HTML content”
• Avoid using a web view to create an app that
looks a...
TextView
“A text view accepts and displays
multiple lines of attributed text.”
ScrollView
“A scroll view helps people see content that is
larger than the scroll view’s boundaries”
• Support zoom behavi...
SplitView Controller
A split view controller is a full-
screen view controller that
manages the presentation of two
child ...
TableView (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....
Popover
“A popover is a transient view that can be revealed when
people tap a control or tap in an onscreen area.”
• save ...
Controls
&
TemporaryViews
Activity Indicator Contact Add Button
• Use it to reassure users that their the
process has not stalled.
• Customize the c...
Date Picker Label
• Make it inline with the content.
• You can customize the minutes wheel
to 0, 15, 30, and 45.
• Make su...
Page Control Picker
• Avoid displaying too many dots
• Use it when users are familiar with the set
of values like Language...
ProgressView Slider
• Make it suite the style of your app
• Do not use to display volume control.
Instead, use the system-...
Segmented Control System Button
• Can contain images or text.
• Make sure each segment is easy to tab
• Avoid mixing text ...
Text Field
“A text field accepts a single line of
user input”
• Display the Clear button in the right
end of a text field ...
Alert
If an alert does this:
Provides information related to the standard
functioning of an app
Design an eye-catching way...
Action Sheet
“An action sheet displays a set of choices related to a task the user initiates.”
• Use red for the button th...
ModalView
“a view presented modally - provides self-contained
functionality in the context of the current task or
workflow...
Icon and Image Design
Icon & Image Sizes
• Required (main App icon,App icon
for app store, Launch file or image)
• Recommended (Spotlight search...
App Icon (1/3)
• It needs to be beautiful and memorable to attract
people
• Get help from a professional graphic designer
...
App Icon (2/3)
• Mask is done automatically, so, make sure your icon has 90-degrees corners.
• When designing smaller size...
AppIcon(3/3)
•SomeExamples
Image from http://www.designbolts.com/wp-content/uploads/2015/09/Free-iOS-9-Style-Social-Media-...
Launch Files/Images
“A launch file (or image) provides a simple placeholder image that iOS displays
when your app starts u...
Template Icons
• Use standard icons.
• If you redesign yours, make two versions.
• They should be simple and understandabl...
Apple UI Design Resources
https://developer.apple.com/ios/human-interface-guidelines/resources/
Now, it is your turn
https://developer.apple.com/ios/human-interface-guidelines/
Upcoming SlideShare
Loading in …5
×

HCI Guidelines for iOS Platforms

919 views

Published on

Lecture slides "Mobile Applications", Graz University of Technology, March 2017

Published in: Education
  • 8 Simple Tips & Tricks To Extend The Life Of Your Car Battery.. ➤➤ http://t.cn/AiFAGBwT
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • High paying Twitter jobs? $25 per hour, start immediately ♥♥♥ https://tinyurl.com/rbrfd6j
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I have barely snored at all! My girlfriend was starting to put pressure on me to have an operation to stop my snoring, but to be totally honest I was scared stiff. I've heard some horror stories and there was no way I wanted to take on that risk. Then I found your website and since putting your techniques into practice I have barely snored at all. My girlfriend can't believe how effective this has been. ♣♣♣ http://t.cn/AigiN2V1
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How to Grip Her Attention - Unlock Her Legs ▲▲▲ http://ishbv.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How to Grip Her Attention - Unlock Her Legs ●●● http://t.cn/AiurDrZp
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HCI Guidelines for iOS Platforms

  1. 1. 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
  2. 2. Usability And The Ease Of use
  3. 3. http://www.smartinsights.com/mobile-marketing/mobile-marketing- analytics/mobile-marketing-statistics/ Mobile Future year: 2015
  4. 4. From Desktop to mobile
  5. 5. Case Study: Mail on iPhone Highly focused screens, tappable controls, Easy to navigate
  6. 6. A good interface • ease of use • handle tasks more efficiently • intuitive usage
  7. 7. Designing iOS • Deference • Clarity • Depth
  8. 8. It is not always about the UI But It is also about the CONTENT (1) Deference
  9. 9. Take advantage of the whole screen
  10. 10. Focus on the content and let the UI Plays a supporting role. Shadows, Bezels, Colors, Animation
  11. 11. Provide Translucency and blurring behind your menus Let them feel the content!
  12. 12. (2) Clarity
  13. 13. Borderless ButtonsUse plenty of negative Space
  14. 14. COLORS & Fonts Image from: http://is5.mzstatic.com/image/thumb/Purple/v4/d5/9f/cd/d59fcd47- f271-a2a1-1ed8-839bc645a463/source/1024x1024sr.jpg
  15. 15. Yellow, highlights important state Adopt Dynamic font type
  16. 16. Colors & Fonts • Make sure colors work together • Make your colors send the appropriate message • Pay attention to color contrast
  17. 17. Colors & Fonts Recommended Not Recommended Which one is better?
  18. 18. • 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
  19. 19. Colorblindness & different cultures without color blindness Red-green color blindness
  20. 20. (3) Depth to communicate
  21. 21. Translucent Backgrounds Use layers for depth of content
  22. 22. Hierarchy indicates depth Zoom-in indicates depth Advanced Desc. do the same
  23. 23. iOS Anatomy
  24. 24. • Bars • Content View • Controls • Temporary Views iOS Anatomy
  25. 25. Layout
  26. 26. iOS automatically changes the layout when the size class changes Layout iPad iPhone 6s Other iPhones
  27. 27. Recommended Not Recommended Which one is better? Layout
  28. 28. Layout Arrange how important is your screen!
  29. 29. 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
  30. 30. Orientation • plan ahead • provide great experience in any context • maintain consistent appearances
  31. 31. Starting & Stopping
  32. 32. “ 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
  33. 33. Avoid asking people to rate Your app too soon, or read disclaimer Launch your app in the device’s current orientation Starting…
  34. 34. 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!
  35. 35. Navigation “Users should always know where they are in your app” Page Control Navigation Bar Tab Bar
  36. 36. Navigation Experience Driven Flat (Tabs) Hierarchy
  37. 37. Interactivity, Animation & Branding
  38. 38. 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”
  39. 39. Modal Contexts “Get users’ attention but keep them simple, easy to exit and respect their preference for receiving notifications”
  40. 40. Image from: http://i.stack.imgur.com/rRNvL.jpg Animation “Use Animation, but cautiously”
  41. 41. Branding Use your style for branding, Do not make them forced to watch an advertisement
  42. 42. 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
  43. 43. Design Strategies • Design Principles • From Concept to Product
  44. 44. Design Principles (1/2) The app should function, AND should have a great appearance
  45. 45. 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…
  46. 46. 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.
  47. 47. 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”
  48. 48. From Concept to Product (3/3) Test, test and test…
  49. 49. iOSTechnologies
  50. 50. 3DTouch Perform actions from home screen With several templates… Icons to right Icons to left
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. Research + HealthKit (1/2)
  55. 55. Research + HealthKit (2/2) Let participants choose the data they want to share with you Use a dashboard to motivate participants and show progress
  56. 56. App Extensions “App extensions increase the reach of your app…” Such as… Share extension Custom Keyboard
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. Social Media • Enable signups, but avoid asking for signing in • Share experience, results
  62. 62. 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.
  63. 63. 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)
  64. 64. 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.
  65. 65. 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
  66. 66. 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.”
  67. 67. 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.
  68. 68. 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
  69. 69. 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
  70. 70. UI Elements UI Elements UI Elements
  71. 71. Bars • Status Bar • Navigation Bar • Toolbar • Tab Bar • Search Bar • Scope Bar
  72. 72. 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”
  73. 73. 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.
  74. 74. 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
  75. 75. 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.
  76. 76. Toolbar & Navigation Bar Buttons + you can use the Info button in toolbar
  77. 77. 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
  78. 78. Search Bar “A search bar accepts text from users, which can be used as input for a search. ” With different features…
  79. 79. 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
  80. 80. ContentViews • Activity • CollectionView • MapView • PageView Controller • WebView • TextView • ScrollView • SplitView Controller • TableView • Popover
  81. 81. 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
  82. 82. CollectionView “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.
  83. 83. MapView “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
  84. 84. PageView 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).
  85. 85. WebView “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
  86. 86. TextView “A text view accepts and displays multiple lines of attributed text.”
  87. 87. ScrollView “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.
  88. 88. SplitView 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…
  89. 89. TableView (1/2) “A table view presents data in a scrolling single-column list of multiple rows.” Plain Grouped
  90. 90. • 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 TableView (2/2) some table view elements that can extend functionality of the table view
  91. 91. 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.
  92. 92. Controls & TemporaryViews
  93. 93. 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.
  94. 94. 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.
  95. 95. 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. • ConsiderTableView if your set is too large. Switch On Off • Use it to show a binary state
  96. 96. ProgressView 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
  97. 97. 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…”
  98. 98. 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.
  99. 99. 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
  100. 100. 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.
  101. 101. ModalView “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.)
  102. 102. Icon and Image Design
  103. 103. 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
  104. 104. 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
  105. 105. 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.
  106. 106. AppIcon(3/3) •SomeExamples Image from http://www.designbolts.com/wp-content/uploads/2015/09/Free-iOS-9-Style-Social-Media-Icons-Set.jpg
  107. 107. 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 https://s-media-cache-ak0.pinimg.com/236x/bc/f3/6e/bcf36ebbd98c56635cf129bd5fa3f36b.jpg
  108. 108. Template Icons • Use standard icons. • If you redesign yours, make two versions. • They should be simple and understandable.
  109. 109. Apple UI Design Resources https://developer.apple.com/ios/human-interface-guidelines/resources/
  110. 110. Now, it is your turn https://developer.apple.com/ios/human-interface-guidelines/

×