This document summarizes research on the iPad device and experience design. It discusses what the iPad is, how it differs from other devices like the iPhone and PC, and how people use the iPad in different environments and situations. It also covers opportunities and challenges for designing iPad apps, new UI elements like split view and popovers, and guidelines for iPad user experience design. Finally, it proposes a "CARS" strategy for a shopping app experience and includes an appendix of iPad development resources.

1. A research on iPad:
device & experience design
wyl2000@gmail.com
http://www.v2000.info

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. What is iPad?
“The best way to experience the
web, email, photos, and video.”

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. What make iPad special
& why need to develop a Native APP?
• Hardware & Specifications
• How people use iPad
iPad vs. iPhone vs. PC

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. 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. How people use iPad?
• Usage Examples
– Environments
– Situations
– Social Interactions
• A quick summery

9. Examples: how people use these devices
Mobile Phone
iPad

10. Environments PC
office
Kitchen
iPad W.C.
study room
Even on the operating table

11. Social Interactions
iPad Mobile Phone

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. THANK YOU!
wyl2000@gmail.com
http://www.v2000.info