Brugergrænseflader til apparater BRGA Presentation 4: Guidelines & Heuristics.

Præsentationer af emnet: "Brugergrænseflader til apparater BRGA Presentation 4: Guidelines & Heuristics."— Præsentationens transcript:

1 Brugergrænseflader til apparater BRGA Presentation 4: Guidelines & Heuristics

2 Ingeniørhøjskolen i Århus Slide 2 af 70 Outline Recap from last time –Cognitive HCI & Methods that we employ –Cognitive Walkthrough Methods vs. Guidelines & Heuristics Types of Guidelines & Heuristics Nielsen’s 9 (10) Heuristics and How to use Method: Heuristic Evaluation Other Guidelines

3 Recap from last time Cognitive HCI & Methods that we may employ Cognitive Walkthrough

4 Ingeniørhøjskolen i Århus Slide 4 af 70 Last time we looked at Cognitive psychology: the study of how people perceive, learn, and remember Cognition: the act or process of knowing Cognitive HCI: –The Human Mind as an information processor –The Human Body as input/output –Hard Science –Predictions/Calculations GOMS/KLA/Fitts Law –Methods for analysis Lab user testing (Think out loud) Expert review Designers: CW (40% of errors found by user testing) –Today Distilled experiences: Guidelines & Heuristics

5 Today: Usability Heuristics Avoid common design pitfalls by following design principles: guidelines & heuristics Inspect an interface for usability problems with these principles (Heuristic evaluation)

6 Ingeniørhøjskolen i Århus Slide 6 af 70 Design principles broad usability statements that guide a developer’s design efforts –use the users language –provide feedback… –MAY LOOK like “common sense” … and is kind of ;-) derived from common design problems across many systems and many researchers and developers experiences

7 Ingeniørhøjskolen i Århus Slide 7 af 70 Available guidelines General guidelines –Shneiderman’s 8 Golden Rules of Interface Design –Nielsen’s 9 principles of design –Molich’s 5 guidelines for screen dialogs –MANY OTHERS – look for yourselves at ACM and Cite Seer Area specific guidelines –Agricultural: Wagner’s 17 Guidelines –Office Workers –Leisure activities (designing for the home) Technology/Platform specific guidelines –Windows (Microsoft guidelines), MS SmartPhone, Apple –Nokia WAP Guidelines

8 Ingeniørhøjskolen i Århus Slide 8 af 70 General Guidelines & Heuristics Guidelines = Heuristics = Experiences We will be looking at Nielsen’s 9 guidelines next Guidelines are easy to understand, so I wont spend time introducing you to them all -> READ!!! REMEMBER: BE CRITICAL!!!

9 Ingeniørhøjskolen i Århus Slide 9 af 70 Usability Engineering – Jakob Nielsen Nine principles of design 1.Simple and natural dialog 2.Speak the user’s language 3.Minimize user’s memory load 4.Be consistent 5.Provide feedback 6.Provide clearly marked exits 7.Provide shortcuts 8.Deal with errors in a positive manner 9.Provide help (+ Prevent Errors in BRGA-1) Heuristic Evaluation

10 Ingeniørhøjskolen i Århus Slide 10 af 70 1 Simple and natural dialogue –use the user’s conceptual model –match the users’ task sequence –minimize mapping between interface and task semantics From Microsoft applications

11 Ingeniørhøjskolen i Århus Slide 11 af 70 1 Simple and natural dialogue Present exactly the information the user needs –less is more less to learn, to get wrong, to distract... –information should appear in natural order related information is graphically clustered order of accessing information matches user’s expectations –remove or hide irrelevant or rarely needed information competes with important information on screen –remove modes –Don’t overdo it don’t add unneeded navigation and window management

12 Ingeniørhøjskolen i Århus Slide 12 af 70 Compuserve Information Manager Services Telephone Access Numbers PHONES Access Numbers & Logon Instructions United States and Canada CompuServe Network Only 9600 Baud List ? List List by: State/Province Area Code File Edit Services Mail Special Window Help 1 Simple and natural dialogue This is Simply Too much!

13 Ingeniørhøjskolen i Århus Slide 13 af 70 Good: information all in the same place Bad: special edit mode

