Human Interface Guidelines for iOS-Platforms

Human Interface Guidelines
for iOS-Platforms
Martin Ebner

The presentation bases on
http://developer.apple.com/library/ios/#documentation/UserExperience/
Conceptual/MobileHIG/Introduction/Introduction.html
(iOS - V 2013-03-01)
https://developer.apple.com/library/ios/documentation/userexperience/
conceptual/mobilehig/MobileHIG.pdf
(iOS - V 2014-02-11)

Do we need Usability?

http://www.flickr.com/photos/rdolishny/2760207306

The future is mobile

http://flickr.com/photos/thomcochrane/416206133/

Future is mobile

http://i.imgur.com/r9Rov.png

iPhone / iPad
just another device?

http://www.ﬂickr.com/photos/kiki99/1031313718

"The iPhone generates 33% of all mobile
smartphone traffic worldwide and 50% in
the US."

AdMob Mobile Metrics, 2009
http://de.admob.com/s/solutions/metrics?_cd=1

http://www.flickr.com/photos/pleasewait/2272096624

http://www.androidpit.de/de/android/blog/394061/
Weltweite-Smartphone-Verkaufszahlen-AndroidNummer-Eins

A total of 99 percent of 200 respondents to a RBC/IQ
ChangeWave survey in August said they are satisﬁed with their
iPhone 3GS, with 82 percent of those "Very Satisﬁed."

http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014

http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html


Apps usable for everyone?

ADS
„ ... pick the few features, most frequently used, by
the majority of your users, most appropriated for the
mobile ...“

Application Definiton Statement

{your differentiator} {your solution} for {your audience}


ADS
mobile ...“

Example:
{easy to use} {digital photo sharing} for {casual iphone users}
Note - this is a new app
{easy to use} {digital photo sharing} for {professional iphone
users}


ADS
mobile ...“

• Elegant solution: you must solve a user's problem and
solve it eleganty

• Great usability: solide app hierarchy, clean layout
• Gorgeous application icon: hey, the icon is the brand of
your product!


App Design Strategy
„ ... great apps begin with a great idea ...“

• Create an App Definition Statement (ADS)
• List all the features you think users might like
• Determine who you users are
• Filter the feature list through the audience definition
• Tailor Customization to the task
• Prototype and iterate

iPhone HI Guidelines

Planning your mobile
Software Product

Designing the User
Interface of your
mobile Application


iPhone / AndroidHI Guidelines

Planning your mobile
Software Product

Designing the User
Interface of your
mobile Application


iPhone OS Platform
Rich with Possibilites
http://www.flickr.com/photos/shuffle-art/1441940051


Platform Differences 1/2
„An iPhone OS-based device is not a desktop or
laptop computer, and an iPhone application is not the
same as a desktop application.“

• The display is paramount

Compact Sreen Size - 480*320 pixels (iPhone 3 and
lower), 960*640 pixels (since iPhone 4), 1024*768 pixels
(iPad) - since Retina even more

• Device orientation can change to any time
• Memory is not unlimted
• Apps Respond to gestures, not clicks
• One screen at a time

Platform Differences 2/2
„An iPhone OS-based device is not a desktop or
laptop computer, and an iPhone application is not the
same as a desktop application.“

• Preferences are available in settings
• Apps have a more or less just on single window
• Minimal User Help
• Two Types of Software Run in iOS
• Safari on iOS provides the Web Interface

What Are Your Options?
„Depending on the implementation details and its
intended audience, some types of software may be
better suited to your needs than others.“

