Cognitive Science Perspective on

User eXperience

1

Presented by: Hamed Abdi

ignore

—Frank Chimero (Design Director)

2

logicalthink act

—Paul Boag (UX Consultant & Expert)

3

Foundations of WorkShop

• Context Strategy

• Research Method

• User Interface (UI)

• User Experience (UX)

• Interaction Design (Ixd)

• Accessibility & Usability

• Customer Journey Mapping

• Natural User Interface (NUI)

• Information Architecture (IA)

• User Centered Design (UCD)

• Brain-Computer Interface (BCI)

• Search Engine Optimization (SEO)

• Human-Computer Interaction (HCI)

4

UX

5

User Experience Design Process

UI

6

Google Newsstand

UI

7

Filter Menu

UI

8

City intro

UI

9

Weather App

UI

10

Menu

AntiDesign

11

Brutalism

12

Craigslist

• Users: 60 Million users

• Monthly Pageviews: 50 Billion

• Monthly Ads posted: 80 Million ads

• Revenue (2016): $690 Million

• Estimated value: $3 Billion

IxD

13

The Social Swipe

CS

14

Context Strategy

• Personal

• Environmental

• Social & Cultural

• Technological

• Temporal

• Business

CJM

15

Customer Journey Map

Customer journey maps combine two powerful instruments (storytelling and visualization) in order to helpteams understand and address customer needs.

Goals of customer journey maps:

• Creating empathy

• Driving conversation and engagement

• Building consensus

• Revealing opportunities

Maps

16

UX Mapping

• Empathy mapping

• Customer journey mapping

• Experience mapping

• Service blueprinting

CJM

17

Customer Journey Map

The framework:

1. Persona

2. Scenario

3. Phases of the journey

4. Actions

5. Thoughts

6. Emotional experience

7. Opportunities

8. Internal ownership

IA

18

Information Architecture

Five components of information architecture:

• Structure types: Hierarchy, linear, and web

• Organization schemes: Topic, task, format, audience, alphabet, time, geographical, attributes, tags,and popularity

• Label names: Being specific vs. concise

• Search: Designing search for content to be found

• Logic: Taxonomy and metadata, when and why they're needed

IA

19

Information Architecture

Designing information architecture:

• Mental models and scenarios

• Domain modeling and task flow sketching

• Card sorting method

Evaluating information architecture:

• Identifying issues and potential solutions

• Measuring baseline performance

• Testing structure, schemes, and labels

IA

20

Information Architecture

vs.

vs.

vs.

Research Methods

QualitativeQuantitative

Research Methods

Research Methods

• Qual data offer a direct assessment of the usability of a system: researchers will observeparticipants struggle with specific UI elements and infer which aspects of the design areproblematic and which work well.

• Quant data offer an indirect assessment of the usability of a design. They can be based onusers’ performance on a given task (e.g., task-completion times, success rates, number oferrors) or can reflect participants’ perception of usability (e.g., satisfaction ratings).

Research Method

24

Qualitative Research Quantitative Research

Questions answered Why? How many and how much?

Goals

Both formative and summative:

• inform design decisions

• identify usability issues and find solutions

for them

Mostly summative:

• evaluate the usability of an existing site

• track usability over time

• compare site with competitors

• compute ROI

When it is usedAnytime: during redesign, or when you

have a final working product

When you have a working product (either at

the beginning or end of a design cycle)

Outcome

Findings based on the researcher’s

impressions, interpretations, and prior

knowledge

Statistically meaningful results that are likely

to be replicated in a different study

Methodology

• Few participants

• Flexible study conditions that can be

adjusted according to the team’s needs

• Many participants

• Well-defined, strictly controlled study

conditions

Quantifying User Research

Research Method

25

Usa

bil

ity T

est

ing •Sample Sizes

•Representativeness

and Randomness

•Data Collection

•Completion Rates

•Usability Problems

•Task Time

•Errors

•Satisfaction Ratings

•Combined Scores

A/B

Test

ing •Clicks, Page Views,

and Conversion

Rates

Su

rvey D

ata •Rating Scales

•Net Promoter

Scores

•Comments and

Open-ended Data

Req

uir

em

en

ts G

ath

eri

ng •UI Behavior Matrix

Research Method

26

Research Method

27

Project Stages

Discover

Fie

ld s

tud

y

Dia

ry s

tud

y

Use

r in

terv

iew

Sta

keh

old

er

inte

rvie

w

Req

uir

em

en

ts &

co

nst

rain

ts g

ath

eri

ng

Explore

Co

mp

eti

tive a

naly

sis

Desi

gn

revie

w

Pers

on

a b

uild

ing

Task

an

aly

sis

Jou

rney m

ap

pin

g

Pro

toty

pe f

eed

back

& t

est

ing

(cl

ickab

le

or

pap

er

pro

toty

pes)

Wri

te u

ser

sto

ries

Card

so

rtin

g

Test

Qu

alita

tive

usa

bilit

y t

est

ing

(in

-pers

on

or

rem

ote

)

Ben

chm

ark

test

ing

Acc

ess

