design for www ux intro

356
UXD Sunday, February 10, 13

Upload: joe-natoli

Post on 16-Nov-2014

624 views

Category:

Documents


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Design for www ux intro

UXD

Sunday, February 10, 13

Page 2: Design for www ux intro

UXD

what UXD isn’t

Sunday, February 10, 13

Page 3: Design for www ux intro

UXD

Sunday, February 10, 13

Page 4: Design for www ux intro

UXDUXD is not user interface design.

Sunday, February 10, 13

Page 5: Design for www ux intro

UXDUXD is not user interface design.

“Interface is a component of user experience, but there's much more.”

Peter Merholz Founding Partner & President, Adaptive Path

Sunday, February 10, 13

Page 6: Design for www ux intro

UXDUXD is not user interface design.

Sunday, February 10, 13

Page 7: Design for www ux intro

UXDUXD is not user interface design.

“It isn't about cosmetics, pixel- pushing and button placement. It's holistic and it's everyone's concern, not just the realm of ‘artistic’ types.”

Christian Crumlish Curator, Yahoo! Design Pattern Library

Sunday, February 10, 13

Page 8: Design for www ux intro

UXD

Sunday, February 10, 13

Page 9: Design for www ux intro

UXDUXD isn’t a step in a process.

Sunday, February 10, 13

Page 10: Design for www ux intro

UXDUXD isn’t a step in a process.

“User experience design isn't a checkbox. You don't do it and then move on. It needs to be integrated into everything you do.”

Liz Danzico Chairperson, School of Visual Arts

Sunday, February 10, 13

Page 11: Design for www ux intro

UXDUXD isn’t a step in a process.

Sunday, February 10, 13

Page 12: Design for www ux intro

UXDUXD isn’t a step in a process.

“Most expect UXD to be a discrete activity...it must be an ongoing effort, continually learning about users, responding to behaviors, evolving the product or service.”

Dan Brown Co-Founder and Principal, Eight Shapes

Sunday, February 10, 13

Page 13: Design for www ux intro

UXD

Sunday, February 10, 13

Page 14: Design for www ux intro

UXDUXD isn’t about technology.

Sunday, February 10, 13

Page 15: Design for www ux intro

UXDUXD isn’t about technology.

“UXD is not limited to the confines of the computer. It doesn't even need a screen. UXD is any interaction with any product, any artifact, any system.”

Bill DeRouchey Director of Interaction Design, Ziba Design

Sunday, February 10, 13

Page 16: Design for www ux intro

UXDUXD isn’t about technology.

Sunday, February 10, 13

Page 17: Design for www ux intro

UXDUXD isn’t about technology.

“It's about how we live. It's about everything we do; it surrounds us.”

Mario Borque Manager of IA & Content, Trapeze Group

Sunday, February 10, 13

Page 18: Design for www ux intro

UXD

Sunday, February 10, 13

Page 19: Design for www ux intro

UXDUXD isn’t just about usability.

Sunday, February 10, 13

Page 20: Design for www ux intro

UXDUXD isn’t just about usability.

“People often think that UXD is a way to make products that suck into products that don't suck by dedicating resources to the product's design.”

Chris Fahey Founding Partner & Principal, Behavior

Sunday, February 10, 13

Page 21: Design for www ux intro

UXDUXD isn’t just about usability.

Sunday, February 10, 13

Page 22: Design for www ux intro

UXDUXD isn’t just about usability.

“Usability’s focus on efficiency and effectiveness blurs other important factors in UX, which include learn- ability and visceral and behavioral emotional responses to the products and services we use.”

David Malouf Professor, Interaction Design, Savannah College

Sunday, February 10, 13

Page 23: Design for www ux intro

UXD

Sunday, February 10, 13

Page 24: Design for www ux intro

UXDUXD isn’t just about users.

Sunday, February 10, 13

Page 25: Design for www ux intro

UXDUXD isn’t just about users.

“There are a set of business objectives that are needing to be met—and we’re designing to that, as well. We just can’t always do what is best for the users.”

Russ Unger Experience Design Strategist

Sunday, February 10, 13

Page 26: Design for www ux intro

UXDUXD isn’t just about users.

Sunday, February 10, 13

Page 27: Design for www ux intro

UXDUXD isn’t just about users.

“As user experience designers we have to find the sweet spot between the user’s needs and the business goals, and ensure that the design is on brand.”

Whitney Hess User Experience Designer

Sunday, February 10, 13

Page 28: Design for www ux intro

UXD

Sunday, February 10, 13

Page 29: Design for www ux intro

UXD

what UXD is

Sunday, February 10, 13

Page 30: Design for www ux intro

UXD

Sunday, February 10, 13

Page 31: Design for www ux intro

UXDformal definition

Sunday, February 10, 13

Page 32: Design for www ux intro

UXDformal definition

“User experience simply refers to the way a product behaves and is used in the real world. A positive user experience is one in which the goals of both the user and the organization that created the product are met.

Sunday, February 10, 13

Page 33: Design for www ux intro

UXDformal definition

“User experience simply refers to the way a product behaves and is used in the real world. A positive user experience is one in which the goals of both the user and the organization that created the product are met.

Usability is one attribute of a successful user experience, but usability alone does not make an experience positive for the user.”

Sunday, February 10, 13

Page 34: Design for www ux intro

UXDformal definition

“User experience simply refers to the way a product behaves and is used in the real world. A positive user experience is one in which the goals of both the user and the organization that created the product are met.

Usability is one attribute of a successful user experience, but usability alone does not make an experience positive for the user.”

Jesse James Garrett  Author of The Elements of User Experience

Sunday, February 10, 13

Page 35: Design for www ux intro

UXD

Sunday, February 10, 13

Page 36: Design for www ux intro

UXD

UXD is the sum of a simple equation.

Sunday, February 10, 13

Page 37: Design for www ux intro

UXD

business goalsUXD is the sum of a simple equation.

Sunday, February 10, 13

Page 38: Design for www ux intro

UXD

business goals+ customer goals

UXD is the sum of a simple equation.

Sunday, February 10, 13

Page 39: Design for www ux intro

UXD

business goals+ customer goals+ user interface

UXD is the sum of a simple equation.

Sunday, February 10, 13

Page 40: Design for www ux intro

UXD

business goals+ customer goals+ user interface+ back end process

UXD is the sum of a simple equation.

Sunday, February 10, 13

Page 41: Design for www ux intro

UXD

business goals+ customer goals+ user interface+ back end process

UXD is the sum of a simple equation.

Sunday, February 10, 13

Page 42: Design for www ux intro

UXD

business goals+ customer goals+ user interface+ back end process

UXD is the sum of a simple equation. = user experience

Sunday, February 10, 13

Page 43: Design for www ux intro

UXD

Sunday, February 10, 13

Page 44: Design for www ux intro

UXD

it’s the combined result of multiple efforts and processes.

Sunday, February 10, 13

Page 45: Design for www ux intro

UXD

it’s the combined result of multiple efforts and processes.

businessanalysis

Sunday, February 10, 13

Page 46: Design for www ux intro

UXD

it’s the combined result of multiple efforts and processes.

applicationarchitecture

businessanalysis

Sunday, February 10, 13

Page 47: Design for www ux intro

UXD

it’s the combined result of multiple efforts and processes.

applicationarchitecture

system design

businessanalysis

Sunday, February 10, 13

Page 48: Design for www ux intro

UXD

it’s the combined result of multiple efforts and processes.

applicationarchitecture

system design

businessanalysis

Informationarchitecture

Sunday, February 10, 13

Page 49: Design for www ux intro

UXD

it’s the combined result of multiple efforts and processes.

applicationarchitecture

system design

businessanalysis

interactiondesign

Informationarchitecture

Sunday, February 10, 13

Page 50: Design for www ux intro

UXD

it’s the combined result of multiple efforts and processes.

visual design

applicationarchitecture

system design

businessanalysis

interactiondesign

Informationarchitecture

Sunday, February 10, 13

Page 51: Design for www ux intro

UXD

it’s the combined result of multiple efforts and processes.

visual design

applicationarchitecture

system design

businessanalysis

interactiondesign

Informationarchitecture

user experience

Sunday, February 10, 13

Page 52: Design for www ux intro

UXD

Sunday, February 10, 13

Page 53: Design for www ux intro

UXD

it’s the combined result of multiple disciplines.

Sunday, February 10, 13

Page 54: Design for www ux intro

UXD

it’s the combined result of multiple disciplines.

➡ user research

Sunday, February 10, 13

Page 55: Design for www ux intro