14 Ingeniørhøjskolen i Århus Slide 14 af 70 Good: information all in the same place Bad: special edit mode

15 Ingeniørhøjskolen i Århus Slide 15 af 70 Bad: special edit mode Bad: no direct manipulation (cannot click prescriptions for edit)

16 Ingeniørhøjskolen i Århus Slide 16 af 70 Good: Stable parts of the window Bad: Prescriptions separate from graphics

17 Ingeniørhøjskolen i Århus Slide 17 af 70 collapsed onto one screen (needs formatting) Double click to edit (mode buttons gone) Click to get info Add Undo

18 Ingeniørhøjskolen i Århus Slide 18 af 70 1 Simple and natural dialogue Much more to be said about this (look at Nielsen & Shneiderman) More WILL be said during: –Next presentation: Layout –Future presenation: Human Capabilities (Gestalt Theory)

19 Ingeniørhøjskolen i Århus Slide 19 af 70 My program gave me the message Rstrd Info. What does it mean? That’s restricted information But surely you can tell me!!! No, no… Rsdrd Info stands for “Restricted Information” Hmm… but what does it mean??? It means the program is too busy to let you log on Ok, I’ll take a coffee 2 Speak the users’ language

20 Ingeniørhøjskolen i Århus Slide 20 af 70 2 Speak the users’ language Terminology based on users’ language for task –e.g. withdrawing money from a bank machine Use meaningful mnemonics, icons & abbreviations –eg File / Save Ctrl + S (abbreviation) Alt FS (mnemonic for menu action) (tooltip icon)

21 Ingeniørhøjskolen i Århus Slide 21 af 70 2 Speak the users’ language Use Mapping and Metaphors –Between users conceptual model and the information appliances’ display –> may be achieved by understanding the users work domain and jargon (e.g. through field studies & interviews) –Draw on the users ”non-technical” knowledge by using metaphors e.g. ”trash can” for removing files –Problem: metaphors may deceive the users (the trash can does NOT completely remove the file from disk)

22 Ingeniørhøjskolen i Århus Slide 22 af 70 2 Speak the users’ language

23 Ingeniørhøjskolen i Århus Slide 23 af 70 3 Minimize user’s memory load Computers good at remembering, people are not! Promote recognition over recall –menus, icons, choice dialog boxes vs commands, field formats –relies on visibility of objects to the user (but less is more!) From Microsoft applications

24 Ingeniørhøjskolen i Århus Slide 24 af 70 3: Minimize user’s memory load Gives input format, example and default

25 Ingeniørhøjskolen i Århus Slide 25 af 70 3: Minimize user’s memory load Small number of rules applied universally –generic commands same command can be applied to all interface objects –interpreted in context of interface object copy, cut, paste, drag ’n drop,... for characters, words, paragraphs, circles, files context menus

26 Ingeniørhøjskolen i Århus Slide 26 af 70 3: Minimize user’s memory load

27 Ingeniørhøjskolen i Århus Slide 27 af 70 4: Be consistent Consistent syntax of input (within MS Windows, application, and the dialog) Consist language and graphics –same visual appearance across the system (e.g. widgets) –same information/controls in same location on all windows Consistent effects –commands, actions have same effect in equivalent situations Predictability, reliability OkCancelOkCancelAcceptDismiss Cancel Ok

28 Ingeniørhøjskolen i Århus Slide 28 af 70 4. Be Consistent These are labels with a raised appearance. Is it any surprise that people try and click on them?

29 Ingeniørhøjskolen i Århus Slide 29 af 70 5: Provide feedback Continuously inform the user about –what it is doing –how it is interpreting the user’s input –user should always be aware of what is going on > Doit What’s it doing? > Doit This will take 5 minutes... Time for coffee. Support the users mental model of the system state

30 Ingeniørhøjskolen i Århus Slide 30 af 70 5. Provide feedback What did I select? What mode am I in now? How is the system interpreting my actions? Microsoft Paint What is the feedback of the coffee vending machine?

31 Ingeniørhøjskolen i Århus Slide 31 af 70 5. Provide feedback Provide constant feedback –Also provide partial information –While throwing coins into the vending machine, update for each coin –When a problem occurs – light the display, as turn it off again as soon as the problem is resolved

