mobile & ux - in the eye of the perfect storm

85
Illustrations by Jason Robb Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com © Copyright 2012, User Interface Engineering. All Rights Reserved. 1

Upload: jared-spool

Post on 17-Aug-2014

5.219 views

Category:

Design


3 download

DESCRIPTION

Mobile & UX: Inside the Eye of the Perfect Storm The world of web application design is expanding at a rapid rate. We’re now expected to design great experiences across a huge variety of platforms, from small screens to large displays. The flood of iPad applications and successful online businesses are showing our executives that design matters. Why is all this happening now? Where is it all going? UIE’s own Jared Spool will show you how four driving forces—market maturity, the emergence of experience, Kano’s model, and Sturgeon’s Law—are increasing the visibility and value of design in organizations everywhere. He’ll show you what the next generation of design teams will look like and how you’ll get there. Jared will share: + When the emphasis of the marketplace shifts from features to experience and how not to get caught with a costly surprise + Why the best organizations go beyond designing for the users' activities and looks at their entire experience + How to ensure you're meeting basic expectations while integrating delightful components into your design

TRANSCRIPT

Page 1: Mobile & UX - In the Eye of the Perfect Storm

Illustrations by Jason Robb

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 1

Page 2: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 2

Page 3: Mobile & UX - In the Eye of the Perfect Storm

MyCokeRewards.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 3

Page 4: Mobile & UX - In the Eye of the Perfect Storm

MyCokeRewards.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 4

Page 5: Mobile & UX - In the Eye of the Perfect Storm

FOX.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 5

Page 6: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 6

Page 7: Mobile & UX - In the Eye of the Perfect Storm

MikePanetta.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 7

Page 8: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 8

Page 9: Mobile & UX - In the Eye of the Perfect Storm

LCBT.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 9

Page 10: Mobile & UX - In the Eye of the Perfect Storm

Marriott.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 10

Page 11: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 11

Page 12: Mobile & UX - In the Eye of the Perfect Storm

United

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 12

Page 13: Mobile & UX - In the Eye of the Perfect Storm

United.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 13

Page 14: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 14

Page 15: Mobile & UX - In the Eye of the Perfect Storm

MyCokeRewards.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 15

Page 16: Mobile & UX - In the Eye of the Perfect Storm

MyCokeRewards.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 16

Page 17: Mobile & UX - In the Eye of the Perfect Storm

VerizonWireless.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 17

Page 18: Mobile & UX - In the Eye of the Perfect Storm

AT&T.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 18

Page 19: Mobile & UX - In the Eye of the Perfect Storm

Apple.com/iPhone

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 19

Page 20: Mobile & UX - In the Eye of the Perfect Storm

AirCanada.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 20

Page 21: Mobile & UX - In the Eye of the Perfect Storm

AirCanada.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 21

Page 22: Mobile & UX - In the Eye of the Perfect Storm

AirCanada.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 22

Page 23: Mobile & UX - In the Eye of the Perfect Storm

Boston.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 23

Page 24: Mobile & UX - In the Eye of the Perfect Storm

NYTimes.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 24

Page 25: Mobile & UX - In the Eye of the Perfect Storm

Sturgeon’s Law

90% of everything is crapAre your designs in the other 10%?

Are you considering the user’s perspective?

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 25

Page 26: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 26

Page 27: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 27

Page 28: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 28

Page 29: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 29

Page 30: Mobile & UX - In the Eye of the Perfect Storm

Altavista

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 30

Page 31: Mobile & UX - In the Eye of the Perfect Storm

Google

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 31

Page 32: Mobile & UX - In the Eye of the Perfect Storm

Accuweather

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 32

Page 33: Mobile & UX - In the Eye of the Perfect Storm

Umbrella Today

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 33

Page 34: Mobile & UX - In the Eye of the Perfect Storm

Umbrella Today

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 34

Page 35: Mobile & UX - In the Eye of the Perfect Storm

Air Canada

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 35

Page 36: Mobile & UX - In the Eye of the Perfect Storm

Air CanadaAir Canada

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 36

Page 37: Mobile & UX - In the Eye of the Perfect Storm

AirCanada.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 37

Page 38: Mobile & UX - In the Eye of the Perfect Storm

BART.gov

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 38

Page 39: Mobile & UX - In the Eye of the Perfect Storm

Amazon.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 39

Page 40: Mobile & UX - In the Eye of the Perfect Storm

Amazon.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 40

Page 41: Mobile & UX - In the Eye of the Perfect Storm

Amazon.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 41

Page 42: Mobile & UX - In the Eye of the Perfect Storm

BestBuy.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 42

Page 43: Mobile & UX - In the Eye of the Perfect Storm

BestBuy.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 43

Page 44: Mobile & UX - In the Eye of the Perfect Storm

BestBuy.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 44

Page 45: Mobile & UX - In the Eye of the Perfect Storm

Market Maturity

The features stage focuses on adding more into the design

The experience stage focuses on removing all but the essentials from the design

Is your market currently focused on technology, features, or experience?

Shifting from features to experience is the hardest thing an organization can do — and most fail

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 45

Page 46: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 46

Page 47: Mobile & UX - In the Eye of the Perfect Storm

Six Flags: Mike Kazarnowicz, Joe Rollerfan (Flickr)

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 47