UXD

it’s the combined result of multiple disciplines.

➡ user research

➡ interaction design

Sunday, February 10, 13

Page 56: Design for www ux intro

UXD

it’s the combined result of multiple disciplines.

➡ user research

➡ interaction design

➡ visual design

Sunday, February 10, 13

Page 57: Design for www ux intro

UXD

it’s the combined result of multiple disciplines.

➡ user research

➡ interaction design

➡ visual design

➡ information architecture

Sunday, February 10, 13

Page 58: Design for www ux intro

UXD

it’s the combined result of multiple disciplines.

➡ user research

➡ interaction design

➡ visual design

➡ information architecture

➡ front-end development

Sunday, February 10, 13

Page 59: Design for www ux intro

UXD

it’s the combined result of multiple disciplines.

➡ user research

➡ interaction design

➡ visual design

➡ information architecture

➡ front-end development

➡ writing

Sunday, February 10, 13

Page 60: Design for www ux intro

UXD

it’s the combined result of multiple disciplines.

➡ user research

➡ interaction design

➡ visual design

➡ information architecture

➡ front-end development

➡ writing

➡ user testing

Sunday, February 10, 13

Page 61: Design for www ux intro

UXD

Sunday, February 10, 13

Page 62: Design for www ux intro

UXDUXD means strategic advantage

prospective agent

Commissions: How Much?

When?

How do I get contracted?

What products can I sell?

What are FG Life's ratings?

What are FG Life's current Ànancials?

What's FG Life's history?

Bonus

!st Year Comp

Frequency

Find an IMO

Process

Requirements

How long?

Lifestyle Cat.

Life

Annuity

A.M. Best

Moody's

Fitch Ratings

AUM

Sales volume

Total value

How long in biz?

Domestic?

Ownership?

How easy is it to do business with FG Life?

Chat now?

Service Center

Who to Contact

Who will I be working with at FG Life?

Sales & Distrib.

Mgmt. Team

Board

How to Contact

FG Life Elite

FG Life Choice

Index Universal Life

(IUL)

Immed. Safeguard

Immed. Income

Immediate Annuity

(IA)

Guarantee Plus

Guarantee Platinum

Deferred Annuity

(DA)

Accelerated

Escalator

Safety Series

Prosperity Series

Guarantee Series

Choice Series

Health

Age

Gender

High-Risk

What incentives

does FG Life offer?

PAIR Program

Incentive Conf.

Training

How to qualify

Bonus credits

4XDOLÀcation period

/LIH�4XDOLÀcation

$QQXLW\�4XDOLÀcation

Vesting Period

Fund Investment Options

Choice Series

%HQHÀts

Roadshows Product Training

CE Training

Suitability Training

Sales Training

Training Resources

Competitor comparison

Competitor comparison

Competitor comparison

Send me information

Downloadcontract

kit

Make me an appealing

offer

Get me an IMO

AUDIENCE PURPOSE CONTEXT CONVINCE CONVINCE CONVERT

DECIDE DECIDE DECIDE > TRUST DECIDE > TRUST TRUST CONVERT

Sunday, February 10, 13

Page 63: Design for www ux intro

UXDUXD means strategic advantageUXD explores feasible solutions to design problems

prospective agent

Commissions: How Much?

When?

How do I get contracted?

What products can I sell?

What are FG Life's ratings?

What are FG Life's current Ànancials?

What's FG Life's history?

Bonus

!st Year Comp

Frequency

Find an IMO

Process

Requirements

How long?

Lifestyle Cat.

Life

Annuity

A.M. Best

Moody's

Fitch Ratings

AUM

Sales volume

Total value

How long in biz?

Domestic?

Ownership?

How easy is it to do business with FG Life?

Chat now?

Service Center

Who to Contact

Who will I be working with at FG Life?

Sales & Distrib.

Mgmt. Team

Board

How to Contact

FG Life Elite

FG Life Choice

Index Universal Life

(IUL)

Immed. Safeguard

Immed. Income

Immediate Annuity

(IA)

Guarantee Plus

Guarantee Platinum

Deferred Annuity

(DA)

Accelerated

Escalator

Safety Series

Prosperity Series

Guarantee Series

Choice Series

Health

Age

Gender

High-Risk

What incentives

does FG Life offer?

PAIR Program

Incentive Conf.

Training

How to qualify

Bonus credits

4XDOLÀcation period

/LIH�4XDOLÀcation

$QQXLW\�4XDOLÀcation

Vesting Period

Fund Investment Options

Choice Series

%HQHÀts

Roadshows Product Training

CE Training

Suitability Training

Sales Training

Training Resources

Competitor comparison

Competitor comparison

Competitor comparison

Send me information

Downloadcontract

kit

Make me an appealing

offer

Get me an IMO

AUDIENCE PURPOSE CONTEXT CONVINCE CONVINCE CONVERT

DECIDE DECIDE DECIDE > TRUST DECIDE > TRUST TRUST CONVERT

Sunday, February 10, 13

Page 64: Design for www ux intro

UXDUXD means strategic advantageUXD explores feasible solutions to design problemsit uncovers user needs and business goals – and areas where the two overlap.

prospective agent

Commissions: How Much?

When?

How do I get contracted?

What products can I sell?

What are FG Life's ratings?

What are FG Life's current Ànancials?

What's FG Life's history?

Bonus

!st Year Comp

Frequency

Find an IMO

Process

Requirements

How long?

Lifestyle Cat.

Life

Annuity

A.M. Best

Moody's

Fitch Ratings

AUM

Sales volume

Total value

How long in biz?

Domestic?

Ownership?

How easy is it to do business with FG Life?

Chat now?

Service Center

Who to Contact

Who will I be working with at FG Life?

Sales & Distrib.

Mgmt. Team

Board

How to Contact

FG Life Elite

FG Life Choice

Index Universal Life

(IUL)

Immed. Safeguard

Immed. Income

Immediate Annuity

(IA)

Guarantee Plus

Guarantee Platinum

Deferred Annuity

(DA)

Accelerated

Escalator

Safety Series

Prosperity Series

Guarantee Series

Choice Series

Health

Age

Gender

High-Risk

What incentives

does FG Life offer?

PAIR Program

Incentive Conf.

Training

How to qualify

Bonus credits

4XDOLÀcation period

/LIH�4XDOLÀcation

$QQXLW\�4XDOLÀcation

Vesting Period

Fund Investment Options

Choice Series

%HQHÀts

Roadshows Product Training

CE Training

Suitability Training

Sales Training

Training Resources

Competitor comparison

Competitor comparison

Competitor comparison

Send me information

Downloadcontract

kit

Make me an appealing

offer

Get me an IMO

AUDIENCE PURPOSE CONTEXT CONVINCE CONVINCE CONVERT

DECIDE DECIDE DECIDE > TRUST DECIDE > TRUST TRUST CONVERT

Sunday, February 10, 13

Page 65: Design for www ux intro

UXDUXD means strategic advantageUXD explores feasible solutions to design problemsit uncovers user needs and business goals – and areas where the two overlap.

it ensures products meet or exceed user expectations, increasing adoption, use and loyalty – and reducing support.

prospective agent

Commissions: How Much?

When?

How do I get contracted?

What products can I sell?

What are FG Life's ratings?

What are FG Life's current Ànancials?

What's FG Life's history?

Bonus

!st Year Comp

Frequency

Find an IMO

Process

Requirements

How long?

Lifestyle Cat.

Life

Annuity

A.M. Best

Moody's

Fitch Ratings

AUM

Sales volume

Total value

How long in biz?

Domestic?

Ownership?

How easy is it to do business with FG Life?

Chat now?

Service Center

Who to Contact

Who will I be working with at FG Life?

Sales & Distrib.

Mgmt. Team

Board

How to Contact

FG Life Elite

FG Life Choice

Index Universal Life

(IUL)

Immed. Safeguard

Immed. Income

Immediate Annuity

(IA)

Guarantee Plus

Guarantee Platinum

Deferred Annuity

(DA)

Accelerated

Escalator

Safety Series

Prosperity Series

Guarantee Series

Choice Series

Health

Age

Gender

High-Risk

What incentives

does FG Life offer?

PAIR Program

Incentive Conf.

Training

How to qualify

Bonus credits

4XDOLÀcation period

/LIH�4XDOLÀcation

$QQXLW\�4XDOLÀcation

Vesting Period

Fund Investment Options

Choice Series

%HQHÀts

Roadshows Product Training

CE Training

Suitability Training

Sales Training

Training Resources