ibilit

y e

valu

ati

on

Listen

Su

rvey

An

aly

tics

revie

w

Searc

h-l

og

an

aly

sis

Usa

bilit

y-b

ug

revie

w

Fre

qu

en

tly-a

sked

-qu

est

ion

s (F

AQ

)

revie

w

Research Method

28

Most Common UX Methods

1. Usability-Lab Studies: participants are brought into a lab, one-on-one with a researcher, and givena set of scenarios that lead to tasks and usage of specific interest within a product or service.

2. Ethnographic Field Studies: researchers meet with and study participants in their naturalenvironment, where they would most likely encounter the product or service in question.

3. Participatory Design: participants are given design elements or creative materials in order toconstruct their ideal experience in a concrete way that expresses what matters to them most and why.

4. Focus Groups: groups of 3–12 participants are lead through a discussion about a set of topics, givingverbal and written feedback through discussion and exercises.

5. Interviews: a researcher meets with participants one-on-one to discuss in depth what the participantthinks about the topic in question.

Research Method

29

Most Common UX Methods

6. Eyetracking: an eyetracking device is configured to precisely measure where participants look asthey perform tasks or interact naturally with websites, applications, physical products, or environments.

7. Usability Benchmarking: tightly scripted usability studies are performed with several participants,using precise and predetermined measures of performance.

8. Moderated Remote Usability Studies: usability studies conducted remotely with the use of toolssuch as screen-sharing software and remote control capabilities.

9. Unmoderated Remote Panel Studies: a panel of trained participants who have video recordingand data collection software installed on their own personal devices uses a website or product whilethinking aloud, having their experience recorded for immediate playback and analysis by the researcheror company.

Research Method

30

Most Common UX Methods

10. Concept Testing: a researcher shares an approximation of a product or service that captures the keyessence (the value proposition) of a new concept or product in order to determine if it meets the needsof the target audience; it can be done one-on-one or with larger numbers of participants, and either inperson or online.

11. Diary/Camera Studies: participants are given a mechanism (diary or camera) to record and describeaspects of their lives that are relevant to a product or service, or simply core to the target audience;diary studies are typically longitudinal and can only be done for data that is easily recorded byparticipants.

12. Customer Feedback: open-ended and/or close-ended information provided by a self-selectedsample of users, often through a feedback link, button, form, or email.

13. Desirability Studies: participants are offered different visual-design alternatives and are expected toassociate each alternative with a set of attributes selected from a closed list; these studies can be bothqualitative and quantitative.

Research Method

31

Most Common UX Methods

14. Card Sorting: a quantitative or qualitative method that asks users to organize items into groups andassign categories to each group. This method helps create or refine the information architecture of asite by exposing users’ mental models.

15. Clickstream Analysis: analyzing the record of screens or pages that users clicks on and sees, asthey use a site or software product; it requires the site to be instrumented properly or the application tohave telemetry data collection enabled.

16. A/B Testing (also known as “multivariate testing,” “live testing,” or “bucket testing”): amethod of scientifically testing different designs on a site by randomly assigning groups of users tointeract with each of the different designs and measuring the effect of these assignments on userbehavior.

17. Email Surveys: a survey in which participants are recruited from an email message.

Research Method

32

Most Common UX Methods

18. Unmoderated UX Studies: a quantitative or qualitative and automated method that uses aspecialized research tool to captures participant behaviors (through software installed on participantcomputers/browsers) and attitudes (through embedded survey questions), usually by giving participantsgoals or scenarios to accomplish with a site or prototype.

19. True-Intent Studies: a method that asks random site visitors what their goal or intention is uponentering the site, measures their subsequent behavior, and asks whether they were successful inachieving their goal upon exiting the site.

20. Intercept Surveys: a survey that is triggered during the use of a site or application.

Research Method

33

Research Method

34

Research Methods

The primary measures of standardized questionnaire quality are reliability (consistency of measurement) and validity (measurement of the intended attribute)

Standardized Usability Questionnaires

Research Method

36

Poststudy

Questionnaires

•QUIS

• SUMI

• PSSUQ

• SUS

Post-Task

Questionnaires

• ASQ

• SEQ

• SMEQ

• ER

•UME

Questionnaires for

Assessing Perceived

Usability of Websites

•WAMMI

• SUPR-Q

•UPWQ

• ISQ

• CBP

•WIS

Other Questionnaires

of Interest

• CSUQ

•USE

•UMUX

•HQ

• ACSI

•NPS

• CxPi

• TAM

Research Method

37

ethical

UXPA (User Experience Professionals Association) Ethical Principles:• Act in the best interest of everyone

• Be honest with everyone

• Do no harm and if possible provide benefits

• Act with integrity

• Avoid conflicts of interest

• Respect privacy, confidentiality, and anonymity

• Provide all resultant data

https://uxpa.org/resources/uxpa-code-professional-conduct

FACT

Measuring Tools

accurate worthexpert

—Grace Hopper (Computer Scientist)

40

UX Tools

41

UX Tools For UX Designers

A/B

or

Sp

lit

Testi

