SBD:Interaction Design

Size: px

Start display at page:

Download "SBD:Interaction Design"

Marsha Alexander
6 years ago
Views:

1 analysis of stakeholders, field studies ANALYZE Problem scenarios claims about current practice SBD:Interaction Design metaphors, information technology, HCI theory, guidelines DESIGN Activity scenarios Information scenarios iterative analysis of usability claims and re-design CS 3724 Interaction scenarios summative evaluation PROTOTYPE & EVALUATE Usability specifications formative evaluation Thanks to Chris North and Scott McCrickard for their original slides. Interaction Design Specifying the action sequences for planning and achieving one or more task goals Conveying what system goals are possible, plans for accomplishing them, physical actions to execute Usability engineering of an interaction design Ensure users can predict how to pursue goals, and that doing so is a comfortable and pleasant experience Again, depends inherently on task, hence an important role of user interaction scenarios 3 Problem, activity, and information design claims: address negatives, but keep positives +/- SBD and Interaction Design Information design scenarios: Focus on users goals and needs for interaction in these tasks Interaction design scenarios: Elaborate to include physical actions and system responses Claims analysis: features of the interaction design with key implications for use +/- Interaction design space: brainstorm interaction in metaphors and technology HCI knowledge about interaction design 1

Acronyms galore UI GUI WIMP DM WYSIWYG I/O IT 3 Interaction Styles Direct manipulation Command language Menus & Forms 5 6 Example: File Management % rm myfile.

2 Acronyms galore UI GUI WIMP DM WYSIWYG I/O IT 3 Interaction Styles Direct manipulation Command language Menus & Forms 5 6 Example: File Management % rm myfile.txt % _ Direct Manipulation Principles Simulated world metaphor Visual representation of the objects of interest Rapid, incremental, reversible actions Pointing and directly selecting the objects of interest Immediate feedback 7 8 2

Properties of DM interfaces Hutchins, Hollan, & Norman Engagement: the feeling of being directly engaged with the objects of interest Directness semantic: mapping between user s goal and system goal

3 Properties of DM interfaces Hutchins, Hollan, & Norman Engagement: the feeling of being directly engaged with the objects of interest Directness semantic: mapping between user s goal and system goal articulatory: mapping between task and physical actions Direct Manipulation examples Drag-and-drop file icons Keyboard Games Powerpoint slide sorter Media player 9 10 Direct Manipulation Command Language examples Upsides: See what you re doing, WYSIWYG Back, undo Low learning time, natural, metaphors Downsides: Wildcards, macros Slow for experts Limited options Difficult implementation? Conversational metaphor Unix, DOS Matlab AutoCAD programming emacs, word shortcuts, vi

Command Language Speech Input and Output Upsides: Fast for experts Fast performance, no graphics Customizable, macros Piping, scripts Downsides: Complexity, arguments Huge learning brick wall

