designing for tablets & smart tvs

78
Google DevFest 2012 Designing for Tablets & TVs Presented by DANI STORLIE ANDY FITZGERALD

Upload: andy-fitzgerald

Post on 27-Jan-2015

110 views

Category:

Design


3 download

DESCRIPTION

A talk on UX and visual design for Android tablets & Google TV given by visual designer Dani Storlie and me at Google DevFest in September 2012.

TRANSCRIPT

Page 1: Designing for Tablets & Smart TVs

Google DevFest 2012

Designing for Tablets & TVs

Presented by DANI STORLIEANDY FITZGERALD

Page 2: Designing for Tablets & Smart TVs
Page 3: Designing for Tablets & Smart TVs
Page 4: Designing for Tablets & Smart TVs
Page 5: Designing for Tablets & Smart TVs

Design Process

Color Theory

Visual Hierarchy

Overview

Page 6: Designing for Tablets & Smart TVs

Design Process

Page 7: Designing for Tablets & Smart TVs

- Jonathan Ive. 2012

“The design process is about designing and prototyping and making. When you separate

those, I think the final result suffers”

Page 8: Designing for Tablets & Smart TVs

Idea

Market Research

Sketch

Design

Prototype

Page 9: Designing for Tablets & Smart TVs

Have an idea

Page 10: Designing for Tablets & Smart TVs

Have an idea

Find a unique problem

Consider the form factor

Know your platform

Page 11: Designing for Tablets & Smart TVs

Market Research

Page 12: Designing for Tablets & Smart TVs

Market ResearchWho is this for?

What else is out there?

What can you do better?

Page 13: Designing for Tablets & Smart TVs

Sketch it Out

Page 14: Designing for Tablets & Smart TVs

Sketch it OutInformation on the screen

Navigating through application

How do elements fit on the screen

Page 15: Designing for Tablets & Smart TVs

Visual Design

Page 16: Designing for Tablets & Smart TVs

Visual DesignColor

Visual Hierarchy

Layout

Page 17: Designing for Tablets & Smart TVs

Prototype

Page 18: Designing for Tablets & Smart TVs

PrototypeBuild you application

Test it with users

Iterate till you perfect

Page 19: Designing for Tablets & Smart TVs

Celebrate!

Page 20: Designing for Tablets & Smart TVs

Visual Design

Page 21: Designing for Tablets & Smart TVs
Page 22: Designing for Tablets & Smart TVs

Visual Design

Page 23: Designing for Tablets & Smart TVs

Designing for 10ft

10ft

Page 24: Designing for Tablets & Smart TVs

Designing up close

Page 25: Designing for Tablets & Smart TVs
Page 26: Designing for Tablets & Smart TVs

Color Theory

Page 27: Designing for Tablets & Smart TVs
Page 28: Designing for Tablets & Smart TVs

Color Wheel

Page 29: Designing for Tablets & Smart TVs

Monochromatic

shade

Page 30: Designing for Tablets & Smart TVs

Color Wheel

Page 31: Designing for Tablets & Smart TVs

Primary

Page 32: Designing for Tablets & Smart TVs

Secondary

Page 33: Designing for Tablets & Smart TVs

Secondary

Page 34: Designing for Tablets & Smart TVs

Tertiary

Page 35: Designing for Tablets & Smart TVs

Tertiary

Page 36: Designing for Tablets & Smart TVs

Complimentary

Page 37: Designing for Tablets & Smart TVs
Page 38: Designing for Tablets & Smart TVs

Analogous

Page 39: Designing for Tablets & Smart TVs

Warm/Cool

Page 40: Designing for Tablets & Smart TVs

Google +

Page 41: Designing for Tablets & Smart TVs

DropBox

Page 42: Designing for Tablets & Smart TVs

Evernote

Page 43: Designing for Tablets & Smart TVs

Google Play

Page 44: Designing for Tablets & Smart TVs

Hierarchy

Page 45: Designing for Tablets & Smart TVs

Hierarchy

Size

Color

Contrast

Alignment

Repetition

Proximity

Page 46: Designing for Tablets & Smart TVs

Hierarchy

Page 47: Designing for Tablets & Smart TVs

Size

Page 48: Designing for Tablets & Smart TVs

Size & Alignment

Page 49: Designing for Tablets & Smart TVs

Color

Page 50: Designing for Tablets & Smart TVs

Contrast

Page 51: Designing for Tablets & Smart TVs

Repetition & Proximity

TextLine of text

TextLine of text

TextLine of text

TextLine of text

TextLine of text

TextLine of text

Page 52: Designing for Tablets & Smart TVs
Page 53: Designing for Tablets & Smart TVs

Visual Information Seeking

Page 54: Designing for Tablets & Smart TVs

Overview

Zoom

Filter

Details on Demand

Visual  Informa.on  Seeking  Mantra,  Ben  Schneiderman  (1996)

Visual Information Seeking

Page 55: Designing for Tablets & Smart TVs

Visual Information Seeking

Page 56: Designing for Tablets & Smart TVs

Visual Information Seeking

Page 57: Designing for Tablets & Smart TVs

Visual Information Seeking

Page 58: Designing for Tablets & Smart TVs

Visual Information Seeking

Page 59: Designing for Tablets & Smart TVs

Visual Information Seeking

Page 60: Designing for Tablets & Smart TVs

Visual Information Seeking

Page 61: Designing for Tablets & Smart TVs

Knowledge in the WorldInterpretation substitutes for learning

High ease of use on first encounter

Efficiency slowed by the need of interpretation

Knowledge in the HeadRequires learning

Low ease of use on first encounter

High efficiency

User Knowledge

Adapted  from  The  Design  of  Everyday  Things,  Donald  Norman    (1988)

Page 62: Designing for Tablets & Smart TVs

Identifying Priorities& Translating Value

Page 63: Designing for Tablets & Smart TVs

“Mobile users’ priorities change, but their intents don’t.”

- Emily WengertBeyond Channels (IAS 2012)

Page 64: Designing for Tablets & Smart TVs

Value in Context

Page 65: Designing for Tablets & Smart TVs

Value in Context

Page 66: Designing for Tablets & Smart TVs

Value in Context

Page 67: Designing for Tablets & Smart TVs

Value in Context

Page 68: Designing for Tablets & Smart TVs

Value in Context

Page 69: Designing for Tablets & Smart TVs

Value in Context

Page 70: Designing for Tablets & Smart TVs

Value in Context

Page 71: Designing for Tablets & Smart TVs

Value in Context

Page 72: Designing for Tablets & Smart TVs

Value in Context

Page 73: Designing for Tablets & Smart TVs

Value in Context

Page 74: Designing for Tablets & Smart TVs

Value in Context

Page 75: Designing for Tablets & Smart TVs

Value in Context

Page 76: Designing for Tablets & Smart TVs

Clearly Identify:The value proposition

The target user

The target context

Leverage Context Specific Assets

Accommodate Context Specific Limitations

Purge Unnecessary Features & Content

Value in Context Heuristics

Page 77: Designing for Tablets & Smart TVs

Q&A.

Page 78: Designing for Tablets & Smart TVs

@DANISTORLIE@ANDYBYWIRE

Thank you.