Your SlideShare is downloading. ×
iPhone - Human Interface Guidelines
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

iPhone - Human Interface Guidelines

2,082
views

Published on

Lecture Notes iPhone Development TU Graz

Lecture Notes iPhone Development TU Graz

Published in: Education

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,082
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
56
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. iPhone - Human Interface Guidelines Martin Ebner The presentation bases onhttp://developer.apple.com/iphone/library/documentation/userexperience/ conceptual/mobilehig/Introduction/Introduction.html
  • 2. Do we need Usability? http://www.flickr.com/photos/rdolishny/2760207306
  • 3. The future is mobilehttp://flickr.com/photos/thomcochrane/416206133/
  • 4. Fun - just in time - for your target grouphttp://www.flickr.com/photos/161/
  • 5. iPhone / iPad just another device?http://www.flickr.com/photos/kiki99/1031313718
  • 6. „The iPhone generates 33% of all smartphone traffic worldwide and 50% in the US“ (AdMob Mobile Metrics, Febr. 2009) http://metrics.admob.com/iPhone Human Interface Guidlines - Martin Ebner 2011
  • 7. „The iPhone generates 33% of all smartphone traffic worldwide and 50% in the US“ (AdMob Mobile Metrics, Febr. 2009) • The Symbian OS is still number one with 43% share and six of the top 10 handsets. Windows Mobile and Palm each lost half their worldwide share over last six months. • The Top 5 US smartphones - Apple iPhone, BlackBerry Curve, BlackBery Pearl, Palm Centro, and HTC Dream (G1) - generated 77% of traffic in February • The iPhone is now the number one device by usage in Western Europe with 21% share of total requests http://metrics.admob.com/iPhone Human Interface Guidlines - Martin Ebner 2011
  • 8. „91% of iPhone users and 88% of iPod touch users would recommend their device, compared to 84% of Android users and 69% of webOS users“ (AdMob Mobile Metrics, January. 2009) http://metrics.admob.com/iPhone Human Interface Guidlines - Martin Ebner 2011
  • 9. „91% of iPhone users and 88% of iPod touch users would recommend their device, compared to 84% of Android users and 69% of webOS users“ (AdMob Mobile Metrics, January. 2009) http://metrics.admob.com/iPhone Human Interface Guidlines - Martin Ebner 2011
  • 10. A total of 99 percent of 200 respondents to a RBC/IQ ChangeWave survey in August said they are satisfied with their iPhone 3GS, with 82 percent of those "Very Satisfied." http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.htmliPhone Human Interface Guidlines - Martin Ebner 2011
  • 11. http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.htmliPhone Human Interface Guidlines - Martin Ebner 2011
  • 12. Apps usable for everyone?iPhone Human Interface Guidlines - Martin Ebner 2011
  • 13. ADS „ ... pick the few features, most frequently used, by the majority of your users, most appropriated for the mobile ...“ Application Definiton Statement {your differentiator} {your solution} for {your audience}iPhone Human Interface Guidlines - Martin Ebner 2011
  • 14. ADS „ ... pick the few features, most frequently used, by the majority of your users, most appropriated for the mobile ...“ Example: {easy to use} {digital photo sharing} for {casual iphone users} Note - this is a new app {easy to use} {digital photo sharing} for {professional iphone users}iPhone Human Interface Guidlines - Martin Ebner 2011
  • 15. 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 users problem and solve it eleganty • Great usability: solide app hierarchy, clean layout • Gorgeous application icon: hey, the icon is the brand of your product!iPhone Human Interface Guidlines - Martin Ebner 2011
  • 16. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone ApplicationiPhone Human Interface Guidlines - Martin Ebner 2011
  • 17. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone ApplicationiPhone Human Interface Guidlines - Martin Ebner 2011
  • 18. iPhone OS Platform Rich with Possibilites http://www.flickr.com/photos/shuffle-art/1441940051iPhone Human Interface Guidlines - Martin Ebner 2011
  • 19. Platform Differences „An iPhone OS-based device is not a desktop or laptop computer, and an iPhone application is not the same as a desktop application.“ • Compact Sreen Size - 480*320 pixels (iPhone 3 and lower) or 960*640 pixels (since iPhone 4) • Memory is not unlimted • One Screen at a Time • One Application at a Time (since OS 4.0 not, but suggested) • Minimal User HelpiPhone Human Interface Guidlines - Martin Ebner 2011
  • 20. 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)iPhone Human Interface Guidlines - Martin Ebner 2011
  • 21. 3 Application Styles „... applicaton styles, based on visual and behavioral characterstics, data model, and user experience.“ • What do you expect to be the user‘s motivation for using the application? • What do you itend to be the user‘s experience while using the application? • What is the goal or focus of the application? • How does the application organize and display the information people care about?iPhone Human Interface Guidlines - Martin Ebner 2011
  • 22. 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 leveliPhone Human Interface Guidlines - Martin Ebner 2011
  • 23. 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 hierachyiPhone Human Interface Guidlines - Martin Ebner 2011
  • 24. 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 experienceiPhone Human Interface Guidlines - Martin Ebner 2011
  • 25. 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 tasksiPhone Human Interface Guidlines - Martin Ebner 2011
  • 26. Case Study: Mail „ ... when people are mobile, their needs for an email application are simpler, and they want access to core functionality quickly.“iPhone Human Interface Guidlines - Martin Ebner 2011
  • 27. Human Interface Principles http://www.flickr.com/photos/wonderlane/4315076635iPhone Human Interface Guidlines - Martin Ebner 2011
  • 28. Great User Interface „ ... follows human interface design principles, that are based on the way people think and work, not on the capibilities of the device.“ • Methaphors (playback control, sliding on-off switching, ...) • Direct Manipulation (with the Multi-Touch Interface) • See and Point (Presenting choices or options in list form) • Feedback (must be immediate) • User Control (user, not the application must initiate and control actions) • Asthetc Integrity (how well the appearance of you application integrates with your functionality)iPhone Human Interface Guidlines - Martin Ebner 2011
  • 29. Characteristics of Great iPhone Applications http://www.flickr.com/photos/rivalee/2939042459iPhone Human Interface Guidlines - Martin Ebner 2011
  • 30. Build in Simplicty/Ease of Use „ ... users are probably doing other things while they simultaneously use your application“ • Make it obvious • High level Information near the top of the screen (independent of how people tap on screen, top is most visible) • Minimize text input • Keep essential information succinctly • Provide a fingertip-size target area for all tappable elements (calculator example: 44*44 pixel)iPhone Human Interface Guidlines - Martin Ebner 2011
  • 31. Focus on the Primary Task „An iPhone Application that establishes and maintains focus on its primary functionality is satisfying and enjoyable to use“ • What is most important in each context? • Is the provided information essential, does a user need this information right now?iPhone Human Interface Guidlines - Martin Ebner 2011
  • 32. Communicate Effectively „ ... avoid technical jargon in the user interface“ • Feedback is important • use user-centric terminologyiPhone Human Interface Guidlines - Martin Ebner 2011
  • 33. Support Gestures Appropriately „To ensure that your application is discoverable and easy to use, therefore, try to limit the gestures you require to the most popular.“iPhone Human Interface Guidlines - Martin Ebner 2011
  • 34. Handling Common Tasks http://www.flickr.com/photos/intherough/4263146374iPhone Human Interface Guidlines - Martin Ebner 2011
  • 35. 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 orientationiPhone Human Interface Guidlines - Martin Ebner 2011
  • 36. 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 ButtoniPhone Human Interface Guidlines - Martin Ebner 2011
  • 37. 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 screeniPhone Human Interface Guidlines - Martin Ebner 2011
  • 38. .... „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 LocationiPhone Human Interface Guidlines - Martin Ebner 2011
  • 39. 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 taskiPhone Human Interface Guidlines - Martin Ebner 2011
  • 40. 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 appropriatelyiPhone Human Interface Guidlines - Martin Ebner 2011
  • 41. 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.iPhone Human Interface Guidlines - Martin Ebner 2011
  • 42. 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 printiPhone Human Interface Guidlines - Martin Ebner 2011
  • 43. 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 orientationsiPhone Human Interface Guidlines - Martin Ebner 2011
  • 44. 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 circumstancesiPhone Human Interface Guidlines - Martin Ebner 2011
  • 45. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone ApplicationiPhone Human Interface Guidlines - Martin Ebner 2011
  • 46. Brief Tour of the Application User InterfaceiPhone Human Interface Guidlines - Martin Ebner 2011 http://www.flickr.com/photos/ari/4314027331
  • 47. Main parts of application screen „Every application, regardless of type, has an application window“ • Status Bar • Navigation Bar • Tab Bar • ToolbariPhone Human Interface Guidlines - Martin Ebner 2011
  • 48. Users are accustomed to the look and behavior of standard views and controlsiPhone Human Interface Guidlines - Martin Ebner 2011 http://www.flickr.com/photos/r_catalano/4180965353
  • 49. 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 colorsiPhone Human Interface Guidlines - Martin Ebner 2011
  • 50. 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 viewiPhone Human Interface Guidlines - Martin Ebner 2011
  • 51. 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 blackiPhone Human Interface Guidlines - Martin Ebner 2011
  • 52. 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 wayiPhone Human Interface Guidlines - Martin Ebner 2011
  • 53. Alerts, Action Sheets, Modal Views „ ... appear when something requires the user‘s attention ... “iPhone Human Interface Guidlines - Martin Ebner 2011
  • 54. Alerts „ ... give users criticial information in a highly visible way. “ • minize the number of alerts • ask for confirmation • single / double button alertiPhone Human Interface Guidlines - Martin Ebner 2011
  • 55. 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 buttoniPhone Human Interface Guidlines - Martin Ebner 2011
  • 56. Table View „ ... presents data in a single-column list of multiple rows.“ • provide feedback when user select a list item • display content immediately • plain / group style • different table-view elementsiPhone Human Interface Guidlines - Martin Ebner 2011
  • 57. Text View „ ... is a region that displays multiple lines of text ....“iPhone Human Interface Guidlines - Martin Ebner 2011
  • 58. Different Application Controls „Remember that users expect familiar controls to behave as they to in the built-in applications.“ • Activity Indicators • Progress Views • Date and Time Pickers • Rounded Rectangle Buttons • Disclosure Buttons • Search Bars • Info Buttons • Segmented Controls • Labels • Sliders • Page Indicators • Text Fields • PickersiPhone Human Interface Guidlines - Martin Ebner 2011
  • 59. Sytem Provided Buttons „ ... promote a consistent user experience and make your job easier.“iPhone Human Interface Guidlines - Martin Ebner 2011
  • 60. Creating Custom Icons and ImagesiPhone Human Interface Guidlines - Martin Ebner 2011 http://www.flickr.com/photos/conorpendergrast/2634918994
  • 61. Application Icons „This is a place where branding and strong visual design should come together into a compact, instantly instantly recognizable, attractive package.“ • rounded corners, drop shadow, reflective shine automatically added • measures 57*57 pixel (114*114 for high resolution) • small icon for spotlight search (29*29; 58*58 high resolution)iPhone Human Interface Guidlines - Martin Ebner 2011
  • 62. 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 useiPhone Human Interface Guidlines - Martin Ebner 2011
  • 63. Icons for ... „do not redesign standard buttons“ • simple and streamlined • not easily mistaken • readily understood and widely acceptableiPhone Human Interface Guidlines - Martin Ebner 2011
  • 64. iPad - New Way for Applications http://www.youtube.com/watch?v=jdExukJVUGIiPhone Human Interface Guidlines - Martin Ebner 2011
  • 65. What happens when you hand a 3-year-old an iPhone? http://elearningblog.tugraz.at/archives/2994iPhone Human Interface Guidlines - Martin Ebner 2011
  • 66. Grab and Search your Tweets http://grabeeter.tugraz.at martin.ebner@tugraz.atSlides available at: http://elearningblog.tugraz.at SOCIAL LEARNING Computer and Information Services Graz University of Technology Graz University of Technology Martin Ebner http://elearningblog.tugraz.at mebner http://elearning.tugraz.at