Competitor comparison

Competitor comparison

Competitor comparison

Send me information

Downloadcontract

kit

Make me an appealing

offer

Get me an IMO

AUDIENCE PURPOSE CONTEXT CONVINCE CONVINCE CONVERT

DECIDE DECIDE DECIDE > TRUST DECIDE > TRUST TRUST CONVERT

Sunday, February 10, 13

Page 66: Design for www ux intro

UXDUXD means strategic advantageUXD explores feasible solutions to design problemsit uncovers user needs and business goals – and areas where the two overlap.

it ensures products meet or exceed user expectations, increasing adoption, use and loyalty – and reducing support.

it determines the feasibility of high quality products that can be created and implemented.

prospective agent

Commissions: How Much?

When?

How do I get contracted?

What products can I sell?

What are FG Life's ratings?

What are FG Life's current Ànancials?

What's FG Life's history?

Bonus

!st Year Comp

Frequency

Find an IMO

Process

Requirements

How long?

Lifestyle Cat.

Life

Annuity

A.M. Best

Moody's

Fitch Ratings

AUM

Sales volume

Total value

How long in biz?

Domestic?

Ownership?

How easy is it to do business with FG Life?

Chat now?

Service Center

Who to Contact

Who will I be working with at FG Life?

Sales & Distrib.

Mgmt. Team

Board

How to Contact

FG Life Elite

FG Life Choice

Index Universal Life

(IUL)

Immed. Safeguard

Immed. Income

Immediate Annuity

(IA)

Guarantee Plus

Guarantee Platinum

Deferred Annuity

(DA)

Accelerated

Escalator

Safety Series

Prosperity Series

Guarantee Series

Choice Series

Health

Age

Gender

High-Risk

What incentives

does FG Life offer?

PAIR Program

Incentive Conf.

Training

How to qualify

Bonus credits

4XDOLÀcation period

/LIH�4XDOLÀcation

$QQXLW\�4XDOLÀcation

Vesting Period

Fund Investment Options

Choice Series

%HQHÀts

Roadshows Product Training

CE Training

Suitability Training

Sales Training

Training Resources

Competitor comparison

Competitor comparison

Competitor comparison

Send me information

Downloadcontract

kit

Make me an appealing

offer

Get me an IMO

AUDIENCE PURPOSE CONTEXT CONVINCE CONVINCE CONVERT

DECIDE DECIDE DECIDE > TRUST DECIDE > TRUST TRUST CONVERT

Sunday, February 10, 13

Page 67: Design for www ux intro

UXD

Sunday, February 10, 13

Page 68: Design for www ux intro

UXDUXD ensures people use things

Sunday, February 10, 13

Page 69: Design for www ux intro

UXDUXD ensures people use thingsbecause we use things when

Sunday, February 10, 13

Page 70: Design for www ux intro

UXDUXD ensures people use thingsbecause we use things whenwe can easily figure out how to accomplish our task

Sunday, February 10, 13

Page 71: Design for www ux intro

UXDUXD ensures people use thingsbecause we use things whenwe can easily figure out how to accomplish our task

The steps involved in accomplishing the task – no matter how complex – seem simple.

Sunday, February 10, 13

Page 72: Design for www ux intro

UXDUXD ensures people use thingsbecause we use things whenwe can easily figure out how to accomplish our task

The steps involved in accomplishing the task – no matter how complex – seem simple.

Our sense of effort and cognitive load are minimized.

Sunday, February 10, 13

Page 73: Design for www ux intro

UXDUXD ensures people use thingsbecause we use things whenwe can easily figure out how to accomplish our task

The steps involved in accomplishing the task – no matter how complex – seem simple.

Our sense of effort and cognitive load are minimized.

Immediate, clear feedback is provided for each interaction.

Sunday, February 10, 13

Page 74: Design for www ux intro

UXDUXD ensures people use thingsbecause we use things whenwe can easily figure out how to accomplish our task

The steps involved in accomplishing the task – no matter how complex – seem simple.

Our sense of effort and cognitive load are minimized.

Immediate, clear feedback is provided for each interaction.

Our potential for errors is minimized – and when we do make a mistake we can recover quickly and easily.

Sunday, February 10, 13

Page 75: Design for www ux intro

UXD

Sunday, February 10, 13

Page 76: Design for www ux intro

UXDUXD is a balancing act

Sunday, February 10, 13

Page 77: Design for www ux intro

UXDUXD is a balancing act

I N N O V A T I O N

Sunday, February 10, 13

Page 78: Design for www ux intro

UXDUXD is a balancing act

D E S I R A B I L I T Y

I N N O V A T I O N

Sunday, February 10, 13

Page 79: Design for www ux intro

UXDUXD is a balancing act

D E S I R A B I L I T Y

F E A S I B I L I T Y

I N N O V A T I O N

Sunday, February 10, 13

Page 80: Design for www ux intro

UXDUXD is a balancing act

D E S I R A B I L I T Y

F E A S I B I L I T Y V I A B I L I T Y

I N N O V A T I O N

Sunday, February 10, 13

Page 81: Design for www ux intro

UXDUXD is a balancing act

D E S I R A B I L I T Y

F E A S I B I L I T Y V I A B I L I T Y

I N N O V A T I O N

innovative (successful) products must balance competing needs.

Sunday, February 10, 13

Page 82: Design for www ux intro

UXD

Sunday, February 10, 13

Page 83: Design for www ux intro

UXDtypical UXD activities

Sunday, February 10, 13

Page 84: Design for www ux intro

UXDtypical UXD activitiesanalysis

Sunday, February 10, 13

Page 85: Design for www ux intro

UXDtypical UXD activitiesanalysisbusiness objectives, behavior and thinking of the users, and the competition’s approach.

Sunday, February 10, 13

Page 86: Design for www ux intro

UXDtypical UXD activitiesanalysisbusiness objectives, behavior and thinking of the users, and the competition’s approach.

design

Sunday, February 10, 13

Page 87: Design for www ux intro

UXDtypical UXD activitiesanalysisbusiness objectives, behavior and thinking of the users, and the competition’s approach.

designinformation architecture, wireframes and detailed visual design treatments until the product takes form.

Sunday, February 10, 13

Page 88: Design for www ux intro

UXDtypical UXD activitiesanalysisbusiness objectives, behavior and thinking of the users, and the competition’s approach.

designinformation architecture, wireframes and detailed visual design treatments until the product takes form.

implementation

Sunday, February 10, 13

Page 89: Design for www ux intro

UXDtypical UXD activitiesanalysisbusiness objectives, behavior and thinking of the users, and the competition’s approach.

designinformation architecture, wireframes and detailed visual design treatments until the product takes form.

implementationrapid, constant refinement of prototypes in response to client reviews and feedback, internal analysis and user testing.

Sunday, February 10, 13

Page 90: Design for www ux intro

UXD

Sunday, February 10, 13

Page 91: Design for www ux intro

UXDtypical UXD deliverables

Sunday, February 10, 13

Page 92: Design for www ux intro

UXDtypical UXD deliverablesinformation architecture (IA)

Sunday, February 10, 13

Page 93: Design for www ux intro

UXDtypical UXD deliverablesinformation architecture (IA)IA concept maps

Sunday, February 10, 13

Page 94: Design for www ux intro

UXDtypical UXD deliverablesinformation architecture (IA)IA concept maps

use cases

Sunday, February 10, 13

Page 95: Design for www ux intro

UXDtypical UXD deliverablesinformation architecture (IA)IA concept maps

use cases

task flows

Sunday, February 10, 13

Page 96: Design for www ux intro

UXDtypical UXD deliverablesinformation architecture (IA)IA concept maps

use cases

task flows

storyboards

Sunday, February 10, 13

Page 97: Design for www ux intro

UXDtypical UXD deliverablesinformation architecture (IA)IA concept maps

use cases

task flows

storyboards

functional specifications

Sunday, February 10, 13

Page 98: Design for www ux intro

UXDtypical UXD deliverablesinformation architecture (IA)IA concept maps

use cases

task flows

storyboards

functional specifications

site maps

Sunday, February 10, 13

Page 99: Design for www ux intro

UXDtypical UXD deliverables

Sunday, February 10, 13

Page 100: Design for www ux intro

UXDtypical UXD deliverables

Sunday, February 10, 13

Page 101: Design for www ux intro

UXDtypical UXD deliverablesprototypes

Sunday, February 10, 13

Page 102: Design for www ux intro

UXDtypical UXD deliverablesprototypesconcept maps

Sunday, February 10, 13

