Designing for Tablet Experiences (Henrik Olsen)

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 & contentexercise #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?


Where I come from(an experience design firm)

8

Hot Studio is an experience design company

that creates new ways for people to interact

with products, services, and people


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

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


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



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)



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



BlackBerry Tablet OS

RIM

Strengths

‣ Credibility of Blackberry

‣ BlackBerry widely adopted in business world

Weaknesses

‣ So far only 5% of the market

‣ Limited apps


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


Pop Quiz

Who invented touch technology?

A) Sam Hurst

B) E.A. Johnson

C) Johnny Ives

D) Thomas Edison

E) Al Gore

36


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

http://en.wikipedia.org/wiki/Touchscreen#cite_note-4









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

Flipboard

ABC Player Zillow

DropList

42

Gilt: JetSetterDiscovery Channel

43

ESPN ScoreCenter XLGoogle Earth App


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


• 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



• Content must fit the context Can they access content, and data, ‘just at the right time‘

Finding a need

45




• Is there an even larger opportunity? Laptop, TV, mobile, tablet, appliance, as well as physical spaces. (a digital eco-system!)

Finding a need

45




• 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)


46


2. Who are the people that will use it?


46



3. Where is it used? In home, o!ce, shopping, out & about?


46



3. Where is it used? In home, o!ce, shopping, out & about?

4. How does it get paid for? What is the business model?


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!


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

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.

60

Resolution & screen dimensionAccommodating resolution of the device. Plus, how does it compare to your authoring environment?

Consideration: 6

61


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


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


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

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


78

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


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’


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?

84

Annotation of gestures

87



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


• Visio - from MicroSoft

• OmniGra"e

• Illustrator

• InDesign


91

Experience Design


• Visio

• OmniGra"e 5

• Illustrator

• InDesign


92

Experience Design


• Visio

• OmniGra"e 5

• Illustrator

• InDesign


93

Experience Design


• Visio

• OmniGra"e 5

• Illustrator

• InDesign


94

Visual Design

• Sketch Paper!

• Photoshop

• LiveView

• AfterE!ects

• Fireworks


95

Visual Design

• Sketch Paper!

• Photoshop

• LiveView

• AfterE!ects

• Fireworks


96

Visual Design

• Sketch Paper!

• Photoshop

• LiveView

• AfterE!ects

• Fireworks


97

Visual Design

• Sketch Paper!

• Photoshop

• LiveView

• AfterE!ects

• Fireworks


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)



99

Why Prototype?


• Bring your ideas to life.... quickly sketching



99

Why Prototype?


• Bring your ideas to life.... quickly sketching

• See the choreography of your transitions and screen states



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:

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:


Flows & wireframes EXERCISE 4: Tablet app interface sketch

107

108

User flow

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.

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?


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


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

Designing for Tablet Experiences (Henrik Olsen)

Design

Transcript of Designing for Tablet Experiences (Henrik Olsen)