Usability Based on material by Michael Ernst, UW and MIT
Contents
1. Fall 15 CSCI 2600 A Milanova Design Principles for Visibility Make system state visible keep the user informed about what s going on Mouse cursor selection highlight status bar Give prompt feedback a Response time rules of thumb lt 0 1 sec seems instantaneous 0 1 1sec user notices 1 5 sec display busy cursor gt 5 sec display progress bar Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst Pointing Tasks Fitts s Law a How long does it take to move your hand to a target of size S at distance D away S E g moving mouse to target on screen Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst Fitts s Law Reaction time Movement time T RT MT atb log D S Ed S log D S is the index of difficulty of the pointing task Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst Path Steering Tasks Steering Law Fitts s Law applies only if path to target is unconstrained But the task is much harder if path is constraint to a tunnel a Steering Law T RT MT a b D S Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst Usability Dimensions a Learnability a Efficiency a Safety a Simplicity Fall 15 CSCI 2600 A Milanova 41 Derivation of Fitts s Law a Moving your hand is closed loop control a Each cycle covers remaining distance d with error ed After two cycles within D of targe2. Usability Based on material by Michael Ernst UW and MIT 4 Revisit Visitor Pattern Again Common questions mistakes How do start the Visitor How to make the Visitor hold Context Can change signature of accept or visit Use of Interpreter methods in Visitors a You shouldn t call evaluate print on Expressions accept methods are the same for all Visitors a Functionality in visit methods state stored in Visitors Fall 15 CSCI 2600 A Milanova 4 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 5 4 Announcements a CHECK YOUR GRADES Quiz 1 9 HW 1 6 Exam 1 2 now all in LMS Feedback on Homework in Homework Server s HW 7 grades released Re grade points will be applied later as re submit of HW7 is due December 11th HW9 due December 11th A GUI Interface for your path finding algorithm Quiz 10 at the end of class Visitor s Task is to Traverse 4 Hierarchical Structure Expression x or true and y new AndExp new OrExp We have a hierarchical structure AndExp is top OrExp and VarExp are new VarExp x below in the hierarchy
3. void visit VarExp e 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 2 void visit Constant e 2 void visit AndExp e class VarExp extends class AndExp extends The Visitor Pattern Visitor visit Constant e visit VarExp e visit NotExp e visit AndExp e visit OrExp e EvaluateVisitor InrderVisitor visit Constant e visit Constant e visit VarExp e visit VarExp e visit NotExp e visit NotExp e visit AndExp e visit AndExp e visit OrExp e visit OrExp e Fall 15 CSCI 2600 A Milanova Exercise Write PostorderVisitor which prints BooleanExp in postorder class PostroderVisitor BooleanExp implements Visitor void accept Visitor v v visit this void visit VarExp e print e getString void visit Constant e print e getValue void visit AndExp e BooleanExp BooleanExp leftExp BooleanExp rightExp void accept Visitor v leftExp accept v j rightExp accept v 7 a v visit this print AND Outline of Today s Class a Usability a Iterative Design Design Design principles Implement a Low fidelity prototypes Evaluate User testing Fall 15 CSCI
4. 2600 A Milanova User Interface Hall of Shame Select an award style gutstanding Performanca F anp tees d shen lig eStas at m t agor cued heme e dpe tahaha sq pad o Dham Love wi vires Treat Dut vaal OUTSTANDING PERFORMANCE AWARD E Fall 15 CSCI 2600 A Milanova Source Interface Hall of Shame Better m Click and Print Certificate of blank Certificate of Achievement Team Player Award Fall 15 CSCI 2600 A Milanova Source Interface Hall of Shame Hall of Shame or Fame Image Layers Tools Dialogs Filters Ctl Media i Ctl Q a Video Script Fu Ko Fall 15 CSCI 26 User Interface Hall of Shame Select an award style per OF THE Meir F sng jia EMPLOYEE OF THE MONTH AWARD C Fall 15 CSCI 2600 A Milanova Source Interface Hall of Shame User Interface Hall of Shame First Launch Date 109 09 97 Set Date First Launch Time EE Set Time 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 Hall of Shame or Fame It looks like you re writing a letter Would you like help Get help with ATS SN Do T deg eee il Clippy is sad Fall 15 CSCI 2600 Designing User
5. E re oa 21 22 2 The fixed attribute determines how the column content moves to left right 29 x Fix Weld Thumb Part Sysk Fix Weld Part Sysk EA Weld Thumb Part Aha Crying inthe rainmp Loc Hyst a Loc Hyst Prev z Alphaville Big In Japan mp3 Thumbs are displayed when the Thumb is pressed Design ls l i p ALPHAVILLE Forever Young mp inks D sstemnTools Di png D erste ANTIQUE Dinata Dinata mp3 haas Gs Files are sorted by type directories links programs documents JE Opa Opa mp3 err E Se Thello mp3 Backstreet Boys Shape OF My Hi Backstreet_Boys_Larger_than_lifi Active file BERLIN Take My Breath Away t bt BINGOB i Send me an email url Media player fre 5 FILEMATRIX SongsPlayList mpl T 5 YOU MUST READ the Licen Useitoge biii The program is distributed Visit my site url Celine Dion My Heart Wil Go On E E FieMatrix exe manifest E CHARLES SHAW Girl You Know 1 FILEMAT 4 FA File size 3 3 MB Pla ile vi w j ji y Next Rand File viewer text pictures movies Drag up or down to change the height of the viewer Lo eT 2k YOU MUST READ the b gense terms z 2 consider you have a license iregiste Information about active partition directory file link target Stop Files 25 Encrypted 0 SelNum 0 Sel5Sz 0B Total5z 3 5 MB PartSz 6 8 GB 30 4 GB Partattr CEQRpSSf Index 13 Sz 1 6 KB 0B Attr A HL1 SCO Title E Program Files FileMatrix Edit Ink Mod Sunday May
6. etc new Constant true ANCGExp or true and new VarExp y left ight OrExp x or true left right Constant true Fall 15 CSCI 2600 A Milanova Visitor Implements Postorder 4 Traversal of the Composite 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 The Visitor Pattern accept Visitor v accept Visitor v accept Visitor v accept Visitor v accept Visitor v Exercise Write a Count Visitor that counts nodes in a BooleanExp object class CounterVisitor implements Visitor int count 0 void visit VarExp e class VarExp extends BooleanExp void accept Visitor v v visit this void visit Constant e countt t void visit AndExp e count t t count t 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 EvaluateVisitor implements Visitor
7. 18 2003 138 11 28 58 PM 84 Desc The target program is used by the Edit Function If you want to sort your projects and notes by TypeP 5z196 0KB 0 AttrA Title E Program Files Windows NT Accessories wordpad ex Mod Thursday August 7 time change the sort mode for each column Locate Search Recycle Delete Close viewer MPL Options 30 E 3 3 Gils E es E name High Current file E Progran Files FileMatrix Edit Ink Double LMB Run Ctrl automove to left Shift autoopen to right Alt autohdjd RMB view MMB Edit LMB Drag File dray menu RMB Drag Set with source path rf Set the number of columns foreach board Set the height of thumbs Toobar The hint bar shows hints for controls ov er which the mouse is moved Quickly change to a new set of colors Source Alex Papadimoulis Fall 15 CSCI 2600 A Milanova Slide by Michael Ernst Simplicity Google Now Gmail Images ss signin Google Google Search I m Feeling Lucky 11 ways to make Google products more accessible ADay4All Advertising Business About Privacy Terms Settings Fall 15 CSCI 2600 A Milanova 51 Design Principles for Simplicity Less is More a Omit extraneous information graphics amp features Good graphic design Few well chosen colors and fonts a Group with whitespace BASRE egm Use concise l
8. 600 A Milanova Facts About Memory amp Learning Short lived gone in 10 seconds a Maintenance rehearsal is required to keep it from decaying but costs attention a Long term memory a Practically infinite in size and duration Elaborative rehearsal transfer chunks to long term memory Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst Working memory a Long term Small 7 2 chunks Memory Memory 29 Learnability Microsoft Word The spelling check is complete G Text set to no proofing was skipped To find no proofing text click Edit Replace click More click Format click Language and choose no proofing Fall 15 CSCI 2600 A Milanova Source Interface Hall of Shame Learnability LMS Create Weighted Column Select the columns and categories to include in this weighted grade and then set the weight percentages Include in Weighted Grade Columns to Select Selected Columns Paen Enter the weight percentage for each item Percentages should add up to 100 Exam 1 Homework 2 Homework 3 Exam 2 Homework 4 Homework 5 Column Homework 0 Column Homework 1 Categories to Select Assignment Survey Discussion Blog Journal Self and Peer Category Information Total Weight 0 Calculate as Running Total Yes No A running total only includes items that have grades or attempts Selecting No includes all items in the calculations using a valu
9. Interfaces Is Hard a You are not the user Most software engineering is about communicating with programmers Who are a lot like us a Ul is about communicating with users a Users are NOT like us a The user is ALWAYS right 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 4 Iterative Design UI development is an iterative process lana Evaluate Implement Iterations can be costly If the design turns out to be bad you many have to throw away most of your code Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst Usability sability how well users can use the system s functionality Dimensions of usability 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 Satisfaction is it enjoyable to use Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst 23 Designing User Interfaces Is Hard Lae unfortunately the user is not always right The user cannot predict what they really want 1950 s experiment with telephone handsets Users thought weight was fine a Actually they really wanted half the weight of results displayed for a Google search query a Users say t
10. anguage Choose labels carefully Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst 53 Simplicity Google Back in 2003 Google Images Groups Directory News Advanced Sesrch Preferences Google Search I m Feeling Lucky Langusae Tools Advertise with Us Business Solutions Services amp Tools Jobs Press amp Help 2003 Google Searching 2 307 998 701 web pages Fall 15 CSCI 2600 A Milanova simplicity Google Now You Gmail Images ji signin Google Search I m Fooling Lucky May the Fourth be with you Advertising Business About Privacy Terms Settings Fall 15 CSCI 2600 A Milanova 52 Document Your System a Write the user manual Program and UI metaphors a Key functionality Do not include exhaustive list of all menus a What is hard to do a Who is your target audience Power users need a manual a Casual users might not Piecemeal online help is no substitute Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst 4 Outline of Today s Class a Usability a Iterative Design Design a Design principles Implement a Low fidelity prototypes Evaluate a User testing Fall 15 CSCI 2600 A Milanova 4 User Testing a Start with a prototype Write up a few representative tasks a Short but non trivial E g add this meeting to calendar a E g type this letter and print it F
11. e of o for an item is no grade if there is no gi 3 Fall 15 CSCI 2600 A Milanova 28 Design Principles for Learnability onsistency a Similar things look similar different things different Terminology location a Internal external metaphorical design Use common simple words not tech jargon AN en Oe AR Recognition not recall a Labeled buttons are better than commands a Combo boxes are better than text boxes Tech Jargon UHLS Catalog Advanced Search z i bay ses Language ANY MIE Collection ANY Year to MIE Search Reset search Fall 15 CSCI 2600 A Milanova Facts About Human Perception Perceptual fusion stimuli 100ms apart appear fused to our perceptual system 10 frames sec is enough to perceive a moving picture Computer response lt 100ms feels instantaneous Color blindness many users 8 of all males can t distinguish red from green Google Google normal vision red green deficient Fall 15 CSC 33 Facts About Motor Processing uscles J gt gt gt eT A T ow weeewew ee errr Motor processor runs by itself a Cycle time is 70ms Closed loop control Muscle movements are perceived and compared with desired result Cycle time is 140ms Fall 15 CSCI 2600 A Milanova Slide due to Michael Ernst Visibility
12. f notes 4 Summary You are not the user a Keep human capabilities and design principles in mind Iterate over your design a Write documentation Make cheap throw away prototypes a Evaluate them with users Fall 15 CSCI 2600 A Milanova Slide due to Michael Ernst 10
13. hey want 30 Actually they really wanted 10 Spiral Model Use throw away prototypes and cheap evaluation for early iterations Design Evaluate Implement Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst 4 Usability Dimensions a Learnability a Efficiency Safety a Simplicity not a usability dimension Different dimensions vary in importance Depends on the user Depends on the task Usability is only one aspect of the system __ Learnability IBM s Real CD Fall 15 CSCI 2600 A Milanova Source Interface Hall of Shame Learnability LMS Create Weighted Column Grade Center Full Grade Center submit Use the arrow keys or the tab key to navigate through the Grade Center More Help Create Column Create Calculated Column v Manage v Reports v Filter Average Column Move To Top Grade Information Bai i aa a When screen reader mode is on the table is static and grades may be entered on the Grade Details page accessed by selecting the table cell for the grade When screen reader mode is off grades can be typed directly into the cells on the Grade Center page To enter a grade click the cell type the grade value and press the Enter key to Work Offline Minimum Maximum Column Sort Columns By Layout Position Order Ascending Total Column Last Saved May 1 2015 9 44 AM Weighted Column Poe ee Se Mime rene Se Fall 15 CSCI 2
14. ind a few representative users a 3 is often enough to find obvious problems a Watch them do tasks with the prototype Fall 15 CSCI 2600 A Milanova Slide due to Michael Ernst 4 Watch for Critical Incidents Critical incidents events that strongly affect task performance or satisfaction a Usually negative a Errors Repeated attempts Curses Can also be positive Cool a Oh now see Fall 15 CSCI 2600 A Milanova Slide due to Michael Ernst 59 4 Low fidelity Prototype Paper is a very fast and effective prototyping tool Sketch windows menus dialogs widgets Crank out lots of designs and evaluate them Hand sketching is OK even preferable Focus on behavior amp interactions not fonts amp colors Similar to design of your ADTs and classes a Paper prototypes can even be executed Use pieces to represent windows dialogs menus a Simulate computer s responses by moving pieces around and writing on them Fall 15 CSCI 2600 A Milanova Slide due to Michael Ernst How to Watch Users rief the user first I m testing the system not testing you If you have trouble it s the system s fault a Feel free to quit at any time a Ethical issues informed consent Ask user to think aloud Be quiet a 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 o
15. t Position Velocity Time Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst 4 Design Principles for Efficiency a Fitts s Law and Steering Law Make important targets big nearby or at screen edges Avoid steering tasks a Provide shortcuts s Keyboard accelerators a Styles Bookmarks a History Fall 15 CSCI 2600 A Milanova Slide from Michael Ernst 4 Mode Errors Modes states in which actions have different meanings E g vis insert mode vs command mode a Avoiding mode errors Eliminate modes entirely Visibility of mode Disjoint action sets in different modes Fall 15 CSCI 2600 A Milanova Confirmation Dialogs Do you want to save the changes you made to Document1 Don t Save Cancel Confirmation Dialogs Deleting files in the LMS file system This action is final and cannot be undone Delete items If folders are selected all subfolders and files are also deleted cane OG Not done Confirmation dialog pops up Clicked OK Fall 15 CSCI 2600 A Milanova 45 Design Principles for Error Handling Safety Use confirmation dialogs sparingly Prevent errors as much as possible Selection is better than typing Avoid mode errors Disable illegal commands Separate risky command from common ones Support Undo Fall 15 CSCI 2600 A Milanova Confirmation Dialogs Deleting files in the LMS file system Download Package Copy Mo
16. ve Delete Edited Size Screen shot 2014 10 02 at 10 22 28 PM 1 png May 4 2015 1 15 17 PM 451 7 KB Screen shot 2014 10 02 at 10 22 28 PM png May 4 2015 1 14 23 PM 451 7 KB Download Package Copy Move Delete Displaying 1 to 2 of 2 items Show All Edit Paging selected the files and clicked Delete Fall 15 CSCI 2600 A Milanova Confirmation Dialogs Deleting files in the LMS file system 1 Select Files to Delete Name Screen shot 2014 10 02 at 10 22 28 PM 1 png 2 Submit Click Submit to proceed Click Cancel to quit Still not done Clicked Submit and finally done Another issue with file system behavior inconsistent with other systems Fall 15 CSCI 2600 A Milanova 46 Design Principles for Error Handling Safety ood error messages Precise Speak the user s language a Constructive help Be polite Source Interface Hall of Shame Cancel Click this to display an overview of this dialog box idiot For Help on an item click at the top of the dialog box and then click the item iy Simplicity System information Board bar each board is a set of columns User logo BP enano Monday July 2009 195 E 00003 pal ap EREM S06 A MB GIA oE Work Column file Viewer MPLs SystemTools Tools Sites Favorites Help Register Documents 2 Pictures 3 Videos 4 Music 5 Books 6 kits 7 Downloads 8 p 4vorites 9 Backup 10 Programs 11 This 12 co
Download Pdf Manuals
Related Search