Human Computer Interface Evaluation K. Bouzoubaa
Introduction w Why and when to evaluate? 1. Introduction 4. Types d’Interaction 5. Interaction guidelines 6. Web Interaction guidelines 2. Modèle Cognitif de l’utilisateur Analyse des besoins Tests d’acceptation 8. Evaluation Tests du système 3. Approche participative Prototypages Conception Espace IHM 7. Conception Espace logiciel Conception Logicielle Réalisation et tests logiciels Codage
Software Engineering Evaluation « Software Quality Assurance » w Software performance w Hardware performance and cost w Maintenance w Safety w Reliability w Interoperability w etc.
HCI Evaluation Objectives w Why evaluate ...? w To answer usability questions such as: – Would the operator be able to quickly answer emergency calls? – Was this ticket machine sufficiently simplified to allow a novice user to easily use it on the first try ? – Is the user familiar with the terminology used in the interface? – If the user invokes this command by mistake, will it be easy for him to correct or leave the system?
Types of Evaluation Summative Formative Evaluation Evaluation Made during Made at the end design process and development process With a incomplete version With a final version of of the software the software
Evaluation Techniques Analytical (HE) Empirical (User Testing) G.O.M.S. « Goals, Operators, Methods and Selection rules » è Shneiderman è Cognitive Walkthrough Observation Acceptability tests è Heuristic Evaluation Questionnaires o From previous lectures o Nielsen 10 principles o Others …
Heuristics From Earlier Lectures w User-centered design – Know your users – Understand their tasks w Memory – Use chunking to simplify information presentation – Minimize working memory w Color guidelines – Don ’ t depend solely on color distinctions (color blindness) – Avoid red on blue text (chromatic aberration) – Avoid small blue details w Norman ’ s principles of direct manipulation – Affordance – Visibility – Feedback
Heuristic Evaluation w Performed by expert(s) w Steps – Inspect UI thorough – Compare UI against heuristics – List usability problems • Explain & justify each problem with heuristics
HE: Nielsen 10 principles 1. Match the real world 2. Consistency & standards 3. Help & documentation 4. User control & freedom 5. Visibility of system status 6. Flexibility & efficiency 7. Error prevention 8. Recognition, not recall 9. Error reporting, diagnosis, and recovery 10. Aesthetic & minimalist design
1. Match the Real World “ Speak the user language ” w Technical jargon avoided (Type = écrire or Type = int, float) w Use common words, not jargon – But use domain-specific terms where appropriate w Don ’ t put limits on user defined names ( DOS: 12345678.ext ) w Allow aliases/synonyms in command languages ( remove, del, erase ) – Only 7-18% = probability 2 users name the same object with the same name w Metaphors are useful but may mislead – Example: Trash in Lotus organizer (not natural)
2. Consistency and Standards w Principle of Least Surprise – Similar things should look and act similar – Different things should look different – Example: share price, stock price, stock quote w Other properties – Size, location, color, wording, ordering, … w Follow platform standards
3. Help and Documentation w Users don ’ t read manuals – Prefer to spend time working toward their task goals, not learning about your system w But manuals and online help are vital – Usually when user is frustrated or in crisis w Help should be: – Searchable – Context-sensitive – Task-oriented – Concrete – Short
4. User Control and Freedom w Provide undo w Long operations should be cancelable w All dialogs should have a cancel button
5. Visibility of System Status “ Feedback ” w Keep user informed of system state – Cursor change – Selection highlight – Status bar – Don ’ t overdo it… – Example: Studios MGM (indication du temps d’attente, allées en forme de labyrinthe, téléviseurs et illusion de progression) w Response time – < 0.1 s: seems instantaneous – 0.1-1 s: user notices, but no feedback needed – 1-5 s: display busy cursor – > 5 s: display progress bar
6. Flexibility and Efficiency w Provide easily-learned shortcuts for frequent operations – Keyboard accelerators – Command abbreviations – Bookmarks – History Fast withdraw 100 DH 200 DH … 2000 DH
7. Error Prevention w Selection is less error-prone than typing w Some techniques: – Text field (type and format: DD/MM/YYYY) – Combo Box – Anticipate {} in Word Processor – But don ’ t go overboard…
8. Recognition, Not Recall “ Minimize Memory Load ” w Use menus, not command languages w Use combo boxes, not textboxes w Use generic commands where possible ( Open, Save, Copy Paste ) w All needed information should be visible
9. Error Reporting, Diagnosis, Recovery w Be precise; restate user ’ s input – Not “ Cannot open file ” , but “ Cannot open file named paper.doc ” w Give constructive help – why error occurred and how to fix it w Be polite and non blaming – Not “ fatal error ” , not “ illegal ” w Hide technical details (stack trace) until requested
10. Aesthetic and Minimalist Design w “ Less is More ” – Omit extraneous info, graphics, features
10. Aesthetic and Minimalist Design w Good graphic design – Few, well-chosen colors and fonts – Group with whitespace – Align controls sensibly w Use concise language – Choose labels carefully
HE: Nielsen 10 principles Meet expectations 1. Match the real world 2. Consistency & standards 3. Help & documentation User is the boss 4. User control & freedom 5. Visibility of system status 6. Flexibility & efficiency Handle errors 7. Error prevention 8. Recognition, not recall 9. Error reporting, diagnosis, and recovery Keep it simple 10. Aesthetic & minimalist design
Example
Example 1. Shopping cart icon is not balanced with its background white space: minimalist design 2. Good: user is greeted by name: Visibility of system status 3. Red is used both for help messages and for error messages: Consistency, Match real world 4. “ There is a problem with your order ” , but no explanation or suggestions for resolution: Error reporting 5. ExtPrice and UnitPrice are strange labels: Match real world
Example 7. "Click here “ is unnecessary: Aesthetic & minimalist design 8. No “ Continue shopping" button: User control & freedom 9. Recalculate is very close to Clear Cart: Error prevention 10. “ Check Out ” button doesn ’ t look like other buttons: Consistency 11. Uses “ Cart Title ” and “ Cart Name ” for the same concept: Consistency 12. Must recall and type in cart title to load: Recognition not recall, Error prevention, Flexibility & efficiency
Heuristic Evaluation Advantages Disadvantages o Low costs o Focuses on problems not on solutions o Intuitive technique o Same design à à o Simple to apply still different problems o Usable very early in the design
How To Do Heuristic Evaluation w Justify every problem with a heuristic – Too many choices on the home page “ Minimalist design ” w List every problem – Even if an interface element has multiple problems w Go through the interface at least twice – Once to get the feel of the system – Again to focus on particular interface elements w Don ’ t limit yourself to the 10 Nielsen ’ s heuristics – We ’ ve seen others : affordance, visibility, color principles, etc.
Writing Good Heuristic Evaluations w Heuristic evaluations must communicate well to developers and managers w Include positive comments as well as criticisms – “ Good: Toolbar icons are simple, with good contrast and few colors (Minimalist design) ” w Be tactful – Not “ the menu organization is a complete mess ” – Better “ menus are not organized by function ” w Be specific – Not “ text is unreachable ” – Better “ text is too small, and has poor contrast (black text on dark green background ”
Suggested Report Format w What to include – Problem – Heuristic – Description – Severity – Recommendation (if any) – Screenshot (if helpful)
Evaluation Techniques Analytical Empirical (User Testing) G.O.M.S. « Goals, Operators, Methods and Selection rules » è Shneiderman è Cognitive Walkthrough Observation Acceptability tests è Heuristic Evaluation Questionnaires o Norman ’ s principles ü Affordance ü Visibility ü Feedback o Nielsen 10 principles o Others …
User Testing Usability Lab Caméra dirigée Écran géant vers la documentation Caméra dirigée (duplication de sur l'utilisateur Enregistrement des l'écran usager) évènements Équipe de développeurs Salle d'observation Salle d'observation Caméra dirigée sur l'ordinateur Utilisateur 2 ou observateur Salle de test Contrôle de Spécialistes des Station de Murs à vue l'édition facteurs humains l'expérimentateur unidirectionnelle et du mixage Vue de chaque caméra
User Testing è Observation è è Acceptability tests è Questionnaires
Recommend
More recommend
