designing apps for ios based on its human interface guidelines

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