Page 103: Design for www ux intro

UXDtypical UXD deliverablesprototypesconcept maps

paper prototypes

Sunday, February 10, 13

Page 104: Design for www ux intro

UXDtypical UXD deliverablesprototypesconcept maps

paper prototypes

flat wireframes

Sunday, February 10, 13

Page 105: Design for www ux intro

UXDtypical UXD deliverablesprototypesconcept maps

paper prototypes

flat wireframes

click-through HTML prototypes

Sunday, February 10, 13

Page 106: Design for www ux intro

UXDtypical UXD deliverables

Sunday, February 10, 13

Page 107: Design for www ux intro

UXDtypical UXD deliverables

Sunday, February 10, 13

Page 108: Design for www ux intro

UXDtypical UXD deliverablesdesign

Sunday, February 10, 13

Page 109: Design for www ux intro

UXDtypical UXD deliverablesdesignpolished visual design and screen layouts

Sunday, February 10, 13

Page 110: Design for www ux intro

UXDtypical UXD deliverablesdesignpolished visual design and screen layouts

icons and graphic components (assets)

Sunday, February 10, 13

Page 111: Design for www ux intro

UXDtypical UXD deliverablesdesignpolished visual design and screen layouts

icons and graphic components (assets)

CSS/HTML templates

Sunday, February 10, 13

Page 112: Design for www ux intro

UXDtypical UXD deliverables

Sunday, February 10, 13

Page 113: Design for www ux intro

UXDtypical UXD deliverables

Sunday, February 10, 13

Page 114: Design for www ux intro

UXDtypical UXD deliverablestechnical documentation

Sunday, February 10, 13

Page 115: Design for www ux intro

UXDtypical UXD deliverablestechnical documentationstyle guide containing developer reference and functional UX guidelines

Sunday, February 10, 13

Page 116: Design for www ux intro

UXDtypical UXD deliverablestechnical documentationstyle guide containing developer reference and functional UX guidelines

help content and/or user guides

Sunday, February 10, 13

Page 117: Design for www ux intro

UXDtypical UXD deliverablestechnical documentationstyle guide containing developer reference and functional UX guidelines

help content and/or user guides

videos, demos and training materials

Sunday, February 10, 13

Page 118: Design for www ux intro

UXDtypical UXD deliverablestechnical documentationstyle guide containing developer reference and functional UX guidelines

help content and/or user guides

videos, demos and training materials

localization versioning

Sunday, February 10, 13

Page 119: Design for www ux intro

UXD

Sunday, February 10, 13

Page 120: Design for www ux intro

UXD

Sunday, February 10, 13

Page 121: Design for www ux intro

UXDtechnology changes. people don’t.

Sunday, February 10, 13

Page 122: Design for www ux intro

UXD

Sunday, February 10, 13

Page 123: Design for www ux intro

UXDdon’t make me work (or think)

Sunday, February 10, 13

Page 124: Design for www ux intro

UXDdon’t make me work (or think)I’ll do the least amount of work possible to get a task done.

Sunday, February 10, 13

Page 125: Design for www ux intro

UXDdon’t make me work (or think)I’ll do the least amount of work possible to get a task done.

show me a little information; I’ll look for more if I want it.

Sunday, February 10, 13

Page 126: Design for www ux intro

UXDdon’t make me work (or think)I’ll do the least amount of work possible to get a task done.

show me a little information; I’ll look for more if I want it.

Don’t tell me, show me an example.

Sunday, February 10, 13

Page 127: Design for www ux intro

UXDdon’t make me work (or think)I’ll do the least amount of work possible to get a task done.

show me a little information; I’ll look for more if I want it.

Don’t tell me, show me an example.

If you want me to click something, make sure it looks like it is clickable.

Sunday, February 10, 13

Page 128: Design for www ux intro

UXDdon’t make me work (or think)I’ll do the least amount of work possible to get a task done.

show me a little information; I’ll look for more if I want it.

Don’t tell me, show me an example.

If you want me to click something, make sure it looks like it is clickable.

Just give me the stuff I really need; forget all the bells and whistles.

Sunday, February 10, 13

Page 129: Design for www ux intro

UXDdon’t make me work (or think)I’ll do the least amount of work possible to get a task done.

show me a little information; I’ll look for more if I want it.

Don’t tell me, show me an example.

If you want me to click something, make sure it looks like it is clickable.

Just give me the stuff I really need; forget all the bells and whistles.

Provide defaults that make the system do more so I can do less.

Sunday, February 10, 13

Page 130: Design for www ux intro

UXD

Sunday, February 10, 13

Page 131: Design for www ux intro

UXDI have limitations

Sunday, February 10, 13

Page 132: Design for www ux intro

UXDI have limitationsI can only look at so much stuff on a screen without losing interest.

Sunday, February 10, 13

Page 133: Design for www ux intro

UXDI have limitationsI can only look at so much stuff on a screen without losing interest.

I don’t read; I scan.

Sunday, February 10, 13

Page 134: Design for www ux intro

UXDI have limitationsI can only look at so much stuff on a screen without losing interest.

I don’t read; I scan.

All I really want is what I need right now.

Sunday, February 10, 13

Page 135: Design for www ux intro

UXDI have limitationsI can only look at so much stuff on a screen without losing interest.

I don’t read; I scan.

All I really want is what I need right now.

I can't multi-task. Research proves it.

Sunday, February 10, 13

Page 136: Design for www ux intro

UXDI have limitationsI can only look at so much stuff on a screen without losing interest.

I don’t read; I scan.

All I really want is what I need right now.

I can't multi-task. Research proves it.

I may ask for things that actually aren't best for me, so I need some guidance.

Sunday, February 10, 13

Page 137: Design for www ux intro

UXD

Sunday, February 10, 13

Page 138: Design for www ux intro

UXDI make mistakes

Sunday, February 10, 13

Page 139: Design for www ux intro

UXDI make mistakesPlease do what you can to try and prevent them.

Sunday, February 10, 13

Page 140: Design for www ux intro

UXDI make mistakesPlease do what you can to try and prevent them.

If I can really screw up with a wrong choice, make me confirm the action.

Sunday, February 10, 13

Page 141: Design for www ux intro

UXDI make mistakesPlease do what you can to try and prevent them.

If I can really screw up with a wrong choice, make me confirm the action.

Make it easy to "undo." Everything.

Sunday, February 10, 13

Page 142: Design for www ux intro

UXDI make mistakesPlease do what you can to try and prevent them.

If I can really screw up with a wrong choice, make me confirm the action.

Make it easy to "undo." Everything.

If something does go wrong, tell me what happened and what to do about it – in language I can understand.

Sunday, February 10, 13

Page 143: Design for www ux intro

UXDI make mistakesPlease do what you can to try and prevent them.

If I can really screw up with a wrong choice, make me confirm the action.

Make it easy to "undo." Everything.

If something does go wrong, tell me what happened and what to do about it – in language I can understand.

If I make and error and you can fix it, then do so and show me what you did.

Sunday, February 10, 13

Page 144: Design for www ux intro

UXD

Sunday, February 10, 13

Page 145: Design for www ux intro

UXDmy memory is complicated

Sunday, February 10, 13

Page 147: Design for www ux intro

UXDmy memory is complicatedI reconstruct memories, which means they’re always changing.

You’re better off observing me in action than taking my word for it.

Sunday, February 10, 13

Page 148: Design for www ux intro

UXDmy memory is complicatedI reconstruct memories, which means they’re always changing.

You’re better off observing me in action than taking my word for it.

My memory is fragile; it degrades quickly and is subject to lots of errors.

Sunday, February 10, 13

Page 149: Design for www ux intro

UXDmy memory is complicatedI reconstruct memories, which means they’re always changing.

You’re better off observing me in action than taking my word for it.

My memory is fragile; it degrades quickly and is subject to lots of errors.

Don't make me remember things from one task to another or one page to another.

Sunday, February 10, 13

Page 150: Design for www ux intro

UXDmy memory is complicatedI reconstruct memories, which means they’re always changing.

You’re better off observing me in action than taking my word for it.

My memory is fragile; it degrades quickly and is subject to lots of errors.

Don't make me remember things from one task to another or one page to another.

I can only remember about 3-4 things at a time.

Sunday, February 10, 13

Page 151: Design for www ux intro

UXD

Sunday, February 10, 13

Page 152: Design for www ux intro

UXDI like to be social

Sunday, February 10, 13

Page 153: Design for www ux intro

UXDI like to be socialI’ll always try to use technology to be social. That’s been true for thousands of years.

