2.0 INTERACTION DESIGN USER-CENTERED...

49
2.0 INTERACTION DESIGN USER-CENTERED DESIGN A.K.A. HUMAN CENTERED DESIGN DIGITAL MEDIA DESIGN II | SPRING 2015

Transcript of 2.0 INTERACTION DESIGN USER-CENTERED...

Page 1: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

2.0 INTERACTION DESIGN

USER-CENTERED DESIGNA.K.A. HUMAN CENTERED DESIGN

DIGITAL MEDIA DESIGN II | SPRING 2015

Page 2: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

SIX PRINCIPLES OF UCD

1. THE DESIGN IS BASED UPON AN EXPLICIT UNDERSTANDING OF USERS, TASKS AND ENVIRONMENTS.

Page 3: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

SIX PRINCIPLES OF UCD

2. USERS ARE INVOLVED THROUGHOUT DESIGN AND DEVELOPMENT.

Page 4: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

SIX PRINCIPLES OF UCD

3. THE DESIGN IS DRIVEN AND REFINED BY USER-CENTERED EVALUATION.

Page 5: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

SIX PRINCIPLES OF UCD

4. THE PROCESS IS ITERATIVE.

Page 6: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

SIX PRINCIPLES OF UCD

5. THE DESIGN ADDRESSES THE WHOLE USER EXPERIENCE.

Page 7: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

SIX PRINCIPLES OF UCD

6. THE DESIGN TEAM INCLUDES MULTIDISCIPLINARY SKILLS AND PERSPECTIVES.

Page 8: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

ITERATIVE PROCESS

Research& Test

Prototype,Design & Build

Start Finish

Page 9: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

BASICS

MASLOW’S HIERARCHY OF NEEDSA THEORY OF HUMAN MOTIVATION

Abraham Maslow, American psychologist, 1943

Page 10: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

MASLOW’S HIERARCHY OF NEEDS

Based on Maslow’s hierarchy of needs, the idea of a design hierarchy of needs rests on the assumption that in order to be successful, a design must meet basic needs before it can satisfy higher-level needs.

Page 11: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media
Page 12: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

DESIGN HIERARCHY

FUNCTIONAL

RELIABLE

USABLE

CONVENIENT

PLEASURABLE

MEANINGFUL

MEETS UNRECOGNIZED NEEDS(transformation)

MEETS DESIRES(success)

MEETS EXPECTATIONS(survival)

Page 13: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

FRAMEWORK

COGNITIVE FRAMEWORKSEXPLAINS AND PREDICTS USER BEHAVIOR BASED ON

THEORIES OF COGNITION.

Page 14: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

MANY PROCESSES OF COGNITION

Attention

Perception

Memory

Learning

Reading, speaking and listening

Problem solving, planning, reasoning and decision making

Page 15: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

MENTAL MODELS

A mental model represents a person’s thought process for how something works. They help shape actions and behavior, influence what people pay attention to in complicated situations, and define how people approach and solve problems.

A mental model is based on belief, not facts; and individual users have their own mental model.

Page 16: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

CONCEPTUAL MODEL

A conceptual model is the actual model that is given to the user through the interface of the product.

Page 17: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

WHY DO I CARE?

Everything we do in the field of user experience is, ultimately, about the match, or mismatch, between the users’ mental models and the product’s conceptual model.

When you see people make mistakes on your site, the reason is often because they’ve formed an erroneous mental model or your conceptual model doesn’t match their mental model.

Page 18: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

OPTIONS

1. IF THEY HAVE AN ERRONEOUS MENTAL MODEL:

TEACH USERS A MORE ACCURATE MENTAL MODEL AT AN EARLIER STAGE OF THE USER EXPERIENCE (I.E. DEMO, INSTRUCTIONS)

2. IF YOUR CONCEPTUAL MODEL IS TOO FAR FROM THEIR MENTAL MODEL:

RESIGN TO THE FACT THAT YOUR CONCEPTUAL MODEL CANNOT BE RATIONALIZED. THEN REDESIGN A NEW CONCEPTUAL MODEL THAT IS CLOSER TO THEIR MENTAL MODELS.

Page 19: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

