Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
iPhone / iPad -
  Human Interface Guidelines
                            Martin Ebner




                        The pres...
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."                                ...
„91% of iPhone users and 88% of iPod touch users would
        recommend their device, compared to 84% of Android
        ...
A total of 99 percent of 200 respondents to a RBC/IQ
                   ChangeWave survey in August said they are satisfied...
http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html



iPhone Human Inte...
http://www.androidpit.de/de/android/blog/394061/
    Weltweite-Smartphone-Verkaufszahlen-Android-
                        ...
Apps usable for everyone?
iPhone Human Interface Guidlines - Martin Ebner 2012
ADS
                                                „ ... pick the few features, most frequently used, by
                ...
ADS
                                                „ ... pick the few features, most frequently used, by
                ...
ADS
                                                „ ... pick the few features, most frequently used, by
                ...
iPhone -
             HI Guidelines



                    Planning your iPhone
                    Software Product



  ...
iPhone -
             HI Guidelines



                    Planning your iPhone
                    Software Product



  ...
iPhone OS Platform
       Rich with Possibilites
  http://www.flickr.com/photos/shuffle-art/1441940051
iPhone Human Interf...
Platform Differences 1/2
                                                „An iPhone OS-based device is not a desktop or
  ...
Platform Differences 2/2
                                                „An iPhone OS-based device is not a desktop or
  ...
What Are Your Options?
                                                „Depending on the implementation details and its
  ...
3 Application Styles
                                                „... applicaton styles, based on visual and behaviora...
Productivity Applications
                                                „ ... enables tasks that are based on the organi...
Utility Applications
                                                „ ... perfoms a simply task that requires a minimum o...
Immersive Applications
                                                „ ... offers a full-screen, visually rich environme...
Choosing an App Style

                                                „When in doubt, keep it simple.“




      • Pare t...
Case Study: Mail
                                                „ ... when people are mobile, their needs for an email
  ...
Design the App For the Device
                                                „... you need to make sure that your app loo...
From iPhone to iPad Application




 http://www.flickr.com/photos/scolirk/4652688063
iPad Human Interface Guidlines - Marti...
Compatibility Mode
                                               „Unmodified, iPhone applications are running in a
       ...
Human Interface Principles




 http://www.flickr.com/photos/wonderlane/4315076635
iPhone Human Interface Guidlines - Mart...
Great User Interface
                                                „ ... follows human interface design principles, that...
User Experience
                                                         Guidelines


    http://www.flickr.com/photos/riv...
Focus on the Primary Task
                                                „An iPhone Application that establishes and main...
Build in Simplicty/Ease of Use
                                                „ ... users are probably doing other things...
Communicate Effectively

                                                „ ... avoid technical jargon in the user interfac...
Support Gestures Appropriately
                                                „To ensure that your application is discove...
Think about each detail

                                                „ ... iOS devices are personal devices, but ...“
...
Graphical Interface - don‘t
                                                forget about it
                              ...
