web2.0 tablet experience design workshop

155
Design for Tablet Experiences | Workshop | Henrik Olsen Web 2.0 NYC

Upload: henrikolsen123

Post on 15-Jul-2015

909 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Web2.0 Tablet Experience Design Workshop

Design for Tablet Experiences | Workshop | Henrik Olsen

Web 2.0 NYC

Page 2: Web2.0 Tablet Experience Design Workshop

© 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

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

4

What are you hoping to learn, or

experience, in this workshop?

Page 5: Web2.0 Tablet Experience Design Workshop

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

© 2011 Hot Studio, Inc. Proprietary & Confidential 6

Where I come from(an experience design firm)

Page 7: Web2.0 Tablet Experience Design Workshop

7

Page 8: Web2.0 Tablet Experience Design Workshop

8

Page 9: Web2.0 Tablet Experience Design Workshop

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

© 2010 Hot Studio, Inc. Proprietary & Confidential | 11/03/10 Electronic Arts + Hot Studios

Page 11: Web2.0 Tablet Experience Design Workshop

© 2010 Hot Studio, Inc. Proprietary & Confidential

Page 12: Web2.0 Tablet Experience Design Workshop

11

Page 13: Web2.0 Tablet Experience Design Workshop

© 2011 Hot Studio, Inc. Proprietary & Confidential

Page 14: Web2.0 Tablet Experience Design Workshop

13

Page 15: Web2.0 Tablet Experience Design Workshop

14

Page 16: Web2.0 Tablet Experience Design Workshop

15

Page 17: Web2.0 Tablet Experience Design Workshop

16

Page 18: Web2.0 Tablet Experience Design Workshop

17

Page 19: Web2.0 Tablet Experience Design Workshop

© 2011 Hot Studio, Inc. Proprietary & Confidential

Page 20: Web2.0 Tablet Experience Design Workshop

© 2011 Hot Studio, Inc. Proprietary & Confidential

Page 21: Web2.0 Tablet Experience Design Workshop

© 2011 Hot Studio, Inc. Proprietary & Confidential

Page 22: Web2.0 Tablet Experience Design Workshop

21

Page 23: Web2.0 Tablet Experience Design Workshop

22

Page 24: Web2.0 Tablet Experience Design Workshop

23

Page 25: Web2.0 Tablet Experience Design Workshop

23

Page 26: Web2.0 Tablet Experience Design Workshop

23

Page 27: Web2.0 Tablet Experience Design Workshop

24

Page 28: Web2.0 Tablet Experience Design Workshop

25

Page 29: Web2.0 Tablet Experience Design Workshop

25

Page 30: Web2.0 Tablet Experience Design Workshop

25

Page 31: Web2.0 Tablet Experience Design Workshop

25

Page 32: Web2.0 Tablet Experience Design Workshop

© 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

27

iPad

Galaxy

RIM Playbook

Motorola Xoom

Kindle Fire

Page 34: Web2.0 Tablet Experience Design Workshop

28

HTC FlyerHP TouchPad with Android!(WebOS not totally dead)

Dell Streak

Page 35: Web2.0 Tablet Experience Design Workshop

28

HTC FlyerHP TouchPad with Android!(WebOS not totally dead)

Dell Streak

Page 36: Web2.0 Tablet Experience Design Workshop

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

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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 2011 Hot Studio, Inc. Proprietary & Confidential 38

Cool Apps! Five apps that kick ass

Page 46: Web2.0 Tablet Experience Design Workshop

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

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

41

Flipboard

ABC Player Zillow

DropList

Page 49: Web2.0 Tablet Experience Design Workshop

42

Gilt: JetSetterDiscovery Channel

Page 50: Web2.0 Tablet Experience Design Workshop

43

ESPN ScoreCenter XLGoogle Earth App

Page 51: Web2.0 Tablet Experience Design Workshop

© 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

45

Finding a need

Page 53: Web2.0 Tablet Experience Design Workshop

45

• What does a person want/need to do?

Finding a need

Page 54: Web2.0 Tablet Experience Design Workshop

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

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

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

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

46

Exercise 1: defining a need

Page 59: Web2.0 Tablet Experience Design Workshop

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

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

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

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

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

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

