meaningful design

114

Upload: dave-hogue

Post on 27-Jan-2015

128 views

Category:

Design


0 download

DESCRIPTION

Designs becomes more meaningful when we understand the people who use them. Studying sociocultural influences and the psychological fields of cognition, motivation, emotion, and more help us better identify, define, and frame the UX problems and craft better, more effective experiences delivered by our products and services.

TRANSCRIPT

Page 1: Meaningful Design
Page 2: Meaningful Design

2UX Thinking | DaveHogue.com

Page 3: Meaningful Design

What If…

Page 4: Meaningful Design
Page 5: Meaningful Design
Page 6: Meaningful Design
Page 7: Meaningful Design
Page 8: Meaningful Design

10,000years

Page 9: Meaningful Design

Gobekli Tepe10,000 B.C.E.

Page 10: Meaningful Design
Page 11: Meaningful Design

Heiroglyphics1500 B.C.E.

Page 12: Meaningful Design

The Rosetta Stone196 B.C.E

Page 13: Meaningful Design

signswordsicons

Page 14: Meaningful Design
Page 15: Meaningful Design

KEEP OUTOR DIE

Page 16: Meaningful Design
Page 17: Meaningful Design

How do wemake certain

they understand?

Expert Judgment on Markers to Deter Inadvertent Human Intrusion into the Waste Isolation Pilot Plant (Sandia National Laboratories, 1993)

Page 18: Meaningful Design

We mustunderstand

them.

Page 19: Meaningful Design

Why do someexperiences succeed?

Page 20: Meaningful Design
Page 21: Meaningful Design
Page 22: Meaningful Design
Page 23: Meaningful Design

We feel like they know us

personally.

Page 24: Meaningful Design

The designersunderstandthe users.

Page 25: Meaningful Design

“You are not designing for yourself.”

Page 26: Meaningful Design

But we’re all human.

Page 27: Meaningful Design

Users

DesignersDevelopers

Researchers Managers

Page 28: Meaningful Design

Our brains all work the

same way…

Page 29: Meaningful Design

…and we share the samecapabilities and limitations.

We are subject to the

same rules.

Page 30: Meaningful Design

Understanding how we all think can help us generate

better ideas…

Page 31: Meaningful Design

…and help us craft and deliver

better experiences.

Page 32: Meaningful Design

Design is not magic.

Page 33: Meaningful Design

A Systemfor thinking about design with a

psychological perspective.

Page 34: Meaningful Design
Page 35: Meaningful Design
Page 36: Meaningful Design

People using things in places.

Page 37: Meaningful Design

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, tablets, computers, kiosks, cameras, pen & paper, chisel & stone…

Context

Page 38: Meaningful Design

Design must work across cultures,languages, and generations.

Page 39: Meaningful Design

Much of our design is symbolic:Colors Graphics MotionWords Illustrations VideoNumbers Diagrams AnimationTypefaces Charts SoundsIcons Photographs Haptics

The meaning of symbols is derived fromour experiences in that time and place.

Symbols

Page 40: Meaningful Design

Color of MourningSouth Africa

Egypt and Burma

Korea, Mexico, and Iran

Thailand and Brazil

China

India

United States and Europe

Page 41: Meaningful Design

Wisdom Harbinger of Death

Page 42: Meaningful Design

Trends & Fads

Style is socialand varies over time,

but the pendulum swingsin both directions.

Page 43: Meaningful Design

What something meansto me here todaymay be different

from what it meansto someone else

in a different time and place.

Page 44: Meaningful Design
Page 45: Meaningful Design
Page 46: Meaningful Design

Where am I going?

How will I get there?

Page 47: Meaningful Design

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

Page 48: Meaningful Design

Trust?

Page 49: Meaningful Design

Credible?

Page 50: Meaningful Design

Even minor issueswith design quality

can reducecredibility and trust.

Page 51: Meaningful Design
Page 52: Meaningful Design

How do people sense and perceive the world?Vision, audition, and touchColor deficient visionImage recognitionMotionGestalt PrinciplesPre-conscious processing and attention

Perception

Page 53: Meaningful Design
Page 54: Meaningful Design

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.

Page 55: Meaningful Design

Choosing Colors

Some tips for being color friendly:

