1. Human Interface Guidelines
for Mobile Applications
Martin Ebner
The presentation bases on
http://developer.apple.com/library/ios/#documentation/UserExperience/
Conceptual/MobileHIG/Introduction/Introduction.html
(iOS - V 2013-03-01)
http://developer.android.com/design/index.html
(Android V 2013-03-01)
http://www.flickr.com/photos/kyz/3233710827 http://www.flickr.com/photos/mujitra/5480146781
2. Do we need Usability?
http://www.flickr.com/photos/rdolishny/2760207306
3. The future is mobile
http://flickr.com/photos/thomcochrane/416206133/
10. iPhone / iPad
just another device?
http://www.flickr.com/photos/kiki99/1031313718
11. "The iPhone generates 33% of all mobile
smartphone traffic worldwide and 50% in
the US." AdMob Mobile Metrics, 2009
http://de.admob.com/s/solutions/metrics?_cd=1
http://www.flickr.com/photos/pleasewait/2272096624
13. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
15. Apps usable for everyone?
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
16. ADS
„ ... pick the few features, most frequently used, by
the majority of your users, most appropriated for the
mobile ...“
Application Definiton Statement
{your differentiator} {your solution} for {your audience}
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
17. ADS
„ ... pick the few features, most frequently used, by
the majority of your users, most appropriated for the
mobile ...“
Example:
{easy to use} {digital photo sharing} for {casual iphone users}
Note - this is a new app
{easy to use} {digital photo sharing} for {professional iphone
users}
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
18. ADS
„ ... pick the few features, most frequently used, by
the majority of your users, most appropriated for the
mobile ...“
• Elegant solution: you must solve a user's problem and
solve it eleganty
• Great usability: solide app hierarchy, clean layout
• Gorgeous application icon: hey, the icon is the brand of
your product!
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
19. App Design Strategy
„ ... great apps begin with a great idea ...“
• Create an App Definition Statement (ADS)
• Design the App for the device
• Tailor Customization to the task
• Prototype and iterate
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
20. iPhone / Android-
HI Guidelines
Planning your mobile
Software Product
Designing the User
Interface of your
mobile Application
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
21. iPhone / Android-
HI Guidelines
Planning your mobile
Software Product
Designing the User
Interface of your
mobile Application
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
22. iPhone OS Platform
Rich with Possibilites
http://www.flickr.com/photos/shuffle-art/1441940051
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
23. Platform Differences 1/2
„An iPhone OS-based device is not a desktop or
laptop computer, and an iPhone application is not the
same as a desktop application.“
• The display is paramount
Compact Sreen Size - 480*320 pixels (iPhone 3 and
lower), 960*640 pixels (since iPhone 4), 1024*768 pixels
(iPad)
• Device orientation can change to any time
• Memory is not unlimted
• Apps Respond to gestures, not clicks
• One screen at a time
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
24. Platform Differences 2/2
„An iPhone OS-based device is not a desktop or
laptop computer, and an iPhone application is not the
same as a desktop application.“
• Preferences are available in settings
• Apps have a more or less just on single window
• Minimal User Help
• Two Types of Software Run in iOS
• Safari on iOS provides the Web Interface
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
25. What Are Your Options?
„Depending on the implementation details and its
intended audience, some types of software may be
better suited to your 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)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
26. 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?
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
27. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
28. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
29. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
30. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
31. Case Study: Mail
„ ... when people are mobile, their needs for an email
application are simpler, and they want access to core
functionality quickly.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
32. Design the App For the Device
„... you need to make sure that your app looks and
feels like it was designed expressly for an iOS-based
device.“
• Embrace iOS UI paradigms (controls should look tappabel,
App structure should be clean, ...)
• Ensure that unvirsal apps run well on both
(iPhone and iPad)
• Reconsider web-based designs
• Tailor customization to the task
• Prototype and Iterate
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
33. From iPhone to iPad Application
http://www.flickr.com/photos/scolirk/4652688063
iPad Human Interface Guidlines - Martin Ebner 2010
34. 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
35. Running on the iPhone 5
„... many apps look good simply by displaying more
of their existing UI ...“
• Allow more content to be revealed automtically
• Stretch content regions
• Stretch background areas between content regions
• Recenter dominant visual elements
• Expand custom artwork
iPad Human Interface Guidlines - Martin Ebner 2010
36. Android Design
Principles
http://www.flickr.com/photos/richardstowey/5485817879
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
37. Design Principles (1/3)
„ ... to keep users' best interests in mind ...“
• Delight me in suprising ways
• Real objects are more fun than buttons and menues
• Let me make it mine
• Get to know me
• Keep it brief
• Pictures are faster than words
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
38. Design Principles (2/3)
„ ... to keep users' best interests in mind ...“
• Decide for me but let me have the final say
• Only show what I need when I need it
• I should always know where I am
• Never lose my stuff
• If it looks the same, it should act the same
• Only interrupt me if it‘s important
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
39. Design Principles (3/3)
„ ... to keep users' best interests in mind ...“
• Give me tricks that work everywhere
• It‘s not my fault
• Sprinkle encouragement
• Do the heavy lifting for me
• Make important things fast
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
40. Human Interface Principles
http://www.flickr.com/photos/wonderlane/4315076635
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
41. 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)
• Consistency (application has to take the standards)
• 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)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
42. User Experience
Guidelines
http://www.flickr.com/photos/rivalee/2939042459
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
43. 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?
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
44. Build in Simplicty/Ease of Use
„ ... users are probably doing other things while they
simultaneously use your application“
• Elevate the content that people care about
• Think Top Down - High level Information near the top of
the screen
• Minimize text input and Keep essential information
succinctly.
• Make usage easy and obvious
• Give people a logical path to follow
• Provide a fingertip-size target area for all tappable
elements (calculator example: 44*44 pixel)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
45. Communicate Effectively
„ ... avoid technical jargon in the user interface“
• Feedback is important
• use user-centric terminology
• Enable collaboration and
connectedness
• Start Instantly
• Always be prepared to stop
• Don‘t quit programmatically
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
46. 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.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
47. Think about each detail
„ ... iOS devices are personal devices, but ...“
• Downplay File-Handling Operations
• Enable Collaboration and Connectedness
• De-emphasize Settings
• Brand appropriately
• Make search quick and rewarding
• Use UI Elements consistently
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
48. Graphical Interface - don‘t
forget about it
„ Rich, beautiful, engaging graphics draw people into
an application and make the simplest task
rewarding....“
• Consider Adding Physicality and Realism
• Delight People with Stunning Graphics
• Use subtle Animation to communicate
• Ask People to save only when
necessary
• Handle Orientation Changes
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
49. For iPad 1/2
• Enhance Interactivity
• Reduce Full-Screen Transitions (update only the areas of
the UI that need it)
• Restrain your information hierachy (more information in
just one place)
• Migrate Toolbar Content to the Top
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
50. For iPad 2/2
„Consider Using Popovers for some modal tasks...“
• Does the task require more than one type of input?
• Does the taks require people to drill down through a
hierachy of views?
• Might people want to something
in the main view before they
finish the task?
• Is the task fairly in-depth and
does it represent one of the
application‘s main functions?
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
51. iOS Technology
Usage Guidlines
http://www.flickr.com/photos/intherough/4263146374
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
52. iCloud Storage
„iCloud storage helps people access the content they
care about regardless of which device they are
currently using.“
• Respect the user‘s iCloud account
• Determine which types of information to store
• Make sure your app behaves reasonably when iCloud
storage is unavailable
• Avoid asking users to choose which documents to store
• Warn users about the consequences of deleting a
document
• Be sure to include the user‘s iCloud content in searches
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
53. Routing
„Maps displays a list of routing apps when people
want transit information for a route.“
• Focus on the route
• Provide information for every step of a route
• Enrich map views with additional information
• Give users different ways to sort mulitple transit optionss
• Consider using push notifications
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
54. Social Media
„People expect to have access to their favorite social
media accounts regardless of their current context.“
• Give users a convinient way to compose without leaving
your app
• Avoid asking users to sign into a social media account
• Consider using an acitivty view controller to help users
choose one of their social media accounts
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
55. Multitasking
„ Multitasking allows people to switch quickly among
recently used applications, because apps can be
suspended in the background when they are quit.“
• Be ready for interruptions, and ready to
resume
• Make sure your UI can handle the double-
high status bar
• Be ready to pause activities that require
people’s attention or active participation
• Ensure that your audio behaves
appropriately
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
56. Multitasking
„ Multitasking allows people to switch quickly among
recently used applications, because apps can be
suspended in the background when they are quit.“
• Use local notifications sparingly
• When appropriate, finish user-initiated
tasks in the background.
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
57. Notification Center 1/2
„... gives a user a single, convenient place in which to
view notifications from their apps.“
• Keep badge contents up to date
• Don‘t send multiple notifications for the
same event
• Provide a custom message that does not
include your app name
• Provide a sound that users can choose to
hear when a notification arrives
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
58. Notifications
„... are brief messages that users can access at any
time from the status bar..“
• Make it personal
• Navigate to the right place
• Correctly set and manage notification
priority
• Make it optional
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
59. Notification Center 2/2
„iOS apps that support local or push notifications can
use the following notification styles.“
Banner
Sound
Alert
Badge
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
60. Printing
„ ... users can wirelessly print content from your
application“
• Use the system-provided Action
button
• Display the Print item when printing
is a primary function in the current
context
• If appropriate, provide additional
printing options to users
• Don’t display print-specific UI if users
can’t print
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
61. iAd
„ ... you can allow advertisements to display within
your application and you can receive revenue when
users see or interact with them“
• size 320*50
• Place the banner view at or near the
bottom of the screen
• Ensure that banner views appear
when it makes sense in your
application
• As much as possible, display banner
ads in both orientations
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
62. iAd
„ ... you can allow advertisements to display within
your application and you can receive revenue when
users see or interact with them“
• Don’t allow an ad to scroll off the
screen
• While people view or interact with
ads, pause activities that require
their attention or interaction
• Don’t stop an ad, except in rare
circumstances
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
63. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
64. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
65. Stopping
„iphone Applications should never quit
programmatically“
• 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
66. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
67. ....
„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
• VoiceOver and Accessibility
• Edit Menu
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
68. ....
„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“
• In App-Purchase
• Game Center
• Location Sercies and Data Privacy
• Quick Look Docoment Preview
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
69. Navigation
„ ... Consistent navigation is an essential component
of the overall user experience ...“
• Back button is used to
navigat in revers
chronological order
• Up Button is used to
navigate on the
hierachical relationships
between screens
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
70. Swipe View
„ ... Efficient navigation is one of the cornerstones of
a well-designed app ...“
The user can view a list of related data items,
such as images, chats, or emails, and then pick
one of the items to see the detail contents in a
separate screen
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
71. iPhone / Android-
HI Guidelines
Planning your mobile
Software Product
Designing the User
Interface of your
mobile Application
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
72. Brief Tour of the
Application User Interface
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
http://www.flickr.com/photos/ari/4314027331
73. Main parts of application screen
„Every application, regardless of type, has an
application window“
• Status Bar
• Navigation Bar
• Tab Bar
• Toolbar
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
74. Main parts of application screen
„Every application, regardless of type, has an
application window“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
75. Main parts of application screen
„Every application, regardless of type, has an
application window“
• Status Bar (1)
• Navigation Bar (2)
• Combined Bar (3)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
76. Common App UI
„... typical Android app consists of action bars and the
app content area“
• Main Action Bar (1)
• View Control (2)
• Content Area (3)
• Split Action Bar (4)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
77. Users are accustomed to the look and
behavior of standard views and controls
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
http://www.flickr.com/photos/r_catalano/4180965353
78. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
79. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
80. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
81. Tab Bars
„ If you application provides different perspectives on
the same set of data, ... .“
• icons and text, all equal in
width 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
82. Activity
„ ... represents a system-provided or custom
service ...“
• each activity is represented by
an icon and a title
• two icon styles: looks like an
app icon or a style that evokes
like a the Settings icon
• give users access to a custom
service
• describe succintly your service
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
83. Alerts, Action Sheets, Modal Views
„ ... appear when something requires the user‘s
attention ... “
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
84. Alerts
„ ... give users criticial information in a highly visible
way. “
• minize the number of alerts
• ask for confirmation
• single / double button alert
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
85. 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
86. Table View (1/2)
„ ... 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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
87. Table View (2/2)
„ ... presents data in a single-column list of multiple
rows.“
• table view elements
• different types of table
views
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
88. Text View
„ ... is a region that displays multiple lines of text ....“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
89. Collection View
„ ... manages and ordered collection and presents
them in a customizable layout...“
• display a set of items
• don‘t use it when a table view
is a better choice
• make it easy to select an item
• use caution if you make
dynamic layout changes
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
90. Map View
„ ... presents geographical data ...“
• Let users interact with the
map
• Use the standard pin colory in
a consistent way
- Red (destination point)
- Green (starting point)
- Purple (user-specified point)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
91. Web View
„ ... is a region that can display rich HTML code ...“
• avoid using a web view to
create an app that looks and
behaves like a mini
webbrowser
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
92. Different Application Controls
„Remember that users expect familiar controls to
behave as they to in the built-in applications.“
• Progress Views
• Activity Indicators
• Rounded Rectangle Buttons
• Date and Time Pickers
• Search Bars
• Disclosure Buttons
• Segmented Controls
• Info Buttons
• Sliders
• Labels
• Text Fields
• Page Indicators
• Refresh Control
• Pickers
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013 • ...
93. iPad only: 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
94. iPad only: 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
95. iPad only: Split View (1/2)
„... is a full screen view that consits of two side-by-
side panes. “
iPad Human Interface Guidlines - Martin Ebner 2010
96. iPad only: Split View (1/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
97. Sytem Provided Buttons
„ ... promote a consistent user experience and make
your job easier.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
98. Bordered action buttons
„ ... suitable for both navigation bars and toolbars, and
are available in bordered style only.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
99. Standard Icons
„ ... for Use in Tab Bars.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
100. Devices and Displays
„ Android powers millions of phones, tablets, and
ohter devices.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
101. Themes
„ ... for applying a consistent style to an app or
activity ...“
• Holo Light
• Holo Dark
• Holo Light with dark action
bars
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
102. Touch Feedback
„ ... use color and illumation to respond to touches ...“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
103. 48dp Rhythm
„ ... UI components are generally laid out along 48dp
units ...“
• recommended target
size for touchscreen
objects
• good compromise
between information
density on one hand
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
104. Typography
„ ... design language relies on traditional typographic
tools such as scale, space, rhythm, and alignment with
an underlying grid ...“
• Contrast in type sizes
can go a long way to
create ordered,
understandable
layouts
• Users can select a
system-wide scaling
factor for text in the
Settings app
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
105. Color
„ ... Use color primarily for emphasis ...“
• choose colors that fit with your brand
• provide good contrast between visual
components
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
106. Writing Style
„ ... When choosing words for your app ...“
• Keep it brief
• Keep it simple
• Be friendly
• Put the most important thing first
• Describe only when necessary and no more
• Avoid repetition
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
107. Action Bar Icons
„ ... are graphic buttons that represent the most
important actions people can take within your app ...“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
108. Small / Contextual Icons
„ ... use small icons to surface actions and/or provide
status for specific items. ...“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
109. Notification Icons
„ ... provide an icon that the system can display in the
status bar whenever a new notification is available ...“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
110. Creating Custom Icons
and Images
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
http://www.flickr.com/photos/conorpendergrast/2634918994
111. Application Icons
„This is a place where branding and strong visual
design should come together into a compact, instantly
instantly recognizable, attractive package.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
112. Launcher
„ ... is the visual representation of your app on the
Home or All Apps screen.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
113. Launch Images
„To enhance the user‘s experience at application
launch ... .“
• should not an about
window, branding elements
• measures 320*480 pixel
(640*940 high resolution)
• it is solely intended to
enhance the user‘s
perception, as quick launch,
ready for use
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
114. Icons for ...
„do not redesign standard buttons“
• simple and streamlined
• not easily mistaken
• readily understood and widely acceptable
• Use color and shadow judiciously to help the icon
tell its story
• Create an idealized version of the subject rather
than using a photo
• Don‘t use replicas of Apple products
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
115. Icons for ...
„do not redesign standard buttons“
• use universal imagery, easy recognizable
• generate an idealized version
• use transparency when it makes sense
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
116. Tips for Creating Great Artwork
„The Retina display allows you to display high-
resolution versiony of your art and icons.“
• Richer in texture, more detailed and more
realistic
• Scale up your original work up to 200%
• Add detail and depth
• More realistic and more detailed
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
117. iPad - New Way for Applications
http://www.youtube.com/watch?v=jdExukJVUGI
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
118. What happens when you hand a
3-year-old an iPhone?
http://elearningblog.tugraz.at/archives/2994
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
119. Slides available at: http://elearningblog.tugraz.at
SOCIAL LEARNING
Computer and Information Services
Graz University of Technology
Graz University of Technology
Martin Ebner
martin.ebner@tugraz.at
mebner http://elearning.tugraz.at