Successfully reported this slideshow.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

iPhone/iPad Human Interface Design

  1. iPad - Human Interface Guidelines Martin Ebner The presentation bases on http://developer.apple.com/iphone/library/documentation/general/conceptual/ ipadhig/Introduction/Introduction.html
  2. Do we need Usability? http://www.flickr.com/photos/rdolishny/2760207306
  3. Different Devices http://www.flickr.com/photos/toddhiestand/197704394/
  4. Different Devices http://www.flickr.com/photos/toddhiestand/197704394/
  5. Different Devices http://www.flickr.com/photos/toddhiestand/197704394/
  6. Different Devices http://www.flickr.com/photos/toddhiestand/197704394/
  7. iPad ushers in a new user experience that differs significantly from the iPhone user experience http://www.flickr.com/photos/kiki99/1031313718
  8. iPad - eBooks complete different http://elearningblog.tugraz.at/archives/3404 iPad Human Interface Guidlines - Martin Ebner 2010
  9. iPad - New kind of Learning http://elearningblog.tugraz.at/archives/3430 iPad Human Interface Guidlines - Martin Ebner 2010
  10. iPad - Personalized News http://elearningblog.tugraz.at/archives/3690 iPad Human Interface Guidlines - Martin Ebner 2010
  11. iPhone / iPad - cteristics shar e d c h ar a http://www.flickr.com/photos/ivyfield/4486938457 iPad Human Interface Guidlines - Martin Ebner 2010
  12. iPhone / iPad - similiarities „... note that iPad and iPhone are sharing following characteristics“ • Memory is limited • Preferences are available in the Settings application • Device orientation can change • Onscreen user help is minimal and understated • Applications respond to manual gestures • Native, web-only and hybrid software run on the device iPad Human Interface Guidlines - Martin Ebner 2010
  13. iPad - Device Characteristics http://www.flickr.com/photos/lexnger/4596784697 iPad Human Interface Guidlines - Martin Ebner 2010
  14. iPad - new characteristics „... that have a significant impact on your application‘s user interface:“ • A large screen size - 1024*768 pixels • No default of user-expected orientation • Option for users to plug in an external keyboard (and used it instead of the onscreen keyboard) • The ability for users to dock the device iPad Human Interface Guidlines - Martin Ebner 2010
  15. From iPhone to iPad Application http://www.flickr.com/photos/scolirk/4652688063 iPad Human Interface Guidlines - Martin Ebner 2010
  16. 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
  17. Case Study „From Mail on iPhone to Mail on iPad“ iPad Human Interface Guidlines - Martin Ebner 2010
  18. Case Study 2/3 „From Mail on iPhone to Mail on iPad“ iPad Human Interface Guidlines - Martin Ebner 2010
  19. Case Study 3/3 „From Mail on iPhone to Mail on iPad“ • Expanded support for device orientation • Increased focus on message content • Flatter hierachy • Drastically reduced full-screen transitions • Relastic messages iPad Human Interface Guidlines - Martin Ebner 2010
  20. iPad User Experience Guidelines http://www.flickr.com/photos/ownipics/4837496759 iPad Human Interface Guidlines - Martin Ebner 2010
  21. Aim to Support All Orientations „Being able to run in all orientations is an important factor in the success of your iPad application.“ • Maintan focus on the primary content - no big chances in different orientations • Consider changing how you display auxiliary information or functionality • Avoid radical or gratutious changes in layout • Avoid providing UI Element or defining a rotation gesture that rotates your content • Provide a unique launch image for each rotation • Think bevore preventing from running in all orientaions iPad Human Interface Guidlines - Martin Ebner 2010
  22. Enhance Interactivity „Resist the temptation to fill the large screen with features that are not directly related to the main task.“ In particular - you should not view the large iPad screen as an invitation to bring back all the functionality you pruned from your iPhone application iPad Human Interface Guidlines - Martin Ebner 2010
  23. Flatten your Information Hierachy „Use the iPad screen and new UI elements to give people access to more information in one place.“ • Use a navagation bar in the right pane of a split view iPad Human Interface Guidlines - Martin Ebner 2010
  24. Flatten your Information Hierachy „Use the iPad screen and new UI elements to give people access to more information in one place.“ • Use a navagation bar in the left pane of a split view iPad Human Interface Guidlines - Martin Ebner 2010
  25. Flatten your Information Hierachy „Use the iPad screen and new UI elements to give people access to more information in one place.“ • Use a popover to enable actions or provide tools that affect onscreen objects iPad Human Interface Guidlines - Martin Ebner 2010
  26. Flatten your Information Hierachy „Use the iPad screen and new UI elements to give people access to more information in one place.“ • Use a segmented control in a toolbar - to display different perspectives on the content or different information categories iPad Human Interface Guidlines - Martin Ebner 2010
  27. Flatten your Information Hierachy „Use the iPad screen and new UI elements to give people access to more information in one place.“ • Use a tab bar to display information categories or, less often, different application modes. iPad Human Interface Guidlines - Martin Ebner 2010
  28. Reduce Full-Screen Transitions „... try to update only the areas of the user interface that need it.“ ... perform fewer full-screen transitions, your application has greater visual stability, which helps people keep track of where they are in the task. iPad Human Interface Guidlines - Martin Ebner 2010
  29. Enable Collaboration „... also encourage physical collaboration and sharing with others.“ People expect to be able to share information that‘s imporatant to them. When it makes sense, make it easy to: • interact with others • share things like their location, opinions or high scores • share data with other tools they use (iPad application acts as mobile complement to a computer application or allows to communication with the iPhone version) iPad Human Interface Guidlines - Martin Ebner 2010
  30. Add Realism „The more true to life your application looks and behaves, the easier it is for people to understand and the more they enjoy using it.“ • Use animation for further enhance realism iPad Human Interface Guidlines - Martin Ebner 2010
  31. Start Instantly „... should start as quickly as possible.“ • Display a launch image that closely resembles the first application screen in the current orientation • Avoid displaying an About Window or a splash screen that slows application startup • Restore state from the last time the application ran • Avoid asking people to supply setup information iPad Human Interface Guidlines - Martin Ebner 2010
  32. Create Custom Icons „Every application needs to supply a custom application icon.“ Application Icon: • 72*72 pixel application icon (90-degree corners, no shine or gloss, not use alpha tranparency) - be sure that completly fills the 72*72 pixel area. • 512*512 pixel version for display in the App Store iPad Human Interface Guidlines - Martin Ebner 2010
  33. Create Custom Icons „Every application needs to supply a custom application icon.“ Spotlight Search Icon: • PNG format • 50*50 pixel (final visual size is 48*48) iPad Human Interface Guidlines - Martin Ebner 2010
  34. Create Custom Icons „Every application needs to supply a custom application icon.“ Settings Icon: • PNG format • 29*29 pixel iPad Human Interface Guidlines - Martin Ebner 2010
  35. Create Custom Icons „Every application needs to supply a custom application icon.“ Custom Document Icon: • 64*64 and 320*320 pixel • Create „safe zone“ • Icon before and after processing iPad Human Interface Guidlines - Martin Ebner 2010
  36. More hints (1/2) „... to think about.“ • De-emphasize User Interface Controls • Minimize Modality • Rethink your Lists • Consider Multifinger Gestures • Consider Popovers for some Modal Tasks • Downplay File-Handling Operations iPad Human Interface Guidlines - Martin Ebner 2010
  37. More hints (2/2) „... to think about.“ • Ask People to Save Only When Necessary • Migrate Toolbar Content to the Top (compare with Mail iPad application) • Always be Prepared to Stop • Create a Launch Image for Each Orientation • Follow Established Principles iPad Human Interface Guidlines - Martin Ebner 2010
  38. iPad UI Element Guidelines http://www.flickr.com/photos/sami/4732156235
  39. Status Bar „... appears at the upper edge and contain informations people need (network connection, time, batterey charge.“ iPad Human Interface Guidlines - Martin Ebner 2010
  40. Navigation Bar „... appears at the upper edge of an application screen or view. “ • contain controls, title of the current view • use navigation bar if you need to allow people to drill down into an information hierarchy • use a toolbar instead of navigation bar • consider putting a segmented control in a navagation bar • avoid crowding a navagation bar with additional controls • use only bordered-style controls and system-provided buttons • be aware that there is no change of height iPad Human Interface Guidlines - Martin Ebner 2010
  41. Tab Bar „... appears at the bottom edge of an application screen. “ • ability to switch between different subtasks, views, modes • use to organize information at the application level • avoid crowding the tab bar with too many tabs • avoid creating a More tab • display the same tabs in each orientation • use system-provided tab icons • does not change its color, opacity, height in any orientation iPad Human Interface Guidlines - Martin Ebner 2010
  42. Tool Bar „... appears at the top edge of a screen or view. “ • can also appear at the bottom edge • contains controls that perform actions to objects in the screen or view • use to give a selection of frequently used commands • mantain a hit target area of at least 44*44 pixels • use system-provided items • avoid mixing plain style and bordered items iPad Human Interface Guidlines - Martin Ebner 2010
  43. 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
  44. 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
  45. Split View (1/2) „... is a full screen view that consits of two side-by- side panes. “ iPad Human Interface Guidlines - Martin Ebner 2010
  46. Split View (2/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
  47. Controls „... with a couple of slight differences to iPhone. “ • Date and Time Picker • Info Button • Page Indicator • Search Bar • Segmented Control iPad Human Interface Guidlines - Martin Ebner 2010
  48. Action Sheets „... display a set of choices related to a task. “ • without animation - action sheet and popovover appear simultaneously • with animation - action sheet slides up pver an popover‘s content iPad Human Interface Guidlines - Martin Ebner 2010
  49. Modal View „... provides self-contained functionality in the context of the current task or workflow. “ • Full Screen; Page Sheet (fixed with 768 points); Form Sheet (fixed 540*620); Current Context iPad Human Interface Guidlines - Martin Ebner 2010
  50. Grab and Search your Tweets http://grabeeter.tugraz.at martin.ebner@tugraz.at Slides 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

×