iPad - Human Interface Guidelines

fortunajugglerMobile - Wireless

Jul 19, 2012 (4 years and 9 months ago)

281 views

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
http://www.flickr.com/photos/toddhiestand/197704394/
Different Devices
http://www.flickr.com/photos/toddhiestand/197704394/
Different Devices
http://www.flickr.com/photos/toddhiestand/197704394/
Different Devices
http://www.flickr.com/photos/toddhiestand/197704394/
Different Devices
iPad ushers in a new user
experience
that differs
significantly
from
the iPhone user experience
http://www.flickr.com/photos/kiki99/1031313718
iPad Human Interface Guidlines - Martin Ebner 2010
http://elearningblog.tugraz.at/archives/3404
iPad - eBooks complete different
iPad Human Interface Guidlines - Martin Ebner 2010
http://elearningblog.tugraz.at/archives/3430
iPad - New kind of Learning
iPad Human Interface Guidlines - Martin Ebner 2010
http://elearningblog.tugraz.at/archives/3690
iPad - Personalized News
iPad Human Interface Guidlines - Martin Ebner 2010
http://www.flickr.com/photos/ivyfield/4486938457
iPhone / iPad -
shared characteristics
iPad Human Interface Guidlines - Martin Ebner 2010
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 Human Interface Guidlines - Martin Ebner 2010
http://www.flickr.com/photos/lexnger/4596784697
iPad - Device Characteristics
iPad Human Interface Guidlines - Martin Ebner 2010
iPad - new characteristics
„... that have a significant 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
iPad Human Interface Guidlines - Martin Ebner 2010
http://www.flickr.com/photos/scolirk/4652688063
From iPhone to iPad Application
iPad Human Interface Guidlines - Martin Ebner 2010
Compatibility Mode
„Unmodified, iPhone applications are running in a
compatibility mode on iPad, but it does not give them
the device-specific 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.
iPad Human Interface Guidlines - Martin Ebner 2010
Case Study
„From Mail on iPhone to Mail on iPad“
iPad Human Interface Guidlines - Martin Ebner 2010
Case Study 2/3
„From Mail on iPhone to Mail on iPad“
iPad Human Interface Guidlines - Martin Ebner 2010
Case Study 3/3
„From Mail on iPhone to Mail on iPad“


Expanded support for device orientation

Increased focus on message content


Flatter hierachy

Drastically reduced full-screen transitions

Relastic messages

iPad Human Interface Guidlines - Martin Ebner 2010
http://www.flickr.com/photos/ownipics/4837496759
iPad User
Experience Guidelines
iPad Human Interface Guidlines - Martin Ebner 2010
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

iPad Human Interface Guidlines - Martin Ebner 2010
Enhance Interactivity
„Resist the temptation to fill 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
iPad Human Interface Guidlines - Martin Ebner 2010
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
iPad Human Interface Guidlines - Martin Ebner 2010
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 left pane of a split view
iPad Human Interface Guidlines - Martin Ebner 2010
Flatten your Information Hierachy
„Use the iPad screen and new UI elements to give
people access to more information in one place.“


Use a popover to
enable actions or
provide tools that
affect onscreen
objects
iPad Human Interface Guidlines - Martin Ebner 2010
Flatten your Information Hierachy
„Use the iPad screen and new UI elements to give
people access to more information in one place.“


Use a segmented control in a toolbar - to display different
perspectives on the content or different information
categories
iPad Human Interface Guidlines - Martin Ebner 2010
Flatten your Information Hierachy
„Use the iPad screen and new UI elements to give
people access to more information in one place.“


Use a tab bar to display information categories or, less
often, different application modes.
iPad Human Interface Guidlines - Martin Ebner 2010
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.
iPad Human Interface Guidlines - Martin Ebner 2010
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)
iPad Human Interface Guidlines - Martin Ebner 2010
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
iPad Human Interface Guidlines - Martin Ebner 2010
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

iPad Human Interface Guidlines - Martin Ebner 2010
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

iPad Human Interface Guidlines - Martin Ebner 2010
Create Custom Icons
„Every application needs to supply a custom
application icon.“
Spotlight Search Icon:


PNG format

50*50 pixel (final visual size is 48*48)

iPad Human Interface Guidlines - Martin Ebner 2010
Create Custom Icons
„Every application needs to supply a custom
application icon.“
Settings Icon:


PNG format

29*29 pixel

iPad Human Interface Guidlines - Martin Ebner 2010
Create Custom Icons
„Every application needs to supply a custom
application icon.“
Custom Document Icon:


64*64 and 320*320 pixel

Create „safe zone“

Icon before and after processing

iPad Human Interface Guidlines - Martin Ebner 2010
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

iPad Human Interface Guidlines - Martin Ebner 2010
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

http://www.flickr.com/photos/sami/4732156235
iPad UI Element
Guidelines
iPad Human Interface Guidlines - Martin Ebner 2010
Status Bar
„... appears at the upper edge and contain
informations people need (network connection, time,
batterey charge.“
iPad Human Interface Guidlines - Martin Ebner 2010
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
iPad Human Interface Guidlines - Martin Ebner 2010
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
iPad Human Interface Guidlines - Martin Ebner 2010
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
iPad Human Interface Guidlines - Martin Ebner 2010
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
iPad Human Interface Guidlines - Martin Ebner 2010
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 Human Interface Guidlines - Martin Ebner 2010
Split View (1/2)
„... is a full screen view that consits of two side-by-
side panes. “
iPad Human Interface Guidlines - Martin Ebner 2010
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
iPad Human Interface Guidlines - Martin Ebner 2010
Controls
„... with a couple of slight differences to iPhone. “


Date and Time Picker

Info Button

Page Indicator

Search Bar

Segmented Control
iPad Human Interface Guidlines - Martin Ebner 2010
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
iPad Human Interface Guidlines - Martin Ebner 2010
Modal View
„... provides self-contained functionality in the
context of the current task or workflow. “

Full Screen; Page Sheet (fixed with 768 points); Form
Sheet (fixed 540*620); Current Context
Graz University of Technology
SOCIAL LEARNING
Computer and Information Services
Graz University of Technology
Martin Ebner
http://elearning.tugraz.at
http://elearningblog.tugraz.at
Grab and Search your
Tweets
http://grabeeter.tugraz.at
Slides available at:
http://elearningblog.tugraz.at
mebner
martin.ebner@tugraz.at