Interaction Styles SE3830 Jay Urbain, PhD Credits: Donald Norman, - PowerPoint PPT Presentation

Interaction Styles SE3830 Jay Urbain, PhD Credits: Donald Norman, Design of Everyday Things Ben Shneiderman, Catherine Plaisant, Roger J. Chapman, Designing the User Interface. Prof. Robert Miller, MIT Department of Electrical Engineering 1 and Computer Science.

Hall of fame or shame? 2

Hall of shame? • IBM’s RealCD is CD player software. • Why is it called “Real”? – Designers based it on a real-world object : a plastic CD. • This interface has a metaphor , an analogue in the real world. What is it? • Metaphors are one way to make an interface “ intuitive .” • Users can relate what they already know about the interface’s metaphor. 3

Hall of shame? Unfortunately, the designers’ careful adherence to this metaphor produced some remarkable effects, none of them good! • Use a toggle button control (the button with two little gray squares on it) to open the case and access controls for volume, listing tracks, etc. • A task analysis would show that adjusting the volume or picking a particular track matters more than viewing the cover art. • Bottom line: – Learnability comes from more than just metaphor. 4

Hall of shame? • UI is dominated by non-functional artwork. • Problem with the choice of metaphor: a CD case doesn’t actually play CDs. • The designers had to find a place for the player controls – which, serve the primary task of the interface – so they aligned them vertically. • The metaphor is dictating control layout, against all other considerations. • Over-adherence to the metaphor drove the designers to disregard all consistency with other desktop applications. – Where is this window’s close box? How do I shut it down? 5

Hall of shame? 6

Topics • Conceptual models • Interaction styles – Direct manipulation – Menus – Command • Errors • Metaphors 7

Conceptual Models • A metaphor, like the CD case, is an example of a conceptual model . • Your job as a user interface designer boils down to: 1. choosing the right conceptual model and 2. teaching it successfully to the user. 8

Models • Model of a system = how it works – its constituent parts and how they work – together to do what the system does – Implementation models • Pixel editing vs. structured graphics • Text file as single string vs. list of lines – Interface models • Line versus WYSIWYG Editor • Paint versus PhotoShop. 9

Interface Model Hides System Model • Interface model should be: – Simple – Appropriate – Reflect user’s model of the task (learned from task analysis) – Well-communicated 10

Interface Model Hides System Model • Interface model might be quite different from the system model . • A text editor whose system model is a list of lines doesn’t have to present it that way through its interface. • A cell phone presents the same simple interface model as a conventional wired phone, even though its system model is quite a bit more complex. • This detail of the system model is hidden from the user. • As a software engineer, you should be quite familiar with this notion (abstraction). 11

User Model May Be Wrong • Sometimes harmless – Electricity as water • Sometimes misleading – Thermostat as a valve 12

User Model May Be Wrong but Useful • The actual system model of household AC current is completely different than a water hose. • But the user model is simple, and the interface model supports it: plug in this tube, and power flows to the appliance. Norman, Design of Everyday Things, 1988. 13

User Model May Be Wrong but Misleading Consider the household thermostat. • If the room is too cold, what’s the fastest way to bring it up to the desired temperature? • Many people would say to turn the thermostat up to max temperature. • This response is triggered by an incorrect mental model about how a thermostat works: – The timer model: • The thermostat controls the duty cycle of the furnace. – The valve model • Thermostat affects the amount of heat coming from the furnace. 14

User Model May Be Wrong but Misleading • Users have no problem understanding the model of a dimmer switch , which performs an analogous function. • When a room needs to be brighter, the user model says to set the dimmer switch to the desired brightness. • The problem here is that the thermostat isn’t effectively communicating its model to the user. • In particular, there isn’t enough feedback about what the furnace is doing for the user to form the right model. What interface model would you use for a thermostat? 15

Interaction Styles • Command language • Menus & forms • Direct manipulation 16

Command Language • User types in commands in an artificial language • Examples: – Unix shell (“ls –l *.java”) – Search engine query language (“AND, OR, site:www.msoe.edu”) – URLs “http://www.msoe.edu/admissions” • Command syntax is important 17

Command Language • A command language is rarely the first choice of a user interface designer nowadays, but they still have their place. • Often used as an advanced feature embedded inside another interaction style. Example: – Google’s query operators form a command language. – Even the URL in a web browser is a command language, with particular syntax and semantics. • When designing a command language, the key problem is designing the command syntax. – Task analysis drives the choice of commands , the names you give them, the parameters they have, and the syntax for fitting them together. – Consistency is key. 18 – Autocomplete

Menus and Forms • A menu/form interface presents a series of menus or forms to the user. • User is prompted to choose from menus and fill in forms. • Meaningfully named items eliminate need to remember commands and syntax. • Examples – Most web sites – Dialog boxes • Navigation structure is important – Menu trees (Yahoo!) – Wizard: linear sequence of forms 19

Menus and Form • Dialog boxes are a form-style interface frequently found embedded inside another interaction style. • Task analysis tells us: – what choices need to be available – where they should be placed in a menu tree – what data types or possible responses need to be available in a form – typically context sensitive Issues: – which menu to select, which category, etc. 20 – tedium

Direct Manipulation • User interacts with visual representation of data objects – Continuous visual representation – Physical actions or labeled button presses – Rapid, incremental, reversible, immediately visible effects (immediate feedback) • Examples: – Files and folders on a desktop – Scrollbar – Dragging to resize a rectangle – Selecting text – Visual representation and physical interaction are 21 important

Direct Manipulation 1) A continuous visual representation of the system’s data objects. Examples: – icons representing files and folders on your desktop; – graphical objects in a drawing editor; – text in a word processor; – email messages in your inbox. • The representation may be verbal (words) or iconic (pictures), but it’s continuously displayed . • In contrast with the behavior of ed , a command- language-style text editor 22

Direct Manipulation 2. The user interacts with the visual representation using physical actions or labeled button presses . – Physical actions include clicking on an object to select it, dragging it to move it, or dragging a selection handle to resize it. – Physical actions are the most direct kind of actions in direct manipulation – you’re interacting with the virtual objects in a way that feels like you’re pushing them around directly. – Every interface function can not be easily mapped to a physical action (e.g., converting text to boldface), so we need to allow for “command” actions triggered by pressing a button. 23

Direct Manipulation 3. The effects of actions should be: • rapid (within 100 ms), • incremental (drag the scrollbar a little or a lot, and you see each incremental change), • reversible – with physical actions this is as easy as moving your hand back to the original place; with labeled buttons you typically need an Undo command, • and immediately visible . 24

Direct Manipulation • Why is direct manipulation so powerful? 25

Direct Manipulation • Why is direct manipulation so powerful? – It exploits perceptual and motor skills of the human machine – and if done well, exploits their cognitive model. 26

Comparison of Interaction Styles • Knowledge in the head vs. world • Error messages • Efficiency • User experience • Synchrony • Programming difficulty • Accessibility 27

Direct Manipulation Cues • What cues do users rely on in order to learn a DM model?, i.e., the parts that make up the interface, and how those parts work together . • Interactions from physical objects: – Affordances – Constraints – Natural mapping – Visibility – Feedback 28