Post on 16-May-2015
description
Design for Tablet Experiences | Workshop | Henrik Olsen
Web 2.0 NYC
© 2011 Hot Studio, Inc. Proprietary & Confidential 2
We’re all going to learn from each other
Goals of this workshop
Who: For designers that are new to design for
web, mobile, and tablet, as well as those who
are at an intermediate level.
Why we’re doing this: Share a sense of what
makes a good tablet experience, and how you
can get started as a tablet app designer
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?
Who are we?
5
Who here has designed a tablet app before?
Who here is a professional web designer?
© 2011 Hot Studio, Inc. Proprietary & Confidential 6
Where I come from(an experience design firm)
7
8
8
Hot Studio is an experience design company
that creates new ways for people to interact
with products, services, and people
© 2010 Hot Studio, Inc. Proprietary & Confidential | 11/03/10 Electronic Arts + Hot Studios
© 2010 Hot Studio, Inc. Proprietary & Confidential
11
© 2011 Hot Studio, Inc. Proprietary & Confidential
13
14
15
16
17
© 2011 Hot Studio, Inc. Proprietary & Confidential
© 2011 Hot Studio, Inc. Proprietary & Confidential
© 2011 Hot Studio, Inc. Proprietary & Confidential
21
22
23
23
23
24
25
25
25
25
© 2011 Hot Studio, Inc. Proprietary & Confidential 26
Tablets: the hardware and the operating systems(and important features to exploit!)
27
iPad
Galaxy
RIM Playbook
Motorola Xoom
Kindle Fire
28
HTC FlyerHP TouchPad with Android!(WebOS not totally dead)
Dell Streak
28
HTC FlyerHP TouchPad with Android!(WebOS not totally dead)
Dell Streak
29
Cameras (front & back)
Accelerometer & Gyroscope
Speaker
Headphone jack
Microphone
Multi-touch color display (‘Retina Display’ iPad 3)
WiFi & 3G
Home & Volume & Locking buttons
Cover/stand
What are some of the ways you can use these features?
Smart use of device hardware!
30
Cameras (front & back)
Accelerometer & Gyroscope
Speaker
Headphone jack
Microphone
Multi-touch color display (‘Retina Display’ iPad 3)
WiFi & 3G
Home & Volume & Locking buttons
Cover/stand
What are some of the ways you can use these features?
Smart use of device hardware!
• Augmented Reality • Photo/Video • Optical recognition
• Orientation • Motion detection • Speed based control
• Input response • Audio listening • Conferencing
• Private listening • Video conferencing
• Voice/sound commands • Audio Recording
• System & custom gestures • Custom gestures • Reading
• Dynamic content • txt, email, video
• Dynamic content • txt, email, video
• Sit back experience • Hands free viewing
© 2011 Hot Studio, Inc. Proprietary & Confidential 31
Operating systems - strengths & weaknesses
iOS — Apple
Strengths
‣ Quality control, from device thru OS
‣ Industry leader:~68% market share(9.25M sold just last quarter!)
‣ 100K+ apps already available
‣ Growing support for developers
‣ iOS 5 expected any day!
Weaknesses
‣ Tightly controlled & restricted
‣ Expensive device
‣ No Flash support
‣ Apple gets 30% of in app revenue
‣ Cocoa developers are hard to find
© 2011 Hot Studio, Inc. Proprietary & Confidential 32
Operating systems - strengths & weaknesses
iOS — Apple
Strengths
‣ Quality control, from device thru OS
‣ Industry leader:~68% market share(9.25M sold just last quarter!)
‣ 100K+ apps already available
‣ Growing support for developers
‣ iOS 5 expected any day!
Weaknesses
‣ Tightly controlled & restricted
‣ Expensive device
‣ No Flash support
‣ Apple gets 30% of in app revenue
‣ Cocoa developers are hard to find
“Apple and our customers place a high
value on simple, refined, creative, well
thought through interfaces. They take
more work but are worth it... if your UI is
complex or less than very good, it may
be rejected”— iTunes App Store review guidelines
(as noted in ‘From Idea to App’: Shawn Welch)
© 2011 Hot Studio, Inc. Proprietary & Confidential 33
Operating systems - strengths & weaknesses
Android — Google
Strengths
‣ Runner up (~26% market share)
‣ Open source
‣ Available on range of devices & prices
‣ Can support Flash
Weaknesses
‣ True tablet OS still in infancy
‣ Fewer tablet apps
‣ Fragmented UI and dev standards
Motorola XoomKindle Fire
© 2011 Hot Studio, Inc. Proprietary & Confidential 34
Operating systems - strengths & weaknesses
BlackBerry Tablet OS
RIM
Strengths
‣ Credibility of Blackberry
‣ BlackBerry widely adopted in business world
Weaknesses
‣ So far only 5% of the market
‣ Limited apps
© 2011 Hot Studio, Inc. Proprietary & Confidential 35
Browser based apps Safari, Firefox for Android, Opera for Tablets, etc.
Strengths
‣ Build using html 5. Large developer base!
‣ Outside Apple’s app store and it’s revenue sharingControl your marketing!
‣ Not required to be within Apple’s design, content & build requirements
‣ Works across platforms - most laptops and tablets
‣ Avoids costs of building for multiple platforms
Weaknesses
‣ Mostly does not perform as fast as native apps
‣ Inconsistent user experience, and level of quality
‣ Can not always use all hardware of the device
© 2011 Hot Studio, Inc. Proprietary & Confidential
Pop Quiz
Who invented touch technology?
A) Sam Hurst
B) E.A. Johnson
C) Johnny Ives
D) Thomas Edison
E) Al Gore
36
© 2011 Hot Studio, Inc. Proprietary & Confidential
Pop Quiz
Answer....
Wikipedia: The first touch screen was a capacitive touch screen developed by E.A. Johnson at the Royal Radar Establishment, Malvern, UK. The inventor briefly described his work in a short article published in 1965[5] and then more fully - along with photographs and diagrams - in an article published in 1967.[6] A description of the applicability of the touch technology for air traffic control was described in an article published in 1968.[7]Note: Contrary to many accounts,[8] while Dr. Sam Hurst played an important role in the development of touch technologies, he neither invented the first touch sensor, nor the first touch screen.
37
© 2011 Hot Studio, Inc. Proprietary & Confidential 38
Cool Apps! Five apps that kick ass
39
Context
• The geography, situation, & culture in which the app lives
• The relevance of the problem it addresses, the timeliness
Impact
• Practical purpose of app
• Positive impact on people, society, the environment & business
Craft
• Design of the UI. Presentation & emotional content
• Elegance in language, functionality & ease of usability
• Overall performance
What is cool?
40
• Books & magazines
• Socializing
• Educational/learning
• Financial management
• Health & exercise
• Games
• Sports & Entertainment
• Business
• Music: listening and composing
• News and weather
• Travel
• Shopping
• _________?
Categories of apps
41
ABC Player Zillow
DropList
42
Gilt: JetSetterDiscovery Channel
43
ESPN ScoreCenter XLGoogle Earth App
© 2011 Hot Studio, Inc. Proprietary & Confidential
What, where, when, and why an app makes sense EXERCISE 1: Coming up with your big idea
44
45
Finding a need
45
• What does a person want/need to do?
Finding a need
45
• 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)
Finding a need
45
• 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‘
Finding a need
45
• 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!)
Finding a need
45
• 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!
Finding a need
46
Exercise 1: defining a need
46
1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified)
Exercise 1: defining a need
46
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?
Exercise 1: defining a need
46
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?
Exercise 1: defining a need
46
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?
Exercise 1: defining a need
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
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
You’ve got 10 minutes.... go!
© 2011 Hot Studio, Inc. Proprietary & Confidential 48
Top 10 considerations for designing tablet experiencesplus hundreds of others
49
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
Consideration: 10
49
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
Consideration: 10
50
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)
Consideration: 9
Image ‘borrowed’ from Ron Peterson
50
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)
Consideration: 9
Image ‘borrowed’ from Ron Peterson
51
A!ordancesThere are no rollovers on tablets - links, buttons, and all other controls must have plenty of a!ordance
• Fingertips are larger than mouse cursors
Consideration: 8
52
Behaviors & TransitionsUser feedback is critical. Tablet UI’s are expected to be responsive. When a user does something, the interface should acknowledge the input.
Consideration: 7
transition animation — gesture animation
52
Behaviors & TransitionsUser feedback is critical. Tablet UI’s are expected to be responsive. When a user does something, the interface should acknowledge the input.
Consideration: 7
transition animation — gesture animation
These are the little things that make it fun!
53
Behaviors & Transitions
Consideration: 7
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?
This direction takes a different approach than the first for stacks. Tapping on a stack...
3. Opening/Closing Stacks
...makes it appear centered in the screen...
...overshooting....
...and settling back into its final size.
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.
© 2011 Hot Studio, Inc. Proprietary & Confidential
60
Resolution & screen dimensionAccommodating resolution of the device. Plus, how does it compare to your authoring environment?
Consideration: 6
61
Resolution & screen dimensionAccommodating resolution of the device. Plus, how does it compare to your authoring environment?
Consideration: 6
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
62
Resolution & screen dimensionAccommodating resolution of the device. Plus, how does it compare to your authoring environment?
Consideration: 6
Consideration: 5
63
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)
64
Involve your users! Understand their needs & tasksSpend 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
Consideration: 4
65
Audience motivation to learn UI
The casual novice tablet user vs. the highly motivated tab geek.
Consideration: 3
66
Content deliveryKeep 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.)
Consideration: 2
67
Backwards compatibleIs your app on supported devices
Does your app require device hardware that is not available on earlier versions of the device
Consideration: 1
Break time!
...be back at 10:40 sharp
68
10:20am - 10:40am
69
Obligatory Dilbert cartoon
Welcome back!
...letʼs keep working on your app
70
10:40am
© 2011 Hot Studio, Inc. Proprietary & Confidential
User scenariosEXERCISE #2: Thinking through the full context of your app
71
72
App is just part of a bigger experience.
Storyboarding the scenario:
• Before — During — After — Repeat
• The ‘eco-system’ around your app
Storyboard context
73
74
75
Exercise 2: Storyboard context
76
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?
77
77
You’ve got 10 minutes.... go!
78
Who wants to share what they’ve come up with?
© 2011 Hot Studio, Inc. Proprietary & Confidential 79
Features, Functionality, and ContentEXERCISE #3: The functions and content of your app
Exercise 3: The core features and content of your app
80
• Yellow sticky = a feature
• Orange sticky = a content ‘type’
Exercise 3: The core features and content of your app
80
• Yellow sticky = a feature
• Orange sticky = a content ‘type’
You’ve got 12 minutes.... go!
© 2011 Hot Studio, Inc. Proprietary & Confidential 81
Gestures
Rather than mouse or keyboard events, the tablet experience is based on touch events.
Let’s look at common and un-common ways to navigate.
82
Custom gestures:(using the UITapGestureRecognizer)
• Rotate
• Bump
• Long hold/press
• Multi-touch
Core iOS touches ‘gestures’:
• Tap
• Drag
• Flick
• Swipe
• Double-Tap
• Pinch Open/Close
• Touch & Hold
• Shake
83
How does information flow and overflow? (carding, scrolling, accordion)
When to pan or scroll or swipe?
83
How does information flow and overflow? (carding, scrolling, accordion)
When to pan or scroll or swipe?
84
Annotation of gestures
Annotation of gestures
87
Annotation of gestures
© 2011 Hot Studio, Inc. Proprietary & Confidential 88
Tools for the designerDigital + Analog
Tools used for designing a tablet experience
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra"e
• Illustrator
• InDesign
Tools used for designing a tablet UI
90
Experience Design
• Whiteboard & sketch paper
• Visio - from MicroSoft
• OmniGra"e
• Illustrator
• InDesign
Tools used for designing a tablet UI
91
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra"e 5
• Illustrator
• InDesign
Tools used for designing a tablet UI
92
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra"e 5
• Illustrator
• InDesign
Tools used for designing a tablet UI
93
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra"e 5
• Illustrator
• InDesign
Tools used for designing a tablet UI
94
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE!ects
• Fireworks
Tools used for designing a tablet UI
95
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE!ects
• Fireworks
Tools used for designing a tablet UI
96
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE!ects
• Fireworks
Tools used for designing a tablet UI
97
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE!ects
• Fireworks
Tools used for designing a tablet UI
98
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE!ects
• Fireworks
99
Why Prototype?
ideas make learn validate
Iterative design process:
99
Why Prototype?
• Allows you to fine tune you ideas and interactions(Revealing those unexpected gaps)
ideas make learn validate
Iterative design process:
99
Why Prototype?
• Allows you to fine tune you ideas and interactions(Revealing those unexpected gaps)
• Bring your ideas to life.... quickly sketching
ideas make learn validate
Iterative design process:
99
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
ideas make learn validate
Iterative design process:
100
GoodReader (PDFs)
Tools for prototyping
Picture Link - iPDF MinimalFolio
coming soon:
Apple Keynote FlashCatalyst
+ ‘Wallaby’
Fireworks
+
101
Core UI resources are available
102
Resources for visual designersCore UI graphic assets available: teehanlax.com/blog
103
Resources for visual designersCore UI graphic assets available: teehanlax.com/blog
104
Resources for visual designersHigh quality visual interface stock sites:
104
Resources for visual designersHigh quality visual interface stock sites:
104
Resources for visual designersHigh quality visual interface stock sites:
104
Resources for visual designersHigh quality visual interface stock sites:
105
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
Development - very briefly!
106
Annotated wireframes & layered PSDs:
106
Annotated wireframes & layered PSDs:
© 2011 Hot Studio, Inc. Proprietary & Confidential
Flows & wireframes EXERCISE 4: Tablet app interface sketch
107
108
User flow
109
110
111
App map
112
Load(animation)
HomeDashboard
News Article
(timeline view & select topics)
(text, image, video)Related Article
(text, image, video)Profile
Preferences, accountinfo.,
Shoppingrelated products
Partner Sitesadditional
content
SearchSearch for topics
Share NetworkFB, Twitter, etc.
113
Sketching
114
FeaturedMagazines
Magazine App for iPad
<- Cover shots ->
User willswip through
a variety of covers
User canget to the
magazines theyalready own
User can postto FB if they
like an article or title. Or, they can tweet ifthey an interesting
point
YourLibrary
FullMagazine Shop
FacebookTwitter
Log InHelpfeatures:- Show new magazine titles- Magazine shop- Library of users
magazines- Show upcoming events -
calendar- User generated content
(reviews, comments, etc)- Facebook integration- Twitter stream
Exercise #4: Features & Functionality mapping
115
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.
Exercise #4: Features & Functionality mapping
115
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!
116
Who wants to share what they’ve come up with?
© 2011 Hot Studio, Inc. Proprietary & Confidential 117
Team & Process More than one way to approach
118
Users
Project Manager
User Experience
Visual Designer
Content
Engineer
Client
The team
Collaboration of a multi-disciplined team is critical
Process (waterfall)
User Experience Visual Design Engineering
Project Management
Discovery• Customer / Market
Research• Stakeholder interviews• Existing apps audit• Interview target users• Competitive audit• Technology discovery
Strategy• Persona development• Content needs analysis• Feature prioritization• Key schematics & IA Visual design workshop• Business & technical
requirements• User concept testing
Design• Screen schematics• Visual design• User testing• Design refinement• Design extension• Development
planning
Build• Style guide• Manage dev team• Collaborate with
dev team• QA & testing
throughout the development process
119
Sample of project flow for simple tablet app
120
• 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
© 2011 Hot Studio, Inc. Proprietary & Confidential 121
IF we have time left...A few basics of getting your app into the app store
A few reasons for rejection from Apple App Store
122
A few reasons for rejection from Apple App Store
122
• 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
Thank you!
Hot Studio Inc.585 Howard Street1st FloorSan Francisco, CA 94105415.284.7250
520 Broadway, 8th FloorNew York NY 10012212.242.1082
hotstudio.comhottub.hotstudio.comtwitter.com/hotstudiofacebook.com/hotstudio