#Color2018

The

PsychologyBehind Color, Design, & Interaction

David M. Hogue, Ph.D.Design Lead at GoogleMountain View CA

PsychologyBehind Color, Design, & Interaction

The

How can we make mopping more effective?

▪ Adhere more dirt for a better clean!

▪ Faster drying means less time lost!

▪ Add spill and dirt resistance forfewer future messes!

Let’s Talk About Mopping

Better Chemistry

▪ Sweep before mopping

▪ Use products from many manufacturers

▪ Spend as much time rinsing mops as mopping the floor

▪ Wear old clothes when mopping, because it’s a dirty job

▪ Spot cleaning rather than the entire floor

Watch People Clean

Eureka!

It was not about the chemistry.

It was all about the experience.

Hello!

David M. Hogue, Ph.D.Design Lead at Google

What is UX?The Obligatory Definitions

“User experience highlights the experiential, affective, meaningful, and valuable aspects of human-computer interaction and product ownership. Additionally, it includes a person’s perceptions of the practical aspects such as utility, ease of use, and efficiency of the system. User experience is subjective in nature because it is about individual perception and thought with respect to the system. User experience is dynamic as it is constantly modified over time due to changing circumstances and new innovations.”

- Wikipedia

“User experience highlights the experiential, affective, meaningful, and valuable aspects of human-computer interaction and product ownership. Additionally, it includes a person’s perceptions of the practical aspects such as utility, ease of use, and efficiency of the system. User experience is subjective in nature because it is about individual perception and thought with respect to the system. User experience is dynamic as it is constantly modified over time due to changing circumstances and new innovations.”

- Wikipedia

“User experience is a person's perceptions and responses that result from the use or anticipated use of a product, system or service. User experience includes all the users' emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use. Three factors that influence user experience are: system, user, and the context of use.”

– ISO 9241-210 (Human-centered Design for Interactive Systems, 2008)

“I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual. Since then the term has spread widely, so much so that it is starting to lose its meaning… user experience, human centered design, usability... They just sort of entered the vocabulary and no longer have any special meaning. People use them often without having any idea why, what the word means, its origin, history, or what it’s about.”

– Don Norman (1993, Apple’s first User Experience Architect)

UX is not a single discipline.

Jane Patient

Dentist

Trainer

Physician

Dietician

Optometrist

Specialists

BusinessOwner

SocialMedia

ContentStrategy

Research

Design

Develop(or Make)

Jane User

It takes a team to deliver great UX.

We all contribute…

UX is neither unguent nor salve.

UX is integral.

Great UX is hard work.

Sturgeon’s Revelation90% of everything is crap.

You get to decide if you are in the 10%.

Theodore Sturgeon, American science fiction author

Sorry, it’s not magic.

Psychology of UXA Quick Introduction

Relevant Fields of Psychology

BehavioralEcological / EnvironmentalCognitiveSocialConsumerIndustrial / OrganizationalHuman Factors / HCIExperimentalPsychometricsQuantitative / MathematicalEducationalDevelopmentalPersonalityPhysiological / Neurological

People in places using things.

Who are the people?Demographics, experiences, skills, attitudes, beliefs, knowledge

Where are they?Place, environment, situation, conditions, circumstances

What are the devices, objects, and tools they are using?Phones, computers, kiosks, cameras, pen & paper, books, chisel & stone…

Context

Hungry people in a cafe with menus.

Employee in a print shop with machines.

Where am I going?

How will I get there?

What are the objectives?What is the desired outcome, and is it:

Productive, focused, goal-directed, playful, exploratory, meandering

What is the value of the goals and objectives?Important, essential, necessary, optional, nice-to-have, elective

How urgent are the goals and objectives?Time-sensitive, critical, compelling, casual, open-ended

Goals

Value vs. UrgencyDo not conflate value and urgency.

Important thingsmay not need to be achieved immediately.

Urgent thingsmay not be important.

Value and urgencycan change based on context.

Research describes context and goals

Observe and interview diners.

Is this food? How might you eat it?

What is involved in a print job?

How do people sense and perceive the world?Vision, audition, and touchColor deficient visionGestalt PrinciplesImage recognitionMotionPre-conscious processing and attention

Perception

Color VisionOur eyes have cells that detect red, green, and blue light.

This is an additive color system that works on the same principles as our televisions and monitors, but we can sense more colors than they can produce.

MagentaThe spectrum of visible light does not include magenta.

Magenta is an “extra-spectral color” perceived only by the brain as the combination of red and blue light, which are at opposite ends of the visible spectrum.

Color Perception

Magenta

#0000FF #FF0000

#FF00FF

Color Deficient Vision

Normal Red-Green Blue-Yellow

About 8% of men and 0.5% of women in the USA have some form of color deficient vision.

www.color-blindness.com/coblis-color-blindness-simulator/

Gestalt PrinciplesDescribe how we visually perceive objects as distinct from one another and from backgrounds. Complex images may be reduced to simpler shapes to make perception easier.

ProximitySimilarityContinuityClosureCommon fateSymmetryMeaningfulness

Similarity

Proximity

Symmetry

Similarity

Proximity

Continuity

Where is your attention focused?

Definition:The force that initiates, directs, and sustains behavior.Why we do what we do.

Theories:Achievement, Affiliation, and PowerExistence, Relatedness, and Growth (ERG)Biological DrivesInternal vs. ExternalNot Maslow’s Hierarchy of Needs…

Motivation

Why do we spend so much time on socialnetworks, and what do we get from it?

Affiliation with others (we are social creatures and seek contact)

Personal achievement (competition with self and others)

Social influence and credibility (“social currency”)

