Master Informatique - Université Paris-Sud 27/09/18 Outline “The design of everyday things” - Don Norman Affordances, Metaphors, and Affordances Conceptual modeling Metaphors Michel Beaudouin-Lafon - mbl@lri.fr Laboratoire de Recherche en Informatique In Situ - http://insitu.lri.fr Conceptual model Examples The design of everyday things - Norman, 1990 Example Everyday objects reflect the problems in user interface design – Door handles – Washing machines – Telephones – etc. Introduces the notions of affordance , metaphor , and conceptual model Provides a set of design rules (c) 2011-2017, Michel Beaudouin-Lafon mbl@lri.fr 1
Master Informatique - Université Paris-Sud 27/09/18 Affordances – J.J. Gibson Signifiers (not affordances) – Don Norman The capabilities of an object for action Perceived affordances, later renamed signifier : perception of the capabilities of an object for action “ … the affordances of the environment are what it offers the animal, Gibson’s notion of affordance: what it provides or furnishes, the affordance exists even if it is not perceived either for good or ill … ” Norman’s notion of affordance (later renamed signifiers): James Gibson the affordance exists only if it is perceived The affordance exists The shape, size, aspect of an object suggests what it can be used for even if it is not perceived A button is meant to be pushed A handle is meant to be turned Foundation of our knowledge of the world « Much of our everyday knowledge resides in the world, not in the head » Norman, 1988 Perceptual learning – Eleanor Gibson Affordances vs. Signifiers Learning to recognize affordances Visual cliff experiment Absent Hidden Correct affordance rejection “We perceive to learn, as well as Signifier we learn to perceive” Eleanor Gibson Present Perceivable False affordance affordance Present Absent Affordance (c) 2011-2017, Michel Beaudouin-Lafon mbl@lri.fr 2
Master Informatique - Université Paris-Sud 27/09/18 Mental model Metaphor Operational representation of the world in one’s head Figure of speech: Example : instructions to get home establishes a link between two words, without a comparative (while comparison includes the comparative) Provides a structure to link causes and effects Supports explanations Example: The moon is a golden sickle What do I see? What does it meand? Direct metaphor A golden sickle lights the night What did just happen? Why? What did I do that created this situation? More generally: Supports predictions Transfers a relationship from one set of objects to another set What can I do now? What happens if I do this? To be efficient, the comparative (or the transfer) must be immediately guessed or understood Different types of mental models: objects-actions, state-transitions Example: Desktop metaphor Interactive system Mental Conceptual Compares objects of the virtual desk model model with objects of a real desk Transfers properties from physical to on-line world: Move, Open, put in trashcan, … Designer User The goal is not to simulate a real desk System but to take advantage of our knowledge of a real desk image Goal: Save learning Capitalize on external knowledge Takes advantages of affordances in the real world System (c) 2011-2017, Michel Beaudouin-Lafon mbl@lri.fr 3
Master Informatique - Université Paris-Sud 27/09/18 Conceptual modeling Conceptual modeling Conceptual model Correspondence between conceptual model and mental model: How the designer wants the user to see the system - improved by a proper use of metaphors Must hide technical aspects - improved by taking advantage of affordances Must refer to what the user will use the system for - improved by following proper design guidelines System image In case of poor correspondence: What the user sees of the system (including its documentation) - Manipulation errors Used by users to create their mental model - Frustration - Lower productivity User mental model Created based on the users ’ understanding of the system image, their use of the system, what others have told them about the system, etc. Example Example : Fridge freezer Normal Settings C and 5 Colder Fresh Food C and 6-7 Coldest Fresh Food B and 8-9 fridge Colder Freezer D and 7-8 Warmer Fresh Food C and 4-1 OFF (both) 0 7 6 5 4 3 A B C D E What is your conceptual model? (c) 2011-2017, Michel Beaudouin-Lafon mbl@lri.fr 4
Master Informatique - Université Paris-Sud 27/09/18 A likely mental model Real conceptual model freezer freezer A B C D E A B C D E compressor compressor fridge fridge 7 6 5 4 3 7 6 5 4 3 compressor How to fix the problem? Change the controls so they match what users expect Change the controls so they reflect how it really works 3 principles from Norman (1990) 8 design rules from Shneiderman (1998) Recommendations to create « good » conceptual models 1. Consistency 2. Short-cuts for expert users 1- Make things visible 3. Informative feedback The user can know the state of the system 4. Design dialogues with closures by observing the interface 5. Prevent errors and help repair them 6. Provide reversible operations 2- Mapping principle 7. Give control to the user Help understand the correspondence between 8. Reduce short-term cognitive load – Actions and results – Controls and their effects There are dozens of recommendations and hundreds of rules … – The state of the system and what is visible For every rule, there are exceptions … 3- Feedback principle Inform the user (c) 2011-2017, Michel Beaudouin-Lafon mbl@lri.fr 5
Master Informatique - Université Paris-Sud 27/09/18 Organizing the conceptual model Interaction tables Organize the conceptual model into two tables: Responses Objects Representations Properties Operations Feedback Operations Objects File Icon (according Path Delete to file type) + Type, name, Rename Commands name size, … … Identify the objects: Operations Commands Feedback Responses What the user wants to manipulate Delete a file Drag-and-drop The ghost of the The icon the icon into the icon follows the disappears and Identify the operations: trash cursor the trash can gets bigger What the user wants to do with the objects Select file and hit Selected icon The icon moves Identify the commands: the Delete key gets highlighted towards the trash can and How the user can activate the operations disappears Case studies Drawing tools Conceptual models of different graphical editors What is this drawing made of? Pixel-based images (Photoshop) How to create this drawing? Vector-based images (Illustrator) Other case studies (not covered here) It is a set of pixels Editor for images described as planar maps that can be erased Web browser File browser Text editor It is a rectangle and a circle Mail reader that can be moved ... (c) 2011-2017, Michel Beaudouin-Lafon mbl@lri.fr 6
Master Informatique - Université Paris-Sud 27/09/18 Two broad categories Editing bitmaps Operations Commands Feedback Responses Editing bitmaps – images made out of pixels Select an area Select rectangle Cursor change Area surrounded Basic objects: set of pixels (areas) tool + by “marching ants” Basic operations: Click-and-drag a Display ghost rectangle rectangle Define an area Select lasso Cusor change Area surrounded Apply an operation to the pixels in an area tool + by “marching ants” Outline the area Display ghost outline Editing vectors – images made out of geometrical shapes Paint the Select brush Cursor change Apply current Basic objects: a stack of vector-based objects selected area tool + color to the path of the brush Click-and-drag to Display ink Basic operations: paint Modify the geometry (shape) of an object Select paint Cursor change Selected area is bucket tool + filled with the Modify the graphical attributes of an object current color Click the area Change the stacking order (2D1/2) Editing bitmaps Editing bitmaps Operations Commands Feedback Responses Modify the Command Exchanges the selected area “Invert” in the selected and Objects Representations Properties Operations “Selection” menu non-selected Area “Marching ants” The set of pixels Define areas (blinking outline) inside the area Modify Command Extends the Fill “Extend” in the selection by one Brush Cursor shape Shape Paint “Selection” menu pixel Transparency Color Transform the Select an item in Dialog box with Apply the filter to selected area the “Filters” parameters of the selected area Tool palette Floating window List of tools Select tool menu the filter Selected tools etc. ... ... etc. ... (c) 2011-2017, Michel Beaudouin-Lafon mbl@lri.fr 7
Recommend
More recommend
