Usability
Contents
1. BH lt gt S Moving mouse to target on screen Moving finger to key on keyboard Moving hand between keyboard and mouse 27 Analytical Derivation of Fitts s Law Moving your hand to a target is closed loop control Each cycle covers remaining distance D with error D e After 2 cycles within 7D of target Position Velocity Time Time 28 Fitts s Law e T RI MT atb log D S 8 gt S e log D S is the index of difficulty of the pointing task 29 Path Steering Tasks Fitts s Law applies only if path to target is unconstrained Butthe task is much harder if path is constrained to a tunnel T a b D S Em e This is why cascading menus are slow 30 Design Principles for Efficiency Fitts s Law and Steering Law Make important targets big nearby or at screen edges Avoid steering tasks 1VOLVO DOC Provide shortcuts 2 CAD CUMENTACLERICALNRESUME DOC Keyboard accelerators 3 CADOCUMENTACLERICALNBUSCARD DOC 4CADOCUMENTSCONTACTS DOC Styles Bookmarks Source Interface Hall of Shame History Exit 31 Mode Error e Modes states in which actions have different meanings Vi s insert mode vs command mode Drawing palette e Avoiding mode errors Eliminate modes entirely Visibility of mode Spring loaded or temporary modes Disjoint action sets in different modes He 4 32 C2. Directory News Omit extraneous information i graphics features Good graphic design Few well chosen colors and fonts Group with whitespace Use concise language Choose labels carefully Document your system Write the user manual Program and UI metaphors Key functionality Not exhaustive list of all menus Whatis hard to describe Whois your target user Power users need a manual Casual users might not Piecemeal online help is no substitute 39 Lecture Outline 3 Evaluate 2 Implement user testing low fidelity prototypes 40 Low fidelity Prototypes Paper is a very fast and effective prototyping tool Sketch windows menus dialogs widgets Crank out lots of designs and evaluate them e Hand sketching is OK even preferable Focus on behavior amp interaction not fonts amp colors Similar to design of your data structures amp algorithms Paper prototypes can even be executed Use pieces to represent windows dialogs menus Simulate the computer s responses by moving pieces around and writing on them 41 Paper Prototypes Paper Prototypes 43 Paper Prototypes 44 User Testing Startwith a prototype Write up a few representative tasks Short but not trivial e g add this meeting to calendar type this letter and print it e Find a few representative users 3 is oft
3. AD the Licen gt la TopBlack png The program is distributed Visit my site url url Celine Dion My Heart Will Go On Web png j mani E CHARLES SHAW Girl You Know E FILEMAT Play Next Rand Repeat YOU MUST READ the bj cense terms Pause Prev Cip Eri consider you have a license registe Files 25 Encrypted 0 SelNum 0 Selsz B TotalSz 3 5 MB Index 13 Sz 1 6 KB 0 B Attra HL1 SCO Title E Program FilesiFileMatrix Edit Ink Desc The target program is used by the Edit Function TypeP Sz196 0KB 0 AttrA Title E Program Files Windows NT Accessories wordpad ex Mod Thursday August Locate Search Recycle Delete Close viewer MPL Current file E Progran Files FileMatrix Edit Ink Double LMB Run Ctrl automove to left Shift autoopen to right Alt autohdld RMB view MMB Edit LMB Drag File dra menu RMB Drag Set with source path Drd get the number of columns for each board Set the height of thumbs The hint bar shows hints for controls over which the mouse is moved Quickly change to a new set of colors 36 Simplicity Google Images Groups Directory News Advanced Search Preferences Google Search I m Feeling Luc Language Tools Advertise with Us Business Solutions Services amp Tools Jobs Press amp Help 2003 Google Searching 3 307 998 701 web pages 37 Design Principles for Simplicity e Less is More S AM
4. CSE 331 Software Design amp Implementation Hal Perkins Autumn 2013 Usability Slides by Mike Ernst and David Notkin based on slides by Robin Miller Usability A lecture on usability won t make anyone an interface expert any more than using LaTeX makes one a graphics designer But it s important to have some appreciation for the issues And you re designing a UI in hw9 IF YOU REALLY HATE SOMEONE TEACH THEM TO RECOGNIZE BAD KERNING A User Interface Example Select an award style Artiflai ol 5 ACHIEVEMENT nor ra deg imr Pal nanmoc gt y PAE glee eo 20 r lane 11 5 Hab p ates best brt tad CERTIFICATE OF ACHIEVEMENT B O O ll Source Interface Hall of Shame What s wrong Usability is about creating effective user interfaces The first slide shows a WYSIWYG GUI but it still fails why Thelong help message is needed for a simple task because the interface is bizarre The scrollbar is used to select an award template Each position on the scrollbar represents a template and moving the scrollbar back and forth changes the template shown Cute but bad use of a scrollbar How many templates No indication on scrollbar How are the templates organized No hint User Interface Hall of Shame Inconsistent with common Select an award style usage of scrollbars IER SERVI usually used CUSTOMER SERVIC for continuous scrolli
5. back Response time rules of thumb lt 0 1 sec seems instantaneous 0 1 1 sec user notices but no feedback needed 1 5 sec display busy cursor gt 1 5 sec display progress bar 23 Progress bars IM JUST OUTSIDE TOWN SO T SHOULD BE THERE IN FIFTEEN MINUTES ACTUALLY IT S LOOKING MORE LIKE Six DAYS NO WAIT THIRTY SECONDS ASDA 00 v THE AUTHOR OF THE WINDOWS FILE COPY DIALOG VISITS SOME FRIENDS 24 Efficiency i How quickly can an expert Sunset jpg 3 0 RGB 50 operate the system input commands perceiving and processing output Edit Quit Ctl Q Aboutthe performance of the Select dE zu I O channel between the user Ve sae As and the program Lye o Revert Tools _ Page Setup Fewer keystrokes to do a Dialogs Pim task is usually more efficient Fiters Close CIHW but it s subtle ea e The old Gimp interface used only contextual cascading submenus studies show it s actually slower to use than a menu bar a Script Fu djs m Sunset jpg 3 0 RGB 50 25 Some Facts About Motor Processing Senses A Open loop control i Motor processor runs by itself a Cycle time is 70 ms Feedback e Closed loop control Muscle movements or their effect on the world are perceived and compared with desired result Cycle time is 240 ms 26 Pointing Tasks Fitts s Law e How long does it take to reach a target
6. en enough to find obvious problems e Watch them do tasks with the prototype 45 How to Watch Users Brief the user first being a test user is stressful 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 e Ask user to think aloud Be quiet Dont help don t explain don t point out mistakes Sit on your hands if it helps Two exceptions prod user to think aloud what are you thinking now and move on to next task when Stuck e Take lots of notes 46 Watch for Critical Incidents Critical incidents events that strongly affect task performance or satisfaction Usually negative Errors Repeated attempts Curses e Can also be positive Cool Oh now see 47 Summary You are not the user e Keep human capabilities and design principles in mind e terate over your design Write documentation e Make cheap throw away prototypes Evaluate them with users 48 Further Reading General books on usability Johnson GUI Bloopers Don ts and Dos for Software Developers and Web Designers Morgan Kaufmann 2000 Jef Raskin The Humane Interface Addison Wesley 2000 Hix amp Hartson Developing User Interfaces Wiley 1995 Low fidelity prototyping Rettig Prototyping for Tiny Fingers CACM April 1994 Usability he
7. ity especially with the scrollbar Unfamiliar usage Inconsistent usage And outright CERTIFICATE OF ACHIEVEMENT inappropriate usage Source Interface Hall of Shame 15 Metaphorical Design Designers based it on a real world plastic CD case Metaphors are one way to make an interface intuitive since users can make guesses about how it will work Dominated by static artwork clicking it does nothing Why A CD case doesn t actually play CDs so the designers had to find a place for the core player controls The metaphor is dictating control layout against all other considerations Also disregards consistency with other desktop applications Close box Shut it down Source Interface Hall of Shame People Don t Learn Instantly Microsoft Word ho spelling check is complete i 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 Source Interface Hall of Shame To design for learnability it helps to know how people actually learn his example shows overreliance on the user s memory It s a modal dialog box so the user needs to click OK But then the instructions vanish from the screen and the user is left to struggle to remember them Just because you ve said it doesn t mean they know it Some Facts About Memory amp Learning Small 7 2 chunk
8. n Excel Disable illegal commands hae ch Sopy Separate risky commands from common ones F Use confirmation dialogs sparingly the last data Support undo Good error messages Precise Click this to display an overview of this dialog box idiot B Speak the user s lang uage For Help on an item click at the top of the dialog box and Constructive hel p then click the item ki Pol ite eux TENOR Some Duerite Hall of Shame 35 Simplicity System information Board bar each board is a set of columns FileName b UU pars 2002553 VT C45 8 Jen HAGAE SUE ctive column Work Column File Viewer MPLs SystemTools Tools Sites Favorites Help Register Man 1 Documents 2 Pictures 3 Videos 4 Music 5 Books 6 Kits 7 Downloads 8 F vorites 9 Backup 10 Programs 11 This 12 CD f 20 21 22 2 29 30 Fix Weld Thumb Part SysL i Part SysL Weld Thumb Part 3 A Ha Crying in the rain mp Loc Hyst 3 Hyst Prev Alphaville Big In Japan mp3 Design ALPHAVILLE Forever Young mp ANTIQUE Dinata Dinata mp3 Reflexology Er 0007 7 7 ANTIQUE Se Thello mp3 SexualEducatid E Backstreet Boys Shape Of My Hi Code txt R l t98 Backstreet Boys Larger than lifi Colors htm f zi ileM trix BERLIN Take My Breath Away rr FrontPage doc LPE BINGOBOYS FrontPageBlack doc jc Se 585 B J it Media player Legal txt FILEMATRIX SongsPlayList mpl ud Top UM UserLogo bi E die YOU MUST RE
9. ng not discrete selection va 2 a How does a ve i CUSTOMER SERVICE AWARD ind a template they ve used ina Jl before EE Redesigning the Interface Click and Print Certificate of blank Certificate of amp chievement Create Your Own Award ER wr Customer Service Award CUSTOMER SERY EER Distinguished Service h wpe wigo Employee of the Month mire ara aay Leadership Award Outstanding Performance Safety Award Sales Award Team Player Award e rari cia Pabrl Source Interface Hall of Shame Another for the Hall of Shame First Launch Date 09 09 97 Set Da First Launch Time IENE Set Tin The date and time ook editable but aren t click Set Time for a dialog box instead Dialog box displays inconsistently with launch time 12 vs 24 analog Left Mouse Button Change Minute vs digital Right Mouse Button Change Hour Click left right button to increase the Cancel minutes hours by 1 makes a sophisticated GUI into a clock radio Source Interface Hall of Shame 7 Hall of Fame or Hall of Shame Sunset jpg 3 0 RGB 5096 BG Original Gimp windows had no menus instead right click to get a us CHO popup menu and i View xia navigate further Is EE f Layers this a fast way to Tools Page Setup select commands Dialogs Print Filters CHH Media Quit Ctl Q Video Sc
10. onfirmation Dialogs Confirmation3 Microsoft Internet Explorer da File Edit View O 3 2 P em Sir Favorites Favorites Tools Help ay Address http localhost Confirmation3 aspx DI Go Reservoir Dogs Pulp Fiction Natural Born Kille Microsoft Internet Explorer Eg 12 Monkeys Done 3 Are you sure you want to delete Natural Born Killers J Local intranet Save Message D Message has not been sent Do you want to save the message in the Drafts folder 33 Confirmation Dialogs Are you sure hey make common operations take two button presses rather than one Frequent confirmations dialogs lead to expert users chunking it as part of the operation Reversibility i e undo is a far better solution than confirmation operations that are very hard to reverse may deserve confirmation however Conf Jag J gt ix a Le po Search sl Favorites Address c http localhost Confirmation3 aspx Reservoir Dogs Pulp Fiction Natural Born Killez Microsoft Internet Explorer t3 12 Monkeys 2 j re you sure you want to delete Natural Born Killers Done J Local intranet Are you sure you want to quit X Cancel Design Principles for Error Handling mem D Prevent errors as much as possible n Selection is better than typing ze Avoid mode errors nd a
11. ript Fu i DIEI Eunset jpg 3 0 RGB 50 Dance User Interfaces Are Hard to Design e You are not the user Most software engineering is about communicating with other programmers UI is about communicating with users Theuseris always right Consistent problems are the system s fault e but the user is not always right Users aren t designers Iterative Design Ul development is an iterative process TEN Evaluate Implement e terations can be costly If the design turns out to be bad you may have to throw away most of your code Spiral Model Use throw away prototypes and cheap evaluation for early iterations Design Evaluate Implement Usability Defined Usability 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 Memorability is it easy to remember what you learned Errors are errors few and recoverable Satisfaction is it enjoyable to use Lecture Outline I Design design principles 3 Evaluate 2 Implement user testing low fidelity prototypes Usability Goals Learnability Visibility Efficiency Error handling e Simplicity Learnability Select an award style Relatedto intuitive and user friendly The first example had serious problems with Certificado of ACHIEVEMENT learnabil
12. s Short lived gone in 10 sec Maintenance rehearsal is required to keep it from decaying but costs attention e Long term memory Practically infinite in size and duration Elaborative rehearsal transfers chunks to long term memory Design Principles for Learnability Confirm Consistency Cancel current operation Similar things look similar different things different Terminology location argument order Internal external metaphorical 1 This Really Happened B AN Type mismatch Match the real world Common words not tech jargon Source Interface Hall of Shame Recognition not recall Labeled buttons are better than command languages Combo boxes are better than text boxes E Calculator ng ngi Edit View Help Visibility p 3 Familiar easy to use But passes up some tremendous anaaga opportunities including QGGOG Why only one line of display o Why not a history Why only one memory slot Why display M instead of the actual number stored in memory Visibility also compromised by invisible modes When entering a number pressing a digit appends it to the number but after pressing an operator button the next digit starts a new number no visible feedback the low level mode t also lets you type numbers on the keyboard but there is no hint about this 20 Feedback u
13. uristics Nielsen Heuristic Evaluation http www useit com papers heuristic Tognazzini First Principles http www asktog com basics firstPrinciples html 49
14. w p Nu LAC 77 Hm ca ES I AaBbi AaBbC AaBbCd AaBbCc Paste I f Re AV Z gt Heading1 Heading2 Normal Heading3 d s n Paragraph AaBbCcD AaBbCcD AaBbCcl AaBb Emphasis Strong f Block Text Title AaBbCcI AaBbCcD AABBCMDI AaBbCcl Subtitle Subtle Em Intense Em Quote 4aBbCcL AABBCCDI AABSCCDI AABBCODL Intense Q Subtle Ref Intense Re Book Title Fabrikam Journ ORGANIZATIONAL REALIGNMENT f List Para In order to meet our growing sales demands and to optimize the supply chain throughout our worldwide operations Fabrikam is pleased to announce the realignment of our sales and manufacturing workforce world wide The next executive leadership team outlined in the table below will streamline each of our regional operations to maximize profit in the wav that best 21 Facts About Human Perception Perceptual fusion stimuli 100ms apart appear fused to our perceptual systems 10 frames sec is enough to perceive a moving picture Sites Computer response 100 ms feels netananecus 053 83 9 ee da M LEES Color blindness many users 8 of E L2 Md s J all males can t distinguish red from green Google Google normal vision red green deficient 24 Poy DUM wy at els Design Principles for Visibility e Make system state visible keep the user informed about what s going on Mouse cursor selection highlight status bar e Give prompt feed
Download Pdf Manuals
Related Search