the science of ux - april 2012 nerdery interactive primer

#UXNERDSMonday, April 30, 2012

#UXNERDS

MATT TONAKCOMMUNITY MANAGER

Monday, April 30, 2012

#UXNERDS

ZACKSENIOR USER EXPERIENCE DESIGNERUSER RESEARCH PRACTICE LEAD

#UXNERDS

MIKEDIRECTOR OF USER EXPERIENCE

#UXNERDS

HOW TO PARTICIPATE

¼ Using the questions panels in the GoToMeeting app

¼ On Twitter @The_Nerdery

¼ Send us an email at primers@nerdery.com

#UXNERDS

THE SCIENCE OF

USER EXPERIENCEINTERACTIVE PRIMER SERIES

#UXNERDS

ART IS NOT DESIGN

#UXNERDS

ART IS NOT DESIGNNOT FOR US ANYWAY

#UXNERDS

¼ Body Level 1

¼ Body Level 2

¼ Body Level 3

ARTAIMS TOINSPIRE

#UXNERDS

¼ Body Level 1

¼ Body Level 2

¼ Body Level 3

DESIGN

PROBLEMS

SOLVES

#UXNERDS

INTERPRETED

#UXNERDS

DESIGN

UNDERSTOOD

#UXNERDS

DESIGN PHILOSOPHIES

#UXNERDS

DESIGN PHILOSOPHIESThere is no “one-size-fits-all”

#UXNERDS

DESIGN PHILOSOPHIES

Self Design

There is no “one-size-fits-all”

#UXNERDS

DESIGN PHILOSOPHIES

Self Design

Genius Design

#UXNERDS

DESIGN PHILOSOPHIES

Self Design

Genius Design

User-Centered Design

SELF DESIGNSOLVING YOUR OWN PROBLEM

I know what I want for dinner.Self Design is cooking for yourself.

Pretty simple.

GENIUS DESIGNSOLVING A PROBLEM YOU’VE SOLVED BEFORE

If I’ve made dinner for Mike (or people like him) many times before, I rely on my domain specific experience to cook dinner for Mike.

I don’t actually cook for Mike. #justsayin’

GENIUS DESIGNTHERE’S A CATCH

Genius Design presupposes that you originally did your research to define the problem.

#UXNERDS

USER-CENTERED DESIGN AKA: UX Design

#UXNERDS

USER-CENTERED DESIGN AKA: UX Design

A UX process starts withunderstanding the problem

#UXNERDS

USER-CENTERED DESIGN

Focuses on behavior, use, and context

#UXNERDS

USER-CENTERED DESIGN

Focuses on behavior, use, and context

Building empathy

#UXNERDS

HOLISTIC DESIGN:FOCUSED ON PEOPLE

USERRESEARCH

INFORMATION ARCHITECTURE

INTERACTIONDESIGN

VISUALDESIGN

#UXNERDS

USERRESEARCH

INTERACTIONDESIGN

VISUALDESIGN

Where art occurs in design

#UXNERDS

USERRESEARCH

INTERACTIONDESIGN

VISUALDESIGN

INTERSECTION OF ART, DESIGN AND SCIENCE

#UXNERDS

DESIGN SOLVES PROBLEMS

#UXNERDS

NERDERY UX APPROACH

UNDERSTAND THE “WHY”

DEFINE THE “WHAT”

LEARN THE “WHO”

CRAFT THE “HOW”

Throughly define the problem

Build empathy with the audience

Understand why it’s a problem

Evaluate and execute the solution

DEFINING THE “WHAT”IMPORTANCE OF THOROUGHLY DEFINING THE PROBLEM

¼ Can’t appropriately solve an undefined problem

¼ Stated problems vs. actual problems

¼ Unable to measure success

¼ Measuring the wrong factors to success

¼ Can create tumbler effect of:

undefined problem incorrect solution intangible success

#UXNERDS

SCIENCE

#UXNERDS

Science is a systematic enterprise that builds and organizes knowledge in the form of testable explanations and predictions about the universe.

#UXNERDS

SCIENTIFIC METHOD

#UXNERDS

SCIENTIFIC METHOD1. Define a question

2. Gather information and resources (observe)

3. Form an explanatory hypothesis

4. Test the hypothesis by performing an experiment and collecting data

5. Analyze the data

