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

http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html




Do we need Usability?

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

http://flickr.com/photos/ben30/160708916/

http://flickr.com/photos/ben30/160708916/

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

Different Devices

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
























http://www.flickr.com/photos/sovietuk/141381675



Different Devices


























































































































































iPad ushers in a new user experience

that differs significantly from the iPhone user experience

http://www.flickr.com/photos/kiki99/1031313718

http://flickr.com/photos/nettsu/1365343292/


iPad Human Interface Guidlines - Martin Ebner 2010

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

iPad - eBooks complete different





iPad - New kind of Learning





iPad - Personalized News



iPad Human Interface Guidlines - Martin Ebner 2010http://www.flickr.com/photos/ivyfield/4486938457

iPhone / iPad -

shared characteristics




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 2010http://www.flickr.com/photos/lexnger/4596784697

iPad - Device Characteristics




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 2010http://www.flickr.com/photos/scolirk/4652688063

From iPhone to iPad Application




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.


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

iPad User Experience Guidelines




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


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



Spotlight Search Icon:

• PNG format

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



Settings Icon:

• PNG format

• 29*29 pixel



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

http://www.flickr.com/photos/sami/4732156235

iPad UI Element Guidelines




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 workflow. “

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

Graz University of Technology

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

[email protected]











iphone/ipad human interface design

Documents