Perception Concepts in User-Interface Design Riccardo Gagliarducci Blender Conference 2007.

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:


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

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

Brain


Part I

Systems of vision: the beginning.


Part IBrain

The story of Dee and Carlo


Part IBrain

SystemS of Vision


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


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


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


Part IBrain

WHERE ARE THE VIDEO GAMES?

Interaction Based SW categorization:

MIXED ACTIVITY

User Input:Writer / Word

System Output:Radar / Health

Video games


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


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


Part IBrain

OCULAR MOVEMENTS

Functional magnetic resonance imagingElectroencephalography (EEG)

Magnetoencephalography (MEG) (what is that??)

How to “see” what brain is doing?

Eye tracking


Part IBrain

Video games


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


Part IBrain

Emotional design

Cool interface rules

EMOTION & COGNITION

Golden Ratio

FibonacciFashion

Simplicity

Colours

Distribution

Affordance

Screen


Part II

Coherence

Aesthetic (logo, product & website)

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

Internal (street signals)

External (import, export)


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)


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.


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


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


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


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


Part IIScreen

We are humans...

ConfirmationsAre useful to avoid unintentional actions leading

to dangerous and irreversible operations.


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.


Part IIScreen

Undo for user error

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

Errors“Human errors” often are “design

errors”


Part IIScreen

Oversights Lack of attention Unintentional, unconscious Changes during routine operations

Errors Exhaustion Conscious Knowledge lack

Errors


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


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


Part IIScreen

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


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

The End

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

Full bibliography in the presentation notes.

Perception Concepts in User-Interface Design Riccardo Gagliarducci Blender Conference 2007.

Documents

Transcript of Perception Concepts in User-Interface Design Riccardo Gagliarducci Blender Conference 2007.