Human Computer

Interface

Evaluation
 Introduction
 Why and when to evaluate?
1. Introduction

4. Types d’Interaction
5. Interaction guidelines
6. Web Interaction
2. Modèle Cognitif guidelines
de l’utilisateur

Analyse des besoins

Tests d’acceptation
3. Approche 8. Evaluation Tests du système
participative
Prototypages

Conception
Espace IHM
7. Conception

Conception Réalisation Espace logiciel

Logicielle et tests
logiciels

Codage
Software Engineering Evaluation
« Software Quality Assurance »

 Software performance
 Hardware performance and cost
 Maintenance
 Safety
 Reliability
 Interoperability
 etc.
HCI Evaluation Objectives
 Why evaluate ...?
 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?
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
Formative Summative
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
 Heuristic Evaluation Acceptability tests
Questionnaires
o From previous lectures
o Nielsen 10 principles
o Others …
Heuristics From Earlier Lectures
 User-centered design
– Know your users
– Understand their tasks

 Memory
– Use chunking to simplify information presentation
– Minimize working memory

 Color guidelines
– Don’t depend solely on color distinctions (color blindness)
– Avoid red on blue text (chromatic aberration)
– Avoid small blue details

 Norman’s principles of direct manipulation

– Affordance
– Visibility
– Feedback
 Heuristic Evaluation
 Performed by expert(s)
 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”

 Technical jargon avoided (Type = écrire

or Type = int, float)
 Use common words, not jargon
– But use domain-specific terms where
appropriate

 Don’t put limits on user defined names

(DOS: 12345678.ext)
 Allow aliases/synonyms in command
languages (remove, del, erase)
– Only 7-18% = probability 2 users name
the same object with the same name

 Metaphors are useful but may mislead

– Example: Trash in Lotus organizer (not
natural)
2. Consistency and Standards
 Principle of Least Surprise
– Similar things should look and act similar
– Different things should look different
– Example: share price, stock price, stock quote
 Other properties
– Size, location, color, wording, ordering, …
 Follow platform standards
3. Help and Documentation
 Users don’t read manuals
– Prefer to spend time working toward their task goals, not
learning about your system

 But manuals and online help are vital

– Usually when user is frustrated or in crisis

 Help should be:

– Searchable
– Context-sensitive
– Task-oriented
– Concrete
– Short
4. User Control and Freedom
 Provide undo
 Long operations should be cancelable
 All dialogs should have a cancel button
5. Visibility of System Status
“Feedback”

 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)

 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
 Provide easily-learned shortcuts for frequent
operations
– Keyboard accelerators
– Command abbreviations
– Bookmarks
– History

Fast withdraw
100 DH
200 DH
…
2000 DH
7. Error Prevention

 Selection is less error-prone than typing

 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”

 Use menus, not command languages

 Use combo boxes, not textboxes
 Use generic commands where possible
(Open, Save, Copy Paste)
 All needed information should be visible
9. Error Reporting, Diagnosis, Recovery

 Be precise; restate user’s input

– Not “Cannot open file”, but “Cannot open
file named paper.doc”
 Give constructive help
– why error occurred and how to fix it
 Be polite and non blaming
– Not “fatal error”, not “illegal”
 Hide technical details (stack trace) until
requested
10. Aesthetic and Minimalist Design
 “Less is More”
– Omit extraneous info, graphics, features
10. Aesthetic and Minimalist Design
 Good graphic design
– Few, well-chosen colors and fonts
– Group with whitespace

– Align controls sensibly

 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
o Intuitive technique problems not on
solutions
o Simple to apply

o Usable very early in the design o Same design 

still different
problems
 How To Do Heuristic Evaluation
 Justify every problem with a heuristic
– Too many choices on the home page “Minimalist
design”
 List every problem
– Even if an interface element has multiple problems
 Go through the interface at least twice
– Once to get the feel of the system
– Again to focus on particular interface elements
 Don’t limit yourself to the 10 Nielsen’s heuristics
