Introduction Models & Metaphors Norman’s Gulfs Cues Errors Metaphors Jörg Cassens Tutorial References SoSe 2019 Contextual Design of Interactive Systems SoSe 2019 Jörg Cassens – Models & Metaphors 1 / 66
Introduction Norman’s Gulfs Cues Errors Metaphors Introduction Tutorial References SoSe 2019 Jörg Cassens – Models & Metaphors 2 / 66
Choice of Represented Model Introduction Norman’s Gulfs Cues Errors Metaphors Tutorial References A comparison of the implementation model, mental model, and represented model. (Cooper et al., 2014) SoSe 2019 Jörg Cassens – Models & Metaphors 3 / 66
Interaction Styles Introduction Norman’s Gulfs We look at the following Interaction Styles Cues Command language/command line Errors Menus & forms Metaphors Direct manipulation Tutorial Touch and Mouse References Also interesting, but outside the scope today Other forms of graphical interaction 3D-Gestures Natural Language Interfaces Explicit vs. implicit interaction Behavioural Interfaces SoSe 2019 Jörg Cassens – Models & Metaphors 4 / 66
Command Line Interface Introduction User types in commands in an artificial language Norman’s Gulfs Unix shell ( ls -l *.java ) Cues Search engine query language ( AND, OR ) Errors SQL ( SELECT FROM Book WHERE price > 100. ) Metaphors SPARQL ( SELECT ?name ?email WHERE {?person a foaf:Person. Tutorial ?person foaf:mbox ?email.} ) ?person foaf:name ?name. References Command syntax is important Powerful tool with a steep learning curve – find all .tex files that mention the word foo in a given subtree and replace those occurrences with bar When designing a command language, the key problem is the syntax Task analysis drives the choice of commands, the names you give them, the parameters they have, and the syntax for fitting them together SoSe 2019 Jörg Cassens – Models & Metaphors 5 / 66
Menus & Forms Introduction Norman’s Gulfs User is prompted to choose from menus and fill in forms Cues web sites “before Web 2.0” Errors dialog boxes Metaphors Navigation structure is important Tutorial Wizard: linear sequence of forms References The navigation structure is the important design problem for menu/form interfaces Task analysis tells you what choices need to be available, where they should be placed in a menu tree, and what data types or possible responses need to be available in a form SoSe 2019 Jörg Cassens – Models & Metaphors 6 / 66
Direct Manipulation Introduction User interacts with visual representation of data objects (based on Norman’s Gulfs Shneiderman and Plaisant (2005)): Cues Continuous visual representation Errors Metaphors Verbal or iconic Tutorial Physical actions or labeled button presses References most direct kind of action, analog to real world interaction not everything can be easily mapped – convert a text to bold – so “command actions” are allowed Rapid, incremental, reversible, immediately visible effects within 100ms (why?) drag a bit, see the change physical or logical SoSe 2019 Jörg Cassens – Models & Metaphors 7 / 66
Direct Manipulation II Introduction Norman’s Gulfs Examples Cues Files and folders on a desktop Errors Scrollbar Metaphors Dragging to resize a rectangle Tutorial Selecting text References Visual representation and physical interaction are important It is powerful since it exploits perceptual and motor skills of the human user Some say it depends less on linguistic skills than command or menu/form interfaces Only partly true and for a limited understanding of language SoSe 2019 Jörg Cassens – Models & Metaphors 8 / 66
Touch vs. Mouse While the underlying metaphor does still work, differences between mouse and Introduction touch need to be considered Norman’s Gulfs For touch-based devices, we need to look at Cues Size of elements Errors Metaphors “Even bigger” Tutorial Interaction option References There is no mouseover New “natural” (cultural?) patterns Swipe, pinch to zoom We still have objects to interact with, what about 3D-Gestures Speech Interfaces Implicit Interaction Direct Manipulation has served us well, but we need to move on SoSe 2019 Jörg Cassens – Models & Metaphors 9 / 66
Comparison of Interaction Styles Knowledge in the head vs. world Introduction Norman’s Gulfs CLI needs practice, training, references, manuals Cues M&F put much more information into the world Errors DM has information from affordances and constraints of metaphor Metaphors Error messages regarding the interaction itself Tutorial DM rarely needs them – try to drag a scroll bar too far References Efficiency CLI good for experts M&F demand good shortcuts DM if appropriate for task, but mis-using can be labor intensive User experience CLI best for experts M&F, DM better for novices, infrequent users SoSe 2019 Jörg Cassens – Models & Metaphors 10 / 66
Comparison of Interaction Styles II Introduction Norman’s Gulfs Synchrony Cues CLI synchronous, M&F (user types, system does) Errors DM asynchronous, user can point anywhere, do anything Metaphors Tutorial Programming difficulty References CLI are easy, parsing rigid texts well understood M&F, DM with substantial toolkit support Accessibility CLI, M&F easier since both are text based DM much harder SoSe 2019 Jörg Cassens – Models & Metaphors 11 / 66
Introduction Norman’s Gulfs Cues Errors Metaphors Norman’s Gulfs Tutorial References SoSe 2019 Jörg Cassens – Models & Metaphors 12 / 66
Stages of Interaction Introduction There are lots of places where interaction between human and machine can go Norman’s Gulfs wrong Cues Perception Errors Cognition Metaphors Action Tutorial References Stages of action proposed by Norman (1986) Two gaps Gulf of Evaluation: the “cognitive distance” between what is displayed and the user’s mental representation Gulf of Execution: distance between the user’s goals and the procedures and actions provided to pursue this goals SoSe 2019 Jörg Cassens – Models & Metaphors 13 / 66
Gulf of Evaluation Introduction Norman’s Gulfs Cues Errors Metaphors Tutorial References SoSe 2019 Jörg Cassens – Models & Metaphors 14 / 66
Gulf of Evaluation Introduction Norman’s Gulfs Cues Errors Metaphors Tutorial References SoSe 2019 Jörg Cassens – Models & Metaphors 14 / 66
Information-Design The objects and actions possible in a system are represented and arranged in Introduction a way that facilitates perception and understanding Norman’s Gulfs Includes the design of Cues Application screens Errors Web pages Metaphors Menus Tutorial Dialogs References Icons Other modalities Sound Speech synthesis Tactile Force feedback game controls Visual 3D-displays (geowall) Addresses the Gulf of Evaluation SoSe 2019 Jörg Cassens – Models & Metaphors 15 / 66
Perception Introduction Norman’s Gulfs Guiding viewers to see the structure in an information display Cues Errors Gestalt principles Metaphors Similarity Tutorial Closure References Area Symmetry Continuity Proximity Organization SoSe 2019 Jörg Cassens – Models & Metaphors 16 / 66
Interpretation Introduction Norman’s Gulfs During interpretation, the content is recognized as input fields for data, choices Cues for presentation, etc. Errors Key concepts: Metaphors Familiarity Tutorial Connect to existing knowledge References Realism and abstraction Realistic – easy to recognize, but maybe too particular? Abstract – harder to recognize, but maybe more general? Recognizing Affordances Show the user what can be done and where SoSe 2019 Jörg Cassens – Models & Metaphors 17 / 66
Making Sense Introduction Norman’s Gulfs Relating the information to what they currently understand about their task Cues Evaluating whether and how it addresses their active goals and interests Errors Consistency Metaphors Visual design program: fonts, logo, colors Tutorial Visual metaphors References Is it map? Does it work as a map? Information models hierarchies, maps Dynamic display redisplay or animation SoSe 2019 Jörg Cassens – Models & Metaphors 18 / 66
Gulf of Execution Introduction Norman’s Gulfs Cues Errors Metaphors Tutorial References SoSe 2019 Jörg Cassens – Models & Metaphors 19 / 66
Interaction-Design Introduction Norman’s Gulfs Goal: specify the mechanisms for accessing and manipulating task information Cues Information design focuses on determining which task objects and actions to Errors show and how to represent them Metaphors Interaction design tries to make sure that people can do the right things at Tutorial References the right time Broad scope: Selecting and opening a spreadsheet Pressing and holding a mouse button while dragging it Specifying a range of cells Addresses the Gulf of Execution SoSe 2019 Jörg Cassens – Models & Metaphors 20 / 66
Task & System Goal Introduction Norman’s Gulfs Cues Errors Task goal Metaphors the task the user really wants to achieve Tutorial System goal References translate the real world goal into a system goal UI-Models/Interaction style opportunistic goals SoSe 2019 Jörg Cassens – Models & Metaphors 21 / 66
Recommend
More recommend