1. Do not use color alone to signify meaning –combine it with form and text to provide additional cues.

2. Use sufficient contrast – test your design by de-saturating the colors to see if they are still distinct.

3. Remember that the color pairs that cause difficulty are RED-GREEN and BLUE-YELLOW. Shift the hue and vary the luminosity.

Page 56: Meaningful Design

Form & StructureGestalt Principles

Figure-GroundProximitySimilarityClosureContinuitySymmetryCommon Fate

Page 57: Meaningful Design

Figure-Ground

Page 58: Meaningful Design

Closure

Page 59: Meaningful Design

Proximity

Page 60: Meaningful Design

Similarity

Page 61: Meaningful Design
Page 62: Meaningful Design

Symmetry

Page 63: Meaningful Design

Continuity

Page 64: Meaningful Design
Page 65: Meaningful Design

We perceive what we expect.

Page 66: Meaningful Design
Page 67: Meaningful Design

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

Page 68: Meaningful Design
Page 69: Meaningful Design

Why do people spend so much time on socialnetworks, and what do they 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”)

Motivation

Page 70: Meaningful Design
Page 71: Meaningful Design

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

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

Cognition

Page 72: Meaningful Design

People are better able to scan and read text when it is presented in ways which help them identify and understand the meaning through the use of:

Headers and subheaders (size)WeightLineheight (leading)Line length (measure)Bullet listsWhitespaceGraphics, diagrams, and illustrations

Information Design

Page 73: Meaningful Design

Making Meaning

The Dead Zone: An outbreak of green algae, or hutai as the Chinese call it, has invaded the seawaters off eastern Shandong. It looks harmless and lots of fun, as beachgoers are pictured frolicking in the green mass. But danger lurks below with the algae posing a massive threat to aquatic life. The rivers are contaminated due to the use of fertilizers in agriculture and chemical discharges from industrial plants. Untreated sewage, along with the discharge of nitrate and phosphate from nearby industrial plants are spewed into the Yellow Sea, which stimulate the growth of algae, phytoplankton, and other marine micro-organisms. In July 2008 an algae bloom covered 13,000 square kilometers, then in July 2013 the largest algae bloom ever covered 28,900 square kilometers. The bacteria consume dead algae and phytoplankton, taking in tons of oxygen from the water during digestion. That results in sudden depletion of oxygen, which causes a huge impact on marine life by causing hypoxia – the marine organisms literally suffocate. Most mobile, adult fish may survive by swimming away from the hypoxic zones. However, they may be forced into smaller habitats when schools become overcrowded. Seafloor dwellers like tubeworms may be more tolerant of low oxygen levels, but young fish and other less mobile creatures like clams may suffer and eventually die if the water remains hypoxic for a long time.

The Dead Zone

An outbreak of green algae, or hutai as the Chinese call it, has invaded

the seawaters off eastern Shandong. It looks harmless and lots of fun,

as beachgoers are pictured frolicking in the green mass. But danger

lurks below with the algae posing a massive threat to aquatic life.

The rivers and Yellow Sea are contaminated by:

• Agricultural fertilizers,

• Nitrate and phosphate discharge from industrial plants,

• Untreated sewage.

These contaminants stimulate the growth of algae, phytoplankton, and

other marine micro-organisms. Bacteria consume dead algae and

phytoplankton and use tons of oxygen from the water during digestion.

Hypoxia: Suffocation due to lack of oxygen caused by the

removal of oxygen from the water by excess micro-organisms.

Most mobile, adult fish may survive by swimming away from the

hypoxic zones. However, they may be forced into smaller habitats

when schools become overcrowded.

Seafloor dwellers like tubeworms may be more tolerant of low oxygen

levels, but young fish and other less mobile creatures like clams may

suffer and eventually die if the water remains hypoxic for a long time.

Page 74: Meaningful Design

Making Meaning

