1 / 32

Perception Concepts in User-Interface Design

Riccardo Gagliarducci Blender Conference 2007. Perception Concepts in User-Interface Design. Index. Perception Concepts in User-Interface Design. System S of vision Working through video games. Asymmetrical talk about:. The concept behind Geometry (layout) ‏ RGB schemes. Disclaimer.

bert
Download Presentation

Perception Concepts in User-Interface Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Index Perception Concepts in User-Interface Design • SystemS of vision • Working through video games Asymmetrical talk about: • The concept behind • Geometry (layout)‏ • RGB schemes

  3. Disclaimer... Perception Concepts in User-Interface Design The author declines any responsibility ... His EnglishNot exhaustive talkNot (actual) Blender orientedBeing repetitive / expressing known concept

  4. Brain Perception Concepts in User-Interface Design Part I

  5. Systems of vision: the beginning. Perception Concepts in User-Interface Design Part I Brain The story of Dee and Carlo

  6. Perception Concepts in User-Interface Design Part I Brain

  7. SystemS of Vision Perception Concepts in User-Interface Design Part I Brain 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?

  8. Perception Concepts in User-Interface Design Part I Brain 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

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

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

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

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

  13. Perception Concepts in User-Interface Design Part I Brain Video games How to “see” what brain is doing? • Functional magnetic resonance imaging • Electroencephalography (EEG)‏ • Magnetoencephalography (MEG) (what is that??)‏ OCULAR MOVEMENTS

  14. Perception Concepts in User-Interface Design Part I Brain Eye tracking

  15. Perception Concepts in User-Interface Design Part I Brain 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

  16. Perception Concepts in User-Interface Design Part I Brain Video games Simplicity Emotional design Distribution Golden Ratio Cool interface rules Fibonacci Fashion Colours Affordance EMOTION & COGNITION

  17. Screen Perception Concepts in User-Interface Design Part II

  18. 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)‏ Internal (street signals)‏ External (import, export)‏ Blender play button

  19. Perception Concepts in User-Interface Design Part II Screen 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.

  20. 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?)‏

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

  22. Perception Concepts in User-Interface Design Part II Screen 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

  23. 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: Identify target/objective Analyze the choices Choose Act The law applies to linear action-reaction situations only. Use it to define menus and sub-menus.

  24. Perception Concepts in User-Interface Design Part II Screen Confirmations, tolerances and errors We are humans...

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

  26. Perception Concepts in User-Interface Design Part II Screen Tolerances Are useful to reduce the consequences of errors. • Undo for user error • Auto-Backup / Time-Backup for user / system error

  27. Perception Concepts in User-Interface Design Part II Screen Errors “Human errors” often are “design errors” • Oversights • Lack of attention • Unintentional, unconscious • Changes during routine operations • Errors • Exhaustion • Conscious • Knowledge lack

  28. Perception Concepts in User-Interface Design Part II Screen 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

  29. Perception Concepts in User-Interface Design Part I Brain 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.

  30. Perception Concepts in User-Interface Design Part II Screen 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

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

More Related