Upload
frederick-van-amstel
View
174
Download
3
Embed Size (px)
Citation preview
Designing apps for iOS based on its human interface guidelines
Frederick van Amstel @fredvanamstelArchitecture and Design School
www.fredvanamstel.com
iOS Human Interface Guidelines provides guidance for creating great app experiences, according to Apple
Design principles
• Aesthetic Integrity
• Consistency
• Direct Manipulation
• Feedback
• Metaphors
• User Control
What happens if you do not follow these principles?
(you get an Android interface)
Android interfaces lack consistency across devices
Android apps typically do not strive for aesthetic integrity (form follows function)
RetroArch NES shows a virtual joystick which affords indirect manipulation of the game
Android SMS app does not provide enough feedback about the message status
The paper stack metaphor of Material Design locks Android users within the limits of physical manipulation
CM Launcher adds custom themes to Android, however, the user loses control
Where do these design principles comes from?
19921987
Apple design philosophy
User-centered design leadership
Xerox Star, 1982 Apple Lisa, 1983
Steve Jobs
Have a vision for the future
Drive for simplicity
Taking inspiration from great designers of the past (e.g. Dieter Rams)
Crafting details that matter (MagSafe)
Less features, better experiences
Consistent experience across hardware, software, retail and services
Apple would like to have an integrated iOS experience across all apps in the App Store, hence the guidelines
Reading between the lines: “please, do not screw our carefully crafted experience with a cluttered interface.”
Diving into the iOS interface guidelines
Navigation bar Window
Assembled views
Custom view hierarchy
Tab bar or Toolbar
Navigation bar examples
Segmented controls
System buttons
System icons
Tab bar example from Luke Wroblewski
Tab bars and toolbars have different functions and should not be combined in the same screen
Toolbar
Tab bar
Tab bar
Action sheets may offer options for special tools
Collections display a content set in a visual way
Popovers display detailed options for an item. It is supposed to be used in iPads not in iPhones.
Splitview works only in iPads
Tables can be used for menus and lists
UI controls let users input or transform data
Modality interrupts the user to focus on something
Alert Modal view
Widgets adds specific app functionality to home screen
Notifications and icon badges provides a means to interact with an app without opening the app
San Francisco is the system font family
Image resolution should be 3 times higher for a retina screen than for a regular screen
There is more to it
• Animation, 3D Touch, Siri commands, Haptic feedback, Navigation...
• Check the full guidelinehttp://developer.apple.com/ios/human-interface-guidelines/
When to break the rules
• Immersive experiences
• Games
• Branding
• New devices
Steve Jobs appreciated thinking outside the box, however, he pursued no ordinary idea
Thank you!Frederick van Amstel @fredvanamstel
Architecture and Design School www.fredvanamstel.com