Sunday, February 10, 13

Page 154: Design for www ux intro

UXDI like to be socialI’ll always try to use technology to be social. That’s been true for thousands of years.

I’m almost always looking to other people for guidance on what to do, especially if I’m uncertain.

Sunday, February 10, 13

Page 155: Design for www ux intro

UXDI like to be socialI’ll always try to use technology to be social. That’s been true for thousands of years.

I’m almost always looking to other people for guidance on what to do, especially if I’m uncertain.

If you do me a favor, I’ll feel indebted to do you one back.

Sunday, February 10, 13

Page 156: Design for www ux intro

UXDI like to be socialI’ll always try to use technology to be social. That’s been true for thousands of years.

I’m almost always looking to other people for guidance on what to do, especially if I’m uncertain.

If you do me a favor, I’ll feel indebted to do you one back.

When I watch someone do something, the same parts in my brain light up as though I were doing it myself.

Sunday, February 10, 13

Page 157: Design for www ux intro

UXDI like to be socialI’ll always try to use technology to be social. That’s been true for thousands of years.

I’m almost always looking to other people for guidance on what to do, especially if I’m uncertain.

If you do me a favor, I’ll feel indebted to do you one back.

When I watch someone do something, the same parts in my brain light up as though I were doing it myself.

Laughter works the same way.

Sunday, February 10, 13

Page 158: Design for www ux intro

UXD

Sunday, February 10, 13

Page 159: Design for www ux intro

UXDI crave information

Sunday, February 10, 13

Page 160: Design for www ux intro

UXDI crave informationThe dopamine in my brain makes me seek information.

Sunday, February 10, 13

Page 161: Design for www ux intro

UXDI crave informationThe dopamine in my brain makes me seek information.

I often want more information than I can actually process.

Sunday, February 10, 13

Page 162: Design for www ux intro

UXDI crave informationThe dopamine in my brain makes me seek information.

I often want more information than I can actually process.

Having more information makes me feel like I have more choices.

Sunday, February 10, 13

Page 163: Design for www ux intro

UXDI crave informationThe dopamine in my brain makes me seek information.

I often want more information than I can actually process.

Having more information makes me feel like I have more choices.

Having more choices makes me feel in control.

Sunday, February 10, 13

Page 164: Design for www ux intro

UXDI crave informationThe dopamine in my brain makes me seek information.

I often want more information than I can actually process.

Having more information makes me feel like I have more choices.

Having more choices makes me feel in control.

Feeling in control makes me feel I’ll survive better.

Sunday, February 10, 13

Page 165: Design for www ux intro

UXDI crave informationThe dopamine in my brain makes me seek information.

I often want more information than I can actually process.

Having more information makes me feel like I have more choices.

Having more choices makes me feel in control.

Feeling in control makes me feel I’ll survive better.

I need feedback. When the system is doing something, I need to know what’s going on.

Sunday, February 10, 13

Page 166: Design for www ux intro

UXD

Sunday, February 10, 13

Page 167: Design for www ux intro

UXDI create mental models

Sunday, February 10, 13

Page 168: Design for www ux intro

UXDI create mental modelsI have specific ideas and expectations about the way things are supposed to work.

Sunday, February 10, 13

Page 169: Design for www ux intro

UXDI create mental modelsI have specific ideas and expectations about the way things are supposed to work.

Those expectations come from my experiences with other things.

Sunday, February 10, 13

Page 170: Design for www ux intro

UXDI create mental modelsI have specific ideas and expectations about the way things are supposed to work.

Those expectations come from my experiences with other things.

The mental model I have about a particular task can make it easy or hard to use your site or app.

Sunday, February 10, 13

Page 171: Design for www ux intro

UXDI create mental modelsI have specific ideas and expectations about the way things are supposed to work.

Those expectations come from my experiences with other things.

The mental model I have about a particular task can make it easy or hard to use your site or app.

Metaphors help me "get" what you want me to do. For example, "this is just like reading a book."

Sunday, February 10, 13

Page 172: Design for www ux intro

UXD

Sunday, February 10, 13

Page 173: Design for www ux intro

UXDI need visual systems

Sunday, February 10, 13

Page 174: Design for www ux intro

UXDI need visual systemsIf there are too many things on the screen, I can't find anything.

Sunday, February 10, 13

Page 175: Design for www ux intro

UXDI need visual systemsIf there are too many things on the screen, I can't find anything.

If I see things that are close together, I’ll think they’re related.

Sunday, February 10, 13

Page 176: Design for www ux intro

UXDI need visual systemsIf there are too many things on the screen, I can't find anything.

If I see things that are close together, I’ll think they’re related.

Things that are the same color seem related to me.

Sunday, February 10, 13

Page 177: Design for www ux intro

UXDI need visual systemsIf there are too many things on the screen, I can't find anything.

If I see things that are close together, I’ll think they’re related.

Things that are the same color seem related to me.

Those eye tracking studies are cool, but just because I’m looking at something straight on doesn't mean I’m paying attention to it.

Sunday, February 10, 13

Page 178: Design for www ux intro

UXDI need visual systemsIf there are too many things on the screen, I can't find anything.

If I see things that are close together, I’ll think they’re related.

Things that are the same color seem related to me.

Those eye tracking studies are cool, but just because I’m looking at something straight on doesn't mean I’m paying attention to it.

The hardest colors to look at together are red and blue. Never use red text on a blue background or vice versa.

Sunday, February 10, 13

Page 179: Design for www ux intro

UXD

Sunday, February 10, 13

Page 180: Design for www ux intro

UXD

why should we care about UXD?

Sunday, February 10, 13

Page 181: Design for www ux intro

UXD

Sunday, February 10, 13

Page 182: Design for www ux intro

UXDbecause your creations are used by people.

Sunday, February 10, 13

Page 183: Design for www ux intro

UXDbecause your creations are used by people.

and people have experiences.

Sunday, February 10, 13

Page 184: Design for www ux intro

UXDbecause your creations are used by people.

and people have experiences.

some good, some bad.

Sunday, February 10, 13

Page 185: Design for www ux intro

UXDbecause your creations are used by people.

and people have experiences.

some good, some bad.

but the bad ones stick with you.

Sunday, February 10, 13

Page 186: Design for www ux intro

UXDbecause your creations are used by people.

and people have experiences.

some good, some bad.

but the bad ones stick with you.

so you avoid repeating them at all costs.

Sunday, February 10, 13

Page 187: Design for www ux intro

UXDbecause your creations are used by people.

Sunday, February 10, 13

Page 188: Design for www ux intro

UXDbecause your creations are used by people.

Sunday, February 10, 13

Page 189: Design for www ux intro

UXDbecause your creations are used by people.

and like most of us, you probably tell other people just how bad the bad ones were.

Sunday, February 10, 13

Page 190: Design for www ux intro

UXDbecause your creations are used by people.

and like most of us, you probably tell other people just how bad the bad ones were.

and so they avoid those things too.

Sunday, February 10, 13

Page 191: Design for www ux intro

UXDbecause your creations are used by people.

and like most of us, you probably tell other people just how bad the bad ones were.

and so they avoid those things too.

you don’t want anything you make to be that bad experience.

Sunday, February 10, 13

Page 192: Design for www ux intro

UXDbecause your creations are used by people.

and like most of us, you probably tell other people just how bad the bad ones were.

and so they avoid those things too.

you don’t want anything you make to be that bad experience.

and you don’t want to be the one we’re all complaining about.

Sunday, February 10, 13

Page 193: Design for www ux intro

UXD

Sunday, February 10, 13

Page 194: Design for www ux intro

UXDimagine this guy as an online experience.

Sunday, February 10, 13

Page 195: Design for www ux intro

UXDimagine this guy as an online experience.

he blocks your progress.

Sunday, February 10, 13

Page 196: Design for www ux intro

UXDimagine this guy as an online experience.

he blocks your progress.

he makes offensive comments.

Sunday, February 10, 13

Page 197: Design for www ux intro

UXDimagine this guy as an online experience.

he blocks your progress.

he makes offensive comments.

he shows you things you aren’t interested in.

Sunday, February 10, 13

Page 198: Design for www ux intro

UXDimagine this guy as an online experience.

he blocks your progress.

he makes offensive comments.

he shows you things you aren’t interested in.

he refuses to give you clear, honest answers.

Sunday, February 10, 13

Page 199: Design for www ux intro

UXD

Sunday, February 10, 13

Page 200: Design for www ux intro

UXD

nobody wants this guy.

Sunday, February 10, 13

Page 201: Design for www ux intro