32 Ingeniørhøjskolen i Århus Slide 32 af 70 5. Provide feedback Be as specific as possible, based on user’s input Best within the context of the action

33 Ingeniørhøjskolen i Århus Slide 33 af 70 5. Provide feedback Multiple files being copied, but feedback is file by file.

34 Ingeniørhøjskolen i Århus Slide 34 af 70 5. Provide feedback Response time –how users perceive delays <0.1s perceived as “instantaneous” 1s user’s flow of thought stays uninterrupted, but delay noticed 10s limit for keeping user’s attention focused on the dialog > 10s user will want to perform other tasks while waiting

35 Ingeniørhøjskolen i Århus Slide 35 af 70 5. Provide feedback Dealing with long delays –Cursors for short transactions –Percent done dialogs –time left –estimated time –Random for unknown times cancel Contacting host (10-60 seconds)

36 Ingeniørhøjskolen i Århus Slide 36 af 70 How do I get out of this? 6. Provide clearly marked exits

37 Ingeniørhøjskolen i Århus Slide 37 af 70 6. Provide clearly marked exits Users don’t like to feel trapped by the computer! –should offer an easy way out of as many situations as possible Strategies: –Cancel button (for dialogs waiting for user input) –Universal Undo (can get back to previous state) –Interrupt (especially for lengthy operations) –Quit (for leaving the program at any time) –Defaults (for restoring a property sheet) –BE CONSISTENT Dangerous with limited undo Core Dump

38 Ingeniørhøjskolen i Århus Slide 38 af 70 7. Provide shortcuts Experienced users - perform frequent operations quickly Strategies: –keyboard and mouse accelerators abbreviations command completion context menus function keys double clicking vs menu selection –type-ahead (entering input before the system is ready for it) –navigation jumps e.g., going to window/location directly, and avoiding intermediate nodes –history systems WWW: ~60% of pages are revisits

39 Ingeniørhøjskolen i Århus Slide 39 af 70 Keyboard accelerators for menus Customizable toolbars and palettes for frequent actions Split menu, with recently used fonts on top Scrolling controls for page-sized increments Double-click raises object- specific menu Double-click raises toolbar dialog box Microsoft Powerpoint

40 Ingeniørhøjskolen i Århus Slide 40 af 70 Alternate representation for quickly doing different set of tasks Toolset brought in appropriate to this representation Microsoft Powerpoint

41 Ingeniørhøjskolen i Århus Slide 41 af 70 8: Deal with errors in a positive manner “Errare humanum est” People will make errors! Errors we make: –Mistakes conscious deliberations lead to an error instead of correct solution –Slips unconscious behaviour gets misdirected en route to satisfying goal –e.g. drive to store, end up in the office shows up frequently in skilled behaviour –usually due to inattention often arises from similar actions

42 Ingeniørhøjskolen i Århus Slide 42 af 70 Designing for slips General rules –prevent slips before they occur –detect and correct slips when they do occur –user correction through feedback and undo –support the mental model of the user

43 Ingeniørhøjskolen i Århus Slide 43 af 70 Types of slips Capture error –frequently done activity takes charge instead of one intended –occurs when common & rarer actions have same initial sequence change clothes for dinner and find oneself in bed (William James, 1890) confirm saving of a file when you don’t want to delete it –minimize by make actions undoable instead of confirmation allows reconsideration of action by user –e.g. open trash to undelete a file I can’t believe I pressed Yes...

44 Ingeniørhøjskolen i Århus Slide 44 af 70 Types of slips Description error –intended action similar to others that are possible usually occurs when right & wrong objects physically near each other –pour juice into bowl instead of glass (Normans affordances) –throw sweaty shirt in toilet instead of laundry basket –move file to wrong folder with similar name –minimize by rich feedback check for reasonable input, etc. undo

45 Ingeniørhøjskolen i Århus Slide 45 af 70 Types of slips Loss of activation –forget what the goal is while undergoing the sequence of actions start going to room and forget why you are going there navigating menus/dialogs & can’t remember what you are looking for but continue action to remember (or go back to beginning)! –minimize by if system knows goal, make it explicit if not, allow person to see path taken SUPPORT THE USERS MENTAL MODEL

