How Neuroscience and UX can impact Design

Celia Hodent, PhD.

Director of User Experience @ Epic Games

@CeliaHodent
 Our brains are biased …

Each card has a letter on one side and a number on the other side.

A C 3 7
(Wason, 1966 / Evans, 1993)

Which card(s) do you need to turn over to determine whether the following claim is true:
“If the card has a A on one side,
then it has a 3 on the other side”.
 Our brains are biased …

If A then → 3

A C 3 7
(Wason, 1966 / Evans, 1993)

Correct answer: A - 7
Correct answers < 10 % in Wason’s study
 How the brain processes info

PERCEPTION MEMORY
(input)
(synaptic modification)

INFLUENCING
FACTORS

INFO PROCESSING
 Perception: How it works
Information is organized through a 3-level process (example of vision):

COGNITION Knowledge: access to semantics

Organization of the visual field:

PERCEPTION the brain likes meaningful
patterns (shape)

Physics: orientation, spatial

SENSATION frequency, brightness …
 Perception: Limitations

 Top-down process in perception … the geek version

Street Fighter II characters as minimalized by artist Ashley Browning
Perception: Gestalt Theory

League of Legends
Application: Gestalt laws in menus

Far Cry 4
Application: Gestalt laws in menus

> > >

> > >

> > >

> > >

> > >

Application: Gestalt laws in menus
 Perception: Form Follows Function

Affordance = no need to learn Avoid multistability …

Perception: Form Follows Function

 Stereotypes to help identify the function

 Need to be learned

 Similar form for 2 different functions

iPhone OS 7
 Application: FFF in icon testing

Fortnite (pre-alpha)
 Application: FFF in icon testing

FORM = “It looks like a heart with an EKG graph inside”

FUNCTION = “ I expect using this ability would resuscitate
my character”
 Application: FFF in icon testing

Form (UI designer): Function (UI designer):

“Smoke bomb releasing a plume of smoke” “Throws a smoke bomb (Ninja ability)”

Form = 60%  to improve  Function = 75% because ambiguous form

 Application: FFF in icon testing
Form (UI designer): Function (UI designer):
“Bomb superimposed on an old-timey alarm clock” “Deploys the Matter Collector, which destroys and returns as
materials all objects within a given radius of the ‘blast’
(Outlander ability)”

 This icon needs a complete redesign.

 Limitations: Perception ≠ Reality

• Listen to this. How does the batcycle sound?

(The Dark Knight)

• What is it really?
 Shepard tone

• Shepard tone in Super Mario 64

Application: What the player perceives is what matters

Fortnite - shooting range gym level

 Perception: Reminder …

Perception
How it works
Input is processed
(in a nutshell)
Limitations Perception(s) ≠ Reality
(examples) Perception is subjective

Applications Use Gestalt laws

(examples) Form Follows Function
 How the brain processes info

PERCEPTION MEMORY
(input)
(synaptic modification)

INFLUENCING
FACTORS

INFO PROCESSING
Memory: How it works

SENSORY MEMORY
Part of perception
Importance of attention

WORKING MEMORY
Short-term – Easily disturbed
Requires heavy attentional resources

LONG-TERM MEMORY
Potentially unlimited
in time and space
 Memory: Limitations

Forgetting curve:

(Ebbinghaus, 1885)
 Memory: Limitations

Do you remember the iOS icons I showed you earlier?

 Memory: Limitations

Forgetting curve applied to games:

 Discrepancy when resuming:

the player can feel downgraded

1st game session x days lag 2nd game session

Application: Reduce the memory load

Assassin’s Creed
Application: Reduce the memory load

Fortnite
(pre-alpha)
 Application: Prioritize learning

Fortnite – pre-alpha
 Application: Prioritize learning

Prio Features to teach Difficulty Tutorial

order
2 Core movement and Easy – dynamic tip 2
combat

2 Scavenging Easy – dynamic tip 2

2
2 Crafting
Crafting Medium
Medium 2

2
2 Building
Building Hard
Hard 4

1
1 Home
Home Base
Base is
is Medium
Medium 1
player’s persona
player’s persona
3 Commanding a Medium
3 Commanding a Medium 3
roster of heroes
roster of heroes
 Application: Prioritize learning

Prio Features to teach Difficulty Tutorial Onboarding plan Narrative wrapper

order (player’s perspective)

1
1 Home
Home Base
Base is
is Medium
Medium 1
1 This
This is
isisme
me in
in the
the game.
game. II start
start by
by naming
naming and Player receives a distress beacon
player’s persona
This
choosing
me
a
in the
banner for
game.
my Home
I start
Base.
byand and discovers his/her Home Base to
Home Base is
player’s persona choosing a banner for my Home Base.
1 Medium 1 naming and choosing a banner for my command.
2
player’s persona
Core movement and Easy
2 Core movement and Easy –– dynamic
dynamic tip
tip 2
2 IHome Base.
know how to move and shoot, just give me a
2 Core movement and
combat Easy – dynamic tip 2 I know how to move and shoot, just give me a N/A
combat quick tip if necessary.
combat quick tip if necessary.