6. Interpret the data and draw conclusions that serve asa starting point for new hypothesis

7. Publish results

8. Retest (frequently done by other scientists)

#UXNERDS

5. Analyze the data

7. Publish results

#UXNERDS

5. Analyze the data

7. Publish results

Iterations

#UXNERDS

UX DESIGN METHOD1. Define the problem

4. Research and collect data

5. Analyze the data

6. Interpret the data and draw conclusions to inform design decisions

7. Document results

8. Measure design decisions

#UXNERDS

UX DESIGN METHOD1. Define the problem

5. Analyze the data

7. Document results

INJECTION OFSCIENTIFICREASONING

#UXNERDS

HUMAN LOGIC:

SCIENTIFIC REASONING

#UXNERDS

HUMAN LOGIC:

How do we make design decisions?

#UXNERDS

HUMAN LOGIC:

How do we define problems?

#UXNERDS

HUMAN LOGIC:

How do we define problems?

How do we craft solutions?

#UXNERDS

HUMAN LOGIC:

#UXNERDS

HUMAN LOGIC:

Deductive reasoning

#UXNERDS

HUMAN LOGIC:

Deductive reasoning

Inductive reasoning

#UXNERDS

HUMAN LOGIC:

Deductive reasoning

Inductive reasoning

Abductive reasoning

#UXNERDS

HUMAN LOGIC:

#UXNERDS

HUMAN LOGIC:

Precondition

#UXNERDS

HUMAN LOGIC:

Precondition

#UXNERDS

HUMAN LOGIC:

Precondition

Conclusion

#UXNERDS

DEDUCTIVE REASONING

¼ Determining the conclusion

¼ Precondition and rule “follows necessarily”

¼ Conclusion must be true where rule and precondition are

#UXNERDS

DEDUCTIVE REASONING

1. Men are mortal.

2. Zack is a man.

3. Therefore, Zack is mortal.

#UXNERDS

DEDUCTIVE REASONING

1. When our conversion rate on the checkout page is 5% or less, our total revenue decreases.

2. Our conversion rate on the checkout page is less than 5%

3. Our total revenue has decreased.

#UXNERDS

INDUCTIVE REASONING

¼ Uses probability to draw conclusion.

¼ Abstracts of observations from individual cases

¼ It’s possible that the conclusion is false.

#UXNERDS

INDUCTIVE REASONING

1. Small text is hard to read for most people.

2. Most people can understand larger text.

3. Therefore, we can assume larger text will be easier to read.

Easier to read.Harder to read.

#UXNERDS

INDUCTIVE REASONING

1. There were usability flaws every time we had conversion rate of 5% or less on the checkout page.

2. Therefore, if conversion rate on the checkout page is 5% or less, we have usability flaws.

#UXNERDS

ABDUCTIVE REASONING

¼ Separation of facts within limited contexts.

¼ Precondition is related, but must be a reasonable suggestion that the conclusion is true.

#UXNERDS

ABDUCTIVE REASONING

1. I’ve seen people have a hard time reading small text.

2. Sometimes, people understanda message better if it’s with a picture.

3. We can abduct, people may understandour content better with pictures.

#UXNERDS

ABDUCTIVE REASONING1. I’ve seen conversion rate lower on websites with

usability flaws.

2. Sometimes, usability flaws are caused by unclear calls to action.

3. We can abduct that clearer calls to action can improve conversion rate.

#UXNERDS

SCIENTIFIC REASONINGAND APPLIED LOGIC IN UX

#UXNERDS

APPLIED LOGIC IN UX DESIGN1. Define the problem

5. Analyze the data

7. Document results

INDUCTIVE &ABDUCTIVE LOGIC

INDUCTIVE LOGIC

DEDUCTIVE LOGIC

DEDUCTIVE & INDUCTIVE LOGIC

#UXNERDS

APPLIED LOGIC IN UX DESIGN1. Define the problem DEDUCTIVE LOGIC

“When our conversion rate on the checkout page is 5% or less, our total revenue decreases.”

“Our conversion rate on the checkout page is less than 5%”

“Our total revenue has decreased.”

#UXNERDS

APPLIED LOGIC IN UX DESIGN1. Define the problem DEDUCTIVE LOGIC

“When our conversion rate on the checkout page is 5% or less, our total revenue decreases.”

