iPhone/iPad Human Interface Design

iPad -
Human Interface Guidelines
Martin Ebner

The presentation bases on
http://developer.apple.com/iphone/library/documentation/general/conceptual/
ipadhig/Introduction/Introduction.html

Do we need Usability?

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

Different Devices

http://www.flickr.com/photos/toddhiestand/197704394/

iPad ushers in a new user
experience
that differs signiﬁcantly from
the iPhone user experience

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

iPad - eBooks complete different

http://elearningblog.tugraz.at/archives/3404

iPad Human Interface Guidlines - Martin Ebner 2010

iPad - New kind of Learning



iPad - Personalized News



iPhone / iPad -
cteristics
shar e d c h ar a

http://www.ﬂickr.com/photos/ivyﬁeld/4486938457

iPhone / iPad - similiarities
„... note that iPad and iPhone are sharing following
characteristics“

• Memory is limited
• Preferences are available in the Settings application
• Device orientation can change
• Onscreen user help is minimal and understated
• Applications respond to manual gestures
• Native, web-only and hybrid software run on the device


iPad - Device Characteristics

http://www.ﬂickr.com/photos/lexnger/4596784697

iPad - new characteristics
„... that have a signiﬁcant impact on your
application‘s user interface:“

• A large screen size - 1024*768 pixels
• No default of user-expected orientation
• Option for users to plug in an external keyboard (and
used it instead of the onscreen keyboard)

• The ability for users to dock the device


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.


Case Study

„From Mail on iPhone to Mail on iPad“


Case Study 2/3



Case Study 3/3


• Expanded support for device orientation
• Increased focus on message content
• Flatter hierachy
• Drastically reduced full-screen transitions
• Relastic messages


iPad User
Experience Guidelines

http://www.ﬂickr.com/photos/ownipics/4837496759

Aim to Support All Orientations
„Being able to run in all orientations is an important
factor in the success of your iPad application.“

• Maintan focus on the primary content - no big chances in
different orientations

• Consider changing how you display auxiliary information
or functionality

• Avoid radical or gratutious changes in layout
• Avoid providing UI Element or defining a rotation gesture
that rotates your content

• Provide a unique launch image for each rotation
• Think bevore preventing from running in all orientaions

Enhance Interactivity
„Resist the temptation to ﬁll the large screen with
features that are not directly related to the main task.“

In particular - you should not view the large iPad screen
as an invitation to bring back all the functionality you
pruned from your iPhone application


Flatten your Information Hierachy
„Use the iPad screen and new UI elements to give
people access to more information in one place.“

• Use a navagation bar in the right pane of a split view



• Use a navagation bar in the left pane of a split view



• Use a popover to
enable actions or
provide tools that
affect onscreen
objects



• Use a segmented control in a toolbar - to display different
perspectives on the content or different information
categories



• Use a tab bar to display information categories or, less
often, different application modes.


Reduce Full-Screen Transitions
„... try to update only the areas of the user interface
that need it.“

... perform fewer full-screen transitions, your application
has greater visual stability, which helps people keep
track of where they are in the task.


Enable Collaboration
„... also encourage physical collaboration and sharing
with others.“

People expect to be able to share information that‘s
imporatant to them. When it makes sense, make it easy
to:

• interact with others
• share things like their location, opinions or high
scores

• share data with other tools they use (iPad application
acts as mobile complement to a computer application
or allows to communication with the iPhone version)


Add Realism
„The more true to life your application looks and
behaves, the easier it is for people to understand and
the more they enjoy using it.“

• Use animation for further enhance realism


Start Instantly
„... should start as quickly as possible.“

• Display a launch image that closely resembles the first
application screen in the current orientation

• Avoid displaying an About Window or a splash screen that
slows application startup

• Restore state from the last time the application ran
• Avoid asking people to supply setup information


Create Custom Icons
„Every application needs to supply a custom
application icon.“

Application Icon:

• 72*72 pixel application icon (90-degree corners, no shine
or gloss, not use alpha tranparency) - be sure that
completly fills the 72*72 pixel area.

• 512*512 pixel version for display in the App Store


Create Custom Icons

Spotlight Search Icon:

• PNG format
• 50*50 pixel (final visual size is 48*48)


Create Custom Icons

Settings Icon:

• PNG format
• 29*29 pixel


Create Custom Icons

Custom Document Icon:

• 64*64 and 320*320 pixel
• Create „safe zone“
• Icon before and after processing


More hints (1/2)
„... to think about.“

• De-emphasize User Interface Controls
• Minimize Modality
• Rethink your Lists
• Consider Multifinger Gestures
• Consider Popovers for some Modal Tasks
• Downplay File-Handling Operations


More hints (2/2)
„... to think about.“

• Ask People to Save Only When Necessary
• Migrate Toolbar Content to the Top (compare with Mail
iPad application)

• Always be Prepared to Stop
• Create a Launch Image for Each Orientation
• Follow Established Principles


iPad UI Element
Guidelines

http://www.ﬂickr.com/photos/sami/4732156235

Status Bar
„... appears at the upper edge and contain
informations people need (network connection, time,
batterey charge.“


Navigation Bar
„... appears at the upper edge of an application screen
or view. “

• contain controls, title of the current view
• use navigation bar if you need to allow people to drill
down into an information hierarchy

• use a toolbar instead of navigation bar
• consider putting a segmented control in a navagation bar
• avoid crowding a navagation bar with additional controls
• use only bordered-style controls and system-provided
buttons

• be aware that there is no change of height

Tab Bar
„... appears at the bottom edge of an application
screen. “

• ability to switch between different subtasks, views, modes
• use to organize information at the application level
• avoid crowding the tab bar with too many tabs
• avoid creating a More tab
• display the same tabs in each orientation
• use system-provided tab icons
• does not change its color, opacity, height in any
orientation

Tool Bar
„... appears at the top edge of a screen or view. “

• can also appear at the bottom edge
• contains controls that perform actions to objects in the
screen or view

• use to give a selection of frequently used commands
• mantain a hit target area of at least 44*44 pixels
• use system-provided items
• avoid mixing plain style and bordered items

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

• display additional
information or list or items

• display contents of left
pane of a split view-based
application

• display an action sheet


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


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


Split View (2/2)
„... is a full screen view that consits of two side-by-
side 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

Controls
„... with a couple of slight differences to iPhone. “

• Date and Time Picker
• Info Button
• Page Indicator
• Search Bar
• Segmented Control


Action Sheets
„... display a set of choices related to a task. “

• without animation - action
sheet and popovover appear
simultaneously

• with animation - action sheet
slides up pver an popover‘s
content

Modal View
„... provides self-contained functionality in the
context of the current task or workﬂow. “

• Full Screen; Page Sheet (fixed with 768 points); Form
Sheet (fixed 540*620); Current Context


Grab and Search your
Tweets http://grabeeter.tugraz.at
martin.ebner@tugraz.at
Slides available at: http://elearningblog.tugraz.at

SOCIAL LEARNING
Computer and Information Services
Graz University of Technology

Graz University of Technology

Martin Ebner
http://elearningblog.tugraz.at
mebner http://elearning.tugraz.at

iPhone/iPad Human Interface Design

More Related Content

What's hot

Viewers also liked

Similar to iPhone/iPad Human Interface Design

More from Martin Ebner

iPhone/iPad Human Interface Design