iPhone - Human Interface Guidelines

  • 17,170 views
Uploaded on

lecture slides on course iPhone Application Development at Graz University of Technology

lecture slides on course iPhone Application Development at Graz University of Technology

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
17,170
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
363
Comments
3
Likes
18

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 on http://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 mobile http://flickr.com/photos/thomcochrane/416206133/
  • 4. Fun - just in time - for your target group http://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 2010
  • 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 2010
  • 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 2010
  • 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 2010
  • 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.html iPhone Human Interface Guidlines - Martin Ebner 2010
  • 11. http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html iPhone Human Interface Guidlines - Martin Ebner 2010
  • 12. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2010
  • 13. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2010
  • 14. iPhone OS Platform Rich with Possibilites http://www.flickr.com/photos/shuffle-art/1441940051 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 15. 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 • Memory is not unlimted • One Screen at a Time • One Application at a Time • Minimal User Help iPhone Human Interface Guidlines - Martin Ebner 2010
  • 16. What Are Your Options? „Depending on the implementation details and its intended audience, some types of software may be better suited to you 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 2010
  • 17. 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 2010
  • 18. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 19. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 20. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 21. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 22. 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 2010
  • 23. Human Interface Principles http://www.flickr.com/photos/wonderlane/4315076635 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 24. 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 2010
  • 25. Characteristics of Great iPhone Applications http://www.flickr.com/photos/rivalee/2939042459 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 26. 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 2010
  • 27. 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 2010
  • 28. Communicate Effectively „ ... avoid technical jargon in the user interface“ • Feedback is important • use user-centric terminology iPhone Human Interface Guidlines - Martin Ebner 2010
  • 29. 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 2010
  • 30. Handling Common Tasks http://www.flickr.com/photos/intherough/4263146374 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 31. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 32. Stopping „iphone Applications should never quit pogrammatically“ • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 33. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 34. .... „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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 35. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 36. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2010
  • 37. Brief Tour of the Application User Interface iPhone Human Interface Guidlines - Martin Ebner 2010 http://www.flickr.com/photos/ari/4314027331
  • 38. Main parts of application screen „Every application, regardless of type, has an application window“ • Status Bar • Navigation Bar • Tab Bar • Toolbar iPhone Human Interface Guidlines - Martin Ebner 2010
  • 39. Users are accustomed to the look and behavior of standard views and controls iPhone Human Interface Guidlines - Martin Ebner 2010 http://www.flickr.com/photos/r_catalano/4180965353
  • 40. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 41. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 42. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 43. Tab Bars „ If you application provides different perspectives on the same set of data, ... .“ • icons and text, all equal in widht 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 44. Alerts, Action Sheets, Modal Views „ ... appear when something requires the user‘s attention ... “ iPhone Human Interface Guidlines - Martin Ebner 2010
  • 45. Alerts „ ... give users criticial information in a highly visible way. “ • minize the number of alerts • ask for comfirmation • single / double button alert iPhone Human Interface Guidlines - Martin Ebner 2010
  • 46. 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 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 47. 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 elements iPhone Human Interface Guidlines - Martin Ebner 2010
  • 48. Text View „ ... is a region that displays multiple lines of text ....“ iPhone Human Interface Guidlines - Martin Ebner 2010
  • 49. 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 • Pickers iPhone Human Interface Guidlines - Martin Ebner 2010
  • 50. Sytem Provided Buttons „ ... promote a consistent user experience and make your job easier.“ iPhone Human Interface Guidlines - Martin Ebner 2010
  • 51. Creating Custom Icons and Images iPhone Human Interface Guidlines - Martin Ebner 2010 http://www.flickr.com/photos/conorpendergrast/2634918994
  • 52. 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 • small icon for spotlight search (29*29) iPhone Human Interface Guidlines - Martin Ebner 2010
  • 53. Launch Images „To enhance the user‘s experience at application launch ... .“ • should not an about window, branding elements • measures 320*480 pixel • it is solely intended to enhance the user‘s perception, as quick launch, ready for use iPhone Human Interface Guidlines - Martin Ebner 2010
  • 54. Icons for ... „do not redesign standard buttons“ • simple and streamlined • not easily mistaken • readily understood and widely acceptable iPhone Human Interface Guidlines - Martin Ebner 2010
  • 55. iPad - New Way for Applications http://www.youtube.com/watch?v=jdExukJVUGI iPhone Human Interface Guidlines - Martin Ebner 2010
  • 56. What happens when you hand a 3-year-old an iPhone? http://elearningblog.tugraz.at/archives/2994 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 57. SOCIAL LEARNING Institute of Information Systems and Computer Media Graz University of Technology Graz University of Technology Martin Ebner http://elearning.tugraz.at http://elearningblog.tugraz.at