46 Ingeniørhøjskolen i Århus Slide 46 af 70 Types of slips Mode errors –people do actions in one mode thinking they are in another refer to file that’s in a different directory look for commands / menu options that are not relevant –minimize by have as few modes as possible (preferably none) make modes highly visible SUPPORT THE USERS MENTAL MODEL

47 Ingeniørhøjskolen i Århus Slide 47 af 70 Generic system responses for errors General idea: Forcing functions –prevent / mitigate continuation of wrongful action Gag –deals with errors by preventing the user from continuing eg cannot get past login screen until correct password entered Warn –warn people that an unusual situation is occurring –when overused, becomes an irritant e.g., –audible bell –alert box

48 Ingeniørhøjskolen i Århus Slide 48 af 70 Generic system responses for errors Do nothing –illegal action just doesn’t do anything –user must infer (able to deduce) what happened enter letter into a numeric-only field (key clicks ignored) put a file icon on top of another file icon (returns it to original position) Self-correct –system guesses legal action and does it instead –but leads to a problem of trust spelling corrector (I hate it when it does that!)

49 Ingeniørhøjskolen i Århus Slide 49 af 70 Generic system responses for errors Lets talk about it –system initiates dialog with user to come up with solution to the problem compile error brings up offending line in source code Teach me –system asks user what the action was supposed to have meant –action then becomes a legal one

50 Ingeniørhøjskolen i Århus Slide 50 af 70 What is “error 15762”? 8: Deal with errors in a positive manner

51 Ingeniørhøjskolen i Århus Slide 51 af 70 A problematic message to a nuclear power plant operator 8: Deal with errors in a positive manner

52 Ingeniørhøjskolen i Århus Slide 52 af 70 8: Deal with errors in a positive manner Adobe's ImageReady AutoCAD Mechanical Windows Notepad Microsoft's NT Operating System

53 Ingeniørhøjskolen i Århus Slide 53 af 70 8: Deal with errors in a positive manner Provide meaningful error messages –error messages should be in the user’s task language –don’t make people feel stupid “Try again, bonehead!” “Error 25” “Cannot open this document” “Cannot open “chapter 5” because the application “Microsoft Word” is not on your system” “Cannot open “chapter 5” because the application “Microsoft Word” is not on your system. Open it with “Teachtext” instead?”

54 Ingeniørhøjskolen i Århus Slide 54 af 70 8: Deal with errors in a positive manner Prevent errors –try to make errors impossible –modern widgets: can only enter legal data Provide reasonableness checks on input data –on entering order for office supplies 5000 pencils is an unusually large order. Do you really want to order that many?

55 Ingeniørhøjskolen i Århus Slide 55 af 70 Manuals...

56 Ingeniørhøjskolen i Århus Slide 56 af 70 9. Provide help Help is not a replacement for bad design! Simple systems: –walk up and use; minimal instructions Most other systems –feature rich –simple things should be simple –learning path for advanced features Volume 37: A user's guide to...

57 Ingeniørhøjskolen i Århus Slide 57 af 70 Documentation and how it is used Many users do not read manuals –prefer to spend their time pursuing their task Usually used when users are in some kind of panic –paper manuals unavailable in many businesses! e.g. single copy locked away in system administrator’s office –online documentation better –good search/lookup tools –online help specific to current context Sometimes used for quick reference –syntax of actions, possibilities... –list of shortcuts...

58 Ingeniørhøjskolen i Århus Slide 58 af 70 Types of help Tutorial and/or getting started manuals –short guides that people are likely to read when first obtaining their systems encourages exploration and getting to know the system tries to get conceptual material across and essential syntax –on-line “tours”, exercises, and demos demonstrates very basic principles through working examples

59 Ingeniørhøjskolen i Århus Slide 59 af 70 Types of help Reference manuals –used mostly for detailed lookup by experts rarely introduces concepts thematically arranged –on-line hypertext search / find table of contents index cross-index Microsoft Help

60 Ingeniørhøjskolen i Århus Slide 60 af 70 Types of help Reminders –short reference cards expert user who just wants to check facts novice who wants to get overview of system’s capabilities –keyboard templates shortcuts/syntactic meanings of keys; recognition vs. recall; capabilities –tooltips and other context-sensitive help text over graphical items indicates their meaning or purpose Microsoft Word

