What`s wrong? User Interface Hall of Shame Redesigning the
Contents
1. type this letter and print it o Find a few representative users O Three is often enough to find obvious problems o Watch them do tasks with the prototype How to Watch Users oO Brief the user first being a test user is stressful O I m testing the system not testing you O If you have trouble it s the system s fault O Feel free to quit at any time Ethical issues informed consent o Ask user to think aloud o Be quiet Don t help don t explain don t point out mistakes Sit on your hands if it helps O Two exceptions prod user to think aloud what are you thinking now and move on to next task when stuck o Take lots of notes Summary o You are not the user 4 Keep human capabilities and design principles in mind o Iterate over your design o Write documentation o Make cheap throw away prototypes o Evaluate them with users Next steps o Monday UML Wednesday TBA O A5 and A6 CSE 331 Autumn 2011 Watch for Critical Incidents o Critical incidents events that strongly affect task performance or satisfaction o Usually negative Errors O Repeated attempts Curses o Can also be positive O Cool O Oh now see Further Reading 4 General books on usability Johnson GUI Bloopers Don ts and Dos for Software Developers and Web Designers Morgan Kaufmann 2000 o Jef Raskin The Humane Interface Addison Wesley 2000 o H2. 2095 15 05 O00 Ss PAT fe TAA SD he WE oHa Work Cinn De Yever Fis Systewfook Joos tes Pgveeber tel Copter 7 Cocumerts Z Petes CH eue Mua 5 Books 6 Cau Doakoak i Garonne 9 Backup 10 Progemwc St Thee 12 wr 21 2 a rbk Coterreres Now the AUT tardat movos 0 WJ ogre x Weld Thumb Fart Syst Pat a GED weit runt ret So tye Peet Aiturde fag in apana T oro nara nowt a en ee we D Been ah ASTI Dinata Crater a i 2 Fes west ye ar drectories tke prograrre routs Y Ope Opa nes ERTER Se Thala red o Bschstrnet Brys Shape OF My Ht he k N Badstrest Doyr Larger Jhan aeS Actve tie or GEPAIN Tahe My Breath Anny sT Tea Fe AN i a rede ome ae ort Mecta pier bie aore FAEPATRE crqePtahat gd Birey Scers Aad r ogan mT T GA on te Xe Ar LnerLoge bee Brtray Spams LAANE e rae od ees staazi ine Dan My Heaet 8 Go On D E aan e rores D oran ssw avu how 1 4 FILERAT Jand FT Shi Aw Net aed DIR 3 P Drapas Piaviwer tant pictues eames Drag up or aan to change tho heigt at teviews N T E ow fase fer r YOU MIOT BEAD che bagense term consider you have a license regista POMADA abau aikopanbon dreckey Ma br tangat 2 TELLLLIL Crerypted a Satam 0 Gz 00 Tossa sro Partis 6 8 O04 BY Pastittr DEFE Fedex 13 SIDA Att Mi SCO Tete EP rogram Pif riedt be M Mad Surctay May 10 2000 230 11 2850 PM 04 Cece The target pogan k used by the Edt function if yOu watt 10 aot you p
3. Hall of Shame Simplicity Google Images Groups Directory News Advanced Search Preferences Google Search I m Feeling Lucky Language Tools Advertise with Us Business Solutions Services amp Tools Jobs Press amp Help 2003 Google Searching 3 207 998 701 web pages Document your system o Write the user manual Program and UI metaphors O Key functionality Not exhaustive list of all menus oO What is hard to describe o Who is your target user O Power users need a manual Casual users might not Piecemeal online help is no substitute Lecture Outline Design design principles 3 Evaluate 2 Implement user testing low fidelity prototypes Paper Prototypes Paper Prototypes Low fidelity Prototypes o Paper is a very fast and effective prototyping tool O Sketch windows menus dialogs widgets Crank out lots of designs and evaluate them o Hand sketching is OK even preferable Focus on behavior amp interaction not fonts amp colors O Similar to design of your data structures amp algorithms o Paper prototypes can even be executed o Use pieces to represent windows dialogs menus Simulate the computer s responses by moving pieces around and writing on them Paper Prototypes User Testing o Start with a prototype o Write up a few representative tasks Short but not trivial O e g add this meeting to calendar
4. Language and choose no proofing Source Interface Hall of Shame o To design for learnability it helps to know how people actually learn o This 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 a Just because you ve said it doesn t mean they know it Design Principles for Learnability Consistency p Cancel curent operation O Similar things look similar Facts About Memory amp Learning Small 7 2 chunks O Short lived gone in 10 sec O Maintenance rehearsal is required to keep it from decaying but costs attention o Long term memory O Practically infinite in size and duration O Elaborative rehearsal transfers chunks to long term memory Visibility Familiar easy to use But passes up some tremendous OMS JOOS AIO different things different Terminology location argument order Internal external metaphorical cot A o This Really Happened IN Type mismatch pogana opportunities including o Why only one line of display Why not a history 0 Why only one memory slot Why display M instead of the actual number stored in memory Fate y OB Z aex xi A EE M le o Clipboard 5 Font Paragraph Match the real world Common words not tech jargon Source Interf
5. Select an award style certificate of s ACHIEVEMENT rt CERTIFICATE OF ACHIEVEMENT UE O Z O Z O O CSE 331 Aare SOFTWARE DESIGN amp IMPLEMENTATION Much due to Rob Miller z 2011 User Interface Hall of Shame Source Interface Hall of Shame Inconsistent with Select an award style common usage of scrollbars usually used for cUSTOMER SERVIcp continuous ato RES scrolling not discrete selection e v0 20 0 How does a frequent user CUSTOMER SERVICE AWARD ne Epia gg they ve used before Another for the Hall of Shame Source Interface Hall of Shame First Launch Date 09709797 Set Da First Launch Time BE Set Tin o The date and time look editable but aren t click Set Time for a dialog box instead Dialog box displays inconsistently Left Mouse Button Change Minute with launch time 12 vs 24 analog Right Mouse Button Change Hour vs digital Conca Launches housekeeping tasks at scheduled intervals Click left right button to increase the minutes hours by 1 makes a sophisticated GUI into a clock radio What s wrong 4 Usability is about creating effective user interfaces o The first slide shows a WYSIWYG GUI but it still fails why The long 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 templat
6. ace Hall of Shame Recognition not recall Labeled buttons are better than command languages Combo boxes are better than text boxes Feedback Fabrikam Journal Microsoft Word Page layout References Mailings Review View B r Cambria 720 pA D EE EE font feos AaBbCdl AaBbCc eading i Heading Heading 2 Normal Heading 3 AaBbCcD AaBbCeD AaBbCel AaBbC Emphasis Strong T Biock Text Tale AaBbCcl AaBbCcD AaBeccwD AaBbCel Subtitle Subtieim intense Em Quote eBbCcl AaBsCcD AaBaCcD AsBaCcDr Fa b rl ka m J o u r ni a Q Subtle a intense Re aA AaBbCel ORGANIZATIONAL REALIGNMENT 8 Uist Pore In order to meet our growing sales demands and to optimiz 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 operatidhs to maximize orofit in the wav that best O Visibility also compromised by invisible modes m 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 E It also lets you type numbers on the keyboard but there is no hint about this Facts About Human Perception o Perceptual fusion stimuli lt 100ms apart appear fused to our perceptual systems O 10 frames sec is enough to p
7. e 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 CSE 331 Autumn 2011 Redesigning the Interface w Click and Print Certificate of blank Certificate of Achievement Create Your Own Award F J ER vr Customer Service Award CUSTOMER SERY IER Distinguished Service tee ee W Ra Employee of the Month 2 n aa Leadership Award Outstanding Performance Safety Award Sales Award Team Player Award Source Interface Hall of Shame User Interfaces Are Hard to Design o You are not the user O Most software engineering is about communicating with other programmers Ul is about communicating with users o The user is always right O Consistent problems are the system s fault O but the user is not always right Users aren t designers Iterative Design 4 Ul development is an iterative process loan Evaluate Implement Vo 4 Iterations can be costly but the benefits can be high O If the design turns out to be bad you may have to throw away most of your code Usability Defined o Usability how well users can use the system o Dimensions of usability O Learnability is it easy to learn O Efficiency once learned is it fast to use Memorability is it easy to remember what you learned Oo Errors are errors few and recoverable O Sa
8. erceive a moving ape satis PRE Fie ae fate Computer response lt 100 ms feels instanta 2h Fey o Color blindness many users 8 of 7 distinguish red from green Google Conn normal vision red green deficient Design Principles for Visibility Efficiency o Make system state visible keep the user informed How quickly can an expert b hat operate the system input about what s going on commands perceiving and O Mouse cursor selection highlight status bar processing output r About the performance of the o Give prompt feedback response time rules of O omel Daven Ser thumb and the program o lt 0 1 sec seems instantaneous Fewer keystrokes to do a task is usually more efficient but it s subtle o 0 1 1 sec user notices but no feedback needed ciw Ctl a oO 1 5 sec display busy cursor The Gimp interface uses only o gt 1 5 sec display progress bar contextual cascading submenus studies show it s actually Fo unset jpg 3 0 RGB 50 slower to use than a menu bar Some Facts About Motor Processing Pointing Tasks Fitts s Law o Open loop control o How long does it take to reach a target O Motor processor runs by itself i Oo Cycle time is 70 ms Feedback o Closed loop control Muscle movements or their effect on the world are perceived and compared with desired result oO Cycle time is 240 ms O Moving mouse to target on screen Moving finger to
9. ix amp Hartson Developing User Interfaces Wiley 1995 o Low fidelity prototyping O Rettig Prototyping for Tiny Fingers CACM April 1994 o Usability heuristics Nielsen Heuristic Evaluation http www useit com papers heuristic Tognazzini First Principles http www asktog com basics firstPrinciples html CSE 331 Autumn 2011
10. key on keyboard O Moving hand between keyboard and mouse Design Principles for Efficiency Mode Error o Fitts s Law and Steering Law constrained o Modes states in which actions have different movement meanings oe o Make important targets big nearby or at screen O Vi s insert mode vs command mode edges o Drawing palette Avoid steering tasks 1VOLVO DOC Reducing mode errors Provide shortcuts 2 CADOCUMENT CLERICAL RESUME DOC 3 CADOCUMENT CLERICAL BUSCARD DOC O Keyboard accelerators 4 CADOCUMENTSCONTACTS DOC Eliminate modes entirely O Visibility of mode O Styles Ext Disjoint action sets in different modes Source Interface Hall of Shame Bookmarks History Confirmation Dialogs Are you sure They make common operations take two button presses rather than one gt x 2 e J awh p Favortes E ge ess itp Nocabost Confirmations aspx Ee Frequent confirmations dialogs lead to expert Seu i users chunking it as part Of Naai BomE te ak A E the operation 12 Monkeys Reservoir Dogs Delete Y Are you sure you vant to delete Natural Born Kiers Reversibility i e undo is a far better solution than Co cosa confirmation operations gan that are very hard to reverse may deserve confirmation however Glade Are you sure you want to quit Simplicity Sram infomation Beare bar each board te a sat of cohunms Une loge Filetin homiy a Silty od
11. raects ard notes by TypeP Ss PRG ONB D AIA Tithe E Program Pileel Minch NT Vaccamecrten pvordpaciac Mod Thureday Augat Sme ee tech ruma seattle Lese Search Reyi Dete Chooewewer ML cers Mo 2 a a ue q D i Cument fhe T vroget rie risen bir Dade rein angal etecmvetabte Sh autoopen ta ng AR E PME Rew men g LMG Dragi Fedral rami RMD Drag Sat nh Q Get the sumbar a cosmina for oath board f Set the neigh of thumbs Tooter The tind Gar shows fects for cortrote over woch the mouis is movet Gurckty change lo a new ef of Cobre Source Alex Papadimoulis Design Principles for Simplicity o Less is More O Omit extraneous information graphics features o Good graphic design 5 Few well chosen colors and fonts O Group with whitespace o Use concise language O Choose labels carefully Design Principles for Error Handling Prevent errors as much as possible O Selection is better than typing O Reduce mode errors ind an Excel called camer o Disable illegal commands l have only i s well O Separate risky commands from common ones o Use confirmation dialogs sparingly te ast data 4 Support undo 11 Good error messages Click this to display an overview of this dialog box idiot O Precise For Help on an item click at the top of the dialog box and f O Speak the user s language then click the item b O Constructive help Polite Source Interface
12. tisfaction is it enjoyable to use Learnability Select an award style o Related to intuitive and user friendly cortha g y ACHIEVEMENT The first example had oO 3 serious problems with learnability especially with the scrollbar CERTIFICATE OF ACHIEVEMENT DE O Unfamiliar usage a aR Inconsistent usage O And outright inappropriate usage Spiral Model o Use throw away prototypes and cheap evaluation for early iterations Design Evaluate Implement Lecture Outline Design design principles 3 Evaluate 2 Implement user testing low fidelity prototypes Metaphorical Design Designers based it on a real world plastic CD Source Interface Hall of Shame case ao Teed 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 ao 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 People Don t Learn Instantly 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
Download Pdf Manuals
Related Search