Download Usability Based on material by Michael Ernst, UW and MIT
Transcript
Announcements n CHECK YOUR GRADES n Usability n Quiz 1-9, HW 1-6, Exam 1-2 now all in LMS! Feedback on Homework in Homework Server n Based on material by Michael Ernst, UW and MIT n HW9 due December 11th n n n n n n A GUI Interface for your path finding algorithm Quiz 10 at the end of class Common questions/mistakes How do I “start” the Visitor? How to I make the Visitor hold Context? Can I change signature of accept or visit? Use of Interpreter methods in Visitors n Expression (x or true) and y new AndExp( new OrExp( new VarExp(“x”), new Constant(true) ), new VarExp(“y”) ) You shouldn’t call evaluate/print on Expressions accept methods are the same for all Visitors n Functionality in visit methods, state stored in Visitors n left 3 Fall 15 CSCI 2600, A Milanova AndExp: (x or true) and y left right VarExp: x VarExp: y right Constant: true 4 Visitor Implements Postorder Traversal of the Composite Starting the Visitor BooleanExp myExp = new AndExp( new OrExp(new VarExp(“x”),new VarExp(“y”)), new VarExp(“z”) ); CounterVisitor v = new CounterVisitor(); //or EvaluateVisitor v = new EvaluateVisitor(c); //or InorderVisitor v = new InorderVisitor(); myExp.accept(v); // starts traversal at root Fall 15 CSCI 2600, A Milanova We have a hierarchical structure: AndExp is top, OrExp and VarExp are below in the hierarchy, etc. OrExp: x or true n Fall 15 CSCI 2600, A Milanova 2 Visitor’s Task is to Traverse Hierarchical Structure Revisit Visitor Pattern, Again n HW7 grades released. Re-grade points will be applied later as re-submit of HW7 is due December 11th 5 class AndExp extends BooleanExp { public void accept(Visitor v) { // call accept on all children, then visit left.accept(v); // traverses left subexp right.accept(v); // traverses right subexp v.visit(this); // after traversal } } // // // // accept doesn’t know what kind of Visitor! works with all Visitors! No changes to the BooleanExp hierarchy required when adding new Visitors Fall 15 CSCI 2600, A Milanova 6 1 The Visitor Pattern The Visitor Pattern Visitor visit(Constant e) visit(VarExp e) visit(NotExp e) visit(AndExp e) visit(OrExp e) 1 BooleanExp Client 2 accept(Visitor v) 2 Constant VarExp NotExp OrExp AndExp accept (Visitor v) accept (Visitor v) accept (Visitor v) accept (Visitor v) 1 accept (Visitor v) 1 1 7 EvaluateVisitor InrderVisitor visit(Constant e) visit(VarExp e) visit(NotExp e) visit(AndExp e) visit(OrExp e) visit(Constant e) visit(VarExp e) visit(NotExp e) visit(AndExp e) visit(OrExp e) Exercise: Write a Count Visitor that counts #nodes in a BooleanExp object class VarExp extends BooleanExp { void accept(Visitor v) { v.visit(this); } } class AndExp extends BooleanExp { BooleanExp leftExp; BooleanExp rightExp; void accept(Visitor v) { leftExp.accept(v); rightExp.accept(v); v.visit(this); } } class CounterVisitor implements Visitor { int count = 0; void visit(VarExp e) { count++; } void visit(Constant e) { count++; } void visit(AndExp e) { count++; } … 9 } Exercise: Write PostorderVisitor, which prints BooleanExp in postorder class VarExp extends BooleanExp { void accept(Visitor v) { v.visit(this); } } class AndExp extends BooleanExp { BooleanExp leftExp; BooleanExp rightExp; void accept(Visitor v) { leftExp.accept(v); rightExp.accept(v); v.visit(this); } } Exercise: Write an Evaluate Visitor which evaluates a BooleanExp class VarExp extends BooleanExp { void accept(Visitor v) { v.visit(this); } } class AndExp extends BooleanExp { BooleanExp leftExp; BooleanExp rightExp; void accept(Visitor v) { leftExp.accept(v); rightExp.accept(v); v.visit(this); } } class EvaluateVisitor implements Visitor { // ?? void visit(VarExp e) { // ?? } void visit(Constant e) { // ?? } void visit(AndExp e) { // ?? } … 11 } 8 Fall 15 CSCI 2600, A Milanova class PostroderVisitor implements Visitor { } void visit(VarExp e) { //print e.getString(); } void visit(Constant e) { //print e.getValue(); } void visit(AndExp e) { //print “AND”; } … 10 Outline of Today’s Class n Usability n Iterative Design n Design n Implement n Evaluate n n n Design principles Low-fidelity prototypes User testing Fall 15 CSCI 2600, A Milanova 12 2 User Interface Hall of Shame Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame User Interface Hall of Shame 13 Better Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame 14 User Interface Hall of Shame You cannot directly edit the Date and Time fields from the keyboard. If you want to edit Time, you must click on “Set Time”, which triggers the “Clock” control, where you have to use the mouse to move the Minute and Hour hands. Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame 15 16 Hall of Shame or Fame? Hall of Shame or Fame? Fall 15 CSCI 2600, A Milanova Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame 17 Fall 15 CSCI 2600, A Milanova 18 3 Designing User Interfaces Is Hard n n Designing User Interfaces Is Hard You are not the user Most software engineering is about communicating with programmers n n The user is ALWAYS right n n n Users are NOT like us Usability problems are the design’s fault Hard lesson to learn: if the user consistently gets stuck, this is not because the user is dumb, but because the interface is poorly designed n Users thought weight was fine Actually, they really wanted half the weight # of results displayed for a Google search query n n Users say they want 30 Actually, they really wanted 10 19 Iterative Design Iterative Design n … unfortunately, the user is not always right The user cannot predict what they really want 1950’s experiment with telephone handsets n UI is about communicating with users n n Who are a lot like us n n n 20 SpiralSpiral Model UI developmentisis an an iterative UI• development iterativeprocess process Model andcheap cheap •Use Usethrow-away throw-away prototypes prototypes and evaluation for early iterations evaluation for early iterations n Design Design Design Evaluate n Implement Iterations can • Iterations canbe becostly costly n If the turns bebad, bad, – If design the design turnsout out to to be youyou maymany have tohave throwaway away most code to throw mostofofyour your code Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst 8 21 Evaluate Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst Usability n n n n n Learnability Efficiency Safety Simplicity (not a usability dimension) n Different dimensions vary in importance n n n Learnability: is it easy to learn? Efficiency: once learned, is it fast to use? Safety: are errors few and recoverable? Memorability: is it easy to remember what you learned? n Satisfaction: is it enjoyable to use? n n Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst 9 22 Usability Dimensions Usability: how well users can use the system’s functionality Dimensions of usability n Implement n 23 n Depends on the user Depends on the task Usability is only one aspect of the system 24 4 Learnability IBM’s Real CD Learnability 25 Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame Fall 15 CSCI 2600, A Milanova. Source: Interface Hall of Shame Learnability LMS Create Weighted Column Learnability LMS Create Weighted Column 27 Fall 15 CSCI 2600, A Milanova Facts About Memory & Learning n Working memory Working Long-term Memory Memory Small: 7 ± 2 “chunks” n Short-lived: gone in ~10 seconds n Maintenance rehearsal is required to keep it from decaying but costs attention for Learnability Design Design PrinciplesPrinciples for Learnability n Consistency • Consistency n n Long-term memory 28 Fall 15 CSCI 2600, A Milanova n n 26 • Similar things look similar, different things different – Similar things look similar, things different n different Terminology, location, … – Terminology, location, n argument Internal, external, metaphorical order, ... – Internal, external, metaphorical design Use common, simple words, notworld tech jargon! Match the real – Common words, not tech jargon Practically infinite in size and duration n Elaborative rehearsal transfer chunks to longterm memory n Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst Recognition, not •n Recognition, not recall recall Source: Interface Hall of Shame –n Labeled buttons are betterare than better commandthan languages Labeled buttons commands – Combo boxes are better than text boxes 29 n Combo boxes are better than text boxes 30 17 5 Tech Jargon UHLS Catalog Advanced Search Visibility 31 Fall 15 CSCI 2600, A Milanova Some Facts Facts About Perception AboutHuman Human Perception n • Design Principles for Visibility Perceptual fusion: stimuli ~100ms Perceptual fusion: stimuli < 100ms apart apart appear fused to to ourour perceptual systems appear fused perceptual system n –10 10 frames/sec frames/sec is enough to perceive a moving apicture is enough to perceive moving –picture Computer response < 100 ms feels instantaneous n Computer response < 100ms feels instantaneous • Color blindness: many users (~8% of all males) n Color blindness: many users (~8% of all can't distinguish red from green males) can’t distinguish red from green normal vision red-green deficient 20 33 Facts About Motor Processing Senses n Cognitive Motor n Muscles Give prompt feedback Response time rules-of-thumb: < 0.1 sec seems instantaneous 0.1 – 1 sec user notices 1 - 5 sec display busy cursor > 5 sec display progress bar n 34 Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst Pointing Tasks: Fitts’s Law n How long does it take to move your hand to a target of size S at distance D away? • How long does it take to reach a target? Motor processor runs by itself Cycle time is ~ 70ms D D S Closed-loop control Muscle movements are perceived and compared with desired result n Cycle time is ~ 140ms n Fall 15 CSCI 2600, A Milanova. Slide due to Michael Ernst. n Mouse cursor, selection highlight, status bar Pointing Tasks: Fitts’s Law Open-loop control n n Perception Make system state visible: keep the user informed about what’s going on n n Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst 32 Fall 15 CSCI 2600, A Milanova 35 – Moving mouse to target on screen S – Moving finger to key on keyboard n E.g. moving mouse to target on screen – Moving hand between keyboard and mouse Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst 36 24 6 Analytical Derivation of Fitts’s Law Fitts’s Law Derivation of Fitts’s Law Reaction time Pointing Tasks: Fitts’s Law Movement time n T = RT + MT = a + b log (D/S) • How long does it take to reach a target? n D n D n – Moving mouse to target on screen Velocity Position S n • Moving your hand to a target is closed-loop Moving your hand is closed-loop control control Each cycle distanceDd with • Each cyclecovers coversremaining remaining distance error εderror εD with After two2 cycles, withinεε22DDof oftarget target • After cycles, within S log (D/S) is thetoindex difficulty of the – Moving finger key onofkeyboard pointing task – Moving hand between keyboard and mouse Time Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst 37 Time Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst 25 38 24 Path Steering Tasks: Steering Law Design Principles for Efficiency Fitts’s Law applies only if path to target is unconstrained Pointing Tasks: Fitts’s Law n But the task is much harder if path is to a tunnel • constraint How long does it take to reach a target? n n Make important targets big, nearby, or at screen edges n Avoid steering tasks! n n D D D Provide shortcuts n n S n Fitts’s Law and Steering Law n – Moving Law: mouseTto=target screen Steering RT +onMT = a + b (D/S) n – Moving finger to key on keyboard – Moving hand between keyboard and mouse 39 Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst Keyboard accelerators Styles Bookmarks History Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst 40 24 Usability Dimensions n Learnability Efficiency Safety n Simplicity n n Mode Errors n Modes: states in which actions have different meanings n n Avoiding mode errors n n n Fall 15 CSCI 2600, A Milanova 41 E.g., vi’s insert mode vs. command mode Eliminate modes entirely Visibility of mode Disjoint action sets in different modes Fall 15 CSCI 2600, A Milanova 42 7 Confirmation Dialogs: Deleting files in the LMS file system Confirmation DialogsDialogs Confirmation I selected the files and clicked Delete Fall 15 CSCI 2600, A Milanova 43 30 Confirmation Dialogs: Deleting files in the LMS file system Confirmation Dialogs: Deleting files in the LMS file system Not done! Confirmation dialog pops up. Clicked OK Fall 15 CSCI 2600, A Milanova 45 Still not done! Clicked Submit and finally done! Another issue with file system: behavior inconsistent with other systems. n n n n n Design Principles for Error Handling (Safety) n Use confirmation dialogs sparingly Prevent errors as much as possible n 46 Fall 15 CSCI 2600, A Milanova Design Principles for Error Handling (Safety) n 44 Fall 15 CSCI 2600, A Milanova Good error messages n n Selection is better than typing Avoid mode errors Disable illegal commands Separate risky command from common ones n n Precise Speak the user’s language Constructive help Be polite Source: Interface Hall of Shame Support Undo Fall 15 CSCI 2600, A Milanova 47 48 8 Simplicity Simplicity Simplicity, Google Back in 2003 Simplicity Source: Alex Papadimoulis Fall 15 CSCI 2600, A Milanova. Slide by Michael Ernst. 32 49 Fall 15 CSCI 2600, A Milanova 50 33 Simplicity, Google Now Fall 15 CSCI 2600, A Milanova Simplicity, Google Now 51 Fall 15 CSCI 2600, A Milanova Design Principles for Simplicity n n Document Your System “Less is More!” n n Omit extraneous information, graphics & features n Write the user manual n Good graphic design n n Few well-chosen colors and fonts Group with whitespace n n n Use concise language n n Choose labels carefully Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst n 53 Program and UI metaphors Key functionality Do not include: exhaustive list of all menus What is hard to do? Who is your target audience? n n 52 Power users need a manual Casual users might not Piecemeal online help is no substitute Fall 15 CSCI 2600, A Milanova. Slide from Michael Ernst 54 9 Outline of Today’s Class n Low-fidelity Prototype Usability n Paper is a very fast and effective prototyping tool n n n Iterative Design n n n n n Low-fidelity prototypes n n User testing 55 n n n n n E.g., “add this meeting to calendar”, E.g., “type this letter and print it” n n n n Watch them do tasks with the prototype n 57 n Watch for Critical Incidents n n n n n n Errors Repeated attempts Curses n n n Can also be positive n n n “Cool!” “Oh, now I see.” Fall 15 CSCI 2600, A Milanova. Slide due to Michael Ernst Don’t help, don’t explain, don’t point out mistakes Two exceptions: prod user to think aloud, and move on to the next task when stuck Take lots of notes 58 Summary Critical incidents: events that strongly affect task performance or satisfaction Usually negative n “I’m testing the system, not testing you” “If you have trouble, it’s the system’s fault” “Feel free to quit at any time” Ethical issues: informed consent Ask user to think aloud Be quiet! 3 is often enough to find obvious problems Fall 15 CSCI 2600, A Milanova. Slide due to Michael Ernst n Brief the user first n Find a few representative users n n n Short but non-trivial n 56 How to Watch Users Start with a prototype Write up a few representative tasks n Use pieces to represent windows, dialogs, menus Simulate computer’s responses by moving pieces around and writing on them Fall 15 CSCI 2600, A Milanova. Slide due to Michael Ernst User Testing n Focus on behavior & interactions, not fonts & colors Similar to design of your ADTs and classes Paper prototypes can even be executed! n Evaluate Fall 15 CSCI 2600, A Milanova Hand-sketching is OK --- even preferable n Design principles Implement n n n Design Sketch windows, menus, dialogs, widgets Crank out lots of designs and evaluate them 59 You are not the user Keep human capabilities and design principles in mind Iterate over your design Write documentation Make cheap, throw-away prototypes Evaluate them with users Fall 15 CSCI 2600, A Milanova. Slide due to Michael Ernst 60 10