Perception Concepts in User-Interface Design

Riccardo Gagliarducci

Blender Conference 2007

Index SystemS of vision

Working through video games

Perception Conceptsin User-Interface Design

The concept behind Geometry (layout) RGB schemes

Asymmetrical talk about:

Perception Conceptsin User-Interface Design

Disclaimer...The author declines any responsibility ...

His EnglishNot exhaustive talkNot (actual) Blender orientedBeing repetitive / expressing known concept

Brain

Perception Conceptsin User-Interface Design

Part I

Systems of vision: the beginning.

Perception Conceptsin User-Interface Design

Part IBrain

The story of Dee and Carlo

Perception Conceptsin User-Interface Design

Part IBrain

SystemS of Vision

Perception Conceptsin User-Interface Design

Part IBrain

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?

2 visual systems

Perception Conceptsin User-Interface Design

Part IBrain

- 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

Working through video games

Perception Conceptsin User-Interface Design

Part IBrain

Vertical Software:targeted (CAD)

Horizontal Software:general purpose (Text editor)

WHERE ARE THE VIDEO GAMES?NON PRODUCTIVE ACTIVITY

Classical SW categorization:

Video games

Perception Conceptsin User-Interface Design

Part IBrain

WHERE ARE THE VIDEO GAMES?

Interaction Based SW categorization:

MIXED ACTIVITY

User Input:Writer / Word

System Output:Radar / Health

Video games

Perception Conceptsin User-Interface Design

Part IBrain

ISO 9241 “Ergonomics of human-system interaction” Parts 10 - 17

EfficacyEfficiency (business application)Satisfaction (hey, Video games are here!)

Immersion *StimulationChallenge sensationHigh learning curve

How to provide this?How to know how much our proposal is appropriate?

Video games

Perception Conceptsin User-Interface Design

Part IBrain

* Immersion is a state......between boredom and stress.

Challenges in which you can winConcentration without distractionsClear targetReal time feedback on action and performanceForgetting:

Everyday problemsPhysical needsTime

Video games

Perception Conceptsin User-Interface Design

Part IBrain

OCULAR MOVEMENTS

Functional magnetic resonance imagingElectroencephalography (EEG)

Magnetoencephalography (MEG) (what is that??)

How to “see” what brain is doing?

Eye tracking

Perception Conceptsin User-Interface Design

Part IBrain

Video games

Perception Conceptsin User-Interface Design

Part IBrain

With OCULAR MOVEMENTS we can control:

How user searches for informationsHow informations are treatedAttention ratesWorkload (later explained)Emotional load (pupil diameter)

Is constant for expert usersHas enourmous peaks in newbies

Video games

Perception Conceptsin User-Interface Design

Part IBrain

Emotional design

Cool interface rules

EMOTION & COGNITION

Golden Ratio

FibonacciFashion

Simplicity

Colours

Distribution

Affordance

Screen

Perception Conceptsin User-Interface Design

Part II

Coherence

Aesthetic (logo, product & website)

Functional (play, stop, fwd, rew, switch off)

Internal (street signals)

External (import, export)

Perception Conceptsin User-Interface Design

Part IIScreen

Blender play button

To express similar part in a similar way.

Workload

Cognitive workload – the amount of mental activity (perception, memory, concentration)

Physical workload – the amount of physical activity ( length, repetition, force)

Perception Conceptsin User-Interface Design

Part IIScreen

...is the effort needed to perform an action.

Workload is proportional with errors.

80/20

Use it to build the menus.80% of the time we use 20% of functions.

Perception Conceptsin User-Interface Design

Part IIScreen

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

Talking big numbers, most effects are provoked by few causes.

(80% of the restaurant orders make the chief-cooks cook only the 20% of tasty plates he can cook?)

Usability Vs Flexibility

Perception Conceptsin User-Interface Design

Part IIScreen

Choose usability when you have many users, unclear target or moving target;

Choose flexibility to deal with experienced users and mature products.

Fitts's law

Distance Dimension

Perception Conceptsin User-Interface Design

Part IIScreen

Time to reach a target is determined by:

The law applies to pointing actions.

Have big-near controls for quick-frequent use

Hick's law

Perception Conceptsin User-Interface Design

Part IIScreen

Time to reach a target is determined by the number of alternatives.

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.

Users have to:

Confirmations, tolerances and errors

Perception Conceptsin User-Interface Design

Part IIScreen

We are humans...

ConfirmationsAre useful to avoid unintentional actions leading

to dangerous and irreversible operations.

Perception Conceptsin User-Interface Design

Part IIScreen

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...

TolerancesAre useful to reduce the consequences of

errors.

Perception Conceptsin User-Interface Design

Part IIScreen

Undo for user error

Auto-Backup / Time-Backup for user / system error

Errors“Human errors” often are “design

errors”

Perception Conceptsin User-Interface Design

Part IIScreen

Oversights Lack of attention Unintentional, unconscious Changes during routine operations

Errors Exhaustion Conscious Knowledge lack

Errors

Perception Conceptsin User-Interface Design

Part IIScreen

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

Colour

Perception Conceptsin User-Interface Design

Part IBrain

SaturationPure colours attract attention. Use them with care.Desaturated colours look more “professional”.

Do not rely on colour communication only!Colour significance may differ in diverse culturesPeople may be colour blind

Generate automatic affective inferences

Be careful: colours may interfere with shapes or text.

Colour

Perception Conceptsin User-Interface Design

Part IIScreen

...to find associations rely on:Contiguous coloursComplementary (opposite) coloursOther series suggested by the squares, rectangles or triangles inscribed in the colour circle

Perception Conceptsin User-Interface Design

But this is theory......doing it is harder!

The End

Contact me : riccardo.gagliarducci(at)gmail.com

Full bibliography in the presentation notes.