Page 48: Mobile & UX - In the Eye of the Perfect Storm

Disney World, Joe Penniston (Flickr)

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 48

Page 49: Mobile & UX - In the Eye of the Perfect Storm

Joanna8555 (Flickr)

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 49

Page 50: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 50

Page 51: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 51

Page 52: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 52

Page 53: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 53

Page 54: Mobile & UX - In the Eye of the Perfect Storm

Groupon

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 54

Page 55: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 55

Page 56: Mobile & UX - In the Eye of the Perfect Storm

Grocon

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 56

Page 57: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 57

Page 58: Mobile & UX - In the Eye of the Perfect Storm

Activities vs. Experience

Activities are discrete touchpoints with the users

Experience fills in the gaps

Mobile more often lives within the gaps

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 58

Page 59: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 59

Page 60: Mobile & UX - In the Eye of the Perfect Storm

Investment

Delight

Use

r S

ati

sfa

cti

on

Frustration

Noriaka Kano

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 60

Page 61: Mobile & UX - In the Eye of the Perfect Storm

Shazam

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 61

Page 62: Mobile & UX - In the Eye of the Perfect Storm

Shazam

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 62

Page 63: Mobile & UX - In the Eye of the Perfect Storm

LimoRes

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 63

Page 64: Mobile & UX - In the Eye of the Perfect Storm

LimoRes

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 64

Page 65: Mobile & UX - In the Eye of the Perfect Storm

LimoRes

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 65

Page 66: Mobile & UX - In the Eye of the Perfect Storm

Google

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 66

Page 67: Mobile & UX - In the Eye of the Perfect Storm

Neutral Satisfaction

Use

r Sa

tisfa

ctio

n

Delight

Frustration

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 67

Page 68: Mobile & UX - In the Eye of the Perfect Storm

My CokeRewards

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 68

Page 69: Mobile & UX - In the Eye of the Perfect Storm

MyCokeRewards.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 69

Page 70: Mobile & UX - In the Eye of the Perfect Storm

MyCokeRewards.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 70

Page 71: Mobile & UX - In the Eye of the Perfect Storm

MyCokeRewards.com

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 71

Page 72: Mobile & UX - In the Eye of the Perfect Storm

Site

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 72

Page 73: Mobile & UX - In the Eye of the Perfect Storm

Investment

Delight

Use

r Sa

tisfa

ctio

n

Frustration

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 73

Page 74: Mobile & UX - In the Eye of the Perfect Storm

Kano’s Model

Three vectors: Performance payoff, basic expectations, and excitement generators

Have to meet basic expectations before excitement generators will work

Over time, excitement generators become basic expectations

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 74

Page 75: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 75

Page 76: Mobile & UX - In the Eye of the Perfect Storm

Copy Writing

Information Architecture

Design Process Management

User Research Practices

Interaction Design

Information Design

Visual Design

Editing &Curating

Ethnography

Domain Knowledge

Business Knowledge

Analytics

Marketing

Technology

ROI

Social Networks Use Cases

Agile Methods

Storytelling

Critiquing

Sketching

Presenting

Facilitating

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 76

Page 77: Mobile & UX - In the Eye of the Perfect Storm

The Three Questions

Vision: “Can everyone on the team describe the experience of using your design five years from now?”

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 77

Page 78: Mobile & UX - In the Eye of the Perfect Storm

A flag in the sand…

…that everyone marches towards.

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 78

Page 79: Mobile & UX - In the Eye of the Perfect Storm

Easily moved when things change.

Everyone continues to march toward it.

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 79

Page 80: Mobile & UX - In the Eye of the Perfect Storm

The Three Questions

Vision: “Can everyone on the team describe the experience of using your design five years from now?”

Feedback: “In the last six weeks, have you spent more than two hours watching someone use your or a competitor’s design?”

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 80

Page 81: Mobile & UX - In the Eye of the Perfect Storm

Methods of Feedback

Usability TestingFive second testsTrade show/Cafe testingRemote usability tests

Field Studies

Customer SupportUser forums

Using it yourself (for self-designers)

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 81

Page 82: Mobile & UX - In the Eye of the Perfect Storm

The Three Questions

Vision: “Can everyone on the team describe the experience of using your design five years from now?”

Feedback: “In the last six weeks, have you spent more than two hours watching someone use your or a competitor’s design?”

Culture: “In the last six weeks, have you rewarded a team member for creating a major design failure?”

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 82

Page 83: Mobile & UX - In the Eye of the Perfect Storm

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 83

Page 84: Mobile & UX - In the Eye of the Perfect Storm

The Eye of the Perfect Storm

Invest to avoid Sturgeon’s Law

Focus on experience over technology and features

Fill in the gaps between the activities

Ensure you meet basic needs while you search for delighters

Build in a feedback process

Create your experience vision

Celebrate learning from taking risks

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 84

Page 85: Mobile & UX - In the Eye of the Perfect Storm

Free for Webvision Attendees

BillScott

HaganRivers

BrandonSchauer

KimGoodwin

LukeWroblewski

Greg & StephanieRewis

StevePortigal

Kevin Hoffman

UI16 On Demand VideosMobile Input

UX Leadership

Being Creative with CSS3

Multi-device Design Patterns

UIConf.com/giveaway

Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com

© Copyright 2012, User Interface Engineering. All Rights Reserved. 85