ng

Accessib

ilit

y T

esti

ng

Desig

n P

roto

typ

ing

Evalu

ati

ng

Desig

n

Evalu

ati

ng

In

form

ati

on

A

rch

ite

ctu

re

Heatm

ap

s,

Mo

use-t

rackin

g o

r S

yn

theti

c E

ye

-tra

ckin

g

Mo

bile A

pp

Testi

ng

To

ols

Pro

cess A

ids

Rem

ote

Researc

h

Researc

h N

ote

takin

g

Scre

en

Cap

ture

Sketc

hin

g &

Vis

ual T

hin

kin

g

Su

rve

yin

g U

se

rs

Usab

ilit

y T

esti

ng

Web

An

aly

tics

Wir

efr

am

ing

& D

iag

ram

min

g

UX Tools

42

UX Tools

43

UX Tools

44

Eye tracking is the process of measuring either the point of gaze

(where one is looking) or the motion of an eye relative to the

head.

The most commonly visualizations methods are:

• Animated representations of a point on the interface

• Static representations of the saccade path

• Heat maps

• Blind zones maps, or focus maps

UX Tools

45

UX Tools

46

UX Tools

47

Engagement

• Number of Fixation

• Total dwell time

• Percentage of time on an area

Processing

• Fixation

• Duration

Findability

• Time to first fixation

• Number of fixations

• Prior to first fixation

Processing Order

• Gaze path

Comprehension

• Repeat fixations

Workload/Excitement

• Pupil dilation

UX Tools

48

UX Tools

49

UX Tools

50

UX Tools

51

UX Tools

52

UX Tools

53

UX Tools

54

“

55

“Design is not just what it looks like and feels like. Design is how it works.”

Cognitive Science

56

simplesimple

—Marvin Minsky (Cognitive Scientist)

57

usebrain visual system memory Emotion

Question

Imaging

59

Types of NeuroImaging

Neuron

60

Structure of Neuron

Brain

61

HindBrain (Reptilian):

• Common to all animals

• Basic function (heart rate, breathing, body

temperature)

MidBrain (Mammalian):

• Limbic system

• Emotional functions (fear, happy, sad, …)

• Risk and reward

ForeBrain (Neocortex):

• Higher cognitive function

• Problem solving

• Social cognition

• Language and abstract thought

Brain Structure

62

63

Brain Structure

Cortex

64

Homunculus

Senses

65

Eye

66

Rods & Cones

Rods & Cones

67

Some fact

Vision

68

Visual Perception

Visual perception is the end product of vision” It can

be described as the way the brain interprets what

the eyes see.

Perceptual Processing Categories:

• Visual Discrimination: ability to be aware of the

distinctive features of forms including shape,

orientation, size, and color.

• Visual Figure Ground: ability to distinguish an

object from irrelevant background information.

• Visual Closure: ability to recognize a complete

feature from fragmented information.

Vision

69

Two visual systems

Vision

70

Visual perception Process

• Bottom-up:

• Low level features

• Patterns

• Objects

• Top-down:

• Task or goal Oriented

• Holistic

Gestalt

71

Gestalt

72

Gestalt

73

Gestalt laws

• Law of Proximity

• Law of Similarity

• Law of Figure and Ground

• Law of Continuity

• Law of Closure

• Law of Simplicity

Gestalt

74

Law of Proximity

Elements that are placed close to each other will often be perceived as one group.

Gestalt

75

Law of Similarity

Objects that look alike, with similar components or attributes, are more likely to be organized together.

Gestalt

76

Law of Continuity

Objects will be grouped as a whole if they are co-linear, or follow a direction

Gestalt

77

Law of Figure and Ground

Viewers will perceive an object (figure) and a surface (ground) even in shapes are grouped together.

Gestalt

78

Law of Closure

In perception there is the tendency to complete unfinished objects. We tend to ignore gaps and complete

contour lines.

Gestalt

79

Law of Pragnanz or Simplicity

Figures are seen as their simple elements instead of complicated shapes.

Vision

80

Visual Attention

Illusions

81

Illusions

82

Functional

83

Memory

84

Emotion

85

laziness predict

minimal effort do lots of things

—Greg Madison (VR designer at Google Labs)

87

Social Device

88

Designing experiences for nearby device ecosystems

Data

89

Exploring what data means for the people living

MemoryDialogue

90

Exploring artefact-based memory sharing

Medical

91

Touchless Interaction in Medical Settings

Display

92

Seamlessly integrated displays shaped around us

Display

93

NUX/NUI

94

Voice Interaction

NUX/NUI

95

GUX/GUI

96

Motion sensing and gesture

recognition as part of NUX/NUI

interactions introduce new

approaches to interactive user

experience in the areas that

require audience attraction and

involvement, such as education,

entertainment, public relations,

and marketing.

Presentations, training sessions,

and promotional events can

become highly interactive and

engaging with NUX/NUI applied.

Wearable

97

IoT

98

VR/AR

99

Cyborg

100

predict create

—Abraham Lincoln (Cognitive Scientist)

101

Thank you for Attention!