hci guidelines for ios platforms

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

Usability

And

The Ease

Of use

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

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/source/1024x1024sr.jpg

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 contrast

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

• Avoid using the same color for interactive and noninteractive elements

Light color scheme Dark color scheme

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 automaticallychanges the layoutwhen the size classchanges

LayoutiPad

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

Use

correct

visual

weight

Large and Easy to touch

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...”

“ Make your app setup suite most of the users...”

“ Delay login info as long as possible”

Center Image from: www.computerworld.com

Avoid asking people to rate

Your app too soon, or

read disclaimer

Launch your app in the device’s

current orientation

Starting…

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!

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

require to the most popular ones”

Modal Contexts “Get users’ attention but keep them

simple, easy to exit and respect their

preference for receiving notifications”

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-not-look-rihgt.jpg

• Watch out for Spelling & Grammar

• CAPITALS

• Use a friendly tone

• Understandable Description

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 entire app,…

Direct manipulation> Easy gestures, does rotate affect on screen objects…

Provide feedback> Update people with progress, show the results of an action…

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.

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”

From Concept to Product (3/3)

Test, test and test…

iOS Technologies

3D Touch

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 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

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

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

Research + HealthKit (1/2)

Research + HealthKit (2/2)

Let participants choose the data they want to

share with you

Use a dashboard to motivate participants and

show progress

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

• 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

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

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

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

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…”

• 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.

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)

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.

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.

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

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 ElementsUI ElementsUI 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 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…

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.

• 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

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 TableView if your set is too large.

SwitchOn 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

2 styles

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

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

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.

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

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

Template Icons

• Use standard icons.

• If you redesign yours, make two versions.

• They should be simple and understandable.

Apple UI Design Resources

https://developer.apple.com/ios/human-interface-guidelines/resources/

Now, it is your turnhttps://developer.apple.com/ios/human-interface-guidelines/