61 Ingeniørhøjskolen i Århus Slide 61 af 70 Types of help Wizards –walks user through typical tasks –but dangerous if user gets stuck What’s my computer’s name? Fred? Intel? AST? Microsoft Powerpoint

62 Ingeniørhøjskolen i Århus Slide 62 af 70 Types of help Tips –migration path to learning system features –also context-specific tips on being more efficient –must be “smart”, otherwise boring and tedious Microsoft Word

63 Ingeniørhøjskolen i Århus Slide 63 af 70 Heuristic evaluation Systematic inspection to see if interface complies to guidelines (could be these 9 – and/or others) Method –3-5 inspectors –usability engineers, end users, double experts… –inspect interface in isolation (~1–2 hours for simple interfaces) –compare notes afterwards single evaluator only catches ~35% of usability problems 5 evaluators catch 75% (insert figure page 156) Works for paper, prototypes, and working systems

64 Ingeniørhøjskolen i Århus Slide 64 af 70 Heuristic evaluation Advantages –“minimalist” approach a few guidelines identify many common usability problems easily remembered, easily applied with modest effort –discount usability engineering end users not required cheap and fast way to inspect a system – or even mock-up can be done by usability experts, double experts, and end users Problems: –principles are more or less at the motherhood level can’t be treated as a simple checklist subtleties involved in their use evaluators might not understand the domain

65 Ingeniørhøjskolen i Århus Slide 65 af 70 Area specific guidelines: Wagner 1.Inddrag altid landmænd i designet af enhver mobil løsning. Kompleksiteten ved design af løsninger til landmænd er større end til f.eks. kontormedarbejdere, og derfor er dette generelle design princip ekstra vigtigt indenfor landbruget 2.Husk at landmænd ikke nødvendigvis er så fascineret af nye teknologiske produkter som du er, og ikke har den samme motivation for at bruge dem, specielt ikke hvis betjeningen er besværlig, eller der er andre hindringer 3.Den udbredte brug af papir kan være berettiget, når dette nu er det bedste medie til at løse en konkret opgave. Fokuser ikke for meget på at erstatte papirmediet. Prøv i stedet at supplere det, og lad den nye løsning indgå i det eksisterende Web of Technology, ved siden af, og i samspil med, papirmediet 4.Brug PC’en som det fortrukne medie til at inddatere data fra papiret. Den har indtil i dag vist at være velegnet til dette, og jeg har i dette speciale ikke kunnet se nogen grund til at ændre på dette 5.Brug de mobile produkter til at løse netop de opgaver hvor både papiret og PC’en fejler, f.eks. overvågning, notifikation og kommunikation 6.Hold løsningerne så simple som muligt, brug kun netop den flig af information der er nødvendig for ikke at forvirre brugeren. Landmænd har brug for værktøjer med så lidt kompleksitet som muligt 7.Brug gerne prisbillige ”forhåndenværende” produkter, såsom gængse mobiltelefoner og PDA’er, men vær opmærksom på, at de ikke er optimale til brug i landbruget, og at udbredelse og anvendelse af dem vil være begrænset af deres medfødte kompleksitet, og eventuelt kræve træning af brugerne 8.Mobiltelefoner er det mobile produkt flest landmænd er fortrolige med. Derfor kan applikationer udviklet til mobiltelefonen dog stadigvæk være et problem at betjene. PDA’er ligger langt væk fra landmandens kontekst, og kræver derfor mere tilvænning end mobiltelefoner

