Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Human Interface Guidelines
for iOS-Platforms
Martin Ebner
The presentation bases on



http://developer.apple.com/library/...
Do we need Usability?
http://www.flickr.com/photos/rdolishny/2760207306
The future is mobile
http://flickr.com/photos/thomcochrane/416206133/
Future is mobile
http://i.imgur.com/r9Rov.png
http://i.imgur.com/r9Rov.png
http://i.imgur.com/r9Rov.png
http://i.imgur.com/r9Rov.png
http://i.imgur.com/r9Rov.png
http://i.imgur.com/r9Rov.png
iPhone / iPad
just another device?
http://www.flickr.com/photos/kiki99/1031313718
"The iPhone generates 33% of all mobile

smartphone traffic worldwide and 50% in

the US."
http://www.flickr.com/photos/pl...
http://www.androidpit.de/de/android/blog/394061/
Weltweite-Smartphone-Verkaufszahlen-Android-
Nummer-Eins
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
http://www.appleinsider.com/articles/09/08/14/apples...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
http://www.appleinsider.com/articles/09/08/14/apples...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Apps usable for everyone?
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Application Definiton Statement
{your differentiator...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
{easy to use} {digital photo sharing} for {casual ip...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
ADS
„ ... pick the few features, most frequently use...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
App Design Strategy
„ ... great apps begin with a gr...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iPhone - 

HI Guidelines
Planning your mobile

Softw...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iPhone / Android- 

HI Guidelines
Planning your mobi...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iPhone OS Platform

Rich with Possibilites
http://ww...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Platform Differences 1/2
„An iPhone OS-based device ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Platform Differences 2/2
„An iPhone OS-based device ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
What Are Your Options?
„Depending on the implementat...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
3 Application Styles
„... applicaton styles, based o...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Productivity Applications
„ ... enables tasks that a...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Utility Applications
„ ... perfoms a simply task tha...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Immersive Applications
„ ... offers a full-screen, v...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Choosing an App Style
„When in doubt, keep it simple...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Case Study: Mail
„ ... when people are mobile, their...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Design the App For the Device
„... you need to make ...
iPad Human Interface Guidlines - Martin Ebner 2010
http://www.flickr.com/photos/changecase/3545891009
Layout Principles

Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Interaction by people
„Make it easy for people to in...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Focus
„Make it easy to focus on the main task.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Visual Weight
„Use visual weight and balance to show...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
...
„be prepared ...“
• Use alignment to ease scanni...
iPad Human Interface Guidlines - Martin Ebner 2010
http://www.flickr.com/photos/scolirk/4652688063
From iPhone to iPad Appl...
iPad Human Interface Guidlines - Martin Ebner 2010
Compatibility Mode
„Unmodified, iPhone applications are running in a
com...
iPad Human Interface Guidlines - Martin Ebner 2010
Running on the iPhone 5
„... many apps look good simply by displaying m...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Human Interface Principles
http://www.flickr.com/pho...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Great User Interface
„ ... follows human interface d...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
User Experience
Guidelines
http://www.flickr.com/pho...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Focus on the Primary Task
„An iPhone Application tha...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Build in Simplicty/Ease of Use
„ ... users are proba...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Communicate Effectively
„ ... avoid technical jargon...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Support Gestures Appropriately
„To ensure that your ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Think about each detail
„ ... iOS devices are person...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Graphical Interface - don‘t
forget about it
„ Rich, ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
For iPad 1/2
• Enhance Interactivity 

• Reduce Full...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
For iPad 2/2
• Does the task require more than one t...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iOS Technology
Usage Guidlines
http://www.flickr.com...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iCloud Storage
„iCloud storage helps people access t...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Routing
„Maps displays a list of routing apps when p...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Social Media
„People expect to have access to their ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Multitasking
„ Multitasking allows people to switch ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Multitasking
„ Multitasking allows people to switch ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Notification Center 1/2
„... gives a user a single, ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Notification Center 2/2
„iOS apps that support local...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
AirPrint
„ ... users can wirelessly print content fr...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iAd
„ ... you can allow advertisements to display wi...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iAd
„ ... you can allow advertisements to display wi...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Using Sound
„ ... users always expect to hear alarms...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Starting
„iPhone Application should start instantly ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Stopping
„iphone Applications should never quit
prog...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Settings and Configuration
„It‘s best when iPhone ap...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
....
„Don‘t provide a button for a built-in action, ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
....
„Don‘t provide a button for a built-in action, ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iPhone / Android- 

HI Guidelines
Planning your mobi...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Brief Tour of the
Application User Interface
http://...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Main parts of application screen
„Every application,...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Users are accustomed to the look and
behavior of sta...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Status Bar
„People expect to see the current battery...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Navigation Bar
„ ... enables navigation through an i...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Tool Bar
„ ... performs actions related to objects i...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Toolbar and Navigation Bar
Buttons
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Tab Bars
„ ... gives people the ability to switch be...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Search Bars
„ ... accepts text from users, which can...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Scope Bar
„ ... - which is available only in conjunc...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Activity
„ ... represents a system-provided or custo...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
„ ... that is, a mode in which something exists or i...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Table View (1/2)
„ ... presents data in a single-col...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Table View (2/2)
„ ... presents data in a single-col...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Text View
„ ... is a region that displays multiple l...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Collection View
„ ... manages and ordered collection...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Map View
„ ... presents geographical data ...“
• Let...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Web View
„ ... is a region that can display rich HTM...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Scroll View
„ ... helps people see content that is l...
iPad Human Interface Guidlines - Martin Ebner 2010
iPad only: Popover (1/2)
„... is a transient view that can be revealed ...
iPad Human Interface Guidlines - Martin Ebner 2010
iPad only: Popover (2/2)
„... is a transient view that can be revealed ...
iPad Human Interface Guidlines - Martin Ebner 2010
iPad only: Split View (1/2)
„... is a full screen view that consits of ...
iPad Human Interface Guidlines - Martin Ebner 2010
iPad only: Split View (1/2)
„... is a full screen view that consits of ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Alerts
„ ... give users criticial information in a h...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Action Sheet
„ ... appears as the result of a user a...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Different Application Controls
„Remember that users ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Creating Custom Icons and Images /
Branding / Color ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Application Icons
„This is a place where branding an...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Launch Images
„To enhance the user‘s experience at a...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Icons for ...
„do not redesign standard buttons“
• s...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Icons for ...
„do not redesign standard buttons“
• u...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Tips for Creating Great Artwork
„The Retina display ...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Branding
„Succesful branding involves more than addi...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Color 1/2
„ ... helps indicate interactivity, impart...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Color 2/2
„ ... helps indicate interactivity, impart...
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Typography
„ ... should always be legible.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
http://www.youtube.com/watch?v=jdExukJVUGI
iPad - Ne...
Graz University of Technology
SOCIAL LEARNING
Computer and Information Services
Graz University of Technology
Martin Ebner...
Nächste SlideShare
Wird geladen in …5
×

Human Computer Interface Guidelines

2.450 Aufrufe

Veröffentlicht am

Lecture at Graz University of Technolgoy, Mobile Applications, 2015

Veröffentlicht in: Bildung
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/k9tI8 ◀ ◀ ◀ ◀
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/k9tI8 ◀ ◀ ◀ ◀
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Human Computer Interface Guidelines

  1. 1. Human Interface Guidelines for iOS-Platforms Martin Ebner The presentation bases on
 
 http://developer.apple.com/library/ios/#documentation/UserExperience/ Conceptual/MobileHIG/Introduction/Introduction.html
 (iOS - V 2013-03-01)
 https://developer.apple.com/library/ios/documentation/userexperience/ conceptual/mobilehig/MobileHIG.pdf (iOS - V 2014-02-11)
 https://developer.apple.com/library/ios/documentation/UserExperience/ Conceptual/MobileHIG/ 
 (iOS - V 2015
  2. 2. Do we need Usability? http://www.flickr.com/photos/rdolishny/2760207306
  3. 3. The future is mobile http://flickr.com/photos/thomcochrane/416206133/
  4. 4. Future is mobile http://i.imgur.com/r9Rov.png
  5. 5. http://i.imgur.com/r9Rov.png
  6. 6. http://i.imgur.com/r9Rov.png
  7. 7. http://i.imgur.com/r9Rov.png
  8. 8. http://i.imgur.com/r9Rov.png
  9. 9. http://i.imgur.com/r9Rov.png
  10. 10. iPhone / iPad just another device? http://www.flickr.com/photos/kiki99/1031313718
  11. 11. "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
  12. 12. http://www.androidpit.de/de/android/blog/394061/ Weltweite-Smartphone-Verkaufszahlen-Android- Nummer-Eins
  13. 13. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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."
  14. 14. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html
  15. 15. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Apps usable for everyone?
  16. 16. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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 ...“
  17. 17. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 {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 ...“
  18. 18. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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!
 

  19. 19. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 App Design Strategy „ ... great apps begin with a great idea ...“ • Create an App Definition Statement (ADS)
 • List all the features you think users might like
 • Determine who you users are
 • Filter the feature list through the audience definition 
 • Tailor Customization to the task
 • Prototype and iterate
 

  20. 20. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 iPhone - 
 HI Guidelines Planning your mobile
 Software Product Designing the User
 Interface of your
 mobile Application
  21. 21. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 iPhone / Android- 
 HI Guidelines Planning your mobile
 Software Product Designing the User
 Interface of your
 mobile Application
  22. 22. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 iPhone OS Platform
 Rich with Possibilites http://www.flickr.com/photos/shuffle-art/1441940051
  23. 23. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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) - since Retina even more
 • Device orientation can change to any time • Memory is not unlimted
 • Apps Respond to gestures, not clicks
 • One screen at a time
 

  24. 24. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 

  25. 25. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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)
 

  26. 26. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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?
 

  27. 27. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 

  28. 28. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 

  29. 29. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 

  30. 30. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 

  31. 31. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Case Study: Mail „ ... when people are mobile, their needs for an email application are simpler, and they want access to core functionality quickly.“
  32. 32. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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 universal apps run well on
 both (iPhone and iPad) • Reconsider web-based designs
 • Tailor customization to the task
 • Prototype and Iterate
 

  33. 33. iPad Human Interface Guidlines - Martin Ebner 2010 http://www.flickr.com/photos/changecase/3545891009 Layout Principles

  34. 34. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Interaction by people „Make it easy for people to interact with content.“
  35. 35. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Focus „Make it easy to focus on the main task.“
  36. 36. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Visual Weight „Use visual weight and balance to show users the relative importance of onscreen elements.“
  37. 37. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 ... „be prepared ...“ • Use alignment to ease scanning and communicate groupings or hierachy
 • Make sure that users can understand primary content
 • Be prepared for changes in text size
 • As much as possible, avoid inconsistent apperances in your UI

  38. 38. iPad Human Interface Guidlines - Martin Ebner 2010 http://www.flickr.com/photos/scolirk/4652688063 From iPhone to iPad Application 

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

  40. 40. 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 automatically
 • Stretch content regions
 • Stretch background areas 
 between content regions
 • Recenter dominant visual elements
 • Expand custom artwork
 

  41. 41. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Human Interface Principles http://www.flickr.com/photos/wonderlane/4315076635
  42. 42. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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)
 

  43. 43. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 User Experience Guidelines http://www.flickr.com/photos/rivalee/2939042459
  44. 44. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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?
 

  45. 45. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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)
 

  46. 46. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 

  47. 47. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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.“ Users Know the Standard Gestures
  48. 48. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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 and correctly
 

  49. 49. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 • Be Configurable If Necessary
 

  50. 50. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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 
 

  51. 51. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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 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?
 „Consider Using Popovers for some modal tasks...“
  52. 52. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 iOS Technology Usage Guidlines http://www.flickr.com/photos/intherough/4263146374
  53. 53. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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

  54. 54. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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 options
 • Consider using push notifications
 • When users transition to your app from Maps, don‘t ask them to reenter information

  55. 55. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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 activity view controller to help users choose one of their social media accounts
 

  56. 56. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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

  57. 57. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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.
 

  58. 58. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 
 

  59. 59. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Notification Center 2/2 „iOS apps that support local or push notifications can use the following notification styles.“ Banner BadgeAlert Sound
  60. 60. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 AirPrint „ ... users can wirelessly print content from your application“ • Use the system-provided Share 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

  61. 61. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 iAd „ ... you can allow advertisements to display within your application and you can receive revenue when users see or interact with them“ • standard banner (SB) / medium rectangle banner (MRB) / full screen banner (FSB)
 • Place the banner view appropriate (SB: bottom of the screen; MRB: should not interfere with the content; FSB: when there are interludes in the user experiences)
 • Ensure that banner views appear when it makes sense in your application
 • As much as possible, display banner ads in both orientations

  62. 62. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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 SB or MRB 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
 

  63. 63. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 
 

  64. 64. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Starting „iPhone Application should start instantly so users can begin using them without delay“ • Avoid asking people to supply setup information
 • Display a launch image
 • Avoid displaying an About window, splash screen, disclaimer, licence agreements or another tpye of startup experiences
 • Launch in default orientation (iPhone: portrait; iPad: current device orientation)
 • Delay a login requirement for as long as possible
 
 

  65. 65. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Stopping „iphone Applications should never quit programmatically; an iOS app never displays Quit or Close Option“ • 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
 
 

  66. 66. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 
 

  67. 67. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 .... „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
 
 

  68. 68. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 .... „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 Services and Data Privacy
 • Quick Look Docoment Preview
 
 

  69. 69. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 iPhone / Android- 
 HI Guidelines Planning your mobile
 Software Product Designing the User
 Interface of your
 mobile Application
  70. 70. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Brief Tour of the Application User Interface http://www.flickr.com/photos/ari/4314027331
  71. 71. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Main parts of application screen „Every application, regardless of type, has an application window“ • Status Bar
 • Navigation Bar
 • Tab Bar
 
 
 • Tool Bar
 • Search Bar
 • Scope Bar
 
 

  72. 72. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Users are accustomed to the look and behavior of standard views and controls http://www.flickr.com/photos/r_catalano/4180965353
  73. 73. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Status Bar „People expect to see the current battery charge of their device; hiding this information [...] is not an ideal user experience“ • Don‘t create a custom status bar 
 • hiding status bar in case of immersive application (carefully decision)
 • important bar (cell signal strength, network, battery)
 • Choose a status bar content color that coordinates with your app
 
 

  74. 74. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Navigation Bar „ ... enables navigation through an information hierachy and, optionally, managment of screen contents.“ • Consider putting a segmented control in a navagation bar at the top level on an app
 • Avoid crowding a navigation bar with additional controls
 • Make sure text-titled buttons have enough space between them
 • As much as possible, make sure that the look of a customized navigation bar is consistent throughout your app
 
 
 

  75. 75. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Tool Bar „ ... performs actions related to objects in the current view.“ • Include the most frequently used commands that make sense in the current context
 • Use Icon if you need to put more than three items in a toolbar
 • Make sure text-titled buttons have enough space between them
 
 
 
 
 

  76. 76. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Toolbar and Navigation Bar Buttons
  77. 77. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Tab Bars „ ... gives people the ability to switch between different subtasks, views, or modes.“ • In general, use a tab bar to organize information at the app level
 • Don‘t remove a tab when its function is unavailable
 • On iPad, avoid crowding the tab bar with too many tabs
 • On iPad, avoid creating a More tab.
 
 
 
 
 

  78. 78. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Search Bars „ ... accepts text from users, which can bue used for a search“ • ... maybe with different buttons
 
 
 
 
 

  79. 79. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Scope Bar „ ... - which is available only in conjunction with a search bar - helps users define the scope of a search“
  80. 80. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Activity „ ... represents a system-provided or custom service ...“ • each activity is represented by an icon and a title • give users access to a custom service • describe succintly your service
 
 
 
 

  81. 81. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 „ ... that is, a mode in which something exists or is experienced ... “ Modal Context
  82. 82. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 
 
 

  83. 83. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Table View (2/2) „ ... presents data in a single-column list of multiple rows.“ • table view elements
 • different types of table views
 
 
 

  84. 84. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Text View „ ... is a region that displays multiple lines of text ....“
  85. 85. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 
 
 
 

  86. 86. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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)
 
 
 
 

  87. 87. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 
 
 
 
 

  88. 88. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Scroll View „ ... helps people see content that is larger than the scroll view‘s boundaries ...“ • support zoom
 • display only one scroll view at a time 
 
 
 
 
 

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

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

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

  93. 93. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Alerts „ ... give users criticial information in a highly visible way. “ • minize the number of alerts
 • ask for confirmation
 • single / double button alert
 • As much as possible, avoid „you“, „ your“, „me“ and „my“
 • use a sentence fragment
 
 
 

  94. 94. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Action Sheet „ ... appears as the result of a user action ... “ • no display of a textual message
 • use red for the button that performs a potentially destructive action
 • the closer the top, the more visible
 • be aware of mistakenly tapping the bottom button instead of Home button
 
 

  95. 95. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 • ... 

  96. 96. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Creating Custom Icons and Images / Branding / Color / Typography http://www.flickr.com/photos/conorpendergrast/2634918994
  97. 97. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Application Icons „This is a place where branding and strong visual design should come together into a compact, instantly instantly recognizable, attractive package.“
  98. 98. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Launch Images „To enhance the user‘s experience at application launch ... .“ • should not an about window, branding elements
 • measures 320*480 pixel (640*960 high resolution; 640*1136 iPhone 5)
 • it is solely intended to enhance the user‘s perception, as quick launch, ready for use
 
 

  99. 99. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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

  100. 100. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Icons for ... „do not redesign standard buttons“ • use universal imagery, easy recognizable
 • generate an idealized version
 • use transparency when it makes sense

  101. 101. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 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
 

  102. 102. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Branding „Succesful branding involves more than adding brand assets to an app“ • Incorporate a brand‘s asset in a refined, unobtrusive way
 • Don‘t take space away from content people care about
 • Resist the temptation to display your logo througout the app
 

  103. 103. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Color 1/2 „ ... helps indicate interactivity, impart virtality and provide visual continuity.“ • If you create multiple custom colors, make sure the work well toegehter.
 • Pay attention to color contrast in different contexts.
 • Be aware of color blindness
 

  104. 104. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Color 2/2 „ ... helps indicate interactivity, impart virtality and provide visual continuity.“ • Consider choosing a key color to indicate interactivity and state
 • Color communicates, but not always in the way you itend
 • Avoid using the same color in both interactive and noninteractive elements
 • In most cases, don‘t let color discract users

  105. 105. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 Typography „ ... should always be legible.“
  106. 106. Human Interface Guidlines for Mobile Applications - Martin Ebner 2014 http://www.youtube.com/watch?v=jdExukJVUGI iPad - New Way for Applications
  107. 107. Graz University of Technology SOCIAL LEARNING Computer and Information Services Graz University of Technology Martin Ebner http://elearning.tugraz.at martin.ebner@tugraz.at Slides available at: http://elearningblog.tugraz.at mebner

×