CS 321: Human-Computer Interaction Design Lesson Eight Mental Models Cognitive Processes Developer’s Implementation Model Designer’s Represented Model Chapter 3 Design Methods

Different Perspective Cognitive Processes To design software interfaces for users, the design team must understand how users think, i.e., their cognitive processes. Example: Nintendo DS Fears that handheld game players would not be capable of splitting their attention between two display screens were allayed by sales of over 135 million DS consoles in its first six years. Inventory Menus Game Domain Map Different Perspective CS 321 Lesson Eight Mental Models Page 95

Mental Models The designer’s concept of the application may be quite different than the user’s concept. Designer Forms Menus Frames Icons URLs Hyperlinks Security User Web Access Perusing Selecting Ordering Payment Credit Card Delivery CS 321 Lesson Eight Mental Models Page 96

Predictive Nature of Mental Models Example: Web Browser Back Buttons The user’s mental model of an application enables the user to predict the consequences of interactions. Example: Web Browser Back Buttons CS 321 Lesson Eight Mental Models Page 97 When browser users use the Back menu to return to previously visited sites, do they realize that this does not cause all URLs above the chosen site in the history stack to be popped from the stack?

Explanatory Nature of Mental Models The user’s mental model of an application enables the user to explain the reason that events occur in the application. Example: VRML Navigation Controls are provided to afford users the means to navigate the 3D virtual world. Each control operation alters the “mode” of the mouse interactions. The meaning of the operations quickly becomes evident to the user as interactions are performed. Target a particular destination Move user to a preprogrammed viewpoint Undo/Redo Move & Straighten Tilt/Go/Slide & Gravity/Float CS 321 Lesson Eight Mental Models Page 98

Developer’s Implementation Model knowledge skills experiences biases MENTAL MODEL knowledge skills experiences biases There is frequently a marked contrast between the user’s mental model of how software works and the developer’s implementation model of how it actually works. CS 321 Lesson Eight Mental Models Page 99

Dragging and Dropping a File Mental Model Example Dragging and Dropping a File When a user presses the left mouse button and drags a file from one location to the other, the user’s mental model is that the file is being physically moved from one location to another. The developer’s implementation model, however, is based on the relative locations of the source and the destination. CS 321 Lesson Eight Mental Models Page 100

Dragging and Dropping a File Mental Model Example Dragging and Dropping a File When the two locations are on the same drives, the implementation merely involves changing the file’s metadata, specifying its location on the drive. When the locations are on different drives, the implementation requires that the data itself be copied to the new drive, resulting in a copy, not a move. So the interface designer’s represented model corresponds to the user’s mental model (i.e., file moving) when the locations are on the same drive, but assumes a more thorough understanding of the developer’s implementation model when the locations are on different drives. CS 321 Lesson Eight Mental Models Page 101

Designer’s Represented Model … or closer to the user’s mental model? Should the designer represent the software to the user in a manner closer to the developer’s implementation model...? Happy Developer Unhappy User … or closer to the user’s mental model? Unhappy Developer Happy User The designer must develop a third model, the represented model, that combines the simplicity of the user’s mental model with the technical veracity of the developer’s implementation model. CS 321 Lesson Eight Mental Models Page 102

Design Methods Supporting Mental Models: Simplicity Mental models simplify reality, so interface design should simplify actual software functionality. Include only needed functions Make frequently used functions immediately apparent Avoid cluttering the interface with advanced functions Organize the interface to fade into the background, allowing users to focus CS 321 Lesson Eight Mental Models Page 103

Design Methods Supporting Mental Models: Familiarity An interface should build on users’ prior knowledge and experience. Allow users to start quickly and make immediate progress Consistency in an interface reduces a user’s learning curve CS 321 Lesson Eight Mental Models Page 104

Design Methods Supporting Mental Models: Availability An interface should provide visual cues, reminders, lists of choices, etc., automatically or on request. People are better at recognition than at recall Avoid relying on the user for file names, previous settings, etc. CS 321 Lesson Eight Mental Models Page 105

Design Methods Supporting Mental Models: Flexibility An interface should support alternate interaction techniques. Allow users to choose the interaction method most appropriate to their situation Allow users to use any object in any sequence at any time Accommodate a wide range of user skills, physical abilities, interactions, and usage environments CS 321 Lesson Eight Mental Models Page 106

Design Methods Supporting Mental Models: Feedback An interface should provide complete, continuous feedback regarding the actions taken. Feedback supporting the current mental model reinforces it Feedback contradicting the current mental model forces it to be modified CS 321 Lesson Eight Mental Models Page 107

Design Methods Supporting Mental Models: Safety Users should feel confident in exploring, knowing that they can try an action, view the results, and then undo the action if the result is unacceptable. Users feel more comfortable with interfaces in which their actions do not cause irreversible consequences. CS 321 Lesson Eight Mental Models Page 108

Design Methods Supporting Mental Models: Perceived Affordances Users often conclude what can and cannot be done with an interface justby examining its appearance. By using real-world representations of objects within its interface, a software system can provide users with an intuitive sense of the system’s affordances. WHERE’S THE “ZOOM” ICON? CS 321 Lesson Eight Mental Models Page 109 MARQUEE ZOOM ZOOM OUT/IN BUTTONS MAGNIFICATION COMBO BOX SNAPSHOT