66 Ingeniørhøjskolen i Århus Slide 66 af 70 Area specific guidelines: Wagner II 9.Stræb efter at minimere den nødvendige brugerinteraktion med mobile apparater mest muligt, og introducer dermed mindst mulig kompleksitet i brugerfladen. 10.Undgå brug af ”små knapper” og ”Stylus” betjening i Touch Screen baserede mobile produkter. Landmænd bør kunne betjene apparatet med deres fingre, og gerne én hånd, så den anden er fri til andre opgaver, mens de befinder sig i stalden 11.Undgå brug af for mange valgmuligheder, og menuer i flere niveauer, mest muligt i mobile produkter. Landmænd bør kunne overskue samtlige valgmuligheder der er relevante for dem umiddelbart, og bør ikke skulle bruge mentale ressourcer på at navigere rundt i menuer 12.Understøt gerne ”Implicit HCI”, i form af lokationsafhængig tilpasning af brugergrænsefladen. Tilstræb at landmanden kun ser netop den information der er relevant for ham i den aktuelle situation 13.Undgå design af for store og tunge terminaler, men brug gerne plads på en ordentlig skærm 14.Understøt gerne hånd-fri brug, f.eks. ved hjælp af talegenkendelse eller andre teknologier. Landmænd har brug for deres hænder til andre opgaver 15.Tilstræb at tilpasse ”forhåndenværende” produkter til at implementere ovenstående faciliteter, f.eks. ved at tilrette det indbyggede styresystem, om muligt. Dette frem for at udvikle ”specialdesignede” produkter fra bunden af, hvilket kan være forbundet med store omkostninger, der ikke nødvendigvis kan retfærdiggøres ved opnåelse af højere effektivitet i landbruget 16.Undgå brug af udstyr der er skrøbeligt og ikke kan klare arbejdsmiljøet i dansk landbrug, specielt i forbindelse med arbejde i stalden 17.Vær opmærksom på udviklingen indenfor ny teknologi i branchen, og analyser udviklingen mindst én gang hvert halve år

67 Ingeniørhøjskolen i Århus Slide 67 af 70 Top 10 Usability Guidelines for WAP (Kompendium 2) 1.Implement navigational menus using a elements 2.Keep soft key labels to 5 characters or less. 3.Use Wizards instead of forms 4.Keep the content that appears above select and input fields to 1 or 2 lines max (including images). 5.Assign the most commonly chosen action or most intuitive task to the accept soft key 6.Don't use the task to navigate to a card that is already on the history stack 7.Allow the user to dial phone calls from the application by pressing a single key 8.Use the format attribute to constrain text input fields to only allow valid character types 9.Don't set a deck's expiration (maxage) to a low value unless the content is highly volatile 10.Ensure all decks are smaller than 500 bytes

68 Ingeniørhøjskolen i Århus Slide 68 af 70 Other Guidelines: Style guides Guidelines published by producers of graphical user interfaces (GUIs) –examples: Open Software Foundation MOTIF, Open Look MS Windows, Apple Mac Nokia: WAP, J2ME applications, Speech Applications Describes the “look and feel” of the GUI –e.g. Open Look grouping items in the same menu: –Use white space between long groups of controls on menus or in short groups when screen real estate is not an issue Good, but hard too follow –GUI and widget specific –vast number of guidelines –may miss fundamental design principles –CONVENTIONS ARE GOOD – people “know” Windows design!

69 Ingeniørhøjskolen i Århus Slide 69 af 70 Example Motif Style Guide, Release 1.1 Message Dialogs Description MessageDialogs should be used to convey a message to the user. They must not interrupt the user’s interaction with the application. They should include a message, and one of the following button arrangements. OK OK Help OK Cancel OK Cancel Help Yes No Yes No Help Yes No Cancel Yes No Cancel Help Cancel Cancel Help Retry Cancel Retry Cancel Help Related Information For more information, see the reference pages for DialogBox, ErrorDialog, InformationDialog, QuestionDialog, WorkingDialog, and WarningDialog Information Dialog Description An InformationDialog should be used to convey information the the user. It must not interrupt the user’s interaction with the application. It should include an information symbol, a message, and one of the following button arrangements. OK OK Help Illustration Related Information For more information, see the reference page for DialogBox

70 Ingeniørhøjskolen i Århus Slide 70 af 70 Other Guidelines: Widget-level “guides” Toolkit “hard-wires” guidelines –repertoire of widgets –look & feel of particular widgets –grouping behaviour of widgets Outside of “normal” programmer’s control –easier to use defaults then to re-invent the wheel! Some toolkits –look & feel is programmer-settable or platform-dependent Advantages: –easy to be consistent –widgets developed by experts (graphical designers, etc.) Disadvantages –can be hacked around –interfaces “assembled” by non-interface designers can still be terrible