Henrik Olsen's presentation from Web 2.0 Expo New York:
If you’re ready to jump into designing for tablets, this will be a great two-part workshop for you. Given the mass adoption of tablet devices over this past year,this workshop has been created to present the fundamentals of designing tablet applications as well as tablet optimized web sites. Learn from a leader in adopting classic design principles to the rapidly evolving world of tablets.
3. Agenda:
• Who are we
• The hardware and operating systems
• Cool apps: top picks and why
• When & where an app makes sense - exercise #1
• Top 10 design considerations
BREAK
• Use scenarios - exercise #2
• Features & functions & content- exercise #3
• Gestures
• Tools for designers
• Task flows & dashboards - exercise #4
• Project team & ‘a process’
3
4. What are you hoping to learn, or
experience, in this workshop?
4
5. Who are we?
Who here has designed a tablet app before?
Who here is a professional web designer?
5
33. Motorola Xoom
Galaxy
iPad
RIM Playbook Kindle Fire
27
34. HP TouchPad with Android!
HTC Flyer (WebOS not totally dead)
Dell Streak
28
35. HP TouchPad with Android!
HTC Flyer (WebOS not totally dead)
Dell Streak
28
36. Smart use of device hardware! Cameras (front & back)
What are some
Accelerometer & Gyroscope
of the ways you
can use these Speaker
features?
Headphone jack
Microphone
Multi-touch color display (‘Retina Display’ iPad 3)
WiFi & 3G
Home & Volume & Locking buttons
Cover/stand
29
37. Smart use of device hardware! Cameras (front & back)
• Augmented Reality • Photo/Video • Optical recognition
What are some
Accelerometer & Gyroscope
of the ways you • Orientation • Motion detection • Speed based control
can use these Speaker
• Input response • Audio listening • Conferencing
features?
Headphone jack
• Private listening • Video conferencing
Microphone
• Voice/sound commands • Audio Recording
Multi-touch color display (‘Retina Display’ iPad 3)
• System & custom gestures • Custom gestures • Reading
WiFi & 3G
• Dynamic content • txt, email, video
Home & Volume & Locking buttons
• Dynamic content • txt, email, video
Cover/stand
• Sit back experience • Hands free viewing
30
46. What is cool?
Impact Context Craft
• Practical purpose of app • The geography, • Design of the UI.
situation, & culture in Presentation & emotional
• Positive impact on which the app lives content
people, society, the
environment & business • The relevance of the • Elegance in language,
problem it addresses, functionality & ease of
the timeliness usability
• Overall performance
39
47. Categories of apps
• Books & magazines
• Socializing
• Educational/learning
• Financial management
• Health & exercise
• Games
• Sports & Entertainment
• Business
• Music: listening and composing
• News and weather
• Travel
• Shopping
• _________?
40
54. Finding a need
• What does a person want/need to do?
• Is a tablet app appropriate for the context of the user?
Away from the o ce, home? (shopping, planning, playing, socializing)
45
55. Finding a need
• What does a person want/need to do?
• Is a tablet app appropriate for the context of the user?
Away from the o ce, home? (shopping, planning, playing, socializing)
• Content must fit the context
Can they access content, and data, ‘just at the right time‘
45
56. Finding a need
• What does a person want/need to do?
• Is a tablet app appropriate for the context of the user?
Away from the o ce, home? (shopping, planning, playing, socializing)
• Content must fit the context
Can they access content, and data, ‘just at the right time‘
• Is there an even larger opportunity?
Laptop, TV, mobile, tablet, appliance, as well as physical spaces.
(a digital eco-system!)
45
57. Finding a need
• What does a person want/need to do?
• Is a tablet app appropriate for the context of the user?
Away from the o ce, home? (shopping, planning, playing, socializing)
• Content must fit the context
Can they access content, and data, ‘just at the right time‘
• Is there an even larger opportunity?
Laptop, TV, mobile, tablet, appliance, as well as physical spaces.
(a digital eco-system!)
• Can it be useful, engaging, and intuitive... from the very first time!
45
59. Exercise 1: defining a need
1. What problem does it solve? What is the opportunity?
(what ‘un-met need’ have you identified)
46
60. Exercise 1: defining a need
1. What problem does it solve? What is the opportunity?
(what ‘un-met need’ have you identified)
2. Who are the people that will use it?
46
61. Exercise 1: defining a need
1. What problem does it solve? What is the opportunity?
(what ‘un-met need’ have you identified)
2. Who are the people that will use it?
3. Where is it used? In home, o ce, shopping, out & about?
46
62. Exercise 1: defining a need
1. What problem does it solve? What is the opportunity?
(what ‘un-met need’ have you identified)
2. Who are the people that will use it?
3. Where is it used? In home, o ce, shopping, out & about?
4. How does it get paid for? What is the business model?
46
63. Big idea example:
Example: Marathon Coach App
1. No great tablet apps that help people improve
their running performance.
People need a way to track and share their
data with coaches and/or friends, get advice
about techniques, work-outs, and equipment.
Create a training plans and evaluate progress.
2. For new and experienced marathon runners,
and coaches that have tablet, mobile & laptop
3. Home for planning, and at the track for
coaching and data capture
4. App is free, but charge for training plans,
coaching service, and advanced content.
47
64. Big idea example:
Example: Marathon Coach App
1. No great tablet apps that help people improve
their running performance.
People need a way to track and share their
data with coaches and/or friends, get advice
about techniques, work-outs, and equipment.
Create a training plans and evaluate progress.
2. For new and experienced marathon runners,
and coaches that have tablet, mobile & laptop
3. Home for planning, and at the track for
coaching and data capture
4. App is free, but charge for training plans,
coaching service, and advanced content.
You’ve got 10 minutes.... go!
47
66. Consideration: 10
Consistent interactions
Take advantage of what
people already know!
• Established user
interactions should be
used... unless, an interaction
requires something truly
unique
• Carefully consider when
conforming or diverging
from the native iOS UI
elements
49
67. Consideration: 10
Consistent interactions
Take advantage of what
people already know!
• Established user
interactions should be
used... unless, an interaction
requires something truly
unique
• Carefully consider when
conforming or diverging
from the native iOS UI
elements
49
68. Consideration: 9
Direct manipulation
• Allow users to manipulate
objects directly on the screen
• Avoid editing palettes — and
typing
• Don’t overload the user with
irrelevant options (keep it
simple: hide anything that
doesn’t apply)
Image ‘borrowed’ from Ron Peterson
50
69. Consideration: 9
Direct manipulation
• Allow users to manipulate
objects directly on the screen
• Avoid editing palettes — and
typing
• Don’t overload the user with
irrelevant options (keep it
simple: hide anything that
doesn’t apply)
Image ‘borrowed’ from Ron Peterson
50
70. Consideration: 8
A ordances
There are no rollovers on tablets - links,
buttons, and all other controls must have
plenty of a ordance
• Fingertips are larger than mouse
cursors
51
71. Consideration: 7
Behaviors & Transitions
User feedback is critical. Tablet UI’s are
expected to be responsive. When a user
does something, the interface should
acknowledge the input.
transition animation — gesture animation
52
72. Consideration: 7
Behaviors & Transitions
User feedback is critical. Tablet UI’s are These are the little
expected to be responsive. When a user
does something, the interface should things that make it fun!
acknowledge the input.
transition animation — gesture animation
52
73. Consideration: 7
Behaviors & Transitions
Aspects to consider:
• How does it start and end?
• What arc does it follow?
• What are the levels of opacity?
• Does it flip?
• Does it rotate?
• Does it pulse?
• Does it wiggle?
53
74. 3. Opening/Closing Stacks
This direction takes a different approach than the first for stacks. Tapping on a stack...
78. This stack can be closed by tapping the “Back to [courseName]” button in the upper right corner. Here, it is
shown with vertically scrollable content, but the size of the stack window could be made to vary to
accomodate up to a certain number of child objects.
80. Consideration: 6
Resolution & screen dimension
Accommodating resolution of the device. Plus, how
does it compare to your authoring environment?
60
81. Consideration: 6
Resolution & screen dimension
Accommodating resolution of the device. Plus, how
does it compare to your authoring environment?
A few details:
• Your assets will need to be both 163 ppi AND 326ppi for
retina display. (and 72dpi for desktop displays)
• Need high-resolution versions of bitmaps - or use vectors
(adding @2x to the ends of your image names)
• Image compression has to be done carefully due to high
rez screens
• Web based apps should have liquid interfaces to
accommodate variety of device screen dimensions
61
82. Consideration: 6
Resolution & screen dimension
Accommodating resolution of the device. Plus, how
does it compare to your authoring environment?
62
83. Consideration: 5
Layout flexibility
Are the functions, and content making the best
use of the device orientation?
• Work mode common in landscape. Lean-back
read in portrait
• ‘Responsive web’ design (new CSS & JS
standards support SVG and bitmap)
63
84. Consideration: 4
Involve your users!
Understand their needs &
tasks
Spend time showing your concepts
and prototypes to your target users.
• What is the user trying to do?
• Analyze the users tasks and needs
and keep your design focused
64
86. Consideration: 2
Content delivery
Keep your app alive with fresh content.
You must know the source of the data.
• Is your app connected?
• Does it rely on live download?
• Early on, you must know and secure
your data source. (Open API, proprietary
content, partnerships, etc.)
66
87. Consideration: 1
Backwards compatible
Is your app on supported devices
Does your app require device
hardware that is not available on
earlier versions of the device
67
92. Storyboard context
App is just part of a bigger
experience.
Storyboarding the scenario:
• Before — During — After — Repeat
• The ‘eco-system’ around your app
72
96. Exercise 2: Storyboard context
Illustrate, as a storyboard, the full context of a person
using your application. (location, people, situation, etc.)
Consider:
• Where they are in their day?
• With whom they are interacting?
• Are there other devices to sync with?
• Is the data saved or shared or downloaded?
76
101. Exercise 3:
The core features and
content of your app
• Yellow sticky = a feature
• Orange sticky = a content ‘type’
80
102. Exercise 3:
The core features and
content of your app
• Yellow sticky = a feature
• Orange sticky = a content ‘type’
You’ve got 12 minutes.... go!
80
112. Tools used for designing a tablet experience
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra e
• Illustrator
• InDesign
113. Tools used for designing a tablet UI
Experience Design
• Whiteboard & sketch paper
• Visio - from MicroSoft
• OmniGra e
• Illustrator
• InDesign
90
114. Tools used for designing a tablet UI
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra e 5
• Illustrator
• InDesign
91
115. Tools used for designing a tablet UI
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra e 5
• Illustrator
• InDesign
92
116. Tools used for designing a tablet UI
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra e 5
• Illustrator
• InDesign
93
117. Tools used for designing a tablet UI
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE ects
• Fireworks
94
118. Tools used for designing a tablet UI
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE ects
• Fireworks
95
119. Tools used for designing a tablet UI
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE ects
• Fireworks
96
120. Tools used for designing a tablet UI
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE ects
• Fireworks
97
121. Tools used for designing a tablet UI
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE ects
• Fireworks
98
123. Why Prototype?
• Allows you to fine tune you ideas and interactions
(Revealing those unexpected gaps)
Iterative design process:
ideas make learn validate
99
124. Why Prototype?
• Allows you to fine tune you ideas and interactions
(Revealing those unexpected gaps)
• Bring your ideas to life.... quickly sketching
Iterative design process:
ideas make learn validate
99
125. Why Prototype?
• Allows you to fine tune you ideas and interactions
(Revealing those unexpected gaps)
• Bring your ideas to life.... quickly sketching
• See the choreography of your transitions and screen states
Iterative design process:
ideas make learn validate
99
126. Tools for prototyping
GoodReader (PDFs) Picture Link - iPDF MinimalFolio
+ + ‘Wallaby’
Apple Keynote Fireworks Flash coming
Catalyst soon:
100
134. Development - very briefly!
Important:
Make friends with a developer!
Someone who can work with Apple’s
Software Development Kit (SDK):
Xcode 4 (development environment)
- Interface Builder
- Instruments
- iOS Simulator
- See: developer.apple.com
105
144. Sketching
Magazine App for iPad
features:
Help Log In
- Show new magazine titles
- Magazine shop
- Library of users
magazines
Featured User will
swip through
- Show upcoming events -
Magazines a variety
of covers
calendar
<- Cover shots -> - User generated content
(reviews, comments, etc)
- Facebook integration
- Twitter stream
Your Full Facebook
Library Magazine Shop Twitter User can post
to FB if they
User can like an article or title.
get to the Or, they can tweet if
magazines they they an interesting
already own point
114
145. Exercise #4: Features & Functionality mapping
Step A:
Organize the content and functions onto the provided ‘Post-its’—
organize them on the blank sheet(s)
Step B:
With pencil, sketch on the ‘paper iPads’ the ‘main’ screen layouts
— with appropriate functions & content.
115
146. Exercise #4: Features & Functionality mapping
Step A:
Organize the content and functions onto the provided ‘Post-its’—
organize them on the blank sheet(s)
Step B:
With pencil, sketch on the ‘paper iPads’ the ‘main’ screen layouts
— with appropriate functions & content.
You’ve got about 15 minutes.... go!
115
147. Who wants to share what
they’ve come up with?
116
149. The team
Collaboration of a Project Manager
multi-disciplined
team is critical User Experience
Visual Designer
Content Users
Engineer
Client
118
150. Process (waterfall)
User Experience Visual Design Engineering
Project Management
Discovery Strategy Design Build
• Customer / Market • Persona development • Screen schematics • Style guide
Research • Content needs analysis • Visual design • Manage dev team
• Stakeholder interviews • Feature prioritization • User testing • Collaborate with
• Key schematics & IA • Design refinement dev team
• Existing apps audit
Visual design workshop • Design extension • QA & testing
• Interview target users
• Business & technical • Development throughout the
• Competitive audit planning
requirements development
• Technology discovery • User concept testing process
119
151. Sample of project flow for simple tablet app
• Conduct a Discovery work session to understand you business and design
goals for the project
• Review your content offering and develop a design approach that best
leverages content
• Conduct an evaluation of 5-7 competitors and/or other brands
• Develop an interaction model for the content and high level interaction design
• Wire frame review over the course of our strategy and design phases
• Several visual design concepts that reflect a range of approaches
• Based on the selection of 1 of the visual design directions extend that direction
across the additional screens and dialogs the application will require.
• Work with developer during development
120
153. A few reasons for rejection from Apple App Store
122
154. A few reasons for rejection from Apple App Store
• Not following Apple’s Interface Guidelines
• Lack of rights to content or brands presented in your app
• Insu cient error messaging. Spinning ball does not su ce!
• Political lampooning
• App crashing
• Violating patented UI patterns... coverflow, for example
• Contests and/or sweepstakes
• Poor handling of user info
• Apps that are primarily for serving ads
• Objectionable content... nudity
• Transactions outside the app store
122
155. Thank you!
Hot Studio Inc.
585 Howard Street
1st Floor
San Francisco, CA 94105
415.284.7250
520 Broadway, 8th Floor
New York NY 10012
212.242.1082
hotstudio.com
hottub.hotstudio.com
twitter.com/hotstudio
facebook.com/hotstudio