Transcript Perception Conceptsin User

Perception Concepts in User-Interface Design
Riccardo Gagliarducci
Blender Conference 2007
Perception Concepts
in User-Interface Design
Index
Asymmetrical talk about:

SystemS of vision

Working through video games



The concept behind
Geometry (layout)
RGB schemes
Perception Concepts
in User-Interface Design
Disclaimer...
The author declines any responsibility ...
His English
Not exhaustive talk
Not (actual) Blender oriented
Being repetitive / expressing known concept
Perception Concepts
in User-Interface Design
Part I
Brain
Perception Concepts
in User-Interface Design
Systems of vision: the beginning.
The story of Dee and Carlo
Part I
Brain
Perception Concepts
in User-Interface Design
Part I
Brain
Perception Concepts
in User-Interface Design
SystemS of Vision
Already been studied:

Eye's anatomy

Creation of the image on retina

Signal's transmission

Brain-neural connection in babies

Optical-cognitive illusions

Bla bla bla bla bla...
What is new?
Part I
Brain
Perception Concepts
in User-Interface Design
2 visual systems
- Vision for perception
light perception is blended with
memories, emotions, expectations
ALLOWS US TO PLAN
- Vision for action
unconscious, directly connected with
brain part involved in movement
ALLOWS US TO BE QUICK
Part I
Brain
Perception Concepts
in User-Interface Design
Part I
Brain
Working through video games
Classical SW categorization:
Vertical Software:
targeted (CAD)
Horizontal Software:
general purpose (Text editor)
WHERE ARE THE VIDEO GAMES?
NON PRODUCTIVE ACTIVITY
Perception Concepts
in User-Interface Design
Part I
Brain
Video games
Interaction Based SW categorization:
User Input:
Writer / Word
System Output:
Radar / Health
WHERE ARE THE VIDEO GAMES?
MIXED ACTIVITY
Perception Concepts
in User-Interface Design
Part I
Brain
Video games
ISO 9241 “Ergonomics of human-system interaction” Parts 10 - 17
Efficacy
Efficiency (business application)
Satisfaction (hey, Video games are here!)

Immersion *
Stimulation
Challenge sensation
High learning curve

How to provide this?
How to know how much our proposal is appropriate?
Perception Concepts
in User-Interface Design
Part I
Brain
Video games
* Immersion is a state......between boredom and stress.
Challenges in which you can win
Concentration without distractions
Clear target
Real time feedback on action and performance
Forgetting:

Everyday problems
Physical needs
Time

Perception Concepts
in User-Interface Design
Video games
How to “see” what brain is doing?
Functional magnetic resonance imaging
Electroencephalography (EEG)

Magnetoencephalography (MEG) (what is that??)

OCULAR MOVEMENTS
Part I
Brain
Perception Concepts
in User-Interface Design
Eye tracking
Part I
Brain
Perception Concepts
in User-Interface Design
Video games
With OCULAR MOVEMENTS we can control:
How user searches for informations
How informations are treated
Attention rates
Workload (later explained)
Emotional load (pupil diameter)

Is constant for expert users
Has enourmous peaks in newbies

Part I
Brain
Perception Concepts
in User-Interface Design
Part I
Brain
Video games
Emotional design
Simplicity
Distribution
Golden Ratio
Cool interface rules
Fibonacci
Fashion
Colours
Affordance
EMOTION & COGNITION
Perception Concepts
in User-Interface Design
Part II
Screen
Perception Concepts
in User-Interface Design
Part II
Screen
Coherence
To express similar part in a similar way.
Aesthetic (logo, product & website)
Functional (play, stop, fwd, rew, switch off)
Blender play button
Internal (street signals)
External (import, export)
Perception Concepts
in User-Interface Design
Workload
...is the effort needed to perform an action.

Cognitive workload – the amount of mental activity
(perception, memory, concentration)

Physical workload – the amount of physical activity (
length, repetition, force)
Workload is proportional with errors.
Part II
Screen
Perception Concepts
in User-Interface Design
Part II
Screen
80/20
Talking big numbers, most effects are provoked by few causes.
80% of the use of a product involve the 20% of functions.
80% of errors is caused by 20% of components
80% of the pay-off of company comes from the 20% or the
products
Use it to build the menus.
80% of the time we use 20% of functions.
(80% of the restaurant orders make the chief-cooks cook only the 20% of tasty plates he can cook?)
Perception Concepts
in User-Interface Design
Part II
Screen
Usability Vs Flexibility
Choose usability when you have many users, unclear target or moving target;
Choose flexibility to deal with experienced users and mature products.
Perception Concepts
in User-Interface Design
Fitts's law
Time to reach a target is determined by:


Distance
Dimension
The law applies to pointing actions.
Have big-near controls for quick-frequent use
Part II
Screen
Perception Concepts
in User-Interface Design
Part II
Screen
Hick's law
Time to reach a target is determined by the number of alternatives.
Users have to:
1. Identify target/objective
2. Analyze the choices
3. Choose
4. Act
The law applies to linear action-reaction situations only.
Use it to define menus and sub-menus.
Perception Concepts
in User-Interface Design
Part II
Screen
Confirmations, tolerances and errors
We are humans...
Perception Concepts
in User-Interface Design
Part II
Screen
Confirmations
Are useful to avoid unintentional actions leading to
dangerous and irreversible operations.

Dialogue window


Erase all files? ( Yes/No is better than Ok/Cancel)
Add more steps to perform the action (complicate the action)

Enter a password


Re-Enter the password
Nuclear bombs control...
Perception Concepts
in User-Interface Design
Tolerances
Are useful to reduce the consequences of errors.

Undo for user error

Auto-Backup / Time-Backup for user / system error
Part II
Screen
Perception Concepts
in User-Interface Design
Errors
“Human errors” often are “design errors”


Oversights

Lack of attention

Unintentional, unconscious

Changes during routine operations
Errors

Exhaustion

Conscious

Knowledge lack
Part II
Screen
Perception Concepts
in User-Interface Design
Errors


To avoid oversights

Control functions' accessibility

Insert confirmations messages to “break” the action

Use constraints
To avoid errors

Reduce stress and cognitive workload

Repete “danger” messages

Request multiple confirmations
Part II
Screen
Perception Concepts
in User-Interface Design
Colour
Generate automatic affective inferences
Do not rely on colour communication only!
Colour significance may differ in diverse cultures
People may be colour blind

Saturation
Pure colours attract attention. Use them with care.
Desaturated colours look more “professional”.

Be careful: colours may interfere with shapes or text.
Part I
Brain
Perception Concepts
in User-Interface Design
Colour
...to find associations rely on:
Contiguous colours
Complementary (opposite) colours
Other series suggested by the squares, rectangles or
triangles inscribed in the colour circle

Part II
Screen
Perception Concepts
in User-Interface Design
The End
But this is theory...
...doing it is harder!
Contact me : riccardo.gagliarducci(at)gmail.com
Full bibliography in the presentation notes.