For iPad 1/2




      • Enhance Interactivity
      • Reduce Full-Screen Transitions (update only the areas of
          ...
For iPad 2/2
                                                „Consider Using Popovers for some modal tasks...“




      •...
iOS Technology
                                                       Usage Guidlines




 http://www.flickr.com/photos/in...
iCloud Storage
                                               „iCloud storage helps people access the content they
       ...
Multitasking
                                               „ Multitasking allows people to switch quickly among
         ...
Multitasking
                                               „ Multitasking allows people to switch quickly among
         ...
Notification Center 1/2
                                               „... gives a user a single, convenient place in whi...
Notification Center 2/2
                                               „iOS apps that support local or push notifications c...
Printing
                                               „ ... users can wirelessly print content from your
               ...
iAd
                                               „ ... you can allow advertisements to display within
                  ...
iAd
                                               „ ... you can allow advertisements to display within
                  ...
Using Sound
                                                „ ... users always expect to hear alarms that they have
      ...
Starting
                                                „iPhone Application should start instantly so users
             ...
Stopping
                                                „iphone Applications should never quit
                          ...
Settings and Configuration
                                                „It‘s best when iPhone application do not aks u...
....
                                                „Don‘t provide a button for a built-in action, because
              ...
iPhone -
             HI Guidelines



                    Planning your iPhone
                    Software Product



  ...
Brief Tour of the
   Application User Interface




iPhone Human Interface Guidlines - Martin Ebner 2012
                 ...
Main parts of application screen
                                                „Every application, regardless of type, h...
Users are accustomed to the look and
                    behavior of standard views and controls


iPhone Human Interface ...
Status Bar
                                                „People expect to see the current battery charge of
           ...
Navigation Bar
                                                „ ... appears at the upper edge of an application
         ...
Tool Bar
                                                „ ... performs actions related to objects in the current
        ...
Tab Bars
                                                „ If you application provides different perspectives on
         ...
Alerts, Action Sheets, Modal Views
                                                „ ... appear when something requires th...
Alerts
                                                „ ... give users criticial information in a highly visible
        ...
Action Sheet

                                                „ ... appears as the result of a user action ... “



      ...
Table View
                                                „ ... presents data in a single-column list of multiple
       ...
Text View

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


...
Different Application Controls
                                                „Remember that users expect familiar contro...
iPad only: Popover (1/2)
                                              „... is a transient view that can be revealed when
...
iPad only: Popover (2/2)
                                              „... is a transient view that can be revealed when
...
iPad only: Split View (1/2)
                                              „... is a full screen view that consits of two s...
iPad only: Split View (1/2)
                                              „... is a full screen view that consits of two s...
Sytem Provided Buttons
                                                „ ... promote a consistent user experience and make...
Creating Custom Icons
   and Images




iPhone Human Interface Guidlines - Martin Ebner 2012
                             ...
Application Icons
                                                „This is a place where branding and strong visual
      ...
Launch Images
                                                „To enhance the user‘s experience at application
           ...
Icons for ...

                                                „do not redesign standard buttons“


        • simple and s...
Tips for Creating Great Artwork
                                                „The Retina display allows you to display ...
iPad - New Way for Applications




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

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




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


                          SOCIAL LEARNING
                       C...
Upcoming SlideShare
Loading in …5
×

of

iPhone / iPad - Human Interface Guidelines Slide 1 iPhone / iPad - Human Interface Guidelines Slide 2 iPhone / iPad - Human Interface Guidelines Slide 3 iPhone / iPad - Human Interface Guidelines Slide 4 iPhone / iPad - Human Interface Guidelines Slide 5 iPhone / iPad - Human Interface Guidelines Slide 6 iPhone / iPad - Human Interface Guidelines Slide 7 iPhone / iPad - Human Interface Guidelines Slide 8 iPhone / iPad - Human Interface Guidelines Slide 9 iPhone / iPad - Human Interface Guidelines Slide 10 iPhone / iPad - Human Interface Guidelines Slide 11 iPhone / iPad - Human Interface Guidelines Slide 12 iPhone / iPad - Human Interface Guidelines Slide 13 iPhone / iPad - Human Interface Guidelines Slide 14 iPhone / iPad - Human Interface Guidelines Slide 15 iPhone / iPad - Human Interface Guidelines Slide 16 iPhone / iPad - Human Interface Guidelines Slide 17 iPhone / iPad - Human Interface Guidelines Slide 18 iPhone / iPad - Human Interface Guidelines Slide 19 iPhone / iPad - Human Interface Guidelines Slide 20 iPhone / iPad - Human Interface Guidelines Slide 21 iPhone / iPad - Human Interface Guidelines Slide 22 iPhone / iPad - Human Interface Guidelines Slide 23 iPhone / iPad - Human Interface Guidelines Slide 24 iPhone / iPad - Human Interface Guidelines Slide 25 iPhone / iPad - Human Interface Guidelines Slide 26 iPhone / iPad - Human Interface Guidelines Slide 27 iPhone / iPad - Human Interface Guidelines Slide 28 iPhone / iPad - Human Interface Guidelines Slide 29 iPhone / iPad - Human Interface Guidelines Slide 30 iPhone / iPad - Human Interface Guidelines Slide 31 iPhone / iPad - Human Interface Guidelines Slide 32 iPhone / iPad - Human Interface Guidelines Slide 33 iPhone / iPad - Human Interface Guidelines Slide 34 iPhone / iPad - Human Interface Guidelines Slide 35 iPhone / iPad - Human Interface Guidelines Slide 36 iPhone / iPad - Human Interface Guidelines Slide 37 iPhone / iPad - Human Interface Guidelines Slide 38 iPhone / iPad - Human Interface Guidelines Slide 39 iPhone / iPad - Human Interface Guidelines Slide 40 iPhone / iPad - Human Interface Guidelines Slide 41 iPhone / iPad - Human Interface Guidelines Slide 42 iPhone / iPad - Human Interface Guidelines Slide 43 iPhone / iPad - Human Interface Guidelines Slide 44 iPhone / iPad - Human Interface Guidelines Slide 45 iPhone / iPad - Human Interface Guidelines Slide 46 iPhone / iPad - Human Interface Guidelines Slide 47 iPhone / iPad - Human Interface Guidelines Slide 48 iPhone / iPad - Human Interface Guidelines Slide 49 iPhone / iPad - Human Interface Guidelines Slide 50 iPhone / iPad - Human Interface Guidelines Slide 51 iPhone / iPad - Human Interface Guidelines Slide 52 iPhone / iPad - Human Interface Guidelines Slide 53 iPhone / iPad - Human Interface Guidelines Slide 54 iPhone / iPad - Human Interface Guidelines Slide 55 iPhone / iPad - Human Interface Guidelines Slide 56 iPhone / iPad - Human Interface Guidelines Slide 57 iPhone / iPad - Human Interface Guidelines Slide 58 iPhone / iPad - Human Interface Guidelines Slide 59 iPhone / iPad - Human Interface Guidelines Slide 60 iPhone / iPad - Human Interface Guidelines Slide 61 iPhone / iPad - Human Interface Guidelines Slide 62 iPhone / iPad - Human Interface Guidelines Slide 63 iPhone / iPad - Human Interface Guidelines Slide 64 iPhone / iPad - Human Interface Guidelines Slide 65 iPhone / iPad - Human Interface Guidelines Slide 66 iPhone / iPad - Human Interface Guidelines Slide 67 iPhone / iPad - Human Interface Guidelines Slide 68 iPhone / iPad - Human Interface Guidelines Slide 69 iPhone / iPad - Human Interface Guidelines Slide 70 iPhone / iPad - Human Interface Guidelines Slide 71 iPhone / iPad - Human Interface Guidelines Slide 72 iPhone / iPad - Human Interface Guidelines Slide 73 iPhone / iPad - Human Interface Guidelines Slide 74 iPhone / iPad - Human Interface Guidelines Slide 75 iPhone / iPad - Human Interface Guidelines Slide 76 iPhone / iPad - Human Interface Guidelines Slide 77 iPhone / iPad - Human Interface Guidelines Slide 78 iPhone / iPad - Human Interface Guidelines Slide 79 iPhone / iPad - Human Interface Guidelines Slide 80 iPhone / iPad - Human Interface Guidelines Slide 81 iPhone / iPad - Human Interface Guidelines Slide 82 iPhone / iPad - Human Interface Guidelines Slide 83 iPhone / iPad - Human Interface Guidelines Slide 84 iPhone / iPad - Human Interface Guidelines Slide 85 iPhone / iPad - Human Interface Guidelines Slide 86
Upcoming SlideShare
Mobile Leanrning - More Than Just a Hype?
Next
Download to read offline and view in fullscreen.

4 Likes

Share

Download to read offline

iPhone / iPad - Human Interface Guidelines

Download to read offline

Lecture Notes for the lecture "mobile application developm

Related Audiobooks

Free with a 30 day trial from Scribd

See all

iPhone / iPad - Human Interface Guidelines

  1. 1. iPhone / iPad - Human Interface Guidelines Martin Ebner The presentation bases on http://developer.apple.com/iphone/library/documentation/userexperience/ conceptual/mobilehig/Introduction/Introduction.html (V 2011-10-12)
  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." AdMob Mobile Metrics, 2009 http://de.admob.com/s/solutions/metrics?_cd=1 http://www.flickr.com/photos/pleasewait/2272096624
  12. 12. „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 2012
  13. 13. 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 2012
  14. 14. http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html iPhone Human Interface Guidlines - Martin Ebner 2012
  15. 15. http://www.androidpit.de/de/android/blog/394061/ Weltweite-Smartphone-Verkaufszahlen-Android- Nummer-Eins
  16. 16. Apps usable for everyone? iPhone Human Interface Guidlines - Martin Ebner 2012
  17. 17. 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 2012
  18. 18. 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 2012
  19. 19. 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! iPhone Human Interface Guidlines - Martin Ebner 2012
  20. 20. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2012
  21. 21. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2012
  22. 22. iPhone OS Platform Rich with Possibilites http://www.flickr.com/photos/shuffle-art/1441940051 iPhone Human Interface Guidlines - Martin Ebner 2012
  23. 23. 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) • Device orientation can change to any time • Memory is not unlimted • Apps Respond to gestures, not clicks • One screen at a time iPhone Human Interface Guidlines - Martin Ebner 2012
  24. 24. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  25. 25. 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 2012
  26. 26. 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 2012
  27. 27. 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 2012
  28. 28. 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 2012
  29. 29. 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 2012
  30. 30. 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 2012
  31. 31. 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 2012
  32. 32. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  33. 33. From iPhone to iPad Application http://www.flickr.com/photos/scolirk/4652688063 iPad Human Interface Guidlines - Martin Ebner 2010
  34. 34. 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. iPad Human Interface Guidlines - Martin Ebner 2010
  35. 35. Human Interface Principles http://www.flickr.com/photos/wonderlane/4315076635 iPhone Human Interface Guidlines - Martin Ebner 2012
  36. 36. 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) iPhone Human Interface Guidlines - Martin Ebner 2012
  37. 37. User Experience Guidelines http://www.flickr.com/photos/rivalee/2939042459 iPhone Human Interface Guidlines - Martin Ebner 2012
  38. 38. 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 2012
  39. 39. 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 (independent of how people tap on screen, top is most visible) • Minimize text input and Keep essential information succinctly • Give people a logical path to follow • Provide a fingertip-size target area for all tappable elements (calculator example: 44*44 pixel) iPhone Human Interface Guidlines - Martin Ebner 2012
  40. 40. Communicate Effectively „ ... avoid technical jargon in the user interface“ • Feedback is important • use user-centric terminology iPhone Human Interface Guidlines - Martin Ebner 2012
  41. 41. 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 2012
  42. 42. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  43. 43. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  44. 44. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  45. 45. For iPad 2/2 „Consider Using Popovers for some modal tasks...“ • 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? iPhone Human Interface Guidlines - Martin Ebner 2012
  46. 46. iOS Technology Usage Guidlines http://www.flickr.com/photos/intherough/4263146374 iPhone Human Interface Guidlines - Martin Ebner 2012
  47. 47. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  48. 48. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  49. 49. 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 2012
  50. 50. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  51. 51. Notification Center 2/2 „iOS apps that support local or push notifications can use the following notification styles.“ Banner Sound Alert Badge iPhone Human Interface Guidlines - Martin Ebner 2012
  52. 52. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  53. 53. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  54. 54. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  55. 55. 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 2012
  56. 56. 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 2012
  57. 57. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  58. 58. 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 2012
  59. 59. .... „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 2012
  60. 60. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2012
  61. 61. Brief Tour of the Application User Interface iPhone Human Interface Guidlines - Martin Ebner 2012 http://www.flickr.com/photos/ari/4314027331
  62. 62. 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 2012
  63. 63. Users are accustomed to the look and behavior of standard views and controls iPhone Human Interface Guidlines - Martin Ebner 2012 http://www.flickr.com/photos/r_catalano/4180965353
  64. 64. 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 2012
  65. 65. 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 2012
  66. 66. 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 2012
  67. 67. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  68. 68. Alerts, Action Sheets, Modal Views „ ... appear when something requires the user‘s attention ... “ iPhone Human Interface Guidlines - Martin Ebner 2012
  69. 69. Alerts „ ... give users criticial information in a highly visible way. “ • minize the number of alerts • ask for confirmation • single / double button alert iPhone Human Interface Guidlines - Martin Ebner 2012
  70. 70. 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 2012
  71. 71. 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 2012
  72. 72. Text View „ ... is a region that displays multiple lines of text ....“ iPhone Human Interface Guidlines - Martin Ebner 2012
  73. 73. 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 2012
  74. 74. iPad only: Popover (1/2) „... is a transient view that can be revealed when people tap a control or an onscreen area. “ • can contain table, image map, text, web or custom views • display additional information or list or items • display contents of left pane of a split view-based application • display an action sheet iPad Human Interface Guidlines - Martin Ebner 2010
  75. 75. iPad only: Popover (2/2) „... is a transient view that can be revealed when people tap a control or an onscreen area. “ • save users‘ work when they tap outside a popover‘s border • ensure that the popover arrow points as directly as possible to the element • make sure people can use popover without seeing the application content behind it • only one popover should be visible onscreen at a time • avoid making it too big iPad Human Interface Guidlines - Martin Ebner 2010
  76. 76. iPad only: Split View (1/2) „... is a full screen view that consits of two side-by- side panes. “ iPad Human Interface Guidlines - Martin Ebner 2010
  77. 77. 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 iPad Human Interface Guidlines - Martin Ebner 2010
  78. 78. Sytem Provided Buttons „ ... promote a consistent user experience and make your job easier.“ iPhone Human Interface Guidlines - Martin Ebner 2012
  79. 79. Creating Custom Icons and Images iPhone Human Interface Guidlines - Martin Ebner 2012 http://www.flickr.com/photos/conorpendergrast/2634918994
  80. 80. 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 2012
  81. 81. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  82. 82. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  83. 83. 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 iPhone Human Interface Guidlines - Martin Ebner 2012
  84. 84. iPad - New Way for Applications http://www.youtube.com/watch?v=jdExukJVUGI iPhone Human Interface Guidlines - Martin Ebner 2012
  85. 85. What happens when you hand a 3-year-old an iPhone? http://elearningblog.tugraz.at/archives/2994 iPhone Human Interface Guidlines - Martin Ebner 2012
  86. 86. Slides available at: http://elearningblog.tugraz.at SOCIAL LEARNING Computer and Information Services Graz University of Technology Graz University of Technology Martin Ebner martin.ebner@tugraz.at mebner http://elearning.tugraz.at
  • coolmacmaniac

    Dec. 21, 2013
  • richardnoromor

    Apr. 10, 2013
  • BillyChoi

    Nov. 9, 2012
  • le_lapin

    Mar. 16, 2012

Lecture Notes for the lecture "mobile application developm

Views

Total views

6,707

On Slideshare

0

From embeds

0

Number of embeds

1,548

Actions

Downloads

111

Shares

0

Comments

0

Likes

4

×