This document discusses guidelines for designing user interfaces for iPhone applications. It covers topics such as choosing an application style, following human interface principles, handling common tasks, and creating custom icons and images. The guidelines emphasize simplicity, focus on the primary task, effective communication, and supporting standard gestures and controls to provide a consistent user experience. Application elements like the status bar, navigation bar, tab bar, and toolbars are described. Standard views, controls, alerts and modal views are also covered.
1. iPhone -
Human Interface Guidelines
Martin Ebner
The presentation bases on
http://developer.apple.com/iphone/library/documentation/userexperience/
conceptual/mobilehig/Introduction/Introduction.html
2. Do we need Usability?
http://www.flickr.com/photos/rdolishny/2760207306
3. The future is mobile
http://flickr.com/photos/thomcochrane/416206133/
4. Fun - just in time
- for your target group
http://www.flickr.com/photos/161/
5. iPhone / iPad
just another device?
http://www.flickr.com/photos/kiki99/1031313718
6. „The iPhone generates 33% of all smartphone traffic
worldwide and 50% in the US“ (AdMob Mobile Metrics, Febr. 2009)
http://metrics.admob.com/
iPhone Human Interface Guidlines - Martin Ebner 2010
7. „The iPhone generates 33% of all smartphone traffic
worldwide and 50% in the US“ (AdMob Mobile Metrics, Febr. 2009)
• The Symbian OS is still number one with 43% share and
six of the top 10 handsets. Windows Mobile and Palm each
lost half their worldwide share over last six months.
• The Top 5 US smartphones - Apple iPhone, BlackBerry
Curve, BlackBery Pearl, Palm Centro, and HTC Dream
(G1) - generated 77% of traffic in February
• The iPhone is now the number one device by usage in
Western Europe with 21% share of total requests
http://metrics.admob.com/
iPhone Human Interface Guidlines - Martin Ebner 2010
8. „91% of iPhone users and 88% of iPod touch users would
recommend their device, compared to 84% of Android
users and 69% of webOS users“ (AdMob Mobile Metrics, January. 2009)
http://metrics.admob.com/
iPhone Human Interface Guidlines - Martin Ebner 2010
9. „91% of iPhone users and 88% of iPod touch users would
recommend their device, compared to 84% of Android
users and 69% of webOS users“ (AdMob Mobile Metrics, January. 2009)
http://metrics.admob.com/
iPhone Human Interface Guidlines - Martin Ebner 2010
10. A total of 99 percent of 200 respondents to a RBC/IQ
ChangeWave survey in August said they are satisfied with their
iPhone 3GS, with 82 percent of those "Very Satisfied."
http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html
iPhone Human Interface Guidlines - Martin Ebner 2010
12. iPhone -
HI Guidelines
Planning your iPhone
Software Product
Designing the User
Interface of your
iPhone Application
iPhone Human Interface Guidlines - Martin Ebner 2010
13. iPhone -
HI Guidelines
Planning your iPhone
Software Product
Designing the User
Interface of your
iPhone Application
iPhone Human Interface Guidlines - Martin Ebner 2010
14. iPhone OS Platform
Rich with Possibilites
http://www.flickr.com/photos/shuffle-art/1441940051
iPhone Human Interface Guidlines - Martin Ebner 2010
15. Platform Differences
„An iPhone OS-based device is not a desktop or
laptop computer, and an iPhone application is not the
same as a desktop application.“
• Compact Sreen Size - 480*320 pixels
• Memory is not unlimted
• One Screen at a Time
• One Application at a Time
• Minimal User Help
iPhone Human Interface Guidlines - Martin Ebner 2010
16. What Are Your Options?
„Depending on the implementation details and its
intended audience, some types of software may be
better suited to you 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)
iPhone Human Interface Guidlines - Martin Ebner 2010
17. 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?
iPhone Human Interface Guidlines - Martin Ebner 2010
18. 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
iPhone Human Interface Guidlines - Martin Ebner 2010
19. 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
iPhone Human Interface Guidlines - Martin Ebner 2010
20. 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
iPhone Human Interface Guidlines - Martin Ebner 2010
21. 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
iPhone Human Interface Guidlines - Martin Ebner 2010
22. Case Study: Mail
„ ... when people are mobile, their needs for an email
application are simpler, and they want access to core
functionality quickly.“
iPhone Human Interface Guidlines - Martin Ebner 2010
24. 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)
• See and Point (Presenting choices or options in list form)
• 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)
iPhone Human Interface Guidlines - Martin Ebner 2010
25. Characteristics
of Great iPhone
Applications
http://www.flickr.com/photos/rivalee/2939042459
iPhone Human Interface Guidlines - Martin Ebner 2010
26. Build in Simplicty/Ease of Use
„ ... users are probably doing other things while they
simultaneously use your application“
• Make it obvious
• High level Information near the top of the screen
(independent of how people tap on screen, top is most
visible)
• Minimize text input
• Keep essential information succinctly
• Provide a fingertip-size target area for all tappable
elements (calculator example: 44*44 pixel)
iPhone Human Interface Guidlines - Martin Ebner 2010
27. 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?
iPhone Human Interface Guidlines - Martin Ebner 2010
28. Communicate Effectively
„ ... avoid technical jargon in the user interface“
• Feedback is important
• use user-centric terminology
iPhone Human Interface Guidlines - Martin Ebner 2010
29. 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.“
iPhone Human Interface Guidlines - Martin Ebner 2010
30. Handling
Common Tasks
http://www.flickr.com/photos/intherough/4263146374
iPhone Human Interface Guidlines - Martin Ebner 2010
31. Starting
„iPhone Application should start instantly so users
can begin using them without delay“
• Specify appropriate status bar styles
• Display a launch image
• Avoid displaying an About window, splash screen or
another tpye of startup experiences
• Launch in portrait orientation
iPhone Human Interface Guidlines - Martin Ebner 2010
32. Stopping
„iphone Applications should never quit
pogrammatically“
• 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
iPhone Human Interface Guidlines - Martin Ebner 2010
33. 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
iPhone Human Interface Guidlines - Martin Ebner 2010
34. ....
„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
iPhone Human Interface Guidlines - Martin Ebner 2010
35. 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
iPhone Human Interface Guidlines - Martin Ebner 2010
36. iPhone -
HI Guidelines
Planning your iPhone
Software Product
Designing the User
Interface of your
iPhone Application
iPhone Human Interface Guidlines - Martin Ebner 2010
37. Brief Tour of the
Application User Interface
iPhone Human Interface Guidlines - Martin Ebner 2010
http://www.flickr.com/photos/ari/4314027331
38. Main parts of application screen
„Every application, regardless of type, has an
application window“
• Status Bar
• Navigation Bar
• Tab Bar
• Toolbar
iPhone Human Interface Guidlines - Martin Ebner 2010
39. Users are accustomed to the look and
behavior of standard views and controls
iPhone Human Interface Guidlines - Martin Ebner 2010
http://www.flickr.com/photos/r_catalano/4180965353
40. Status Bar
„People expect to see the current battery charge of
their device; hiding this information [...] is not an
ideal user experience“
• hiding status bar in case of immersive application
(carefully decision)
• important bar (cell signal strength, network,
battery)
• three possible colors
iPhone Human Interface Guidlines - Martin Ebner 2010
41. Navigation Bar
„ ... appears at the upper edge of an application
screen, just below the status bar.“
• enable navigation among different
views in an application
• provide title and controls that manage
the items in a view
iPhone Human Interface Guidlines - Martin Ebner 2010
42. Tool Bar
„ ... performs actions related to objects in the current
view.“
• constrain the number of items
(44*44 pixels)
• use the predefined buttons
• colors blue and black
iPhone Human Interface Guidlines - Martin Ebner 2010
43. Tab Bars
„ If you application provides different perspectives on
the same set of data, ... .“
• icons and text, all equal in
widht and black background
• tab does not change its
opacity or height, regardless
of orientattion
• more than five tabs, iPhone
OS add a „More“ tab
• badging a Tab is possible to
communicate in a
noninstrutive way
iPhone Human Interface Guidlines - Martin Ebner 2010
44. Alerts, Action Sheets, Modal Views
„ ... appear when something requires the user‘s
attention ... “
iPhone Human Interface Guidlines - Martin Ebner 2010
45. Alerts
„ ... give users criticial information in a highly visible
way. “
• minize the number of alerts
• ask for comfirmation
• single / double button alert
iPhone Human Interface Guidlines - Martin Ebner 2010
46. Action Sheet
„ ... appears as the result of a user action ... “
• no display of a textual
message
• two different backgrounds
• the closer the top, the
more visible
• be aware of mistakenly
tapping the bottom button
instead of Home button
iPhone Human Interface Guidlines - Martin Ebner 2010
47. Table View
„ ... 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
iPhone Human Interface Guidlines - Martin Ebner 2010
48. Text View
„ ... is a region that displays multiple lines of text ....“
iPhone Human Interface Guidlines - Martin Ebner 2010
49. Different Application Controls
„Remember that users expect familiar controls to
behave as they to in the built-in applications.“
• Activity Indicators • Progress Views
• Date and Time Pickers • Rounded Rectangle Buttons
• Disclosure Buttons • Search Bars
• Info Buttons • Segmented Controls
• Labels • Sliders
• Page Indicators • Text Fields
• Pickers
iPhone Human Interface Guidlines - Martin Ebner 2010
50. Sytem Provided Buttons
„ ... promote a consistent user experience and make
your job easier.“
iPhone Human Interface Guidlines - Martin Ebner 2010
51. Creating Custom Icons
and Images
iPhone Human Interface Guidlines - Martin Ebner 2010
http://www.flickr.com/photos/conorpendergrast/2634918994
52. Application Icons
„This is a place where branding and strong visual
design should come together into a compact, instantly
instantly recognizable, attractive package.“
• rounded corners, drop shadow, reflective shine
automatically added
• measures 57*57 pixel
• small icon for spotlight search (29*29)
iPhone Human Interface Guidlines - Martin Ebner 2010
53. Launch Images
„To enhance the user‘s experience at application
launch ... .“
• should not an about
window, branding elements
• measures 320*480 pixel
• it is solely intended to
enhance the user‘s
perception, as quick launch,
ready for use
iPhone Human Interface Guidlines - Martin Ebner 2010
54. Icons for ...
„do not redesign standard buttons“
• simple and streamlined
• not easily mistaken
• readily understood and widely acceptable
iPhone Human Interface Guidlines - Martin Ebner 2010
55. iPad - New Way for Applications
http://www.youtube.com/watch?v=jdExukJVUGI
iPhone Human Interface Guidlines - Martin Ebner 2010
56. What happens when you hand a
3-year-old an iPhone?
http://elearningblog.tugraz.at/archives/2994
iPhone Human Interface Guidlines - Martin Ebner 2010
57. SOCIAL LEARNING
Institute of Information Systems and
Computer Media
Graz University of Technology
Graz University of Technology
Martin Ebner
http://elearning.tugraz.at
http://elearningblog.tugraz.at