– We’ve seen others : affordance, visibility, color
principles, etc.
 Writing Good Heuristic Evaluations
 Heuristic evaluations must communicate well to
developers and managers

 Include positive comments as well as criticisms

– “Good: Toolbar icons are simple, with good contrast and few
colors (Minimalist design)”

 Be tactful
– Not “the menu organization is a complete mess”
– Better “menus are not organized by function”

 Be specific
– Not “text is unreachable”
– Better “text is too small, and has poor contrast (black text on dark
green background”
 Suggested Report Format
 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
 Heuristic Evaluation Acceptability tests
Questionnaires
o Norman’s principles
 Affordance
 Visibility
 Feedback
o Nielsen 10 principles
o Others …
 User Testing
Caméra dirigée
Usability Lab
vers la documentation Caméra dirigée Écran géant
sur l'utilisateur Enregistrement des (duplication de
évènements l'écran usager)

Équipe de
développeurs

Salle d'observation
Ut

Salle d'observation
ili
sa
te
ur

Caméra dirigée
1

sur l'ordinateur

Utilisateur 2
ou observateur

Salle de test
Contrôle de
Station de Murs à vue Spécialistes des l'édition
l'expérimentateur unidirectionnelle facteurs humains et du mixage

Vue de chaque
caméra
 User Testing

Observation

Acceptability tests

Questionnaires
 User Testing

• Observation
 Video Saving
 Loud thinking
 Passive Observation
 Ethnographic studies
 User Testing

• Acceptability Tests

 Assumption: measurable usability objectives

(Shneiderman, 1998)

Learning time
Performance
Error Rate
Retention time
Subjective Satisfaction
 User Testing

• Acceptability Tests …
 Example 1

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.
 User Testing

• Acceptability Tests …
 Example 2
Après 4 demi-journées d’utilisation régulière du système, 25 des
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)

 User Testing
• Questionnaires
QUIS:
QUIS The Questionnaire for User Interaction Satisfaction
http://www.lap.umd.edu/QUIS/index.html

 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
 Hints for better evaluation
 Use multiple evaluators
– Different evaluators find different problems
– The more the better
– Nielsen recommends 3-5 evaluators
 Alternate HE with UT
– Each method finds different problems
– HE is cheaper
 Espace Logiciel (Informaticien)
Software dev. cycle

Analyse des Conception Réalisation et tests Tests du système

Conception Codage
besoins Logicielle logiciels Tests d’acceptation

Prototype Prototype Évaluation Séparation Évaluation

Papier Numérique Utilisabilité IHM / Noyau Utilisabilité + W3C

Guidelines
IUG + Web Espace IHM (Informaticien + User)
Techniques for Web Content
Accessibility Guidelines
 Introduction
 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

 Apply Web Content Accessibility Guidelines (WCAG) will:

increase accessibility of the applications for people with disabilities
 Introduction
 Apply Web Content Accessibility Guidelines (WCAG) will:
increase accessibility of the applications for people with disabilities

41
 Introduction
 Apply Web Content Accessibility Guidelines (WCAG) will:
increase accessibility of the applications for people with disabilities

42
 About WCAG
 W3C Guidelines:
– 14 guidelines.

– Each guideline has multiple checkpoints.

– Each checkpoint has a priority level (1 - 3).

– Each checkpoint has techniques for implementation.

 WAVE toolbar:
– a tool to validate accessiblity
Table : Priority 1
Table : Priority 2
 Guideline 1:
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" >
 Guideline 1:
Equivalent text to auditory and visual content

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>
 Guideline 1:
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>
 Guideline 1:
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 >
 Guideline 2:
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

 WAVE Tool:
web accessibility evaluation tool

 used to aid in the web accessibility

evaluation process

 To validate a public page:

http://wave.webaim.org/
 WAVE toolbar
 The WAVE Firefox toolbar provides a mechanism for running
WAVE reports directly within Firefox.

 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.

 To download it: http://wave.webaim.org/toolbar