design for www ux intro

Sunday, February 10, 13

what UXD isn’t

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

“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

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

“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

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

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

Mario Borque Manager of IA & Content, Trapeze Group

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

“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

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

“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

what UXD is

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

UXD is the sum of a simple equation.

business goalsUXD is the sum of a simple equation.

business goals+ customer goals

business goals+ customer goals+ user interface

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

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

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

businessanalysis

applicationarchitecture

businessanalysis

system design

businessanalysis

system design

businessanalysis

Informationarchitecture

system design

businessanalysis

interactiondesign

visual design

system design

businessanalysis

interactiondesign

visual design

system design

businessanalysis

interactiondesign

user experience

it’s the combined result of multiple disciplines.

➡ user research

➡ interaction design

➡ user research

➡ visual design

➡ user research

➡ visual design

➡ information architecture

➡ user research

➡ visual design

➡ front-end development

➡ user research

➡ visual design

➡ writing

➡ user research

➡ visual design

➡ writing

➡ user testing

UXDUXD means strategic advantage

prospective agent

Commissions: How Much?

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?

!st Year Comp

Frequency

Find an IMO

Process

Requirements

How long?

Lifestyle Cat.

Annuity

A.M. Best

Moody's

Fitch Ratings

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

How to Contact

FG Life Elite

FG Life Choice

Index Universal Life

Immed. Safeguard

Immed. Income

Immediate Annuity

Guarantee Plus

Guarantee Platinum

Deferred Annuity

Accelerated

Escalator

Safety Series

Prosperity Series

Guarantee Series

Choice Series

Health

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

Send me information

Downloadcontract

Make me an appealing

Get me an IMO

AUDIENCE PURPOSE CONTEXT CONVINCE CONVINCE CONVERT

DECIDE DECIDE DECIDE > TRUST DECIDE > TRUST TRUST CONVERT

UXDUXD means strategic advantageUXD explores feasible solutions to design problems

prospective agent

!st Year Comp

Frequency

Find an IMO

Process

Requirements

How long?

Lifestyle Cat.

Annuity

A.M. Best

Moody's

Fitch Ratings

Sales volume

Total value

How long in biz?

Domestic?

Ownership?

Chat now?

Service Center

Who to Contact

Sales & Distrib.

Mgmt. Team

How to Contact

FG Life Elite

FG Life Choice

Immed. Safeguard

Immed. Income

Immediate Annuity

Guarantee Plus

Guarantee Platinum

Deferred Annuity

Accelerated

Escalator

Safety Series

Prosperity Series

Guarantee Series

Choice Series

Health

Gender

High-Risk

What incentives

does FG Life offer?

PAIR Program

Incentive Conf.

Training

How to qualify

Bonus credits

Vesting Period

Choice Series

%HQHÀts

CE Training

Sales Training

Training Resources

Send me information

Downloadcontract

Get me an IMO

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

prospective agent

!st Year Comp

Frequency

Find an IMO

Process

Requirements

How long?

Lifestyle Cat.

Annuity

A.M. Best

Moody's

Fitch Ratings

Sales volume

Total value

How long in biz?

Domestic?

Ownership?

Chat now?

Service Center

Who to Contact

Sales & Distrib.

Mgmt. Team

How to Contact

FG Life Elite

FG Life Choice

Immed. Safeguard

Immed. Income

Immediate Annuity

Guarantee Plus

Guarantee Platinum

Deferred Annuity

Accelerated

Escalator

Safety Series

Prosperity Series

Guarantee Series

Choice Series

Health

Gender

High-Risk

What incentives

does FG Life offer?

PAIR Program

Incentive Conf.

Training

How to qualify

Bonus credits

Vesting Period

Choice Series

%HQHÀts

CE Training

Sales Training

Training Resources

Send me information

Downloadcontract

Get me an IMO

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

prospective agent

!st Year Comp

Frequency

Find an IMO

Process

Requirements

How long?

Lifestyle Cat.

Annuity

A.M. Best

Moody's

Fitch Ratings

Sales volume

Total value

How long in biz?

Domestic?

Ownership?

Chat now?

Service Center

Who to Contact

Sales & Distrib.

Mgmt. Team

How to Contact

FG Life Elite

FG Life Choice

Immed. Safeguard

Immed. Income

Immediate Annuity

Guarantee Plus

