human interface guidlines for mobile applications
DESCRIPTION
Lecture notes "Mobile Applications" 2013 at Graz University of TechnologyTRANSCRIPT
![Page 1: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/1.jpg)
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
![Page 2: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/2.jpg)
Do we need Usability?
http://www.flickr.com/photos/rdolishny/2760207306
![Page 3: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/3.jpg)
The future is mobile
http://flickr.com/photos/thomcochrane/416206133/
![Page 4: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/4.jpg)
Future is mobile
http://i.imgur.com/r9Rov.png
![Page 10: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/10.jpg)
iPhone / iPadjust another device?
http://www.flickr.com/photos/kiki99/1031313718
![Page 11: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/11.jpg)
"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
![Page 12: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/12.jpg)
http://www.androidpit.de/de/android/blog/394061/Weltweite-Smartphone-Verkaufszahlen-Android-
Nummer-Eins
![Page 13: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/13.jpg)
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."
![Page 14: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/14.jpg)
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
![Page 15: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/15.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Apps usable for everyone?
![Page 16: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/16.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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 ...“
![Page 17: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/17.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
{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
ADS„ ... pick the few features, most frequently used, by the majority of your users, most appropriated for the mobile ...“
![Page 18: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/18.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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!
![Page 19: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/19.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 20: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/20.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iPhone / Android- HI Guidelines
Planning your mobileSoftware Product
Designing the UserInterface of yourmobile Application
![Page 21: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/21.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iPhone / Android- HI Guidelines
Planning your mobileSoftware Product
Designing the UserInterface of yourmobile Application
![Page 22: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/22.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iPhone OS PlatformRich with Possibilites
http://www.flickr.com/photos/shuffle-art/1441940051
![Page 23: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/23.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 24: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/24.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 25: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/25.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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)
![Page 26: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/26.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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?
![Page 27: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/27.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 28: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/28.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 29: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/29.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 30: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/30.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 31: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/31.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Case Study: Mail„ ... when people are mobile, their needs for an email application are simpler, and they want access to core functionality quickly.“
![Page 32: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/32.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 33: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/33.jpg)
iPad Human Interface Guidlines - Martin Ebner 2010http://www.flickr.com/photos/scolirk/4652688063
From iPhone to iPad Application
![Page 34: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/34.jpg)
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.
![Page 35: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/35.jpg)
iPad Human Interface Guidlines - Martin Ebner 2010
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
![Page 36: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/36.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Android DesignPrinciples
http://www.flickr.com/photos/richardstowey/5485817879
![Page 37: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/37.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 38: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/38.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 39: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/39.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 40: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/40.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Human Interface Principles
http://www.flickr.com/photos/wonderlane/4315076635
![Page 41: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/41.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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)
![Page 42: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/42.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
User Experience Guidelines
http://www.flickr.com/photos/rivalee/2939042459
![Page 43: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/43.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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?
![Page 44: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/44.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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)
![Page 45: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/45.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 46: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/46.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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.“
![Page 47: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/47.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 48: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/48.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 49: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/49.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 50: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/50.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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...“
![Page 51: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/51.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iOS Technology Usage Guidlines
http://www.flickr.com/photos/intherough/4263146374
![Page 52: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/52.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 53: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/53.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 54: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/54.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 55: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/55.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 56: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/56.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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.
![Page 57: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/57.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 58: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/58.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 59: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/59.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Notification Center 2/2„iOS apps that support local or push notifications can use the following notification styles.“
Banner
BadgeAlert
Sound
![Page 60: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/60.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 61: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/61.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 62: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/62.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 63: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/63.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 64: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/64.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 65: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/65.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 66: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/66.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 67: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/67.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
....„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
![Page 68: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/68.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
....„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
![Page 69: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/69.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 70: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/70.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 71: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/71.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iPhone / Android- HI Guidelines
Planning your mobileSoftware Product
Designing the UserInterface of yourmobile Application
![Page 72: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/72.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Brief Tour of the Application User Interface
http://www.flickr.com/photos/ari/4314027331
![Page 73: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/73.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Main parts of application screen„Every application, regardless of type, has an application window“
• Status Bar
• Navigation Bar
• Tab Bar
• Toolbar
![Page 74: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/74.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Main parts of application screen„Every application, regardless of type, has an application window“
![Page 75: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/75.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Main parts of application screen„Every application, regardless of type, has an application window“
• Status Bar (1)
• Navigation Bar (2)
• Combined Bar (3)
![Page 76: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/76.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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)
![Page 77: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/77.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Users are accustomed to the look and behavior of standard views and controls
http://www.flickr.com/photos/r_catalano/4180965353
![Page 78: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/78.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 79: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/79.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 80: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/80.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 81: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/81.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 82: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/82.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 83: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/83.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Alerts, Action Sheets, Modal Views„ ... appear when something requires the user‘s attention ... “
![Page 84: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/84.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Alerts„ ... give users criticial information in a highly visible way. “
• minize the number of alerts
• ask for confirmation
• single / double button alert
![Page 85: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/85.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 86: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/86.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 87: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/87.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Table View (2/2)„ ... presents data in a single-column list of multiple rows.“
• table view elements
• different types of table views
![Page 88: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/88.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Text View
„ ... is a region that displays multiple lines of text ....“
![Page 89: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/89.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 90: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/90.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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)
![Page 91: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/91.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 92: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/92.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
• ...
![Page 93: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/93.jpg)
iPad Human Interface Guidlines - Martin Ebner 2010
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
![Page 94: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/94.jpg)
iPad Human Interface Guidlines - Martin Ebner 2010
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
![Page 95: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/95.jpg)
iPad Human Interface Guidlines - Martin Ebner 2010
iPad only: Split View (1/2)„... is a full screen view that consits of two side-by-side panes. “
![Page 96: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/96.jpg)
iPad Human Interface Guidlines - Martin Ebner 2010
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
![Page 97: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/97.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Sytem Provided Buttons„ ... promote a consistent user experience and make your job easier.“
![Page 98: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/98.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Bordered action buttons„ ... suitable for both navigation bars and toolbars, and are available in bordered style only.“
![Page 99: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/99.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Standard Icons
„ ... for Use in Tab Bars.“
![Page 100: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/100.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Devices and Displays„ Android powers millions of phones, tablets, and ohter devices.“
![Page 101: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/101.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Themes„ ... for applying a consistent style to an app or activity ...“
• Holo Light
• Holo Dark
• Holo Light with dark action bars
![Page 102: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/102.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Touch Feedback
„ ... use color and illumation to respond to touches ...“
![Page 103: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/103.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 104: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/104.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 105: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/105.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Color
„ ... Use color primarily for emphasis ...“
• choose colors that fit with your brand
• provide good contrast between visual components
![Page 106: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/106.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 107: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/107.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Action Bar Icons„ ... are graphic buttons that represent the most important actions people can take within your app ...“
![Page 108: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/108.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Small / Contextual Icons„ ... use small icons to surface actions and/or provide status for specific items. ...“
![Page 109: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/109.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Notification Icons„ ... provide an icon that the system can display in the status bar whenever a new notification is available ...“
![Page 110: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/110.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Creating Custom Iconsand Images
http://www.flickr.com/photos/conorpendergrast/2634918994
![Page 111: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/111.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Application Icons„This is a place where branding and strong visual design should come together into a compact, instantly instantly recognizable, attractive package.“
![Page 112: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/112.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Launcher„ ... is the visual representation of your app on the Home or All Apps screen.“
![Page 113: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/113.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 114: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/114.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 115: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/115.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Icons for ...
„do not redesign standard buttons“
• use universal imagery, easy recognizable
• generate an idealized version
• use transparency when it makes sense
![Page 116: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/116.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
![Page 117: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/117.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
http://www.youtube.com/watch?v=jdExukJVUGI
iPad - New Way for Applications
![Page 118: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/118.jpg)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
http://elearningblog.tugraz.at/archives/2994
What happens when you hand a 3-year-old an iPhone?
![Page 119: Human Interface Guidlines for Mobile Applications](https://reader033.vdocuments.us/reader033/viewer/2022052822/554d25edb4c905ca208b4eda/html5/thumbnails/119.jpg)
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