the odd couple of ux design

T H E O D D C O U P L E O F U X D E S I G N : M A R R Y I N G B U S I N E S S G O A L S A N D U S E R G O A L S

T R I C I A D ’ A N T I N

B U S I N E S S G O A L S U S E R G O A L S

D O E S Y O U R C O M P A N Y H A V E A D Y S F U N C T I O N A L R E L A T I O N S H I P

W I T H Y O U R U S E R S ?

W H Y T H I S H A P P E N S

W H Y Y O U S H O U L D C A R E

W H A T Y O U C A N D O A B O U T I T

W H A T R E S U L T SY O U C A N E X P E C T

W H Y D O E S T H I S H A P P E N ?

U S E R G O A L

“Can I return this banana slicer?” S h o p R i s k - F r e e

B U S I N E S S G O A L

“All sales are final!” I n c r e a s e S a l e s

! E X A M P L E ! " "



! E X A M P L E ! # "

U S E R G O A LB U S I N E S S G O A L

“Is this even worth more spam and another password I have to remember?”

A S S E S S P R O D U C T V A L U EG R O W O U R M A I L I N G L I S T

“Log in to view properties!”


! E X A M P L E ! $ "

U S E R G O A LB U S I N E S S G O A L

“Click the dancing baby!”G e n e r a t e A d R e v e n u e

“I just want to read the news.”V i e w C o n t e n t

D A R K P A T T E R N S“Dark Patterns are user interfaces that are designed to trick people.

Normally when you think of “bad design,” you think of laziness or mistakes. These are known as design anti-patterns. Dark Patterns are di#erent – they are not mistakes, they are carefully crafted with a solid understanding of human psychology, and they do not have the user’s interests in mind.”

Types:

Bait and SwitchDisguised AdsFaraway BillFriend SpamHidden CostsMisdirection

Price Comparison PreventionPrivacy Zuckering

Roach MotelRoad Block

Sneak Into BasketTrick Questions

� � ' D U N 3 D W W H U Q V � R U J


� � ' D U N 3 D W W H U Q V � R U J

“THE ATTENTION OF THE USER IS DIRECTED TO ONE THING IN ORDER TO DISTRACT IT FROM ANOTHER.”


M i s d i r e c t i o n

D A R K P A T T E R N 1 : J A V A


� � ' D U N 3 D W W H U Q V � R U J

“THE USER IS REQUIRED TO RESPOND TO A QUESTION (TYPICALLY IN THE CHECKOUT PROCESS), WHICH, WHEN GLANCED UPON QUICKLY APPEARS TO ASK ONE THING, BUT IF READ CAREFULLY, ASKS ANOTHER THING ENTIRELY. THIS PATTERN WORKS BECAUSE IT IS NORMAL FOR USERS TO EMPLOY HIGH-SPEED SCAN-READING ON THE WEB – SEE STEVE KRUG: ‘WE DON’T READ PAGES. WE SCAN THEM.’”

Tr i c k Q u e s t i o n s

D A R K P A T T E R N 2 : C O S T C O