vocabulary, commands Speech recognition accuracy still limited depends on speaker, amount of training up front Synthetic speech output quality also limited biggest challenge is prosody (intonation

4 Command Language Speech Input and Output Upsides: Fast for experts Fast performance, no graphics Customizable, macros Piping, scripts Downsides: Complexity, arguments Huge learning brick wall Requires fast typing Indirect references to objects, hard to select Requires recall of names 13 Speech I/O inherently linear, relatively slow trades off with familiarity, naturalness restricted vocabulary, commands Speech recognition accuracy still limited depends on speaker, amount of training up front Synthetic speech output quality also limited biggest challenge is prosody (intonation contours) digitized natural speech snippets useful for alerts, warnings (why?) Biggest benefit: parallel processing, multi-modal also critical for hands-busy, heads-up tasks 14 Menus & Forms Menu: selection of one or more alternatives from a fixed set Form: Pre-defined fields for input Types of menus Text-based GUI-based pop-up pull-down pie contextual Buttons

Menu design issues Fitts Law: time to select target is directly proportional to the ratio of the distance and size of the target Labels Order of entries Dynamic? Breadth vs.

5 Menu design issues Fitts Law: time to select target is directly proportional to the ratio of the distance and size of the target Labels Order of entries Dynamic? Breadth vs. depth Fill-in forms Menus not appropriate for data entry Forms retain the advantage of strong structure, but also support data entry Natural metaphor: paper forms Support recognition Important for Web design Guidelines for form design Use appropriate field types for data: Menu if large number of fixed choices Check boxes for many of N Radio buttons for 1 of N Free text entry otherwise (constrain length, type of data?) Menus & Forms examples App pull-down menus Dialog boxes Task bar Desktop Start menu Restaurant menus Web pages Phone menus

Menus Combined Strategies Upsides: Fast for novice Customizable Low learning time Recognition instead of recall Downsides: Slow for expert Labeling is critical, consistency Limit options Just a

6 Menus Combined Strategies Upsides: Fast for novice Customizable Low learning time Recognition instead of recall Downsides: Slow for expert Labeling is critical, consistency Limit options Just a pointer? Word cutand-paste: Drag-anddrop Keyboard shortcuts Edit menu Last month s budget...? Stages of Action in HCI Making sense Interpretation GULF OF EVALUATION Perception focus of information design Last month s budget...? Task goal Performing an interaction with a system Task goal System goal GULF OF EXECUTION Action plan Execution focus of interaction design System goal Open the Excel file to check the equations Action plan Point at the Excel icon, double-click it to open, click on top left cell, read equation. Execution Grasp mouse, move cursor to icon, click twice rapidly, move pointer to new position, click once. 6

7 Constructing a System Goal Constructing a system goal Going from users task concept to system concept: the cognitive distance between two models mental model held by users tells them what to do this must make connection with designers model that is conveyed and supported by the user interface Direct manipulation cognitive distance Command language The closer the match, the easier to find and pursue a relevant goal C:\> Constructing a system goal Menus & Forms Action Planning Plan analysis of required action sequences like HTA, goals decomposed into subgoals, steps, etc. includes choices and decision rules as relevant examine what plan knowledge is expected of the user look for arbitrary sequences, overall complexity, consistency, interference from one plan to another Forms are a good style for suggesting action plans to the user Ex: action plan for indenting paragraph?

2. Open Paragraph settings 1. Specify text selection start 2.

Set Special to FirstLine 6. Type value for FirstLine 7. Accept new settings 1.

Set indentation Provide good mappings Support formation of the action plan by providing

burner? 30 Action Execution Physical actions of dragging, clicking, typing, etc.

8 2. Open Paragraph settings 1. Specify text selection start 2. Specify text selection end 3. Select Format menu 4. Select Paragraph option 5. Set Special to FirstLine 6. Type value for FirstLine 7. Accept new settings 1. Select text 3. Set indentation Provide good mappings Support formation of the action plan by providing clear mappings between action and its effect on the system Which knob controls which burner? 30 Action Execution Physical actions of dragging, clicking, typing, etc. design goal is to minimize, make things hang together as movements, not just plans Make use of constraints Constraints limitations Types of constraints: physical semantic logical cultural Don t overconstrain an object

9 Provide good feedback Indicate the state of the system and how the user s action affects the system Most everyday things have excellent feedback (physical) Electronic and computer devices often hide the state of the system Tyranny of the blank screen Don t forget feed-forward Supporting Error Correction Forward/backward delete, click to de-select usually not a question of design, built into UI platform but what does Back on a browser get you? Common design problem is providing for Undo predicting, supporting right level of reversibility what are the issues here? Slips versus Mistakes Type of Error Example Situation Design Approach Mistake: asking for non-existent function or object Mistake: overgeneralizing an earlier experience Mistyping the name of a Represent (e.g., in lists, command so that its function icons) what is available can not be executed In a listserv, using reply when intending to reply only to the sender of a message Slip: doing something Trying to input text into a that is appropriate, but document while the Font not in current mode dialog box is open Slip: making a request that is interpreted as something else Slip: completing an automated (but inappropriate) action Mistake = incorrect plan Slip = incorrect execution Using keyboard short-cut to turn off underline before adding space (in PowerPoint reverses existing underline) Deleting a text selection before the selection has not been correctly specified Present through training or documentation a more complete set of examples Minimize modes and when necessary mark well with status and feedback cues Improve consistency of lowlevel controls within and across applications Predict locus of such errors and increase the amount of feedback (or alerts) provided Optimizing Execution Sequences Feedback and good defaults are essential! especially in long, costly, or tedious transactions Consider implications of long-term use focus on actions for frequent choices, fast-paths BUT, be careful to note when you are violating overall consistency, or favoring one task at expense of other important or common tasks Customization: users define their own sequences e.g., mapping commands to key combinations can be critical when supporting users with special needs 36 9

10 Interaction techniques Low-level methods for communicating with interactive objects widgets, interactors, controls, components Interaction technique includes: input device(s) mapping of input signals to semantics feedback output device(s) Addresses complete cycle of execution and evaluation 37 Why discuss design of ITs? Common ITs are standardized: buttons, sliders, pop-up menus But, low-level implementation is non-standard - details can be important! Windows vs. Mac menus, scrollbars, line drawing ITs for future computing paradigms are not standardized 3D, VEs, hand-held, AR,... Must follow guidelines (affordances, constraints, feedback, ) even at this lowlevel 38 Crucial role of input devices Different devices have different affordances, constraints, mappings, feedback: keyboard? mouse? joystick? trackball? data glove? Absolute vs. relative locators Absolute locators: one-to-one mapping from device to cursor e.g. tablet faster & easier fixed range therefore less accurate Relative locators: map device movement to rate of change of cursor e.g. joystick harder motor skills range is infinite

11 What about the mouse? Giving Control to the User Absolute? Relative? Third type: clutched absolute absolute mapping within a range, but device can then be clutched and the range moved good compromise trackballs also in this category Humans are good at and expect support for doing multiple things at once working in parallel or stacking then reinitiating a task internal rather than external locus of control when computer drags them along, it s unpleasant! BUT, what does this mean for interaction design? Multi-threaded Interaction Multiple windows, each holds one thread tradeoffs between tiled versus overlapping? implies good support for window management Avoid modal dialogs unless they have task purpose e.g., a preemptive dialog box that must be dismissed when should you deliberately include modal dialog? Crucial role of status information users must be able to tell when they return to a window what they have done so far, what is possible now, etc. scenario-based design of picking up the pieces 43 11

Human-Computer Interaction. Chapter 2. What is HCI?

Human-Computer Interaction. Chapter 2. What is HCI? Human-Computer Interaction Chapter 2 What is HCI? Overview 2.1 The Human 2.2 The Computer 2.3 The Interaction Models of Interaction Interaction Styles Elements of the WIMP Interface HCI 2.3.1 Models of