The Dead Zone: An outbreak of green algae, or hutai as the Chinese call it, has invaded the seawaters off eastern Shandong. It looks harmless and lots of fun, as beachgoers are pictured frolicking in the green mass. But danger lurks below with the algae posing a massive threat to aquatic life. The rivers are contaminated due to the use of fertilizers in agriculture and chemical discharges from industrial plants. Untreated sewage, along with the discharge of nitrate and phosphate from nearby industrial plants are spewed into the Yellow Sea, which stimulate the growth of algae, phytoplankton, and other marine micro-organisms. In July 2008 an algae bloom covered 13,000 square kilometers, then in July 2013 the largest algae bloom ever covered 28,900 square kilometers. The bacteria consume dead algae and phytoplankton, taking in tons of oxygen from the water during digestion. That results in sudden depletion of oxygen, which causes a huge impact on marine life by causing hypoxia – the marine organisms literally suffocate. Most mobile, adult fish may survive by swimming away from the hypoxic zones. However, they may be forced into smaller habitats when schools become overcrowded. Seafloor dwellers like tubeworms may be more tolerant of low oxygen levels, but young fish and other less mobile creatures like clams may suffer and eventually die if the water remains hypoxic for a long time.

Page 75: Meaningful Design

Cognitive Biases

Our cognitive abilities are fallible.

Availability Heuristic

Fundamental Attribution Error

Confirmation Bias

Loss Aversion

Hyperbolic Discounting

Recency Bias

And dozens more…

Page 76: Meaningful Design

Should we “Reduce deaths”…

…or “Maximize quality of life?”

Page 77: Meaningful Design

Framing Bias

Page 78: Meaningful Design

What did the first cars look like?

Horse-drawn carriages.

Page 79: Meaningful Design

Anchoring Bias

Page 80: Meaningful Design

We may not be designing for

ourselves, but…

Page 81: Meaningful Design

We are susceptible to the same biases.

Page 82: Meaningful Design

Creativity

Perhaps one of the most difficult abilities to define and measure, creativity is often assigned to designers, but everyone has it.

Page 83: Meaningful Design

Divergent Thinking

Thinking that moves in diverging directions to involve a variety of factors and perspectives.

It generates many possibilities which may lead to novel ideas and solutions.

It is associated with creativity.

Page 84: Meaningful Design

30 seconds…

How many uses?

Page 85: Meaningful Design
Page 86: Meaningful Design

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

Theories:Ekman (Happiness, Surprise, Sadness, Anger, Fear, Disgust)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

Page 87: Meaningful Design

Color

Different colors have different meanings and elicit different emotions.

Red is anger.

Green is envy.

Blue is sadness.

Yellow is cowardice.

Page 88: Meaningful Design

Typefaces

Different typefaces convey different feelings and attitudes.

http://blog.crazyegg.com/2013/07/05/psychology-of-fonts-infographic/

Page 89: Meaningful Design
Page 90: Meaningful Design

Emotion

Emotions may be positive (love, joy) or negative (anger, fear.)

We have about 20,000 emotional experiences per day (Kahneman, 2002.)

Attractive things are judged to work better and be more effective.

Page 91: Meaningful Design

Positive Emotions

Fredrickson (2009) discovered that we need three positive emotions to lift us up and overcome just onenegative emotion.

Have you ever said,“Meh. It could be better, but it works”?

Is the rest of the interface

three times betterto make up for it?

Page 92: Meaningful Design
Page 93: Meaningful Design

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 (live, verbal, and symbolic)Relational Frame Theory (language and cognition)Drive Reduction (biology and homeostasis)

Behavior

Page 94: Meaningful Design

Rewards

Participation in social services is often encouraged with rewards such as badges and points that have personal and social value and which are delivered through complex reinforcement schedules.

Page 95: Meaningful Design
Page 96: Meaningful Design
Page 97: Meaningful Design
Page 98: Meaningful Design
Page 99: Meaningful Design
Page 100: Meaningful Design

Not what she predicted…

Page 101: Meaningful Design
Page 102: Meaningful Design

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?

Page 103: Meaningful Design
Page 104: Meaningful Design
Page 105: Meaningful Design
Page 106: Meaningful Design
Page 107: Meaningful Design
Page 108: Meaningful Design

Learning to use this...

Page 109: Meaningful Design

…does not help with these.

Page 110: Meaningful Design

Quick ReviewA lot of psychology in just two diagrams!

Page 111: Meaningful Design
Page 112: Meaningful Design
Page 113: Meaningful Design

Thanks!I’m happy to answer your questions.

Page 114: Meaningful Design