1. iPad -
Human Interface Guidelines
Martin Ebner
The presentation bases on
http://developer.apple.com/iphone/library/documentation/general/conceptual/
ipadhig/Introduction/Introduction.html

2. Do we need Usability?
http://www.flickr.com/photos/rdolishny/2760207306

3. Different Devices
http://www.flickr.com/photos/toddhiestand/197704394/

4. Different Devices
http://www.flickr.com/photos/toddhiestand/197704394/

5. Different Devices
http://www.flickr.com/photos/toddhiestand/197704394/

6. Different Devices
http://www.flickr.com/photos/toddhiestand/197704394/

7. iPad ushers in a new user
experience
that differs significantly from
the iPhone user experience
http://www.flickr.com/photos/kiki99/1031313718

8. iPad - eBooks complete different
http://elearningblog.tugraz.at/archives/3404
iPad Human Interface Guidlines - Martin Ebner 2010

9. iPad - New kind of Learning
http://elearningblog.tugraz.at/archives/3430
iPad Human Interface Guidlines - Martin Ebner 2010

10. iPad - Personalized News
http://elearningblog.tugraz.at/archives/3690
iPad Human Interface Guidlines - Martin Ebner 2010

11. iPhone / iPad -
cteristics
shar e d c h ar a
http://www.flickr.com/photos/ivyfield/4486938457
iPad Human Interface Guidlines - Martin Ebner 2010

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

13. iPad - Device Characteristics
http://www.flickr.com/photos/lexnger/4596784697
iPad Human Interface Guidlines - Martin Ebner 2010

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

15. From iPhone to iPad Application
http://www.flickr.com/photos/scolirk/4652688063
iPad Human Interface Guidlines - Martin Ebner 2010

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

17. Case Study
„From Mail on iPhone to Mail on iPad“
iPad Human Interface Guidlines - Martin Ebner 2010

18. Case Study 2/3
„From Mail on iPhone to Mail on iPad“
iPad Human Interface Guidlines - Martin Ebner 2010

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

20. iPad User
Experience Guidelines
http://www.flickr.com/photos/ownipics/4837496759
iPad Human Interface Guidlines - Martin Ebner 2010

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

38. iPad UI Element
Guidelines
http://www.flickr.com/photos/sami/4732156235

39. Status Bar
„... appears at the upper edge and contain
informations people need (network connection, time,
batterey charge.“
iPad Human Interface Guidlines - Martin Ebner 2010

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

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

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

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

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

45. Split View (1/2)
„... is a full screen view that consits of two side-by-
side panes. “
iPad Human Interface Guidlines - Martin Ebner 2010

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

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

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

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

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