UXD

Sunday, February 10, 13

Page 202: Design for www ux intro

UXD

what we do want is a better, more fulfilling, more valuable experience.

Sunday, February 10, 13

Page 203: Design for www ux intro

UXD

Sunday, February 10, 13

Page 204: Design for www ux intro

UXD

we want ourneeds to be met.

Sunday, February 10, 13

Page 205: Design for www ux intro

UXD

Sunday, February 10, 13

Page 206: Design for www ux intro

UXD

we want our questions to be answered.

Sunday, February 10, 13

Page 207: Design for www ux intro

UXD

Sunday, February 10, 13

Page 208: Design for www ux intro

UXD

we want to be treated with respect.

Sunday, February 10, 13

Page 209: Design for www ux intro

UXD

Sunday, February 10, 13

Page 210: Design for www ux intro

UXDsounds familiar, doesn’t it?

Sunday, February 10, 13

Page 211: Design for www ux intro

UXDsounds familiar, doesn’t it?

a little like the “old rules” of customer service, maybe?

Sunday, February 10, 13

Page 212: Design for www ux intro

UXD

Sunday, February 10, 13

Page 213: Design for www ux intro

UXDexpectations are formed visually

Sunday, February 10, 13

Page 214: Design for www ux intro

UXDexpectations are formed visually

When we see an object, we make a series of instant assumptions about it – in seconds. What it does, how well and what the cost of use is, either in time or money.

Sunday, February 10, 13

Page 215: Design for www ux intro

UXD

Sunday, February 10, 13

Page 216: Design for www ux intro

UXDcross-channel expectations are higher

Sunday, February 10, 13

Page 217: Design for www ux intro

UXDcross-channel expectations are higher

A recent Harris Interactive study showed the majority of users chose good experience design over brand loyalty – and will abandon a mobile app if it’s too difficult to use.

Sunday, February 10, 13

Page 218: Design for www ux intro

UXD

Sunday, February 10, 13

Page 219: Design for www ux intro

UXDmy device, my way

Sunday, February 10, 13

Page 220: Design for www ux intro

UXDmy device, my way

the methods and devices we use to access information change depending on context and preference – and good UXD makes the experience consistent across all of them.

Sunday, February 10, 13

Page 221: Design for www ux intro

UXD

Sunday, February 10, 13

Page 222: Design for www ux intro

UXDtask completion isn’t the same as success

Sunday, February 10, 13

Page 223: Design for www ux intro

UXDtask completion isn’t the same as success

A person may be able to get the desired result with your site or app – but unless it’s easy, they won’t be back to use it a second time.

Sunday, February 10, 13

Page 224: Design for www ux intro

UXD

Sunday, February 10, 13

Page 225: Design for www ux intro

UXDgood UXD makes things enjoyable

Sunday, February 10, 13

Page 226: Design for www ux intro

UXDgood UXD makes things enjoyable

Sure, the sensible economy car will get you from point A to point B, but wouldn’t the super-engineered convertible be a lot more fun?

Sunday, February 10, 13

Page 227: Design for www ux intro

UXD

Sunday, February 10, 13

Page 228: Design for www ux intro

UXD

the elements of user experience

Sunday, February 10, 13

Page 229: Design for www ux intro

UXD

Sunday, February 10, 13

Page 230: Design for www ux intro

UXDthe five planes of UX

Sunday, February 10, 13

Page 231: Design for www ux intro

UXD

S T R A T E G Y

the five planes of UX

Sunday, February 10, 13

Page 232: Design for www ux intro

UXD

S T R A T E G Y

the five planes of UX

the site, system or app’s reason for being, to the creator and to users

Sunday, February 10, 13

Page 233: Design for www ux intro

UXD

S C O P E

S T R A T E G Y

the five planes of UX

the site, system or app’s reason for being, to the creator and to users

Sunday, February 10, 13

Page 234: Design for www ux intro

UXD

S C O P E

S T R A T E G Y

the five planes of UX

features and functions contained within the site, system or app

the site, system or app’s reason for being, to the creator and to users

Sunday, February 10, 13

Page 235: Design for www ux intro

UXD

S T R U C T U R E

S C O P E

S T R A T E G Y

the five planes of UX

features and functions contained within the site, system or app

the site, system or app’s reason for being, to the creator and to users

Sunday, February 10, 13

Page 236: Design for www ux intro

UXD

S T R U C T U R E

S C O P E

S T R A T E G Y

the five planes of UX

the number of places you can go, organized contextually

features and functions contained within the site, system or app

the site, system or app’s reason for being, to the creator and to users

Sunday, February 10, 13

Page 237: Design for www ux intro

UXD

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the five planes of UX

the number of places you can go, organized contextually

features and functions contained within the site, system or app

the site, system or app’s reason for being, to the creator and to users

Sunday, February 10, 13

Page 238: Design for www ux intro

UXD

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the five planes of UX

the optimized organization and arrangement of onscreen elements

the number of places you can go, organized contextually

features and functions contained within the site, system or app

the site, system or app’s reason for being, to the creator and to users

Sunday, February 10, 13

Page 239: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the five planes of UX

the optimized organization and arrangement of onscreen elements

the number of places you can go, organized contextually

features and functions contained within the site, system or app

the site, system or app’s reason for being, to the creator and to users

Sunday, February 10, 13

Page 240: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the five planes of UX

web pages or app screens; images, text, things you can click

the optimized organization and arrangement of onscreen elements

the number of places you can go, organized contextually

features and functions contained within the site, system or app

the site, system or app’s reason for being, to the creator and to users

Sunday, February 10, 13

Page 241: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Sunday, February 10, 13

Page 242: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experience

Sunday, February 10, 13

Page 243: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experience

Sunday, February 10, 13

Page 244: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experienceT A S K S

Sunday, February 10, 13

Page 245: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experienceT A S K S I N F O

Sunday, February 10, 13

Page 246: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experience

visual design

T A S K S I N F O

Sunday, February 10, 13

Page 247: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experience

visual design

interfacedesign

T A S K S I N F O

Sunday, February 10, 13

Page 248: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experience

visual design

interfacedesign

navigationdesign

T A S K S I N F O

Sunday, February 10, 13

Page 249: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experience

visual design

interfacedesign

interactiondesign

navigationdesign

T A S K S I N F O

Sunday, February 10, 13

Page 250: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experience

visual design

interfacedesign

interactiondesign

navigationdesign

informationarchitecture

T A S K S I N F O

Sunday, February 10, 13

Page 251: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experience

visual design

interfacedesign

interactiondesign

functionalspecification

navigationdesign

informationarchitecture

T A S K S I N F O

Sunday, February 10, 13

Page 252: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experience

visual design

interfacedesign

interactiondesign

functionalspecification

navigationdesign

informationarchitecture

contentrequirements

T A S K S I N F O

Sunday, February 10, 13

Page 253: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the elements of user experience

visual design

interfacedesign

interactiondesign

functionalspecification

navigationdesign

informationarchitecture

contentrequirements

user needsbusiness objectives

T A S K S I N F O

Sunday, February 10, 13

Page 254: Design for www ux intro

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

concrete

abstract

the elements of user experience

visual design

interfacedesign

interactiondesign

functionalspecification

navigationdesign

informationarchitecture

contentrequirements

user needsbusiness objectives

T A S K S I N F O

Sunday, February 10, 13

Page 255: Design for www ux intro

UXD

Sunday, February 10, 13

Page 256: Design for www ux intro

UXDthe strategy plane

Sunday, February 10, 13

Page 257: Design for www ux intro

UXD

S T R A T E G Y

the strategy plane

Sunday, February 10, 13

Page 258: Design for www ux intro

UXD

S T R A T E G Y

the strategy plane

user needsbusiness objectives

Sunday, February 10, 13

Page 259: Design for www ux intro

UXD

S T R A T E G Y

the strategy plane

user needsbusiness objectives

Sunday, February 10, 13

Page 260: Design for www ux intro

UXD

S T R A T E G Y

the strategy plane

user needs come from the people who will use the product.

user needsbusiness objectives

Sunday, February 10, 13

Page 261: Design for www ux intro

UXD

S T R A T E G Y

the strategy plane

user needs come from the people who will use the product.

what do they want from us?

user needsbusiness objectives

Sunday, February 10, 13

Page 262: Design for www ux intro

UXD

S T R A T E G Y

the strategy plane

user needs come from the people who will use the product.

what do they want from us?

how does that fit in with their other goals?

user needsbusiness objectives

Sunday, February 10, 13

