Perception Concepts in UserInterface Design Riccardo Gagliarducci Blender

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

Perception Concepts in User-Interface Design Index Asymmetrical talk about: System. S 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 System. S 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. . . 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.