Recognition, praise, and social rewards (we like to be liked)

Motivation

Social and biological drives

Want to use it, or must use it?

Definition:The mental action or process of acquiring knowledge and understandingthrough thinking, experience, and the senses.

Types:Learning Decision-makingMemory RecognitionLanguage Spatial operationsProblem-solving Concept formationReasoning and logic MetacognitionAttention And many, many biases…

Cognition

Hick’s Law+Paradoxof Choice

Where?

Cognitive BiasesOur cognitive abilities are fallible.

▪ Framing

▪ Anchoring

▪ Confirmation Bias

▪ Functional Fixedness

▪ Hyperbolic Discounting

▪ Recency Bias

▪ And dozens more…

Should we “Reduce deaths”…

…or “Maximize quality of life?”

Framing Bias

What did the first cars look like?

Horse-drawn carriages.

Anchoring Bias

Perceived cost is relative

Terrible consequences are possible.

Definition:A complex, subjective experience resulting in physiological andpsychological changes that influence thought and behavior.

Theories:Primary Emotions (Ekman; Plutchik; Shaver; Izard; Jack; et al.)James-Lange (physiological reaction precedes emotion)Cannon-Bard (physiological reaction and emotion are concurrent)Schachter-Singer (physiological reaction precedes cognition)Lazarus (cognition precedes physiological reaction and emotion)

Emotion

Primary EmotionsAnger, happiness, surprise, disgust, sadness, and fear (Ekman)

Imagery is evocative.

ColorDifferent colors have different meanings and elicit different emotions in different cultures.

Red is anger.

Green is envy.

Blue is sadness.

Yellow is cowardice.

Grief

China Egypt New Guinea Korea Brazil USA

Dining & MenusColor can guide, inform, and inspire decisions.

Green is fresh and organic.

Orange stimulates appetite.

Red inspires action.

Yellow is happy.

Blue food is uncommon.

You will always be mine

Typography is evocative.

You will always be mine...

You will always be mine

Definition:The actions by which an organism reacts and adjusts totheir environment and other organisms; a response to various stimuli.

Theories:Classical Conditioning (association)Operant Conditioning (reinforcement and punishment)Social Learning Theory (modeling and imitation, verbal, and symbolic)Relational Frame Theory (language and cognition)Drive Reduction (biology and homeostasis)

Behavior

Behavior ModificationIntentionally changing behavior by manipulating the:

▪ Environment (stimuli, signals, and triggers)

▪ Information (models, instructions, and symbols)

▪ Associations (space and time)

▪ Opportunities (imitation, tools, and thinking)

▪ Schedules (timing and counting)

▪ Outcomes (reinforcement and punishment)

RewardsParticipation in social networks is often encouraged with rewards such as likes, favorites, badges, and points that have personal and social value and which are delivered through complex reinforcement schedules.

How to...Instructions help customers learnhow to order:

1. Choose your patty

2. Choose your bun

3. Top it off!

4. Get sauced!

Interface design also teaches:

▪ Environment (click, tap, drag)

▪ Information (icons, labels, help, status messages)

▪ Associations (proximity, similarity, UI responses)

▪ Opportunities (live previews, hovers, dialogs)

▪ Schedules (job status, number of jobs, timing)

▪ Outcomes (task completion, errors)

There is a dark side.

Behavior ModificationAs UX designers we are in the business of changing behavior.

Sometimes we are asked to make design decisions that lead people to choices and actions that are not always in their own best interests.

Dark patterns lead people to interact in ways they would not otherwise have chosen to.

darkpatterns.org

Be the good guy.

More than visibility – we must craft accessible experiences where we can perceive the opportunities to interact in any modality.

People are less likely interact if they do not perceive the opportunity to interact, even if they need or want to interact.

Perceivability

Where is the entrance to the bar?

Attention

PredictabilityThe ability to accurately and confidently predict the outcomes or results of an interaction and that it will move us toward our goal(s).

People are less likely to interact if they are not confident in their predicted outcomes or if they believe the results are not what they want or need.

Not what she predicted…

What if the menu had no prices?

Interact

Attention

FeedbackMeaningful information about the status and outcomes of an interaction and the process(es) it started, modified, or terminated.

People are less likely to continue interacting if they do not receive meaningful information about status, progress, outcomes, or results.

After editing the gift message three times,it was still too long…

How long is it now?

How much too long is it?

What is the maximum number of characters?

HELP! What should I do?

Feedback

Attention

Interact

Understand

LearnabilityWe can learn and remember interactions when we accurately predict desirable outcomes, avoid errors, and when the feedback is understandable and applicable.

People are less likely to learn an interaction if the outcomes are not expected or if feedback is absent or meaningless.

Attention

Interact

Understand

Observe & Practice

LearningWe learn to associate experiences that occur together in time and place.

We learn to repeat interactions that reward us and avoid interactions that punish us.

We can learn by watching and observing as easily as by doing.

Attention

Interact

Understand

Observe & Practice

TransferRemember

RememberWe generalize across similar situations and transfer knowledge and skills from one context, device, or domain to another when they are identifiably analogous.

Attention

Interact

Understand

Observe & Practice

Remember

Transfer

ConsistencyConsistent appearance, behavior, reaction, meaning, and outcome makes it easier for us to:

• Perceive the opportunity to interact,

• Predict the outcomes more accurately,

• Better understand the feedback,

• Transfer learned interactions, and

• Learn new interactions through generalization and discrimination.

If you learn one, can you use others?

Failure

Quick ReviewWhew! We’re almost finished.

Psychology and UX

Understand the people for whom you are designing.

Thanks!I’m happy to answer your questions.

David M. Hogue, Ph.D.Design Lead at Google