A research on i pad device & experience design


Published on

Some learnings and a few ideas on how to develop for iPad.

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

A research on i pad device & experience design

  1. 1. A research on iPad: device & experience design wyl2000@gmail.com http://www.v2000.info
  2. 2. Content • What is iPad? – iPad: Data & Facts • What make iPad special & why need to develop a Native APP? – Hardware & Specification – How people use iPad • A Primary Learning on iPad UI & UX design – iPad Device Characteristics – New UI Elements and Behaviors – A “CARS” Shopping Experience Strategy • Appendix
  3. 3. What is iPad? “The best way to experience the web, email, photos, and video.”
  4. 4. iPad: Data and Facts iPads Sold Adoption by state, by the end of April,10 4,000,000 3,000,000 Selling 2,000,000 internationally since May 28 1,000,000 0 1 31 61 91 http://labs.chitika.com/ipa http://www.ipadinsider.com/3000000-ipads-in-80-days/ iPad APP App Pricing What we learn: • The 1st mass-market large-scale touch device • iPad users are likely to spends more (on what they like) • An highly possible overlap between existing XXXXXX customer, or penitential customers http://www.mobclix.com/appstore/1 Source: http://www.johnkumahara.com/unboxing-the-ipad-data
  5. 5. What make iPad special & why need to develop a Native APP? • Hardware & Specifications • How people use iPad iPad vs. iPhone vs. PC
  6. 6. Comparison with IOS family devices IOS family iPod Touch iPhone 3GS iPhone 4 iPad Processor 600Mhz ARM 600Mhz ARM 1000Mhz A4 1000Mhz A4 RAM 256 mb 256 mb 512 mb 256 mb Screen 3.5” 320*480 3.5” 320*480 3.5” 960*640 9.7” 1024*768 Network WiFi, Bluetooth WiFi, WiFi, WiFi, Bluetooth,3G Bluetooth,3G Bluetooth,3G* Battery life 6 hrs 5hrs/300hrs 6hrs/300hrs 10hrs/Month Style Handheld Handheld Handheld Table Camera No Yes Yes No
  7. 7. Comparison with PC iPad PC (desktop or laptop) Computing Power Less strong, only 1Ghz Much stronger, generally over several Ghz and with multiple- core Multitask One application @ a time yes Input Multi-Touch screen/ Intuitive Classic keyboard and mouse, but less efficient for creating or efficient for creating and editing editing Mobility Good, less than cell phone Not good, relatively Easy to learn/ use Very easy & intuitve Not easy enough, especially for kids and the old
  8. 8. How people use iPad? • Usage Examples – Environments – Situations – Social Interactions • A quick summery
  9. 9. Examples: how people use these devices Mobile Phone iPad
  10. 10. Environments PC office Kitchen iPad W.C. study room Even on the operating table
  11. 11. Social Interactions iPad Mobile Phone
  12. 12. A quick summary: iPhone iPad PC Scenarios Anywhere & anytime Comfortable & relaxing Generally workplace or places, or more study room Situations Fast, quick & dirty Engaged, deep Task-focused, interactions interactions immersive consumption Social Personal & private Public & sharing Varied Mental Model When I need to “…” When I want to “…” Varied “Mine alone” “depth of interaction” Behaviors Hunt and collect Better for media Do all but less information; complete consumption, reading, satisfying or inspiring less complex & web surfing; a more immediate tasks; robust task completion platform Generate Info An input source more An output source more Both than output than input source(no source(photo, video) camera) Partially Adapted from Adam R.T. Smith CEO/ Director of Experience Design
  13. 13. A PRIMARY LEARNING ON IPAD UI & UX DESIGN • iPad Device Characteristics • From iPhone Application to iPad Application • Opportunities and Challenges of being “Bigger” • New UI Elements and Behaviors • split view • modal task • ……
  14. 14. iPad Device Characteristics iPad’s new characteristics that have a significant impact on user interface: • A large screen size of 1024 x 768 pixels. • No default or user-expected orientation. • The option for users to plug in an external keyboard and use it in place of the onscreen keyboard. • The ability for users to dock the device.
  15. 15. iPad and iPhone share the following characteristics: • Memory is limited. • One application runs at a time. • Preferences are available in the Settings application. • Device orientation can change. • Onscreen user help is minimal and understated. • Applications respond to manual gestures, not mouse clicks. • Native, web-only, and hybrid software run on the device. • Artwork has a standard bit depth, specifically 24 bits (8 bits each for red, green, and blue), plus an 8-bit alpha channel. In general, the PNG format is recommended.
  16. 16. From iPhone Application to iPad Application • iPhone App runs on iPad: Awkward, Ugly and Impropriate; iPhone APP: XXXXXX • Need to be re-envisioned for iPad so that they take advantage of the larger screen
  17. 17. From iPhone Application to iPad Application: Native vs. iPhone iPhone APP: Amazon iPad APP: Amazon • For iPad, flipping the entire screen is not generally recommended, many utility applications need to change their interaction model.
  18. 18. Opportunities of Big Screen iPhone APP: XXXXXX • Less cluttered interfaces • More content viewable at a time APP: Amazon • Combine the content from separate iPhone screens into one screen on iPad. • Giving users more in-depth information about the task, get an expanded view on the same screen. • Give people more ways to interact with the content.
  19. 19. Challenges of Big Screen APP: Numbers • Tackle more complex actions/ tasks • More usable keyboard(than phone) • Distance between interface elements (tab bar to app header buttons) can reduce efficiency • Find-ability of buttons might be more troublesome • Low memorability; Accidental activation
  20. 20. New UI Elements and Behaviors • Split view. • Popover. • Results list button. • Modal views have new presentation styles. • Toolbars can be in additional locations. • The edit menu can display custom items. • The keyboard view can be customized. • The keyboard view can include custom input accessories. • Custom text views can support text in multiple styles and offer advanced editing features.
  21. 21. Spilt-view Design Wish List Product Detail APP: Amazon Split view. You can use this iPad-only element to display more than one view onscreen at a time, such as to present data in a master-detail or source list–style arrangement. The split view is a common organizational element in iPad applications because it helps flatten the information hierarchy. Find out more about the ways you can use a split view in your application by reading “iPad User Experience Guidelines.” For usage guidelines, see “Split View.” Dev Reference: http://mobiforge.com/developing/story/developing-split-view-based-apps-ipad
  22. 22. Modal View APP: Mail APP: Amazon • Modal views have new presentation styles. You can use styles such as full screen, partial screen, and form to present a modal interface that’s more closely tailored to your application’s user experience and visual design. (For usage guidelines, see “Modal View.”)
  23. 23. Popover Contextual Popover APP: Amazon • You can use this iPad-only view to temporarily display additional information, controls, or choices related to content in the main view. The main benefit of the popover is that it can contain information or choices that don’t need to be in the main interface all the time. To find out more about some of the ways you can use a popover, see “Use Popovers to Perform Some Modal Tasks.” For usage guidelines, see “Popover.”
  24. 24. Results list button Better Information Discovery • You can use this system-provided button to reveal search results from a search bar. (For usage guidelines, see “Search Bar.”)
  25. 25. New keyboard features May improve the efficiency & experience when filling in a form. APP: Numbers • The keyboard view can be customized. You can replace the system-provided keyboard view with a custom view that contains custom buttons. (For usage guidelines, see “Keyboard Customization.”) • The keyboard view can include custom input accessories. You can supply a separate view of auxiliary keyboard controls that users can tap to input application-defined content.
  26. 26. Custom text view & advanced editing eBay for iPad embeds a browser for viewing product description. APP: Notes APP: eBay for iPad • Custom text views can support text in multiple styles and offer advanced editing features. You can offer word-processing capabilities and support spell checking and autocompletion for text entry.
  27. 27. The iPad user experience guidelines • Support All Orientations • Enhance Interactivity (Don’t Just Add Features) • Flatten Your Information Hierarchy • Reduce Full-Screen Transitions • Enable Collaboration and Connectedness • Add Physicality and Heightened Realism • Delight People with Stunning Graphics • De-emphasize User Interface Controls • Minimize Modality • Rethink Your Lists • Consider Multifinger Gestures • Consider Popovers for Some Modal Tasks • Restrict Complexity in Modal Tasks • Downplay File-Handling Operations • Ask People to Save Only When Necessary • Start Instantly • Always Be Prepared to Stop
  28. 28. A “CARS” Shopping Experience Strategy Future … Real time Interaction • Timely informed • Sharing/ WOM • Augmented Reality Mobile XXXXXX Phone App Website Aggregations • Full services Mobile Site iPad App Engagement &Social Interaction • Deep interactions • Better shopping experience • Informed buying • Sharing/ WOM The Future Of Online Customer Experience
  29. 29. APPENDIX • iPhone SDK 4 http://developer.apple.com/ipad/sdk/ • iPad human interface guideline http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadHIG/Introduction/Introduction.html • Preparing Web Content for iPad http://developer.apple.com/safari/library/technotes/tn2010/tn2262/index.html • iPad Usability: First Findings From User Testing http://www.useit.com/alertbox/ipad.html • The Future Of Online Customer Experience • Touch Gesture Reference Guide http://www.lukew.com/touch/
  30. 30. THANK YOU! wyl2000@gmail.com http://www.v2000.info