• An iPhone Application (available in App Store)
• Web-only Content (compare http://itunes.tugraz.at):
- Web Application
- Optimized webpage
- Compatible webpage

• Hybrid Applications (access to web content)


3 Application Styles
„... applicaton styles, based on visual and behavioral
characterstics, data model, and user experience.“

• What do you expect to be the user‘s motivation for using
the application?

• What do you itend to be the user‘s experience while
using the application?

• What is the goal or focus of the application?
• How does the application organize and display the
information people care about?


Productivity Applications
„ ... enables tasks that are based on the organization
and manipulation of detailed information“

• Organizing the list
• Adding and subcontracting
• Drilling down, performing
tasks on reached level


Utility Applications
„ ... perfoms a simply task that requires a minimum of
user input.“

• visually attractive
• enhancement of information
display

• Organize of information into a
flattened list of items; no
hierachy


Immersive Applications
„ ... offers a full-screen, visually rich environment
that‘s focused on the content and the user‘s
experience with that content“

• tends to hide much of device‘s user interface
• use of nonstandards controls appropriate
• information presentation
in the context of
game-play, story or
experience


Choosing an App Style
„When in doubt, keep it simple.“

• Pare the feature list to the minimum
• To bring ideas from you desktop application to an iPhone
application, apply the 80-20 rule (the largest percentage
of users will use a very limited number of features)

• Find the core tasks


Case Study: Mail
„ ... when people are mobile, their needs for an email
application are simpler, and they want access to core
functionality quickly.“


Design the App For the Device
„... you need to make sure that your app looks and
feels like it was designed expressly for an iOS-based
device.“

• Embrace iOS UI paradigms (controls should look tappabel,
App structure should be clean, ...)

• Ensure that unvirsal apps run well on both
(iPhone and iPad)

• Reconsider web-based designs
• Tailor customization to the task
• Prototype and Iterate

Layout Principles

http://www.ﬂickr.com/photos/changecase/3545891009

iPad Human Interface Guidlines - Martin Ebner 2010

Interaction by people
„Make it easy for people to interact with content.“


Focus
„Make it easy to focus on the main task.“


Visual Weight
„Use visual weight and balance to show users the
relative importance of onscreen elements.“


...
„be prepared ...“

• Use alignment to ease scanning and communicate
groupings or hierachy

• Make sure that users can understand primary content
• Be prepared for changes in text size
• As much as possible, avoid inconsistent apperances in
your UI


From iPhone to iPad Application

http://www.ﬂickr.com/photos/scolirk/4652688063


Compatibility Mode
„Unmodiﬁed, iPhone applications are running in a
compatibility mode on iPad, but it does not give them
the device-speciﬁc experience they want.“

• Games and other immersive iPhone applications may

not need much change in information architecture,
because they are experience driven. In general they need
a siginificant revision of artwork and interaction.

• iPhone productivity applications tend to require some

rearchitecting of the information hierachy, in addation to
an enriched UI and an enhanced user experience.

• Utility applications need be reenvisioned for iPad so that
they can take advantage of the larger screen.


Running on the iPhone 5
„... many apps look good simply by displaying more
of their existing UI ...“

• Allow more content to be
revealed automatically

• Stretch content regions
• Stretch background areas
between content regions

• Recenter dominant visual elements
• Expand custom artwork

Human Interface Principles

http://www.flickr.com/photos/wonderlane/4315076635


Great User Interface
„ ... follows human interface design principles, that
are based on the way people think and work, not on
the capibilities of the device.“

• Methaphors (playback control, sliding on-off switching, ...)
• Direct Manipulation (with the Multi-Touch Interface)
• Consistency (application has to take the standards)
• Feedback (must be immediate)
• User Control (user, not the application must initiate and
control actions)

• Asthetc Integrity (how well the appearance of you
application integrates with your functionality)


User Experience
Guidelines
http://www.flickr.com/photos/rivalee/2939042459


Focus on the Primary Task
„An iPhone Application that establishes and maintains
focus on its primary functionality is satisfying and
enjoyable to use“

• What is most important in each context?
• Is the provided information essential, does a user need
this information right now?


Build in Simplicty/Ease of Use
„ ... users are probably doing other things while they
simultaneously use your application“

• Elevate the content that people care about
• Think Top Down - High level Information near the top of
the screen

• Minimize text input and Keep essential information
succinctly.

• Make usage easy and obvious
• Give people a logical path to follow
• Provide a fingertip-size target area for all tappable
elements (calculator example: 44*44 pixel)


Communicate Effectively
„ ... avoid technical jargon in the user interface“

• Feedback is important
• use user-centric terminology
• Enable collaboration and
connectedness

• Start Instantly
• Always be prepared to stop
• Don‘t quit programmatically

Support Gestures Appropriately
„To ensure that your application is discoverable and
easy to use, therefore, try to limit the gestures you
require to the most popular.“

Users Know the Standard Gestures

Think about each detail
„ ... iOS devices are personal devices, but ...“

• Downplay File-Handling Operations
• Enable Collaboration and Connectedness
• De-emphasize Settings
• Brand appropriately
• Make search quick and rewarding
• Use UI Elements consistently and correctly

Graphical Interface - don‘t
forget about it
„ Rich, beautiful, engaging graphics draw people into
an application and make the simplest task
rewarding....“

• Consider Adding Physicality and Realism
• Delight People with Stunning Graphics
• Use subtle Animation to communicate
• Ask People to save only when
necessary

• Handle Orientation Changes
• Be Configurable If Necessary

For iPad 1/2

• Enhance Interactivity
• Reduce Full-Screen Transitions (update only the areas of
the UI that need it)

• Restrain your information hierachy (more information in
just one place)

• Migrate Toolbar Content to the Top


For iPad 2/2
„Consider Using Popovers for some modal tasks...“

• Does the task require more than one type of input?
• Does the taks require people to drill down through a
hierachy of views?

• Might people want to something
in the main view before they
finish the task?

• Is the task fairly in-depth and
does it represent one of the
application‘s main functions?


iOS Technology
Usage Guidlines

http://www.flickr.com/photos/intherough/4263146374


iCloud Storage
„iCloud storage helps people access the content they
care about regardless of which device they are
currently using.“

• Respect the user‘s iCloud account
• Determine which types of information to store
• Make sure your app behaves reasonably when iCloud
storage is unavailable

• Avoid asking users to choose which documents to store
• Warn users about the consequences of deleting a
document

• Be sure to include the user‘s iCloud content in searches

Routing
„Maps displays a list of routing apps when people
want transit information for a route.“

• Focus on the route
• Provide information for every step of a route
• Enrich map views with additional information
• Give users different ways to sort mulitple transit optionss
• Consider using push notifications
• When users transition to your app from Maps, don‘t ask
them to reenter information


Social Media
„People expect to have access to their favorite social
media accounts regardless of their current context.“

• Give users a convinient

way to compose without
leaving your app

• Avoid asking users to

sign into a social media
account

• Consider using an

acitivty view controller
to help users choose one
of their social media
accounts


Multitasking
„ Multitasking allows people to switch quickly among
recently used applications, because apps can be
suspended in the background when they are quit.“

• Be ready for interruptions, and ready to
resume

• Make sure your UI can handle the doublehigh status bar

• Be ready to pause activities that require
people’s attention or active participation

• Ensure that your audio behaves
appropriately


Multitasking
„ Multitasking allows people to switch quickly among
recently used applications, because apps can be
suspended in the background when they are quit.“

• Use local notifications sparingly
• When appropriate, finish user-initiated
tasks in the background.


Notification Center 1/2
„... gives a user a single, convenient place in which to
view notiﬁcations from their apps.“

• Keep badge contents up to date
• Don‘t send multiple notifications for the
same event

• Provide a custom message that does
not include your app name

• Provide a sound that users can choose
to hear when a notification arrives


Notification Center 2/2
„iOS apps that support local or push notiﬁcations can
use the following notiﬁcation styles.“

Banner
Sound

Alert


Badge

AirPrint
„ ... users can wirelessly print content from your
application“

• Use the system-provided Share
button

• Display the Print item when printing
is a primary function in the current
context

• If appropriate, provide additional
printing options to users

• Don’t display print-specific UI if users
can’t print


iAd
„ ... you can allow advertisements to display within
your application and you can receive revenue when
users see or interact with them“

• standard banner (SB) / medium rectangle banner (MRB) /
full screen banner (FSB)

• Place the banner view appropriate (SB: bottom of the

screen; MRB: should not interfere with the content; FSB:
when there are interludes in the user experiences)

• Ensure that banner views appear when it makes sense in
your application

• As much as possible, display banner ads in both
orientations


iAd
„ ... you can allow advertisements to display within
your application and you can receive revenue when
users see or interact with them“

• Don’t allow SB or MRB to scroll off the screen
• While people view or interact with ads, pause activities
that require their attention or interaction

• Don’t stop an ad, except in rare circumstances


Using Sound
„ ... users always expect to hear alarms that they have
set.“

• Ring/Silent Switch (avoid sound if it is not explicity set)
• Volume Buttons (the user always decided the loudness)
• Headset and Headphones (plug in headsets means sound
has to be set privately)

• Wireless audio (disconnection = pause, connection = no
pause)

• Defining the Audio Behavior is essential task

Starting
„iPhone Application should start instantly so users
can begin using them without delay“

• Avoid asking people to supply setup information
• Display a launch image
• Avoid displaying an About window, splash screen,

disclaimer, licence agreements or another tpye of startup
experiences

• Launch in default orientation (iPhone: portrait; iPad:
current device orientation)

• Delay a login requirement for as long as possible

Stopping
„iphone Applications should never quit
programmatically; an iOS app never displays Quit or
Close Option“

• Be prepared to receive an exit or terminate notification at
any time.

• Save the current state when stopping
• Avoid alerts
• User has to decide if continuing you application or
pressing the Home Button


Settings and Configuration
„It‘s best when iPhone application do not aks users to
specify any settings at all“

• Focus your solutions on the needs of 80 percent of users
• Get as much information as possible from other sources
• If you must ask for setup-information, prompt users to
enter within your application

• Offer configuration options in the main user interface or
on the back of a screen


....
„Don‘t provide a button for a built-in action, because
users will wonder why there are two ways to do the
same thing in your application“

• Support Copy and Paste
• Support Undo and Redo
• Enabling Push Notifications (delivery is not guaranteed)
• Providing Search and Displaying Search Results
• Using the User‘s Location
• VoiceOver and Accessibility
• Edit Menu

....
„Don‘t provide a button for a built-in action, because
users will wonder why there are two ways to do the
same thing in your application“

• In App-Purchase
• Game Center
• Location Sercies and Data Privacy
• Quick Look Docoment Preview


Brief Tour of the
Application User Interface


http://www.flickr.com/photos/ari/4314027331

Main parts of application screen
„Every application, regardless of type, has an
application window“

• Status Bar

• Tool Bar

• Navigation Bar

• Search Bar

• Tab Bar

• Scope Bar


Users are accustomed to the look and
behavior of standard views and controls


http://www.flickr.com/photos/r_catalano/4180965353

Status Bar
„People expect to see the current battery charge of
their device; hiding this information [...] is not an
ideal user experience“

• Don‘t create a custom status bar
• hiding status bar in case of immersive application
(carefully decision)

• important bar (cell signal strength, network,
battery)

• Choose a status bar content color that
coordinates with your app


Navigation Bar
„ ... enables navigation through an information
hierachy and, optionally, managment of screen
contents.“

• Consider putting a segmented control in a navagation bar
at the top level on an app

• Avoid crowding a navigation bar with additional controls
• Make sure text-titled buttons have enough space between
them

• As much as possible, make sure that the look of a

customized navigation bar is consistent throughout your
app


Tool Bar
„ ... performs actions related to objects in the current
view.“

• Include the most frequently used commands that make
sense in the current context

• Use Iconx if you need to put more than three items in a
toolbar

• Make sure text-titled buttons have enough space between
them


Toolbar and Navigation Bar
Buttons


Tab Bars
„ ... gives people the ability to switch between
different subtasks, views, or modes.“

• In general, use a tab bar to organize information at the
app level

• Don‘t remove a tab when its function is unavailable
• On iPad, avoid crowding the tab bar with too many tabs
• On iPad, avoid creating a More tab.


Search Bars
„ ... accepts text from users, which can bue used for a
search“

• ... maybe with different buttons


Scope Bar
„ ... - which is available only in conjunction with a
search bar - helps users deﬁne the scope of a search“


Activity
„ ... represents a system-provided or custom
service ...“

• each activity is represented by
an icon and a title

• give users access to a custom
service

• describe succintly your service


Modal Context
„ ... that is, a mode in which something exists or is
experienced ... “


Table View (1/2)
„ ... presents data in a single-column list of multiple
rows.“

• provide feedback when
user select a list item

• display content
immediately

• plain / group style
• different table-view
elements


Table View (2/2)
„ ... presents data in a single-column list of multiple
rows.“

• table view elements
• different types of table
views


Text View
„ ... is a region that displays multiple lines of text ....“


Collection View
„ ... manages and ordered collection and presents
them in a customizable layout...“

• display a set of items
• don‘t use it when a table view
is a better choice

• make it easy to select an item
• use caution if you make

dynamic layout changes


Map View
„ ... presents geographical data ...“

• Let users interact with the
map

• Use the standard pin colory in

a consistent way
- Red (destination point)
- Green (starting point)
- Purple (user-specified point)


Web View
„ ... is a region that can display rich HTML code ...“

• avoid using a web view to

create an app that looks and
behaves like a mini
webbrowser


Scroll View
„ ... helps people see content that is larger than the
scroll view‘s boundaries ...“

• support zoom
• display only one scroll view at
a time


iPad only: Popover (1/2)
„... is a transient view that can be revealed when
people tap a control or an onscreen area. “

• can contain table, image

map, text, web or custom
views


iPad only: Popover (2/2)
„... is a transient view that can be revealed when
people tap a control or an onscreen area. “

• save users‘ work when they tap outside a popover‘s
border

• ensure that the popover arrow points as directly as
possible to the element

• make sure people can use popover without seeing the
application content behind it

• only one popover should be visible onscreen at a time
• avoid making it too big

iPad only: Split View (1/2)
„... is a full screen view that consits of two side-byside panes. “


iPad only: Split View (1/2)
„... is a full screen view that consits of two side-byside panes. “

• only available in iPad
• use to display persistent information in the left pane and
related details in the right pane

• both panes can contain table, image, map, text, web or

custom views as well as navigation bars, tool bars or tab
bars

• avoid creating a right pane that is narrower than the left
pane (left pane is fixed to 320 points in all orientations)

• indicate the current selection in the left pane

Alerts
„ ... give users criticial information in a highly visible
way. “

• minize the number of alerts
• ask for confirmation
• single / double button alert
• As much as possible, avoid
„you“, „ your“, „me“ and
„my“

• use a sentence fragment

Action Sheet
„ ... appears as the result of a user action ... “

• no display of a textual
message

• use red for the button that
performs a potentially
destructive action

• the closer the top, the
more visible

• be aware of mistakenly

tapping the bottom button
instead of Home button


Different Application Controls
„Remember that users expect familiar controls to
behave as they to in the built-in applications.“

• Activity Indicators
• Date and Time Pickers
• Disclosure Buttons
• Info Buttons
• Labels
• Page Indicators
• Pickers

• Progress Views
• Rounded Rectangle Buttons
• Search Bars
• Segmented Controls
• Sliders
• Text Fields
• Refresh Control
• ...

Creating Custom Icons and Images /
Branding / Color / Typography


http://www.flickr.com/photos/conorpendergrast/2634918994

Application Icons
„This is a place where branding and strong visual
design should come together into a compact, instantly
instantly recognizable, attractive package.“


Launch Images
„To enhance the user‘s experience at application
launch ... .“

• should not an about

window, branding elements

• measures 320*480 pixel

(640*960 high resolution;
640*1136 iPhone 5)

• it is solely intended to

enhance the user‘s
perception, as quick launch,
ready for use


Icons for ...
„do not redesign standard buttons“

• simple and streamlined
• not easily mistaken
• readily understood and widely acceptable
• Use color and shadow judiciously to help the icon
tell its story

• Create an idealized version of the subject rather
than using a photo

• Don‘t use replicas of Apple products

Icons for ...
„do not redesign standard buttons“

• use universal imagery, easy recognizable
• generate an idealized version
• use transparency when it makes sense


Tips for Creating Great Artwork
„The Retina display allows you to display highresolution versiony of your art and icons.“

• Richer in texture, more detailed and more
realistic

• Scale up your original work up to 200%
• Add detail and depth
• More realistic and more detailed


Branding
„Succesful branding involves more than adding brand
assets to an app“

• Incorporate a brand‘s asset
in a refined, unobtrusive
way

• Don‘t take space away from
content people care about

• Resist the temptation to

display your logo througout
the app


Color 1/2
„ ... helps indicate interactivity, impart virtality and
provide visual continuity.“

• If you create multiple custom colors, make sure the
work well toegehter.

• Pay attention to color contrast in different contexts.
• Be aware of color blindness

Color 2/2
„ ... helps indicate interactivity, impart virtality and
provide visual continuity.“

• Consider choosing a key color to indicate interactivity
and state

• Color communicates, but not always in the way you
itend

• Avoid using the same color in both interactive and
noninteractive elements

• In most cases, don‘t let color discract users

Typography
„ ... should always be legible.“


iPad - New Way for Applications

http://www.youtube.com/watch?v=jdExukJVUGI

Slides available at:

http://elearningblog.tugraz.at

SOCIAL LEARNING
Computer and Information Services
Graz University of Technology

Graz University of Technology

Martin Ebner
martin.ebner@tugraz.at

mebner

http://elearning.tugraz.at

Human Interface Guidelines for iOS-Platforms

Recomendados

Recomendados

Más contenido relacionado

Más de Martin Ebner

Más de Martin Ebner (20)

Último

Último (20)

Human Interface Guidelines for iOS-Platforms