“Our conversion rate on the checkout page is less than 5%”

“Our total revenue has decreased.”

Deductive logic for problem definition

#UXNERDS

APPLIED LOGIC IN UX DESIGN3. Form an explanatory hypothesis INDUCTIVE LOGIC

“There were usability flaws every time we had conversion rate of 5% or less on the checkout page.”

“Therefore, if conversion rate on the checkout page is 5% or less, we have usability flaws.”

#UXNERDS

APPLIED LOGIC IN UX DESIGN3. Form an explanatory hypothesis INDUCTIVE LOGIC

“There were usability flaws every time we had conversion rate of 5% or less on the checkout page.”

“Therefore, if conversion rate on the checkout page is 5% or less, we have usability flaws.”

Inductive logic for hypothesis formation

#UXNERDS

APPLIED LOGIC IN UX DESIGN5. Analyze the data

“I’ve seen conversion rate lower on websites with usability flaws.”

“In our research and observations, we saw usability flaws caused byunclear calls to action.”

“We can abduct that clearer calls to action can improve conversion rate.”

#UXNERDS

APPLIED LOGIC IN UX DESIGN5. Analyze the data

“I’ve seen conversion rate lower on websites with usability flaws.”

“In our research and observations, we saw usability flaws caused byunclear calls to action.”

“We can abduct that clearer calls to action can improve conversion rate.”

Abductive logic for research data analysis and informing design decisions

#UXNERDS

APPLIED LOGIC IN UX DESIGN8. Measure design decisions DEDUCTIVE & INDUCTIVE LOGIC

“When we fixed our usability flaws, our conversion rate increased to 10%, also increasing our total revenue.”

“We’ve fixed our usability flaws.”

“Therefore, our total revenue has increased.”

#UXNERDS

APPLIED LOGIC IN UX DESIGN8. Measure design decisions DEDUCTIVE & INDUCTIVE LOGIC

Deductive logic for design success measurement

“When we fixed our usability flaws, our conversion rate increased to 10%, also increasing our total revenue.”

“We’ve fixed our usability flaws.”

“Therefore, our total revenue has increased.”

#UXNERDS

WHAT DOES ALL THIS MEAN?

#UXNERDS

FINAL THOUGHTS

#UXNERDS

FINAL THOUGHTSUX Design and “Scientific-like” approach allows us to:

#UXNERDS

FINAL THOUGHTSUX Design and “Scientific-like” approach allows us to:

¼ Thoroughly define the problem

¼ Learn how to make informed design decisions

¼ Articulate our reasoning for design decisionsand features

¼ Reduce risk and strengthen chance for success

¼ Measure ROI of design (even against KPIs)

#UXNERDS

We’re using scientific methods, logic and reasoning, applied to creative process in order to solve problems through design.

#UXNERDS

THANKS

#UXNERDS

QUESTIONS?

¼ Using the questions panels in the GoToMeeting app

¼ On Twitter @The_Nerdery

¼ Tweet with the #uxnerds hashtag

¼ Send us an email at primers@nerdery.com

¼ More answers online at http://nerdery.com

#UXNERDSMonday, April 30, 2012

the science of ux - april 2012 nerdery interactive primer

design philosophiesthere

holistic design

catchgenius design

design body level

genius design theres

usercentered design

problem youve

usercentered designfocuses

Design

battle of the fanboys: apples & androids - a nerdery...

keeping it real - ux for interactive marketers

wwdc wrap up - a nerdery interactive primer

shin ux 2017 - ux strategy - ux review

applying ux design thinking to interactive documentaries

mobile apps: web vs. native - a nerdery agency primer

designing for development 2011- a nerdery interactive primer

how ux can help us to make a more inclusive environment for...

designing ui and ux for interactive virtual reality apps

ux russia 2011 - sanzhar kettebekov, segment interactive,...

legacy browsers - a nerdery primer

maintaining your software for the long haul - a nerdery...

embedded ux - a nerdery interactive primer

digital creative design course - ux module day 01 (edit...

ux/ui samples • kenny rupp interactive designer · •...

intro to user research - a nerdery interactive primer

the joy of ux -...

facebook's breaking change - a nerdery interactive primer

evaluating user experience for interactive television...

beyond the pixel, designing emotionally powerful - physical...