Home

Slides

image

Contents

1. A Ele Gimp windows have no menus instead right click PRU Print ira Ctl W Quit Ctl Q commands Dialogs Filters Media Video gt ro Script Fu Sunset jpg 3 0 RGB 50 Sancel to get a popup E 7 Open CHO menu and navigate View Sme ps image k Save As further Is this a Les o Rente fast way to select Tools Page Setup User Interfaces Are Hard to Design You are not the user Most software engineering is about communicating with other programmers Ul is about communicating with users e The user is 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 EN 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
2. 21 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 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 22 Progress bars TM JUST OUTSIDE TOWN 50 T SHOULD BE THERE IN FIFTEEN MINUTES ACTUALLY ITS LOOKING MORE LIKE Six DAYS NO WAIT THIRTY SECONDS THE ALTHOR OF THE WINDOWS FILE COPY DIALOG VISITS SOME FRIENDS 23 Efficiency How quickly can an expert operate the system input commandas perceiving and processing output EE About the performance of the NE I O channel between the user and the program Fewer keystrokes to do a task is usually more efficient ters Cita but it s subtle an e The Gimp interface uses only contextual cascading O qu submenus studies show it s actually slower to use than a menu bar Sunset jpg 3 0 RGB 50 24 Some Facts About Motor Processing Open loop control Motor processor runs by itself s d Cycle time is 70 ms Feedback Closed loop control Muscle movements or their effect on the world are perceived and compared with desired result Cycle time is 240 ms 25 Pointing Tasks Fitts s Law How long does it take to reach a target
3. user testing low fidelity prototypes Learnability Select an award style Related to intuitive and user friendly The first example had recortificaio of serious problems with ACHIEVEMENT learnability especially cia with the scrollbar Ce Unfamiliar usage Inconsistent usage And outright CERTIFICATE OF ACHIEVEMENT inappropriate usage i oa 33 3 Bg o Came a hert Dr a Source Interface Hall of Shame 14 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 E t 15 People Don t Learn Instantly Hicrosoft Word s The 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 e To design for learnability it helps to know how people actually learn his example shows overreliance on the u
4. 5 MB PartSz 6 8 GB 30 4 GB PartAttr CEQRpSSF Index 13 Sz 1 6 KB 0B 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 VPrograrN Files FileMatrix Edit Ink Double LMB LMB Drag File dray menu RMB Drag Set with source path Drd Sot 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 32 Simplicity Gooqle 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 307 998 701 web pages 33 Design Principles for Simplicity Less is More Omit extraneous information graphics features Good graphic design Few well chosen colors and fonts Group with whitespace seismic 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 e What is hard to describe e Who is your target user Power users need
5. 9 lt S Moving mouse to target on screen Moving finger to key on keyboard Moving hand between keyboard and mouse 26 Design Principles for Efficiency Fitts s Law and Steering Law Make important targets big nearby or at screen edges Avoid steering tasks 1 VOLVOLDUC Provide shortcuts 2 CADOCUMENTSCLERICALSRESUME DOC Keyboard accelerators 3 CADOCUMENTACLERICAL BUSCARD DOC 4 CADOCUMENTSCONTACTS DOC Styles DET Bookm arks Source Interface Hall of Shame History E sit 21 Mode Error e Modes states in which actions have different meanings Vis 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 jun eo 28 Confirmation Dialogs e Confirmation3 Microsoft Internet Explorer Box File Edit View Favorites Tools Help Ea Back x a P Search n Feror r amp Tm Jlocalhosticonfimmationa aspx E g Go Reservoir Dogs Pulp Fiction Natural Born Kille Microsoft Internet Explorer Eg 12 Monkeys Address 3 Are you sure you want to delete Natural Born Killers Done ERI m m m J Local intranet Save Message D Message has not been sent Do you want to save the message in the Drafts folder 29 Confirmation Dialogs Are you sure e They make common a
6. CSE 331 Software Design amp Implementation Hal Perkins Winter 2012 Usability Slides by David Notkin and Mike Ernst based on slides due to 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 youre designing a UI in hw6 IF YOU REALLY HATE SOMEONE TEACH THEM TO RECOGNIZE BAD KERNING User Interface Hall of Shame Select an award style select an award style using the scroll bar When you ve found a style that Suits YOu press OKAY to create that award and open the editor evertificate of ACHIEVE MENT ig mar dk LAIT amas soam xd I Trl ri Ir E Tim r r 11 Pa ian d ul hrt prt ad CERTIFICATE OF ACHIEVEMENT 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 e 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 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
7. Jag operations take two eo button presses rather a OF M ddress c http localhost Confirmation3 aspx than one Frequent confirmations Wild dialogs lead to expert pee Natural Born Kille users chunking it as Su Microsoft Internet Explorer 3 part of the operation 3 Are you sure you want to delete Natural Born Killers Reversibility i e undo n x ett wiqi dove Local intranet than confirmation operations that are very hard to reverse may deserve confirmation however Are you sure you want to quit 30 Design Principles for Error Handling eee Prevent errors as much as possible J Sn Selection is better than typing om Avoid mode errors ara quis E Disable illegal commands have only Copy Jr v Separate risky commands from common ones m Use confirmation dialogs sparingly the last dataserzonmrmowrr de Support undo Good error messages TOME Precise Speak the user s language Constructive help Polite Source Interface Hall of Shame Click this to display an overview af this dialog box idiot For Help on an item click at the tap of the dialog box and then click the item 31 System information Board bar each board is a set of columns Hilean Monday Jue db 2003 55 E 5 00 PM C45 8 Jen HAE SU E si EXHI S Work Column File Viewer MPLs SystemTools Tools Sites Favorite
8. Shame Inconsistent with common Select an award style Select an sin award syle _ using the TOMER SERvr usually used scroll bar CUSTOMER SERVIC for continuous ne ei you ve found scrolling not a style that discrete suits you selection press OKAY vat art a to create that How does a award and frequent user open the j editor CUSTOMER SERVICE AWARD find a template they ve used before Redesigning the Interface w Llick and Print Certificate of blank Certificate of Achievement Create Your Own Award I T ry Customer Service Award cose MER SERVE Distinguished Service ee Employee of the Month aes emt Pe eee n3 00 Leadership Award Outstanding Performance Safety Award Sales Award Team Player Award cre rarr vie 1amlia E rl Source Interface Hall of Shame Another for the Hall of Shame First Launch Date 094 09 97 Set Da First Launch Time Set Tin The date and time look editabl but aren t click Set Time for a dialog box instead Dialog box displays inconsistently with launch time 12 vs 24 analog Lett Mouse Button Change Minute i Right Mouse Button Change Hour vs digital 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 50
9. a manual Casual users might not Piecemeal online help is no substitute 35 Lecture Outline 3 Evaluate 2 Implement user testing low fidelity prototypes 36 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 Paper Prototypes Paper Prototypes to Jos aec Mev j Nor Ww Ter gt Pata hy MA Teas LN 26x fir uw eU 3 n DU 4 Be T LN afe a E Eq She daa AL Ke E N Bde t IT 39 Paper Prototypes A Bora a dna 3 2314 gt km ad AR sys 393 2M af r A 40 User Testing Start with a prototype Write up a few representative tasks Short but not trivial e g X add this meeting to calendar type this letter and print it Find a few representative users 8 is often enough to find obvious problems e Watch them do tasks with the prototype 4 How to Watch Users Brief the user first being a test user is stre
10. basics firstPrinciples html 45
11. g 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 19 Feedback Tz if AaBbCcD Emphasis AaBbCcI Subtitle AaBbCcL Intense Q Fabrikam Journ ORGANIZATIONAL REALIGNMENT f List Para AaBbi Heading 1 AaBbC Heading 2 AaBbCcD Strong AaBbCcD Subtle Em AaBsCcD Subtle Ref In order to meet our growing sales demands and to optimize the supply chain 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 AaBbCcI fl Normal AaBbCcI f Block Text AABBC ODI Intense Em AABBCCO Intense Re AaBbCc Heading 3 AaBb Title AaBbCel Quote AABBCQDL Book Title roughout our 20 Facts About Human Perception Perceptual fusion stimuli lt 100ms apart appear fused to our perceptual systems 10 frames sec is enough to perceive a moving picture Computer response lt 100 ms feels instantaneous di Color blindness many users 8 of all males can t distinguish red from green Google oe normal vision red green deficient
12. s Help Register STE Main i Documents 2 Pictures 3 Videos 4 Music 5 Books 6 Kits 7 Downloads 8 F vorites 9 Backup 10 Programs 11 This 12 CD 19 20 21 22 2 The fixed attribute determines how the column content moves to left right 29 30 Fix Weld Thumb Part SysL Fix Part SysL Weld Thumb Part Sys A Ha Crying in the rain mp Loc Hyst Oxa and s acd Hyst Prev Alphaville Big In Japan mp3 Design Thumbs are displayed when the Thumb is pressed hen AVILLE Li Hii mp T EystemTools ANTIQUE Dinata Dinata mp3 mi H Links Files are sorted by type directories links programs documents E Opa Opa mp3 Reflexology QUE Se Thello mp3 SexualEducatid Inactive file Fe Fu E Backstreet Boys Shape Of My Hi Colors htm FrontPage doc FrontPageBlack doc c Sz 585 B Legal txt FILEMATRIX SongsPlayList mpl Britney Spears Top png YOU MUST READ the Licen e Le 096 bip Britney_Spears_U 3 TopBlack png The program is distributed Visit my site url Celine Dion My Heart Will Go On Web png v L FileMatrix exe manifest mani mari E CHARLES SHAW Girl You Know I BERLIN Take My Breath Away rr BINGORO i Media player Code txt seggi j Backstreet Boys Larger than ifi FILEMATRES es n Play Next Rand Repeat YOU MUST READ the bj cense terms Pause Prev Cip Eri consider you have a license registe i h ion di ile li Stop Files 25 Encrypted 0 SelNum 0 Selsz 0 B TotalSz 3
13. ser 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 chunks 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 Cancel current operation YY Consistency Similar things look similar different things different OK Terminology location argument order j Internal external metaphorical is Heally Happene Ea AN Type mismatch e 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 Visibility TIE 0 O Familiar easy to use But passes up some tremendous a opportunities including ele lt lta Why only one line of display oman 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 e When enterin
14. ssful 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 dont explain don t point out mistakes Sit on your hands if it helps wo exceptions prod user to think aloud what are you thinking now and move on to next task when Stuck e Take lots of notes 42 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 43 Summary You are not the user e Keep human capabilities and design principles in mind e terate over your design e Write documentation e Make cheap throw away prototypes Evaluate them with users 44 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 heuristics Nielsen Heuristic Evaluation nttp www useit com papers heuristic Tognazzini First Principles http www asktog com

Download Pdf Manuals

image

Related Search

Slides slides slidesgo slideshow slides carnival slides google slideshare slides mania slideshow maker slides templates slideshow app slides ai slideshow templates slidespeak slideshow maker free slideshare downloader slideshow google slides gpt slidesgo ai slides ai free slideshare ppt slideserve slidesgo ai presentation maker slides carnival powerpoint slidesgo powerpoint

Related Contents

Standherde F 2353 17 F 2355 17/18 FZL 2355 14 FUE 2555 27  「換気扇コントローラ」 工事説明書  MANUEL DE SERVICE TECHNIQUE GAMME CYBER  Senza titolo-1  Hessaire MFC1600 Use and Care Manual  Samsung SGH-X210 Instrukcja obsługi  VM 35 User Manual  ADA-8402-B User Manual - AV  États Unis - Manufacturiers et Exportateurs du Québec    

Copyright © All rights reserved.
Failed to retrieve file