A research on iPad:
device & experience design
• What is iPad?
– iPad: Data & Facts
• What make iPad special & why need to develop a
– 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
What is iPad?
“The best way to experience the
web, email, photos, and video.”
iPad: Data and Facts
iPads Sold Adoption by state, by the end of April,10
since May 28
1 31 61 91 http://labs.chitika.com/ipa
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
What make iPad special
& why need to develop a Native APP?
• Hardware & Specifications
• How people use iPad
iPad vs. iPhone vs. PC
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
Comparison with PC
iPad PC (desktop or laptop)
Computing Power Less strong, only 1Ghz Much stronger, generally over
several Ghz and with multiple-
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
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
How people use iPad?
• Usage Examples
– Social Interactions
• A quick summery
Examples: how people use these devices
Even on the operating table
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
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
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
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
iPad Device Characteristics
iPad’s new characteristics that have a significant impact on user
• 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.
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.
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
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.
Opportunities of Big Screen
iPhone APP: XXXXXX
• Less cluttered interfaces
• More content viewable at a time
• 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
• Give people more ways to interact with the content.
Challenges of Big Screen
• Tackle more complex actions/ tasks
• More usable keyboard(than phone)
• Distance between interface elements (tab bar to app header buttons) can
• Find-ability of buttons might be more troublesome
• Low memorability; Accidental activation
New UI Elements and Behaviors
• Split view.
• 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.
Wish List Product Detail
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
Dev Reference： http://mobiforge.com/developing/story/developing-split-view-based-apps-ipad
• 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.”)
• 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.”
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.”)
New keyboard features
May improve the efficiency &
experience when filling in a form.
• 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
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.
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
A “CARS” Shopping Experience Strategy
Real time Interaction
• Timely informed
• Sharing/ WOM
• Augmented Reality
App Website Aggregations
• Full services
Engagement &Social Interaction
• Deep interactions
• Better shopping experience
• Informed buying
• Sharing/ WOM
The Future Of Online Customer Experience
• iPhone SDK 4
• iPad human interface guideline
• Preparing Web Content for iPad
• iPad Usability: First Findings From User Testing
• The Future Of Online Customer Experience
• Touch Gesture Reference Guide