Page 263: Design for www ux intro

UXD

S T R A T E G Y

the strategy plane

user needs come from the people who will use the product.

what do they want from us?

how does that fit in with their other goals?

business objectives define success, and typically mean making money, saving money or both.

user needsbusiness objectives

Sunday, February 10, 13

Page 264: Design for www ux intro

UXD

S T R A T E G Y

the strategy plane

user needs come from the people who will use the product.

what do they want from us?

how does that fit in with their other goals?

business objectives define success, and typically mean making money, saving money or both.

how will we know if we have succeeded?

user needsbusiness objectives

Sunday, February 10, 13

Page 265: Design for www ux intro

UXD

Sunday, February 10, 13

Page 266: Design for www ux intro

UXDthe scope plane

Sunday, February 10, 13

Page 267: Design for www ux intro

UXD

S C O P E

the scope plane

Sunday, February 10, 13

Page 268: Design for www ux intro

UXD

S C O P E

the scope plane

functionalspecification

Sunday, February 10, 13

Page 269: Design for www ux intro

UXD

S C O P E

the scope plane

functionalspecification

contentrequirements

Sunday, February 10, 13

Page 270: Design for www ux intro

UXD

S C O P E

the scope plane

functionalspecification

contentrequirements

how the customer explained it

Sunday, February 10, 13

Page 271: Design for www ux intro

UXD

S C O P E

the scope plane

functionalspecification

contentrequirements

how the customer explained it

how the project manager heard it

Sunday, February 10, 13

Page 272: Design for www ux intro

UXD

S C O P E

the scope plane

functionalspecification

contentrequirements

how the customer explained it

how the project manager heard it

how the designer designed it

Sunday, February 10, 13

Page 273: Design for www ux intro

UXD

S C O P E

the scope plane

functionalspecification

contentrequirements

how the customer explained it

how the project manager heard it

how the designer designed it

how the engineer & developer built it

Sunday, February 10, 13

Page 274: Design for www ux intro

UXD

S C O P E

the scope plane

functionalspecification

contentrequirements

how the customer explained it

how the project manager heard it

how the designer designed it

how the engineer & developer built it

how the customer really wanted it

Sunday, February 10, 13

Page 275: Design for www ux intro

UXD

S C O P E

the scope plane

strategy becomes scope when user needs and business objectives are translated into requirements for content & functionality

functionalspecification

contentrequirements

how the customer explained it

how the project manager heard it

how the designer designed it

how the engineer & developer built it

how the customer really wanted it

Sunday, February 10, 13

Page 276: Design for www ux intro

UXD

S C O P E

the scope plane

strategy becomes scope when user needs and business objectives are translated into requirements for content & functionality

functional specifications describe the feature set of the product – what are we creating?

functionalspecification

contentrequirements

how the customer explained it

how the project manager heard it

how the designer designed it

how the engineer & developer built it

how the customer really wanted it

Sunday, February 10, 13

Page 277: Design for www ux intro

UXD

S C O P E

the scope plane

strategy becomes scope when user needs and business objectives are translated into requirements for content & functionality

functional specifications describe the feature set of the product – what are we creating?

content requirements detail what information is required to provide value to users – images? audio? video? dynamic real-time data?

functionalspecification

contentrequirements

how the customer explained it

how the project manager heard it

how the designer designed it

how the engineer & developer built it

how the customer really wanted it

Sunday, February 10, 13

Page 278: Design for www ux intro

UXD

Sunday, February 10, 13

Page 279: Design for www ux intro

UXDthe structure plane

Sunday, February 10, 13

Page 280: Design for www ux intro

UXD

S T R U C T U R E

the structure plane

Sunday, February 10, 13

Page 281: Design for www ux intro

UXD

S T R U C T U R E

the structure plane

interactiondesign

Sunday, February 10, 13

Page 282: Design for www ux intro

UXD

S T R U C T U R E

the structure plane

interactiondesign

informationarchitecture

Sunday, February 10, 13

Page 283: Design for www ux intro

UXD

S T R U C T U R E

the structure plane

interactiondesign

informationarchitecture

Sunday, February 10, 13

Page 284: Design for www ux intro

UXD

S T R U C T U R E

the structure plane

scope is given structure when we define how the system responds to the user’s actions.

interactiondesign

informationarchitecture

Sunday, February 10, 13

Page 285: Design for www ux intro

UXD

S T R U C T U R E

the structure plane

scope is given structure when we define how the system responds to the user’s actions.

interaction design creates a structured experience of patterns and sequences that present appropriate options to users.

interactiondesign

informationarchitecture

Sunday, February 10, 13

Page 286: Design for www ux intro

UXD

S T R U C T U R E

the structure plane

scope is given structure when we define how the system responds to the user’s actions.

interaction design creates a structured experience of patterns and sequences that present appropriate options to users.

information architecture defines the volume of content, along with how it’s arranged and organized – on each screen as well as across the entire product.

interactiondesign

informationarchitecture

Sunday, February 10, 13

Page 287: Design for www ux intro

UXD

Sunday, February 10, 13

Page 288: Design for www ux intro

UXDthe skeleton plane

Sunday, February 10, 13

Page 289: Design for www ux intro

UXD

S K E L E T O N

the skeleton plane

Sunday, February 10, 13

Page 290: Design for www ux intro

UXD

S K E L E T O N

the skeleton plane

interfacedesign

Sunday, February 10, 13

Page 291: Design for www ux intro

UXD

S K E L E T O N

the skeleton plane

interfacedesign

navigationdesign

Sunday, February 10, 13

Page 292: Design for www ux intro

UXD

S K E L E T O N

the skeleton plane

interfacedesign

navigationdesign

Sunday, February 10, 13

Page 293: Design for www ux intro

UXD

S K E L E T O N

the skeleton plane

structure informs the skeleton of the system – specifically, what it may look like and how users move through tasks and information.

interfacedesign

navigationdesign

Sunday, February 10, 13

Page 294: Design for www ux intro

UXD

S K E L E T O N

the skeleton plane

structure informs the skeleton of the system – specifically, what it may look like and how users move through tasks and information.

interface design determines how to best arrange and present visual elements for the user to interact with.

interfacedesign

navigationdesign

Sunday, February 10, 13

Page 295: Design for www ux intro

UXD

S K E L E T O N

the skeleton plane

structure informs the skeleton of the system – specifically, what it may look like and how users move through tasks and information.

interface design determines how to best arrange and present visual elements for the user to interact with.

navigation design provides onscreen elements that allow the user to move through tasks and information in an intuitive way.

interfacedesign

navigationdesign

Sunday, February 10, 13

Page 296: Design for www ux intro

UXD

Sunday, February 10, 13

Page 297: Design for www ux intro

UXDthe surface plane

Sunday, February 10, 13

Page 298: Design for www ux intro

UXD

S U R F A C E

the surface plane

Sunday, February 10, 13

Page 299: Design for www ux intro

UXD

S U R F A C E

the surface plane

visual design

Sunday, February 10, 13

Page 300: Design for www ux intro

UXD

S U R F A C E

the surface plane

visual design

Sunday, February 10, 13

Page 301: Design for www ux intro

UXD

S U R F A C E

the surface plane

visual design uses colors, images, typography and effects, each specifically chosen to:

visual design

Sunday, February 10, 13

Page 302: Design for www ux intro

UXD

S U R F A C E

the surface plane

visual design uses colors, images, typography and effects, each specifically chosen to:

a) support and reinforce the meaning of the content being presented

visual design

Sunday, February 10, 13

Page 303: Design for www ux intro

UXD

S U R F A C E

the surface plane

visual design uses colors, images, typography and effects, each specifically chosen to:

a) support and reinforce the meaning of the content being presented

b) guide the user where applicable through data, tasks or information

visual design

Sunday, February 10, 13

Page 304: Design for www ux intro

UXD

S U R F A C E

the surface plane

visual design uses colors, images, typography and effects, each specifically chosen to:

a) support and reinforce the meaning of the content being presented

b) guide the user where applicable through data, tasks or information

c) reduce cognitive load and enable recognition and intuitive learning

visual design

Sunday, February 10, 13

Page 305: Design for www ux intro

UXD

S U R F A C E

the surface plane

visual design uses colors, images, typography and effects, each specifically chosen to:

a) support and reinforce the meaning of the content being presented

b) guide the user where applicable through data, tasks or information

c) reduce cognitive load and enable recognition and intuitive learning

d) be culturally/socially appropriate

visual design

Sunday, February 10, 13

Page 306: Design for www ux intro

UXD