2
2 Scavenging
Scavenging Easy
Easy ––– dynamic
dynamic tip
tip 2
2
2 Scavenging Easy dynamic tip 2 II quite
quite naturally
naturally destroy
destroy the
the environment,
environment, just
just N/A
give me a quick tip that all is destroyable.
give me a quick tip that all is destroyable.
2 Crafting Medium 2
2 Crafting Medium 2 Crafting enables me to make more powerful The player needs a harvesting tool.
weapons and items. I must know how to do this Safe environment.
3 Commanding a Medium 3 to have fun in the game.
3
3 roster of heroes
Commanding
Commanding aa Medium
Medium 3
3 I’m
I’m managing
managing multiple
multiple heroes,
heroes, each
each having
having The player has to choose his/her
roster
roster of
of heroes
heroes specific
specific skills.
skills. first hero among 2 classes to send it
2 Building Hard 4 to the 1st mission.
2
2 Building
Building Hard
Hard 4
4 Building
Building enables
enables me
me to
to make
make forts
forts that
that protect
protect The player is in a pit and needs to
me
me from evil. I must know how to do this
from evil. I must know how to do this to
to have
have build stairs to escape and start
fun.
fun. exploring. Safe environment.
 Application: Prioritize learning

Boots on the ground first?

Home Base first?

Pros = Exciting action right away Pros =

• Sets the expectation correctly
Cons = Player can wrongly believe • Gives medium-term motivation
this first hero is the persistent
element Cons = Longer to start action
 Application: Prioritize learning

Verify your hypotheses in UX test early on:

• I clearly feel the impact of my progression in the game

• I know what to do to become more powerful in the game
• I clearly know which will be the 2-3 next things I’ll unlock in my Homebase
• …

And with analytics later on.

 Application: Prioritize learning

Prio Features to teach Difficulty Tutorial Onboarding plan Narrative wrapper

order (player’s perspective)

2 Scavenging Easy – dynamic tip 2 I quite naturally destroy the environment, just N/A
give me a quick tip that all is destroyable.

2 Crafting Medium 2 Crafting enables me to make more powerful The player needs a harvesting tool.
weapons and items. I must know how to do this Safe environment.
to have fun in the game.
2 Building Hard 4 Building enables me to make forts that protect The player is in a pit and needs to
me from evil. I must know how to do this to have build stairs to escape and start
fun. exploring. Safe environment.
 Memory: Reminder …

Perception Memory
How it works
Input is processed Encoding and Storage
(in a nutshell)
Limitations Perception(s) ≠ Reality
Forgetting Curve
(examples) Perception is subjective

Applications Use Gestalt laws Reduce memory load

(examples) Form Follows Function Prioritize learning
 How the brain processes info

PERCEPTION MEMORY
(input)
(synaptic modification)

INFLUENCING
FACTORS

INFO PROCESSING
Pick one card:
I bet I can guess which card you picked and make it disappear:

Yes, but actually all the cards have changed …

→ change blindness
→ inattentional blindness
BTW, did you notice the gorilla in this image earlier?
 Attention: How it works

We are not carefully scanning all of our environment …

Rather, attention works like a spotlight.

 Attention: Limitations

Low attention span – Multitasking is a myth …

 Attention: Limitations

Fortnite
(Sept 2014)

Multitask
We can hardly pay attention to tutorial texts
when busy killing zombies …
 Application: Minimum workload
Example of the ‘red overload’ problem:

Unreal
Tournament 3
 Application: Minimum workload

Reducing the ‘red overload’ in Fortnite:

Fortnite (Jan 2014) (March 2015)

 Application: Context and Meaning
The deeper you process information (= focus your attention)
the better you learn/retain …
Context = learning by doing
≠ narrative
Meaning = worthwhile now (for player’s life/mission/goal)

Far Cry 3: Blood Dragon Call of Duty 2 Uncharted 2

No context, no meaning (but hilarious ) Context, yet weak meaning Context and meaning

LEARN THEN DO LEARNING BY DOING

(shallow process, (deeper process when in context,
weak motivation) greater motivation with meaning)
 Application: Context and Meaning

Building tutorial in Fortnite: towards more meaning

Sep 2014 Feb 2015

• Player told to protect a tractor: misleading. • Player told to build his/her way out.
• Build protection around barn: unintuitive. • Player has all the time needed.
• Player in stressful situation (timer) and set for failure. • Set for success.

→ in context but poor and misleading meaning → greater meaning

 Application: Context and Meaning

Crafting tutorial in Fortnite: towards more meaning

Nov 2014 Feb 2015

• Player is asked to do things step by step • Player is clearly told the purpose for a tutorial.
without clearly understanding the purpose • Offers more freedom.
(craft a pickaxe) → greater meaning
→ in context but poor meaning
 Attention: Reminder …

Perception Memory Attention

How it works
Input is processed Encoding and Storage Spotlight
(in a nutshell)
Limitations Perception(s) ≠ Reality Inattentional blindness
Forgetting Curve
(examples) Perception is subjective Low attention span

Applications Use Gestalt laws Reduce memory load Minimum workload

(examples) Form Follows Function Prioritize learning Context & Meaning

Brain limitations are at the core of UX heuristics …

IUMRINC TQ GQNGIUSIQNS
 To conclude …

The gamer’s brain is heavily biased …

… so is the developer’s.
 User eXperience
Usability GameFlow
 Signs & Feedback  Perceived Pacing
 Clarity (challenge, learning curve, surprises, …)

 Form Follows Function  Motivation

 Consistency (competence, autonomy, relatedness)

 Minimum Workload  Emotion

 Error Prevention / Recovery (game feel, implicit motivation, …)

 Flexibility

@CeliaHodent