© 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

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

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

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

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

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

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

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

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

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

...makes it appear centered in the screen...

Page 76: Web2.0 Tablet Experience Design Workshop

...overshooting....

Page 77: Web2.0 Tablet Experience Design Workshop

...and settling back into its final size.

Page 78: Web2.0 Tablet Experience Design Workshop

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

© 2011 Hot Studio, Inc. Proprietary & Confidential

Page 80: Web2.0 Tablet Experience Design Workshop

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

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

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

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

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

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

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

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

Break time!

...be back at 10:40 sharp

68

10:20am - 10:40am

Page 89: Web2.0 Tablet Experience Design Workshop

69

Obligatory Dilbert cartoon

Page 90: Web2.0 Tablet Experience Design Workshop

Welcome back!

...letʼs keep working on your app

70

10:40am

Page 91: Web2.0 Tablet Experience Design Workshop

© 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

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

73

Page 94: Web2.0 Tablet Experience Design Workshop

74

Page 95: Web2.0 Tablet Experience Design Workshop

75

Page 96: Web2.0 Tablet Experience Design Workshop

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

77

Page 98: Web2.0 Tablet Experience Design Workshop

77

You’ve got 10 minutes.... go!

Page 99: Web2.0 Tablet Experience Design Workshop

78

Who wants to share what they’ve come up with?

Page 100: Web2.0 Tablet Experience Design Workshop

© 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

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

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

© 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

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

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

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

84

Annotation of gestures

Page 108: Web2.0 Tablet Experience Design Workshop

Annotation of gestures

Page 109: Web2.0 Tablet Experience Design Workshop
Page 110: Web2.0 Tablet Experience Design Workshop

87

Annotation of gestures

Page 111: Web2.0 Tablet Experience Design Workshop

© 2011 Hot Studio, Inc. Proprietary & Confidential 88

Tools for the designerDigital + Analog

Page 112: Web2.0 Tablet Experience Design Workshop

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

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

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

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

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

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

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

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

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

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

99

Why Prototype?

ideas make learn validate

Iterative design process:

Page 123: Web2.0 Tablet Experience Design Workshop

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

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

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

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

101

Core UI resources are available

Page 128: Web2.0 Tablet Experience Design Workshop

102

Resources for visual designersCore UI graphic assets available: teehanlax.com/blog

Page 129: Web2.0 Tablet Experience Design Workshop

103

Resources for visual designersCore UI graphic assets available: teehanlax.com/blog

Page 130: Web2.0 Tablet Experience Design Workshop

104

Resources for visual designersHigh quality visual interface stock sites:

Page 131: Web2.0 Tablet Experience Design Workshop

104

Resources for visual designersHigh quality visual interface stock sites:

Page 132: Web2.0 Tablet Experience Design Workshop

104

Resources for visual designersHigh quality visual interface stock sites:

Page 133: Web2.0 Tablet Experience Design Workshop

104

Resources for visual designersHigh quality visual interface stock sites:

Page 134: Web2.0 Tablet Experience Design Workshop

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

106

Annotated wireframes & layered PSDs:

Page 136: Web2.0 Tablet Experience Design Workshop

106

Annotated wireframes & layered PSDs:

Page 137: Web2.0 Tablet Experience Design Workshop

© 2011 Hot Studio, Inc. Proprietary & Confidential

Flows & wireframes EXERCISE 4: Tablet app interface sketch

107

Page 138: Web2.0 Tablet Experience Design Workshop

108

User flow

Page 139: Web2.0 Tablet Experience Design Workshop

109

Page 140: Web2.0 Tablet Experience Design Workshop

110

Page 141: Web2.0 Tablet Experience Design Workshop

111

Page 142: Web2.0 Tablet Experience Design Workshop

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

113

Page 144: Web2.0 Tablet Experience Design Workshop

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

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

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

116

Who wants to share what they’ve come up with?

Page 148: Web2.0 Tablet Experience Design Workshop

© 2011 Hot Studio, Inc. Proprietary & Confidential 117

Team & Process More than one way to approach

Page 149: Web2.0 Tablet Experience Design Workshop

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

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

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

© 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

A few reasons for rejection from Apple App Store

122

Page 154: Web2.0 Tablet Experience Design Workshop

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

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