� �� 3 H U F H Q W 2 I ( Y H U \ W K L Q J � F RP

“THE ACT OF CREATING DELIBERATELY CONFUSING JARGON AND USER INTERFACES WHICH TRICK YOUR USERS INTO SHARING MORE INFO ABOUT THEMSELVES THAN THEY REALLY WANT TO.”

P r i v a c y Z u c k e r i n g

D A R K P A T T E R N 3 : A P P L E

W H Y S H O U L D Y O U C A R E ?

B R A N D R E L A T I O N S H I P S A R E L I K E H U M A N R E L A T I O N S H I P S


Y O U ’ R E T R Y I N G T O C H A N G E B E H A V I O R

“You will be the least successful if you let common sense be you guide.”

- H Q L � & U R V V�

7 K U H H �0 \ W K V �R I �% H K D Y L R U �& K D Q J H �� : K D W �< R X�7 K L Q N �< R X �. Q RZ �7 K D W �< R X �' R Q · W � �- H Q L �& U R V V �D W�

7 ( ' [ & 6 8


W H A T C A N Y O U D O A B O U T I T ?

T H E D E S I G N T H I N K I N G P R O C E S S

D E F I N E R E S E A R C H C H O O S EI D E A T I O N I M P L E M E N TP R O T O T Y P E L E A R N


D O U G ’ S A U T O R E P A I R! E X A M P L E C O M P A N Y "


S T E P 1 : D E F I N E


W h a t ’ s t h e p r o b l e m ?

“Well, team, sales aren’t where they need to be to keep this place afloat!”

Your key performance metrics (KPIs) should be timely, specific, measurable, etc. “We want to increase sales by 50% per month.”

H o w w i l l w e k n o w i f w e ’ r e s u c c e s s f u l ?

S T E P 1 : D E F I N E


W h o ’ s t h e a u d i e n c e ?

New customers

Nathan has been scammed before. He’s new to the area, and he’s looking for

a mechanic he can trust. He comes to Doug’s Auto Repair for an oil change, hoping they don’t tell him he needs a

new everything. He really can’t a#ord a big bill right now.

Returning customers

Carla’s car is making a funny scraping noise. Last time she came to Doug’s,

she wasn’t sure if her car really needed all that work, but she’s a very trust-

ing person. She wishes she was bold enough to ask more questions and knowledgeable enough to judge the

answers.

S T E P 2 : R E S E A R C H

What’s causing the issues?

“I don’t have many repeat customers, so business is slow. To make up for it, I’ve been rewarding my team for upselling customers on services. We want the most work we can

get out of each car, and people are skeptical of that.”

What are the obstacles?

“We do a good job, but they only care about the price, and many places are cheaper, faster, and only recom-

mend the bare minimum.”

“It’s hard to get our customers to trust us, take our ad-vice, and come back.”

How have other people solved this problem?

Competitive Analysis Solutions

TestimonialsReviews

Social media engagementO#ering quote estimates online

“Ask the mechanic” formsFriendly imagery

Touting experience“Trustworthy” tone and diction


S T E P 3 : I D E A T I O N

New Customers

Make an appointment Find directions

Get an accurate diagnosis of their car’s problemsGet a competitive quote

Judge the trustworthiness of the mechanicCompare mechanics

Get a detailed understanding of the work involvedUnderstand why the work is required

Get a sense of quality assuranceAnd they want it all in 30 minutes

Repeat Customers

Make an appointmentGet an accurate diagnosis of their car’s problems

Get a competitive quoteHave a relationship with a mechanic

Receive personalized serviceReference their repair history


Get a sense of quality assuranceGain knowledge of their car’s future needs

And they want it all in 30 minutes

W h a t d o y o u w a n t + w h a t d o y o u r u s e r s w a n t ?


New Customers

Make an appointmentFind directions





Repeat Customers

Make an appointmentGet an accurate diagnosis of their car’s problems

Get a competitive quoteHave a relationship with a mechanic

Receive personalized serviceReference their repair history


Get a sense of quality assuranceGain knowledge of their car’s future needs

And they want it all in 30 minutes

F o c u s o n t h e m o s t c o m m o n g o a l s .



B r a i n s t o r m S o l u t i o n s

Common Goals

Make an appointmentFind directions





Have a relationship with a mechanicReceive personalized serviceReference their repair history

Gain knowledge of their car’s future needs

Solutions

“Make an appointment” formEmbedded Google maps

A “WebMD” for carsA “compare prices” at other shops feature

A profile for each mechanicA customer-generated “trustworthiness score” for each mechanic

A customer profile with their assigned mechanicA digital diagnostic report of the car

Quick access to past diagnostic reports and repair plansA visual, interactive repair plan with descriptions in plain language

A calendar of future repairs and maintenanceLive push-notification updates on the car’s progress



S T E P 4 : P R O T O T Y P E

Te s t Y o u r I d e a s .

Techniques like paper prototyping and click-through are quick and easy ways to literally sketch out an idea or mock up a low fidelity wireframe, ask someone to interact with it - using a little bit of imagination - and observe what they struggle with.

� � * H R U J H � . H G H Q E X U J � , , ,

K W W S � � � S X U S O H U R F N V F L V V R U V � F RP � N Q RZ O H G J H � V K D U H � S U R W R W \ S L Q J �


SUBMIT

NAVIGATION

S T E P 5 : C H O O S E

“The absence of these flu#-features allows the most important users to master the software faster without having to deal with low-value complexity.”

- Ty n e r B l a i n

Which ideas should we keep?

“Make an appointment” form

Embedded Google maps

A “WebMD” for cars

A “compare prices” at other shops feature Phase 2!

A profile for each mechanic

A customer-generated “trustworthiness score” for each mechanic

A customer account to access info

View their assigned mechanic

Access a digital diagnostic report of the car

Access past diagnostic reports and repair plans

A visual, interactive repair plan with descriptions in plain language Phase 2!

A calendar of future repairs and maintenance

Live push-notification updates on the car’s progress Phase 2!


S T E P 6 : I M P L E M E N T

When deciding how to prioritize when to implement ideas, there’s the Kano Analysis. There are three classifications of requirements.

P l a n t h e W e b s i t e .

1. Must be. Functional barriers to entry – without these capa-bilities, customers will not use the product (e.g. UL approval).

2. More is better. Dimensions along a continuum with a clear direction of increasing utility (e.g. battery life or song capacity).

3. Surprise and delight. Capabilities that di#erentiate a product from its competition (e.g. the nav-wheel on an iPod).


- Ty n e r B l a i n


P l a n t h e W e b s i t e .

S i t e A r c h i t e c t u r eP r o d u c t Ta x o n o m y

F u n c t i o n a l i t y R e q u i r e m e n t sC o n t e n t S t r a t e g y

W i r e f r a m e s



D e s i g n t h e W e b s i t e .

B u i l d t h e W e b s i t e .


S T E P 7 : L E A R N

Google AnalyticsGoal Tracking

Conversion FunnelsBounce Rate

User FeedbackUser Testing

M e a s u r e t h e I m p a c t T h r o u g h :


E N D R E S U L T S F O R D O U G

D o u g s a w a n a v e r a g e i n c r e a s e o f 3 6 % i n o v e r a l l s a l e s . S i n c e h i s g o a l w a s 5 0 % , h e ’ s u s i n g a p o r t i o n o f t h e i n c r e a s e t o

c o n d u c t u s a b i l i t y t e s t s t o f i n d h i t c h e s i n t h e d e s i g n . H i s w e b d e v e l o p m e n t t e a m i s t a k i n g t h i s a n a l y s i s , m a k i n g C T A b u t t o n s

m o r e p r o m i n e n t , r e m o v i n g c l u t t e r , r e w r i t i n g c o p y t o s o u n d f r i e n d l i e r , a n d A / B t e s t i n g a d s .

W H A T R E S U L T S C A N Y O U E X P E C T ?

T H E I N F I N I T E C Y C L E

S T E V E K R U G % A U T H O R &

S T E P H E N P ' A N D E R S O N % A U T H O R &

D O N N O R M A N % A U T H O R &

C H R I S T I N A W O D T K E % A U T H O R &

D O N ’ T M A K E M E T H I N K R E V I S I T E D : A C O M M O N S E N S E A P P R O A C H T O W E B U S A B I L I T Y

S E D U C T I V E I N T E R A C T I O N D E S I G N : C R E A T I N G P L A Y !F U L , F U N , A N D E F F E C T I V E U S E R E X P E R I E N C E S

T H E D E S I G N O F E V E R Y D A Y T H I N G S

I N F O R M A T I O N A R C H I T E C T U R E : B L U E P R I N T S F O R T H E W E B

R E S O U R C E S

R e c o m m e n d e d B o o k s

R E S O U R C E S

“Design Thinking.” An overview of the approach:!

Need to back up an idea with research? Find some:

The best blog by all the best people in the field:!

My personal favorite UX blog:!

Amazing tools where Google does a lot of this stu" for you:

The article I send to everyone who wants to learn to make websites:!

Take usability tests to get a sense of what it’s all about, and publish your own:

!

h t t p : / / e n . w i k i p e d i a . o r g / w i k i / D e s i g n _ t h i n k i n g

h t t p : / / w w w . u x p o n d . c o m / i n d e x . h t m l

h t t p : / / a l i s t a p a r t . c o m / a r t i c l e s

h t t p : / / u x d e s i g n . s m a s h i n g m a g a z i n e . c o m /

! h t t p : / / w w w . g o o g l e . c o m / t h i n k / t o o l s / c u s t o m e r - j o u r n e y -t o - o n l i n e - p u r c h a s e . h t m l

h t t p : / / w w w . g o o d . i s / p o s t s / h o w - t o - b e c o m e - a - d e s i g n e r -w i t h o u t - g o i n g - t o - d e s i g n - s c h o o l

h t t p s : / / u s a b i l i t y h u b . c o m /

R e c o m m e n d e d L i n k s

R E S O U R C E S

!Learn, learn learn:!

An overview of the field (I do everything in this chart except visual design):!

Where to go if you don’t know what any of this stu" means, or you just need way more examples:!

O#cial site of the guys who basically invented usability (Nielsen and Norman like our Skinner):!

A list of my heroes. The people and organizations I follow onW Twitter for everyday inspiration:!

This article explains dark patterns and brand relationships better than I ever could:

h t t p s : / / g e n e r a l a s s e m b . l y / w a t c h - a n d - l e a r n / u x -d e s i g n ? u t m _ c o n t e n t = f r o n t _ r o w & u t m _ m e d i u m = f b -s o c i a l c o d e _ P a g e P o s t L i n k _ P h a s e 2 _ U X _ U X O f f e r

h t t p : / / w w w . u x m a t t e r s . c o m / m t / a r c h i v e s / 2 0 0 7 / 1 1 / i m a g e s /F i v e C o m p e t e n c i e s . p d f

h t t p : / / w w w . u s a b i l i t y . g o v /

h t t p : / / w w w . n n g r o u p . c o m /

h t t p s : / / t w i t t e r . c o m / t r i c i a d a n t i n / l e a r n - s o m e t h i n g /m e m b e r s

h t t p : / / w w w . 9 0 p e r c e n t o f e v e r y t h i n g . c o m / 2 0 1 3 / 0 7 / 2 3 / t h e -s l i p p e r y - s l o p e /

R e c o m m e n d e d L i n k s

Q U E S T I O N S ?

T H A N K Y O U .

TRICIA@ P R P L . R S

@ T R I C I A D A N T I N