Interface Evaluation K. Bouzoubaa Introduction w Why and when to - - PowerPoint PPT Presentation
Human Computer Interface Evaluation K. Bouzoubaa Introduction w Why and when to evaluate? 1. Introduction 4. Types dInteraction 5. Interaction guidelines 6. Web Interaction guidelines 2. Modle Cognitif de lutilisateur Analyse des
w Why and when to evaluate?
Analyse des besoins Conception
participative Prototypages
l’utilisateur Tests d’acceptation Tests du système
Espace IHM
Conception Logicielle Codage
Espace logiciel
Réalisation et tests logiciels
« Software Quality Assurance »
w Software performance w Hardware performance and cost w Maintenance w Safety w Reliability w Interoperability w etc.
– 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?
Made during design process and development process With a incomplete version
Made at the end With a final version of the software
Analytical (HE)
G.O.M.S.
« Goals, Operators, Methods and Selection rules »
Cognitive Walkthrough è Heuristic Evaluation
è è Shneiderman
Observation Acceptability tests Questionnaires
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
10. Aesthetic & minimalist design
“Speak the user language” w Technical jargon avoided (Type = écrire
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)
– Similar things should look and act similar – Different things should look different – Example: share price, stock price, stock quote
– Size, location, color, wording, ordering, …
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
w Provide undo w Long operations should be cancelable w All dialogs should have a cancel button
“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
– Keyboard accelerators – Command abbreviations – Bookmarks – History
Fast withdraw 100 DH 200 DH … 2000 DH
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…
“Minimize Memory Load”
– Not “Cannot open file”, but “Cannot open
– why error occurred and how to fix it
– Not “fatal error”, not “illegal”
– Omit extraneous info, graphics, features
– Few, well-chosen colors and fonts – Group with whitespace – Align controls sensibly
– Choose labels carefully
Meet expectations
User is the boss
Handle errors
Keep it simple
white space: minimalist design
messages: Consistency, Match real world
world
design
Consistency
concept: Consistency
recall, Error prevention, Flexibility & efficiency
the design
problems not on solutions
à still different problems
– Too many choices on the home page “Minimalist
design”
– Even if an interface element has multiple problems
– Once to get the feel of the system – Again to focus on particular interface elements
– We’ve seen others : affordance, visibility, color
principles, etc.
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”
– Problem – Heuristic – Description – Severity – Recommendation (if any) – Screenshot (if helpful)
Analytical
G.O.M.S.
« Goals, Operators, Methods and Selection rules »
Cognitive Walkthrough è Heuristic Evaluation
ü Affordance ü Visibility ü Feedback
è è Shneiderman
Observation Acceptability tests Questionnaires
Salle de test Salle d'observation Salle d'observation
Équipe de développeurs Spécialistes des facteurs humains
Caméra dirigée vers la documentation Caméra dirigée sur l'utilisateur
Utilisateur 2
Caméra dirigée sur l'ordinateur
Murs à vue unidirectionnelle
Enregistrement des évènements
Vue de chaque caméra Station de l'expérimentateur
Écran géant (duplication de l'écran usager)
Contrôle de l'édition et du mixage
♦ Video Saving
♦ Loud thinking ♦ Passive Observation ♦ Ethnographic studies
(Shneiderman, 1998) Learning time
Performance Error Rate Retention time Subjective Satisfaction
Les sujets seront 35 secrétaires n’ayant aucune expérience de
traitement de texte mais une bonne expérience de frappe au clavier (35 à 50 mots/min). Une période de 45 min sera consacrée à de l’entraînement avant l’expérience. Au moins 30 des 35 secrétaires devraient être capables de compléter correctement en 30 min 80% des tâches de frappe et d’édition.
35 secrétaires devraient être capables de compléter en 20 min les tâches de niveau plus avancé du second « benchmark » en faisant moins de 6 erreurs. (Test de la performance après une période d’utilisation régulière)
QUIS: The Questionnaire for User Interaction Satisfaction
http://www.lap.umd.edu/QUIS/index.html w The purpose of the questionnaire is to:
–
guide in the design or redesign of systems
–
give managers a tool for assessing potential areas of system improvement
–
provide researchers with a validated instrument for conducting comparative evaluations, and
–
serve as a test instrument in usability labs
– Different evaluators find different problems – The more the better – Nielsen recommends 3-5 evaluators
– Each method finds different problems – HE is cheaper
Analyse des besoins Conception Tests du système Tests d’acceptation Conception Logicielle Codage Réalisation et tests logiciels
Espace Logiciel (Informaticien)
Prototype Papier Prototype Numérique Séparation IHM / Noyau
Espace IHM (Informaticien + User)
Évaluation Utilisabilité Guidelines IUG + Web Évaluation Utilisabilité + W3C
Software dev. cycle
w Persons attempting to access the Web may:
– not be able to see, hear, move, or may not be able to process some types of
information.
– not have, or be able to use, a mouse or even a keyboard – have a text-only screen, a small screen, or a slow Internet connection – not speak or understand fluently the language in which the document is written – be in a situation where their eyes, ears, or hands are busy or interfered with. – have an early version of a browser, a voice browser, or an operating system other
than Windows
w Apply Web Content Accessibility Guidelines (WCAG) will: increase accessibility of the applications for people with disabilities
41
w Apply Web Content Accessibility Guidelines (WCAG) will: increase accessibility of the applications for people with disabilities
42
w Apply Web Content Accessibility Guidelines (WCAG) will: increase accessibility of the applications for people with disabilities
– 14 guidelines. – Each guideline has multiple checkpoints. – Each checkpoint has a priority level (1 - 3). – Each checkpoint has techniques for implementation.
– a tool to validate accessiblity
Equivalent text to auditory and visual content
Avoid using images as bullets:
Deprecated example: <IMG src="star.gif" alt="* ">
Use alt when using image as the content of a link:
Images available Images not available
if providing link text, put a space in alt:
Example: <A href="welcome.html"><IMG src="welcome.html" alt=" " > Welcome </A>
Use short text equivalent for images:
Example: <IMG src="iconhome.gif" alt="Welcome" >
When image contains important information use long description:
Image containing important Information longdesc supported by firefox <IMG src="97sales.gif" alt="Sales for 1997“ longdesc="sales97.html">
For user agent that does not support longdesc attribute:
Sales for 1997 [D] <IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales.html"><A href="sales.html" title="Description of 1997 sales">[D]</A>
Equivalent text to auditory and visual content
Describe frame relationships by using longdesc if title alone is not enough:
<html> <head><title>Frame’s title</title></head> <frameset rows="20%,40%"> <frame src="top_left.html" title="top_left" longdesc="longdescleft.html"> <frame src="top_right.html" title="top_right" longdesc="longdescright.html"> </frameset> <!-- Write for browsers that do not support Frame by providing an alternative page -- > < NOFRAMES> This site requires a frames capable browser. If you can see this message you do not have one. To view this document without frames you may click <a href=“main.html">here.</a> </ NOFRAMES> </html>
Equivalent text to auditory and visual content
Alternative presentation of script using the NOSCRIPT element:
<SCRIPT type="text/javascript">document.write("Hello World ! - with JS");</SCRIPT> <NOSCRIPT> Hello World! - without JS</NOSCRIPT> Or: < NOSCRIPT >This page uses Javascript. Your browser either doesn't support Javascript or you have it turned off. To see this page as it is meant to appear please use a Javascript enabled browser.</ NOSCRIPT >
Equivalent text to auditory and visual content
Don’t rely on color alone
All information conveyed with color also available without color:
with color without color
Color contrast:
Good use of color contrast Bad use of color contrast
web accessibility evaluation tool
w The WAVE Firefox toolbar provides a mechanism for running WAVE reports directly within Firefox. w The toolbar reports runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting. w To download it: http://wave.webaim.org/toolbar