Guarantee Platinum

Deferred Annuity

Accelerated

Escalator

Safety Series

Prosperity Series

Guarantee Series

Choice Series

Health

Gender

High-Risk

What incentives

does FG Life offer?

PAIR Program

Incentive Conf.

Training

How to qualify

Bonus credits

Vesting Period

Choice Series

%HQHÀts

CE Training

Sales Training

Training Resources

Send me information

Downloadcontract

Get me an IMO

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

!st Year Comp

Frequency

Find an IMO

Process

Requirements

How long?

Lifestyle Cat.

Annuity

A.M. Best

Moody's

Fitch Ratings

Sales volume

Total value

How long in biz?

Domestic?

Ownership?

Chat now?

Service Center

Who to Contact

Sales & Distrib.

Mgmt. Team

How to Contact

FG Life Elite

FG Life Choice

Immed. Safeguard

Immed. Income

Immediate Annuity

Guarantee Plus

Guarantee Platinum

Deferred Annuity

Accelerated

Escalator

Safety Series

Prosperity Series

Guarantee Series

Choice Series

Health

Gender

High-Risk

What incentives

does FG Life offer?

PAIR Program

Incentive Conf.

Training

How to qualify

Bonus credits

Vesting Period

Choice Series

%HQHÀts

CE Training

Sales Training

Training Resources

Send me information

Downloadcontract

Get me an IMO

UXDUXD ensures people use things

UXDUXD ensures people use thingsbecause we use things when

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.

UXDUXD is a balancing act

I N N O V A T I O N

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

I N N O V A T I O N

F E A S I B I L I T Y

I N N O V A T I O N

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

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.

UXDtypical UXD activities

UXDtypical UXD activitiesanalysis

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

design

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

implementation

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

UXDtypical UXD deliverables

UXDtypical UXD deliverablesinformation architecture (IA)

UXDtypical UXD deliverablesinformation architecture (IA)IA concept maps

use cases

task flows

use cases

task flows

storyboards

use cases

task flows

storyboards

functional specifications

use cases

task flows

storyboards

functional specifications

site maps

UXDtypical UXD deliverablesprototypes

UXDtypical UXD deliverablesprototypesconcept maps

paper prototypes

flat wireframes

paper prototypes

flat wireframes

click-through HTML prototypes

UXDtypical UXD deliverablesdesign

UXDtypical UXD deliverablesdesignpolished visual design and screen layouts

icons and graphic components (assets)

CSS/HTML templates

UXDtypical UXD deliverablestechnical documentation

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

UXDtechnology changes. people don’t.

UXDdon’t make me work (or think)

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.

UXDI have limitations

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.

UXDI make mistakes

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.

UXDmy memory is complicated

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.

UXDI like to be social

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.

UXDI crave information

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.

UXDI create mental models

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."

UXDI need visual systems

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.

why should we care about UXD?

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.

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.

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.

nobody wants this guy.

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

we want ourneeds to be met.

we want our questions to be answered.

we want to be treated with respect.

UXDsounds familiar, doesn’t it?

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

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.

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.

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.

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.

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?

the elements of user experience

UXDthe five planes of UX

S T R A T E G Y

the five planes of UX

S T R A T E G Y

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

S C O P E

S T R A T E G Y

S C O P E

S T R A T E G Y

features and functions contained within the site, system or app

S T R U C T U R E

S C O P E

S T R A T E G Y

S T R U C T U R E

S C O P E

S T R A T E G Y

the number of places you can go, organized contextually

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

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 optimized organization and arrangement of onscreen elements

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

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

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

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

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

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

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

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

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

visual design

T A S K S I N F O

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

visual design

interfacedesign

T A S K S I N F O

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

visual design

interfacedesign

navigationdesign

T A S K S I N F O

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

visual design

interfacedesign

interactiondesign

navigationdesign

T A S K S I N F O

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

visual design

interfacedesign

interactiondesign

navigationdesign

informationarchitecture

T A S K S I N F O

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

visual design

interfacedesign

interactiondesign

functionalspecification

navigationdesign

T A S K S I N F O

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

visual design

interfacedesign

interactiondesign

navigationdesign

contentrequirements

T A S K S I N F O

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

visual design

interfacedesign

interactiondesign

navigationdesign

contentrequirements

user needsbusiness objectives