Sunday, February 10, 13

Page 307: Design for www ux intro

UXDthese planes are interdependent

Sunday, February 10, 13

Page 308: Design for www ux intro

UXDthese planes are interdependent

S T R U C T U R E

Sunday, February 10, 13

Page 309: Design for www ux intro

UXDthese planes are interdependent

S K E L E T O N

S T R U C T U R E

Sunday, February 10, 13

Page 310: Design for www ux intro

UXDthese planes are interdependent

S K E L E T O N

S T R U C T U R E

Sunday, February 10, 13

Page 311: Design for www ux intro

UXDthese planes are interdependent

S K E L E T O N

S T R U C T U R E

Sunday, February 10, 13

Page 312: Design for www ux intro

UXDthese planes are interdependent

S K E L E T O N

S T R U C T U R E

Sunday, February 10, 13

Page 313: Design for www ux intro

UXDthese planes are interdependent

S K E L E T O N

S T R U C T U R E

Sunday, February 10, 13

Page 314: Design for www ux intro

UXDthese planes are interdependent

S K E L E T O N

S T R U C T U R E

Sunday, February 10, 13

Page 315: Design for www ux intro

UXDthese planes are interdependent

S K E L E T O N

S T R U C T U R E

Sunday, February 10, 13

Page 316: Design for www ux intro

UXDthese planes are interdependent

S K E L E T O N

S T R U C T U R E

choices made on each plane affect the choices available on other planes.

Sunday, February 10, 13

Page 317: Design for www ux intro

UXD

Sunday, February 10, 13

Page 318: Design for www ux intro

UXDUXD elements must be flexible

Sunday, February 10, 13

Page 319: Design for www ux intro

UXDUXD elements must be flexible

Sunday, February 10, 13

Page 320: Design for www ux intro

UXDUXD elements must be flexibleef

fort

Sunday, February 10, 13

Page 321: Design for www ux intro

UXDUXD elements must be flexibleef

fort

time

Sunday, February 10, 13

Page 322: Design for www ux intro

UXDUXD elements must be flexible

ST

RA

TE

GY

SC

OP

E

ST

RU

CT

UR

E

SK

EL

ET

ON

SU

RF

AC

E

effo

rt

time

Sunday, February 10, 13

Page 323: Design for www ux intro

UXDUXD elements must be flexible

requiring work on each plane to finish before work on the next can start results in a frustrating user experience.

ST

RA

TE

GY

SC

OP

E

ST

RU

CT

UR

E

SK

EL

ET

ON

SU

RF

AC

E

effo

rt

time

Sunday, February 10, 13

Page 324: Design for www ux intro

UXDef

fort

time

UXD elements must be flexible

Sunday, February 10, 13

Page 325: Design for www ux intro

UXDef

fort

time

ST

RA

TE

GY

SC

OP

E

ST

RU

CT

UR

E

SK

EL

ET

ON

SU

RF

AC

E

UXD elements must be flexible

Sunday, February 10, 13

Page 326: Design for www ux intro

UXDef

fort

time

ST

RA

TE

GY

SC

OP

E

ST

RU

CT

UR

E

SK

EL

ET

ON

SU

RF

AC

E

UXD elements must be flexible

Sunday, February 10, 13

Page 327: Design for www ux intro

UXD

a better approach is to have work on each plane finish while work on the next plane is in progress – so users don’t wait.

effo

rt

time

ST

RA

TE

GY

SC

OP

E

ST

RU

CT

UR

E

SK

EL

ET

ON

SU

RF

AC

E

UXD elements must be flexible

Sunday, February 10, 13

Page 328: Design for www ux intro

UXD

Sunday, February 10, 13

Page 329: Design for www ux intro

UXDadditional factors

Sunday, February 10, 13

Page 330: Design for www ux intro

UXDadditional factors

Sunday, February 10, 13

Page 331: Design for www ux intro

UXDadditional factorsit’s not always that clear cut

Sunday, February 10, 13

Page 332: Design for www ux intro

UXDadditional factorsit’s not always that clear cutit can be difficult to tell which element is responsible for a UX problem.

Sunday, February 10, 13

Page 333: Design for www ux intro

UXDadditional factorsit’s not always that clear cutit can be difficult to tell which element is responsible for a UX problem.

‣ is the visual design inappropriate?

Sunday, February 10, 13

Page 334: Design for www ux intro

UXDadditional factorsit’s not always that clear cutit can be difficult to tell which element is responsible for a UX problem.

‣ is the visual design inappropriate?

‣ is the underlying navigation the problem?

Sunday, February 10, 13

Page 335: Design for www ux intro

UXDadditional factorsit’s not always that clear cutit can be difficult to tell which element is responsible for a UX problem.

‣ is the visual design inappropriate?

‣ is the underlying navigation the problem?

‣ is the browser interpreting the code incorrectly?

Sunday, February 10, 13

Page 336: Design for www ux intro

UXDadditional factorsit’s not always that clear cutit can be difficult to tell which element is responsible for a UX problem.

‣ is the visual design inappropriate?

‣ is the underlying navigation the problem?

‣ is the browser interpreting the code incorrectly?

sometimes it’s more than one thing, and sometimes it’s multiple things combined.

Sunday, February 10, 13

Page 337: Design for www ux intro

UXD

Sunday, February 10, 13

Page 338: Design for www ux intro

UXDadditional factors

Sunday, February 10, 13

Page 339: Design for www ux intro

UXDadditional factors

Sunday, February 10, 13

Page 340: Design for www ux intro

UXDadditional factorscontent is still king

Sunday, February 10, 13

Page 341: Design for www ux intro

UXDadditional factorscontent is still kingit’s why users come to a site or open an app

Sunday, February 10, 13

Page 342: Design for www ux intro

UXDadditional factorscontent is still kingit’s why users come to a site or open an app

is what the user wants available?

Sunday, February 10, 13

Page 343: Design for www ux intro

UXDadditional factorscontent is still kingit’s why users come to a site or open an app

is what the user wants available?

is the variety appropriate?

Sunday, February 10, 13

Page 344: Design for www ux intro

UXDadditional factorscontent is still kingit’s why users come to a site or open an app

is what the user wants available?

is the variety appropriate?

is the content relevant to the reason they’re here?

Sunday, February 10, 13

Page 345: Design for www ux intro

UXDadditional factorscontent is still kingit’s why users come to a site or open an app

is what the user wants available?

is the variety appropriate?

is the content relevant to the reason they’re here?

do we have ways to catalog, track and present the content when, where and how the user wants it?

Sunday, February 10, 13

Page 346: Design for www ux intro

UXDadditional factors

Sunday, February 10, 13

Page 347: Design for www ux intro

UXD

design

additional factors

Sunday, February 10, 13

Page 348: Design for www ux intro

UXD

dev

design

additional factors

Sunday, February 10, 13

Page 349: Design for www ux intro

UXD

dev

design

additional factors

ux

Sunday, February 10, 13

Page 350: Design for www ux intro

UXD

dev

design

additional factorsappropriate technology

ux

Sunday, February 10, 13

Page 351: Design for www ux intro

UXD

dev

design

additional factorsappropriate technologythe right platform is critical in experience delivery

ux

Sunday, February 10, 13

Page 352: Design for www ux intro

UXD

dev

design

additional factorsappropriate technologythe right platform is critical in experience delivery

technology enables UXD to extend across multiple OS, browsers, devices and form factors

ux

Sunday, February 10, 13

Page 353: Design for www ux intro

UXD

dev

design

additional factorsappropriate technologythe right platform is critical in experience delivery

technology enables UXD to extend across multiple OS, browsers, devices and form factors

technology can’t be seen as an add-on or a nice to have – it needs to be inherent in how we design

ux

Sunday, February 10, 13

Page 354: Design for www ux intro

UXD

dev

design

additional factorsappropriate technologythe right platform is critical in experience delivery

technology enables UXD to extend across multiple OS, browsers, devices and form factors

technology can’t be seen as an add-on or a nice to have – it needs to be inherent in how we design

touchscreen interaction, for example, has changed the way we navigate digital information

ux

Sunday, February 10, 13

Page 355: Design for www ux intro

UXD

Sunday, February 10, 13

Page 356: Design for www ux intro

UXDassignment(s)1. Choose a product or service – real

or made up – for your semester web site project.

2. Read pages 1-52 of The Design of Everyday Things by Donald A. Norman. Find an example of an interface that offers the user a clear invitation to do something and makes that engagement a compelling and engaging experience. You will share your example with the class next week.

Sunday, February 10, 13