web2.0 tablet experience design workshop
TRANSCRIPT
![Page 1: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/1.jpg)
Design for Tablet Experiences | Workshop | Henrik Olsen
Web 2.0 NYC
![Page 2: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/2.jpg)
© 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
![Page 3: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/3.jpg)
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
![Page 4: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/4.jpg)
4
What are you hoping to learn, or
experience, in this workshop?
![Page 5: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/5.jpg)
Who are we?
5
Who here has designed a tablet app before?
Who here is a professional web designer?
![Page 6: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/6.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential 6
Where I come from(an experience design firm)
![Page 7: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/7.jpg)
7
![Page 8: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/8.jpg)
8
![Page 9: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/9.jpg)
8
Hot Studio is an experience design company
that creates new ways for people to interact
with products, services, and people
![Page 10: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/10.jpg)
© 2010 Hot Studio, Inc. Proprietary & Confidential | 11/03/10 Electronic Arts + Hot Studios
![Page 11: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/11.jpg)
© 2010 Hot Studio, Inc. Proprietary & Confidential
![Page 12: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/12.jpg)
11
![Page 13: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/13.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential
![Page 14: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/14.jpg)
13
![Page 15: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/15.jpg)
14
![Page 16: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/16.jpg)
15
![Page 17: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/17.jpg)
16
![Page 18: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/18.jpg)
17
![Page 19: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/19.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential
![Page 20: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/20.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential
![Page 21: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/21.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential
![Page 22: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/22.jpg)
21
![Page 23: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/23.jpg)
22
![Page 24: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/24.jpg)
23
![Page 25: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/25.jpg)
23
![Page 26: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/26.jpg)
23
![Page 27: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/27.jpg)
24
![Page 28: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/28.jpg)
25
![Page 29: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/29.jpg)
25
![Page 30: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/30.jpg)
25
![Page 31: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/31.jpg)
25
![Page 32: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/32.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential 26
Tablets: the hardware and the operating systems(and important features to exploit!)
![Page 33: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/33.jpg)
27
iPad
Galaxy
RIM Playbook
Motorola Xoom
Kindle Fire
![Page 34: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/34.jpg)
28
HTC FlyerHP TouchPad with Android!(WebOS not totally dead)
Dell Streak
![Page 35: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/35.jpg)
28
HTC FlyerHP TouchPad with Android!(WebOS not totally dead)
Dell Streak
![Page 36: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/36.jpg)
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!
![Page 37: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/37.jpg)
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
![Page 38: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/38.jpg)
© 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
![Page 39: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/39.jpg)
© 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)
![Page 40: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/40.jpg)
© 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
![Page 41: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/41.jpg)
© 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
![Page 42: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/42.jpg)
© 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
![Page 43: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/43.jpg)
© 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
![Page 44: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/44.jpg)
© 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
![Page 45: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/45.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential 38
Cool Apps! Five apps that kick ass
![Page 46: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/46.jpg)
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?
![Page 47: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/47.jpg)
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
![Page 48: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/48.jpg)
41
ABC Player Zillow
DropList
![Page 49: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/49.jpg)
42
Gilt: JetSetterDiscovery Channel
![Page 50: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/50.jpg)
43
ESPN ScoreCenter XLGoogle Earth App
![Page 51: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/51.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential
What, where, when, and why an app makes sense EXERCISE 1: Coming up with your big idea
44
![Page 52: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/52.jpg)
45
Finding a need
![Page 53: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/53.jpg)
45
• What does a person want/need to do?
Finding a need
![Page 54: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/54.jpg)
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
![Page 55: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/55.jpg)
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
![Page 56: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/56.jpg)
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
![Page 57: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/57.jpg)
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
![Page 58: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/58.jpg)
46
Exercise 1: defining a need
![Page 59: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/59.jpg)
46
1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified)
Exercise 1: defining a need
![Page 60: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/60.jpg)
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
![Page 61: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/61.jpg)
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
![Page 62: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/62.jpg)
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
![Page 63: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/63.jpg)
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
![Page 64: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/64.jpg)
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!
![Page 65: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/65.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential 48
Top 10 considerations for designing tablet experiencesplus hundreds of others
![Page 66: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/66.jpg)
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
![Page 67: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/67.jpg)
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
![Page 68: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/68.jpg)
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
![Page 69: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/69.jpg)
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
![Page 70: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/70.jpg)
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
![Page 71: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/71.jpg)
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
![Page 72: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/72.jpg)
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!
![Page 73: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/73.jpg)
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?
![Page 74: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/74.jpg)
This direction takes a different approach than the first for stacks. Tapping on a stack...
3. Opening/Closing Stacks
![Page 75: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/75.jpg)
...makes it appear centered in the screen...
![Page 76: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/76.jpg)
...overshooting....
![Page 77: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/77.jpg)
...and settling back into its final size.
![Page 78: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/78.jpg)
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.
![Page 79: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/79.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential
![Page 80: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/80.jpg)
60
Resolution & screen dimensionAccommodating resolution of the device. Plus, how does it compare to your authoring environment?
Consideration: 6
![Page 81: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/81.jpg)
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
![Page 82: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/82.jpg)
62
Resolution & screen dimensionAccommodating resolution of the device. Plus, how does it compare to your authoring environment?
Consideration: 6
![Page 83: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/83.jpg)
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)
![Page 84: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/84.jpg)
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
![Page 85: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/85.jpg)
65
Audience motivation to learn UI
The casual novice tablet user vs. the highly motivated tab geek.
Consideration: 3
![Page 86: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/86.jpg)
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
![Page 87: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/87.jpg)
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
![Page 88: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/88.jpg)
Break time!
...be back at 10:40 sharp
68
10:20am - 10:40am
![Page 89: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/89.jpg)
69
Obligatory Dilbert cartoon
![Page 90: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/90.jpg)
Welcome back!
...letʼs keep working on your app
70
10:40am
![Page 91: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/91.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential
User scenariosEXERCISE #2: Thinking through the full context of your app
71
![Page 92: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/92.jpg)
72
App is just part of a bigger experience.
Storyboarding the scenario:
• Before — During — After — Repeat
• The ‘eco-system’ around your app
Storyboard context
![Page 93: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/93.jpg)
73
![Page 94: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/94.jpg)
74
![Page 95: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/95.jpg)
75
![Page 96: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/96.jpg)
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?
![Page 97: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/97.jpg)
77
![Page 98: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/98.jpg)
77
You’ve got 10 minutes.... go!
![Page 99: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/99.jpg)
78
Who wants to share what they’ve come up with?
![Page 100: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/100.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential 79
Features, Functionality, and ContentEXERCISE #3: The functions and content of your app
![Page 101: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/101.jpg)
Exercise 3: The core features and content of your app
80
• Yellow sticky = a feature
• Orange sticky = a content ‘type’
![Page 102: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/102.jpg)
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!
![Page 103: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/103.jpg)
© 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.
![Page 104: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/104.jpg)
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
![Page 105: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/105.jpg)
83
How does information flow and overflow? (carding, scrolling, accordion)
When to pan or scroll or swipe?
![Page 106: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/106.jpg)
83
How does information flow and overflow? (carding, scrolling, accordion)
When to pan or scroll or swipe?
![Page 107: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/107.jpg)
84
Annotation of gestures
![Page 108: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/108.jpg)
Annotation of gestures
![Page 109: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/109.jpg)
![Page 110: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/110.jpg)
87
Annotation of gestures
![Page 111: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/111.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential 88
Tools for the designerDigital + Analog
![Page 112: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/112.jpg)
Tools used for designing a tablet experience
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra"e
• Illustrator
• InDesign
![Page 113: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/113.jpg)
Tools used for designing a tablet UI
90
Experience Design
• Whiteboard & sketch paper
• Visio - from MicroSoft
• OmniGra"e
• Illustrator
• InDesign
![Page 114: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/114.jpg)
Tools used for designing a tablet UI
91
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra"e 5
• Illustrator
• InDesign
![Page 115: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/115.jpg)
Tools used for designing a tablet UI
92
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra"e 5
• Illustrator
• InDesign
![Page 116: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/116.jpg)
Tools used for designing a tablet UI
93
Experience Design
• Whiteboard & sketch paper
• Visio
• OmniGra"e 5
• Illustrator
• InDesign
![Page 117: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/117.jpg)
Tools used for designing a tablet UI
94
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE!ects
• Fireworks
![Page 118: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/118.jpg)
Tools used for designing a tablet UI
95
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE!ects
• Fireworks
![Page 119: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/119.jpg)
Tools used for designing a tablet UI
96
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE!ects
• Fireworks
![Page 120: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/120.jpg)
Tools used for designing a tablet UI
97
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE!ects
• Fireworks
![Page 121: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/121.jpg)
Tools used for designing a tablet UI
98
Visual Design
• Sketch Paper!
• Photoshop
• LiveView
• AfterE!ects
• Fireworks
![Page 122: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/122.jpg)
99
Why Prototype?
ideas make learn validate
Iterative design process:
![Page 123: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/123.jpg)
99
Why Prototype?
• Allows you to fine tune you ideas and interactions(Revealing those unexpected gaps)
ideas make learn validate
Iterative design process:
![Page 124: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/124.jpg)
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:
![Page 125: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/125.jpg)
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:
![Page 126: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/126.jpg)
100
GoodReader (PDFs)
Tools for prototyping
Picture Link - iPDF MinimalFolio
coming soon:
Apple Keynote FlashCatalyst
+ ‘Wallaby’
Fireworks
+
![Page 127: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/127.jpg)
101
Core UI resources are available
![Page 128: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/128.jpg)
102
Resources for visual designersCore UI graphic assets available: teehanlax.com/blog
![Page 129: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/129.jpg)
103
Resources for visual designersCore UI graphic assets available: teehanlax.com/blog
![Page 130: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/130.jpg)
104
Resources for visual designersHigh quality visual interface stock sites:
![Page 131: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/131.jpg)
104
Resources for visual designersHigh quality visual interface stock sites:
![Page 132: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/132.jpg)
104
Resources for visual designersHigh quality visual interface stock sites:
![Page 133: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/133.jpg)
104
Resources for visual designersHigh quality visual interface stock sites:
![Page 134: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/134.jpg)
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!
![Page 135: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/135.jpg)
106
Annotated wireframes & layered PSDs:
![Page 136: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/136.jpg)
106
Annotated wireframes & layered PSDs:
![Page 137: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/137.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential
Flows & wireframes EXERCISE 4: Tablet app interface sketch
107
![Page 138: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/138.jpg)
108
User flow
![Page 139: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/139.jpg)
109
![Page 140: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/140.jpg)
110
![Page 141: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/141.jpg)
111
![Page 142: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/142.jpg)
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.
![Page 143: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/143.jpg)
113
![Page 144: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/144.jpg)
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
![Page 145: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/145.jpg)
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.
![Page 146: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/146.jpg)
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!
![Page 147: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/147.jpg)
116
Who wants to share what they’ve come up with?
![Page 148: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/148.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential 117
Team & Process More than one way to approach
![Page 149: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/149.jpg)
118
Users
Project Manager
User Experience
Visual Designer
Content
Engineer
Client
The team
Collaboration of a multi-disciplined team is critical
![Page 150: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/150.jpg)
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
![Page 151: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/151.jpg)
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
![Page 152: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/152.jpg)
© 2011 Hot Studio, Inc. Proprietary & Confidential 121
IF we have time left...A few basics of getting your app into the app store
![Page 153: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/153.jpg)
A few reasons for rejection from Apple App Store
122
![Page 154: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/154.jpg)
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
![Page 155: Web2.0 Tablet Experience Design Workshop](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a59a9e1a28abb4578b45a4/html5/thumbnails/155.jpg)
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