T A S K S I N F O

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

visual design

interfacedesign

interactiondesign

navigationdesign

contentrequirements

T A S K S I N F O

UXDthe strategy plane

S T R A T E G Y

the strategy plane

S T R A T E G Y

the strategy plane

S T R A T E G Y

the strategy plane

S T R A T E G Y

the strategy plane

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

S T R A T E G Y

the strategy plane

what do they want from us?

S T R A T E G Y

the strategy plane

how does that fit in with their other goals?

S T R A T E G Y

the strategy plane

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

S T R A T E G Y

the strategy plane

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

how will we know if we have succeeded?

UXDthe scope plane

S C O P E

the scope plane

S C O P E

the scope plane

S C O P E

the scope plane

contentrequirements

S C O P E

the scope plane

contentrequirements

how the customer explained it

S C O P E

the scope plane

contentrequirements

how the project manager heard it

S C O P E

the scope plane

contentrequirements

how the designer designed it

S C O P E

the scope plane

contentrequirements

how the engineer & developer built it

S C O P E

the scope plane

contentrequirements

how the customer really wanted it

S C O P E

the scope plane

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

contentrequirements

S C O P E

the scope plane

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

contentrequirements

S C O P E

the scope plane

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?

contentrequirements

UXDthe structure plane

S T R U C T U R E

the structure plane

S T R U C T U R E

the structure plane

interactiondesign

S T R U C T U R E

the structure plane

interactiondesign

S T R U C T U R E

the structure plane

interactiondesign

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

S T R U C T U R E

the structure plane

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

interactiondesign

S T R U C T U R E

the structure plane

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

UXDthe skeleton plane

S K E L E T O N

the skeleton plane

S K E L E T O N

the skeleton plane

interfacedesign

S K E L E T O N

the skeleton plane

interfacedesign

navigationdesign

S K E L E T O N

the skeleton plane

interfacedesign

navigationdesign

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

S K E L E T O N

the skeleton plane

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

interfacedesign

navigationdesign

S K E L E T O N

the skeleton plane

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

UXDthe surface plane

S U R F A C E

the surface plane

S U R F A C E

the surface plane

visual design

S U R F A C E

the surface plane

visual design

S U R F A C E

the surface plane

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

visual design

S U R F A C E

the surface plane

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

visual design

S U R F A C E

the surface plane

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

visual design

S U R F A C E

the surface plane

c) reduce cognitive load and enable recognition and intuitive learning

visual design

S U R F A C E

the surface plane

c) reduce cognitive load and enable recognition and intuitive learning

d) be culturally/socially appropriate

visual design

UXDthese planes are interdependent

S T R U C T U R E

S K E L E T O N

S T R U C T U R E

S K E L E T O N

S T R U C T U R E

S K E L E T O N

S T R U C T U R E

S K E L E T O N

S T R U C T U R E

S K E L E T O N

S T R U C T U R E

S K E L E T O N

S T R U C T U R E

S K E L E T O N

S T R U C T U R E

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.

UXDUXD elements must be flexible

UXDUXD elements must be flexibleef

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

UXD elements must be flexible

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.

UXDadditional factors

UXDadditional factorsit’s not always that clear cut

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.

UXDadditional factorscontent is still king

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?

design

additional factors

design

additional factors

design

additional factors

design

additional factorsappropriate technology

design

additional factorsappropriate technologythe right platform is critical in experience delivery

design

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

design

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

design

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

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.

design for www ux intro

ux dsunday

step ux

uxd isntsunday

uxd isnt justux dabout

uxd isnt aboutux dtechnology

user ux dinterface design

user experience design

products design

Documents

user experience design fundamentals - iiba sofia...

module 01: intro and definitions of ux

intro ch 02_a internet n www (sec-p)

intro to forms - goto conference - goto blog – goto...

intro to ux design - a dockyard workshop

piazza.com/gatech/other/rnocapplab intro to user...

intro to ux

standard ux intro slides

ux? wtf? - intro to user experience design pt. 1

ui/ux foundations - intro to design

ui/ux workshop - github...

intro to ux women@google sa conference

intro to usability (ux) testing

intro to ux with huge

intro to ux design

intro to ux design course - images.careerfoundry.com

intro to forms - goto...

intro to ux development process

embedding user understanding in the corporate culture: ux...

intro to ux - summer sampler series