CORE COMPONENTS

Metaphors and analogies convey to people how to understand what the product is for and how to use it.

Concepts that people are exposed to throughout the product.

Relationships between concepts.

How the various metaphors, concepts and their relationships are organized determines the user experience.

Page 20: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

DESIGNISM #8

THE BEHAVIOR YOU’RE SEEING IS THE BEHAVIOR YOU’VE DESIGNED FOR(WHETHER INTENTIONAL OR NOT).– JOSHUA PORTER

Page 21: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

COGNITION

There are many types of cognitive processes:

attentionperceptionmemorylearningreading, speaking, listeningproblem solving, planning, decision making, reasoning

Page 22: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

COGNITIVE LOAD

The level of effort associated with thinking and reasoning (including perception, memory, language, etc.), thus potentially interfering with other thought processes.

A user interface strives to minimize the cognitive load associated with operating the interface itself so that all of a person’s cognitive resources are available for their task.

Page 23: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

1. ATTENTION + MULTITASKING

A study suggests that people who are heavy multitaskers are likely to be those who are easily distracted and find it difficult to filter out irrelevant information than those who infrequently multitask.

(E. Ophir, “Cognitive oontrol in media multitaskers”, 2009)

Page 24: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

2. PERCEPTION

How information is acquired from th eenvironment, via different senses (vision being the most dominant).

Page 25: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

VISUAL PATTERNS

We are pattern seekers.

We store patterns that influence our expectations.

What we see is strongly influence by our expectations.

Page 26: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

VISUAL PERCEPTION

Perception is based on change. We scan, filter and interpret differences.

We use differences to create understanding.

Page 27: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

FIND THE RED CIRCLE

Page 28: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

FIND THE RED CIRCLE

Page 29: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

FIND THE RED CIRCLE

Page 30: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

DON’T MAKE ME THINK

An interaction is intuitive when the user dosn’t have to think.

We can guide them via visual and interaction design.

NO THINKING SOME THINKING FUHGEDDABOUDIT

Page 31: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

PERCEPTION

GESTALT PRINCIPLESTHE WHOLE IS DIFFERENT THAN THE SUM OF ITS PARTS.

Max Wertheimer, German psychologist, 1910

Page 32: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

SIMILARITY

Objects that look similar are grouped together

Page 33: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

PROXIMITY

Object positioned close together appear grouped

Page 34: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

APPLYING SIMILARITY AND PROXIMITY

Similarity in appearance indicates a likeness in functionality

Page 35: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

APPLYING SIMILARITY AND PROXIMITY

Proximity helps us to imply relationships between similar objects

Page 36: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

CLOSURE

Objects grouped together are seen as a whole shape, our brain fills in any missing information

Page 37: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

APPLYING CLOSURE

Closure allows us to view the top and bottom area as separate, even though they’re surrounded by white space.

Page 38: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

CONTINUATION

Objects arranged in a continuous line are grouped together

Page 39: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

COMMON FATE

Objects facing the same direction are grouped together, any outsiders may create tension

Page 40: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

APPLYING CONTINUATION AND COMMON FATE

Continuation and Common fate in interaction design is commonly utilized by motion and navigation.

Page 41: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

3. MEMORY

A filtering process is used to decide what information gets further processed and memorized.

The more attention that is paid to something and the more it is processed in terms of thinking about it and comparing it with other knowledge, the more it is likely to be remembered.

Page 42: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

7 PLUS/MINUS 2

Miller’s Theory (1956) the seven, plus or minus, two chunks of information can be helpful in short term memory.

GOOD phrases, large numbers, grocery lists, etc

BAD options in a menu, display only 7 icons, etc.

Page 43: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

4. LEARNING

People find it very hard to learn by following a set of instructions in a manual. Instead, they prefer to learn by doing.

Page 44: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

3

ATT 100%9:25 PM

upward

Senior AccountExecutive

Computer & Network Security

9 PROSPECTS REMAINING

DIGITAL MARKETING SEO

ONLINE ADVERTISING

Brooklyn, NY

3 yrs. experienceCipherTechsEmtec Federal

BS, University of Maryland

3

