human interface guidlines for mobile applications

Human Interface Guidelinesfor 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/mujitra/5480146781http://www.flickr.com/photos/kyz/3233710827

http://developer.apple.com/library/ios/%23documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html




http://developer.android.com/design/index.html

http://developer.android.com/design/index.html

http://www.flickr.com/photos/mujitra/5480146781

http://www.flickr.com/photos/mujitra/5480146781

http://www.flickr.com/photos/kyz/3233710827

http://www.flickr.com/photos/kyz/3233710827

Do we need Usability?

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

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

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

The future is mobile

http://flickr.com/photos/thomcochrane/416206133/



Future is mobile

http://i.imgur.com/r9Rov.png



iPhone / iPadjust another device?

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

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


"The iPhone generates 33% of all mobile smartphone traffic worldwide and 50% in the US."

http://www.flickr.com/photos/pleasewait/2272096624

AdMob Mobile Metrics, 2009 http://de.admob.com/s/solutions/metrics?_cd=1



http://www.androidpit.de/de/android/blog/394061/Weltweite-Smartphone-Verkaufszahlen-Android-

Nummer-Eins

http://www.androidpit.de/de/android/blog/394061/Weltweite-Smartphone-Verkaufszahlen-Android-Nummer-Eins






Human Interface Guidlines for Mobile Applications - Martin Ebner 2013

http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html

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




Apps usable for everyone?


Application Definiton Statement

{your differentiator} {your solution} for {your audience}

ADS„ ... pick the few features, most frequently used, by the majority of your users, most appropriated for the mobile ...“


{easy to use} {digital photo sharing} for {casual iphone users}

Example:

{easy to use} {digital photo sharing} for {professional iphone users}

Note - this is a new app




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


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


iPhone / Android- HI Guidelines

Planning your mobileSoftware Product

Designing the UserInterface of yourmobile Application


iPhone OS PlatformRich with Possibilites

http://www.flickr.com/photos/shuffle-art/1441940051




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


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


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)


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?


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


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


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


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


Case Study: Mail„ ... when people are mobile, their needs for an email application are simpler, and they want access to core functionality quickly.“


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

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


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


Android DesignPrinciples

http://www.flickr.com/photos/richardstowey/5485817879




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




• 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




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

http://www.flickr.com/photos/wonderlane/4315076635




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)


User Experience Guidelines

http://www.flickr.com/photos/rivalee/2939042459




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?


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)


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


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


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


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


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


For iPad 2/2

• 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 somethingin the main view before theyfinish the task?

• Is the task fairly in-depth and does it represent one of theapplication‘s main functions?

„Consider Using Popovers for some modal tasks...“


iOS Technology Usage Guidlines

http://www.flickr.com/photos/intherough/4263146374




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


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


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


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


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.


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


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


Notification Center 2/2„iOS apps that support local or push notifications can use the following notification styles.“

Banner

BadgeAlert

Sound


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


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


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


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


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


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


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


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


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


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


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


iPhone / Android- HI Guidelines

Planning your mobileSoftware Product

Designing the UserInterface of yourmobile Application


Brief Tour of the Application User Interface

http://www.flickr.com/photos/ari/4314027331




Main parts of application screen„Every application, regardless of type, has an application window“

• Status Bar

• Navigation Bar

• Tab Bar

• Toolbar



• Status Bar (1)

• Navigation Bar (2)

• Combined Bar (3)


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)


Users are accustomed to the look and behavior of standard views and controls

http://www.flickr.com/photos/r_catalano/4180965353




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


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


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


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


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


Alerts, Action Sheets, Modal Views„ ... appear when something requires the user‘s attention ... “


Alerts„ ... give users criticial information in a highly visible way. “

• minize the number of alerts

• ask for confirmation

• single / double button alert


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


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


Table View (2/2)„ ... presents data in a single-column list of multiple rows.“

• table view elements

• different types of table views


Text View

„ ... is a region that displays multiple lines of text ....“


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


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)


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


Different Application Controls„Remember that users expect familiar controls to behave as they to in the built-in applications.“

• Activity Indicators

• Date and Time Pickers

• Disclosure Buttons

• Info Buttons

• Labels

• Page Indicators

• Pickers

• Progress Views

• Rounded Rectangle Buttons

• Search Bars

• Segmented Controls

• Sliders

• Text Fields

• Refresh Control

• ...


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 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 only: Split View (1/2)„... is a full screen view that consits of two side-by-side panes. “


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


Sytem Provided Buttons„ ... promote a consistent user experience and make your job easier.“


Bordered action buttons„ ... suitable for both navigation bars and toolbars, and are available in bordered style only.“


Standard Icons

„ ... for Use in Tab Bars.“


Devices and Displays„ Android powers millions of phones, tablets, and ohter devices.“


Themes„ ... for applying a consistent style to an app or activity ...“

• Holo Light

• Holo Dark

• Holo Light with dark action bars


Touch Feedback

„ ... use color and illumation to respond to touches ...“


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


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


Color

„ ... Use color primarily for emphasis ...“

• choose colors that fit with your brand

• provide good contrast between visual components


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


Action Bar Icons„ ... are graphic buttons that represent the most important actions people can take within your app ...“


Small / Contextual Icons„ ... use small icons to surface actions and/or provide status for specific items. ...“


Notification Icons„ ... provide an icon that the system can display in the status bar whenever a new notification is available ...“


Creating Custom Iconsand Images

http://www.flickr.com/photos/conorpendergrast/2634918994




Application Icons„This is a place where branding and strong visual design should come together into a compact, instantly instantly recognizable, attractive package.“


Launcher„ ... is the visual representation of your app on the Home or All Apps screen.“


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


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


Icons for ...

„do not redesign standard buttons“

• use universal imagery, easy recognizable

• generate an idealized version

• use transparency when it makes sense


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


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

iPad - New Way for Applications




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

What happens when you hand a 3-year-old an iPhone?



Graz University of Technology

SOCIAL LEARNINGComputer and Information Services

Graz University of Technology

Martin Ebner

http://[email protected]

Slides available at: http://elearningblog.tugraz.at

mebner

http://elearning.tugraz.at


mailto:[email protected]?subject=Betreff%20der%20E-Mail

mailto:[email protected]?subject=Betreff%20der%20E-Mail



human interface guidlines for mobile applications

Education