ATT 100%9:25 PM

upward

OUTSIDE SALES

MANAGEMENT

Senior AccountExecutive

Media

9 JOBS REMAINING

i

New York City, NY

5-7 yrs. experience

MARKETING

80-90k

Job Card Candidate Card

Swipe rightto “like” a card

if you areinterested in

learning more

Swipe leftto “pass” if its

not for you

Tap to “pass” Tap to “like”

Settings Matches & Chat

Swipe rightto “like” a card

if you areinterested in

learning more

Swipe leftto “pass” if its

not for you

Tap to “pass” Tap to “like”

Settings Matches & Chat

3

ATT 100%9:25 PM

upward

Senior AccountExecutive

Computer & Network Security

9 PROSPECTS REMAINING

DIGITAL MARKETING SEO

ONLINE ADVERTISING

Brooklyn, NY

3 yrs. experienceCipherTechsEmtec Federal

BS, University of Maryland

3

ATT 100%9:25 PM

upward

OUTSIDE SALES

MANAGEMENT

Senior AccountExecutive

Media

9 JOBS REMAINING

i

New York City, NY

5-7 yrs. experience

MARKETING

80-90k

Job Card Candidate Card

Swipe rightto “like” a card

if you areinterested in

learning more

Swipe leftto “pass” if its

not for you

Tap to “pass” Tap to “like”

This is a job card.

Tap anywhere to viewa full description.

Settings Matches & Chat

Swipe rightto “like” a card

if you areinterested in

learning more

Swipe leftto “pass” if its

not for you

Tap to “pass” Tap to “like”

3

ATT 100%9:25 PM

upward

Senior AccountExecutive

Computer & Network Security

9 PROSPECTS REMAINING

DIGITAL MARKETING SEO

ONLINE ADVERTISING

Brooklyn, NY

3 yrs. experienceCipherTechsEmtec Federal

BS, University of Maryland

3

ATT 100%9:25 PM

upward

OUTSIDE SALES

MANAGEMENT

Senior AccountExecutive

Media

9 JOBS REMAINING

i

New York City, NY

5-7 yrs. experience

MARKETING

80-90k

Job Card Candidate Card

Swipe rightto “like” a card

if you areinterested in

learning more

Swipe leftto “pass” if its

not for you

Tap to “pass”

Swipe rightto “like” a card

if you areinterested in

learning more

Swipe leftto “pass” if its

not for you

Settings Matches & Chat

Tap to “like” Tap to “pass” Tap to “like”

Settings Matches & Chat

1 2

3

This is a job card.

Tap anywhere to viewa full description.

This is a job card.

Tap anywhere to viewa full description.

This is a job card.

Tap anywhere to viewa full description.

This is a job card.

Tap anywhere to viewa full description.

This is a job card.

Tap anywhere to viewa full description.

Settings Matches & Chat

Page 45: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

IMPLICATIONS

Design interfaces that encourage exploration

Design interfaces that constrain and guide users to select appropriate actions when initially learning.

Link concrete representations and abstract concepts to facilitate the learning of complex material.

Page 46: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

5. READING, SPEAKING, LISTENING

These three forms of language process have similar and different properties. People have different preferences on how they want to learn through language.

Design systems that allow users to access content through all 3 forms.

Page 47: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

IMPLICATIONS

Instead of providing more information to enable people to compare products when making a choice, a better strategy is to design technological interventions that provide just enout information, and in the right form, to facilitate good choices.

Page 48: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

6. PROBLEM SOLVING, PLANNING, REASONING, DECISION MAKING

Human minds have evolved to act quickly, making just good enough decisions by using fast and frugal heuristics (a.k.a practical methods).

We typically ignore most of the available information and rely on only a few important cues.

Page 49: 2.0 INTERACTION DESIGN USER-CENTERED DESIGNfaculty.wwu.edu/.../website/images/UserCenteredDesign.pdf · 2015. 4. 1. · user-centered design a.k.a. human centered design digital media

DESIGNISM #9

DON’T FIND CUSTOMERS FOR YOUR PRODUCTS, FIND PRODUCTS FOR YOUR CUSTOMERS.– SETH GODIN