Transcript Diapositive 1

30-771-01 Conception de sites Web
Préparé par:
Yan Bodain, M.A.
Jean-Yves Fiset, ing., Ph. D.
Sandrine Prom Tep, M.Sc.
Martin Dozois, M.Sc.
Révision
• Méthode de conception centrée sur l'utilisateur (ISO 13 407)
• Analyse hiérarchique de la tâche (AHT )
• HTML
• Ergonomie
Note: Ces acétates présentent les notions clés incontournables vues lors du
cours et servent à vous guider dans votre révision. Servez-vous en comme point
de départ pour réviser plus en profondeur chacune des notions à l’aide des
acétates de chaque séance.
Séance 1- Problématique des sites Web
• Problèmes généraux de conception *
– Modèle d’affaires – considérer le Web comme un moyen de
publicité traditionnel (p. ex., brochure).
– Besoins de l’entreprise vs besoins des utilisateurs du site.
– Architecture de l’information:
• Structure de l’entreprise
• Mission du site
– Conception des pages composant le site :
• Surface vs contenu
• commentaires informels vs évaluation
* Nielsen, J., Conception de sites Web – l’art de la simplicité. CampusPress. 2000
Séance 1 - Problématique des sites Web
• Problèmes généraux de conception :
– Effet de délais
– Lisibilité
– Résolution
– Navigation
– Structure (principes, règles et critères de conception)
– Emphase négative sur la technologie :
• Flash et animations
• Pages d’introduction
• Gadgets vs besoins
Séance 1 - Aperçu de la méthode - ISO 13 407
• Pourquoi utiliser une méthode?
– Facilité de compréhension et d’utilisation
– Satisfaction de l’utilisateur
– Productivité et efficience opérationnelle
– Qualité, esthétique et impact du produit, et avantages
concurrentiels.
• Principes sous-jacents à cette norme :
– Participation active des utilisateurs et compréhension claire des
exigences liées à l’utilisateur et à la tâche,
– Répartition appropriée des fonctions entre les utilisateurs et la
technologie.
Séance 1 - Utilisabilité
•
Utilisabilité *: degré selon lequel un produit peut être utilisé, par des
utilisateurs identifiés, pour atteindre des buts définis avec efficacité,
efficience et satisfaction, dans un contexte d'utilisation spécifié.
– Efficacité: précision et degré d'achèvement selon lesquels
l'utilisateur atteint des objectifs spécifiés.
– Efficience: rapport entre les ressources dépensées et la précision
et le degré d'achèvement selon lesquels l'utilisateur atteint des
objectifs spécifiés.
– Satisfaction: absence d'inconfort et attitudes positives dans
l'utilisation du produit.
•
Conséquence
– Utilisabilité < > facilité d’utilisation
* ISO 9241-11 Exigences ergonomiques pour travail de bureau avec terminaux à écrans de visualisation
Séance 2 - Survol de la méthode ISO 13407
Ce processus est amorcé dès la
formulation des spécifications
initiales du produit ou du
système.
Identifier la
nécessité d’une conception
centrée sur l’opérateur
humain
Comprendre et
spécifier le contexte
d’utilisation
Évaluer les
conceptions par
rapport aux exigences
Le système répond aux
exigences de l’utilisateur
et de l’organisation
Proposer des
solutions de
conception
Spécifier les
exigences liées à
l’utilisateur et à
l’organisation
Séance 2 - Survol de la méthode
•
On peut représenter schématiquement le processus et ses activités
comme suit:
Identifier la
nécessité d’une conception
centrée sur l’opérateur
humain
Comprendre et
spécifier le contexte
d’utilisation
Évaluer les
conceptions par
rapport aux exigences
Le système répond aux
exigences de l’utilisateur
et de l’organisation
Spécifier les
exigences liées à
l’utilisateur et à
l’organisation
Proposer des
solutions de
conception
•
•
•
•
Conception globale
– Guides: style et ergonomiques
– Architecture
Conception détaillée
– Principes, règles et critères
– Dispositifs d’interaction
– Canevas
Évaluation
Spécification
•
•
•
•
•
•
•
•
Analyse de la demande
Identification de la mission
Objectifs de conception d’IHM
Caractérisation des utilisateurs
Analyse de la tâche
Revue d’interfaces et de produits existants
Identification des connaissances pertinentes
Contraintes et possibilités techniques
Séance 2 - Caractérisation des utilisateurs
Séance 3 - Analyse de la tâche
• Rôle de l’analyse de la tâche
• Technique d’analyse hiérarchique de la tâche (AHT)
• Exercice
Séance 3 - Analyse hiérarchique de la tâche (AHT)
•
Macro vs Micro : exemple de format graphique arborescent
Faire
1,2,3,4
1- S’identifier
Faire
1.1, 1.2
1.1 Insérer sa carte
2- Choisir le
compte
Retirer X $
du cpte chèque
3- Spécifier le
montrant
4- Exécuter
le retrait
1.2 Entrer son NIP
•
Activité décomposée :
– en étapes d’actions
• nécessitant des opérations pour la réalisation concrète
•
Difficulté conceptuelle : déterminer les étapes séquentielles vs
parallèlles pour l’interactivité
Séance 3 - Analyse de sites concurrents
• Pour compléter l’identification des fonctionnalités
requises
• Permet d’identifier des façons de faire qui peuvent être
relativement usitées dans le domaine, p. ex.
– commande
– paiement
– catalogues
• Pour identifier des bonnes idées à adapter et des erreurs
à éviter.
Séance 3 - Possibilités et contraintes techniques
•
Pour identifier la « palette » disponible pour la conception, p. ex.
– temps,
– échéancier,
– normes ou réglementations pertinentes
• p. ex., accessibilité, normes internes de l’entreprise
– affichage
• moniteurs (type, taille et résolution)
• couleurs
– dispositifs d’interaction
• clavier souris, téléphone sans fil, pda, voix
– infrastructure
• réseau et modem (28.8, cable, ADSL)
• logiciel
– « portalware »
– outils spécifiques (p. ex., e-learning)
– autres
Séance 4 - HTML - Éléments de base
•
•
•
•
•
•
•
•
•
HTML=langage = lingu franca du Web = format de fichier (format de fichier le plus répandu
voir la source d’une page)
Hypertext Mark-up Language = langage de marquage pour structurer les textes (titres,
paragraphes, listes, tableaux,…)
Incorporer des graphiques et autres contenus multimédia par références intégrées dans le
texte
Interfaçage avec des langages ou scripts complémentaires
ex: CSS, jsp, XML, CGI, …
Hyperlien: référence dans le texte vers des parties précises (ancres) ou vers d’autres
textes
Définition hypertexte: liaison contextuelle infinie
www = world wide web = toile d’araignée géante de connexions
Navigateur: interprète le code HTML (lecture des balises ou commandes de marquage)
et représente le texte brut sous forme visuelle pour être vue à l’écran
Structure hiérarchique: logique d’emboîtement (poupées russes, tupperwares)
– Propriétés globales (titre de page, fond, …)
– Propriétés locales ( titres de paragraphes, tableaux,…)
– Propriétés micro (graphiques, mise en forme du texte comme le caractère gras ou
italique)
Séance 4 - HTML - Éléments de base
•
Ossature HTML type
<html>
<head>
<title>
Bla bla
</title>
</head>
<body>
Bla bla
</body>
</html>
Ouverture du contenu HTML
Ouverture de la partie «en-tête»
Ouverture du titre
Titre du document
Fermeture du titre
Fermeture de la partie «en-tête»
Ouverture de la partie «corps du texte»
Contenu du document
Fermeture de la partie «corps du texte»
Fermeture du contenu HTML
Séance 4 - HTML - Éléments de base
• Éléments de mise en forme
<h1>Titre de section de niveau 1</h1>
<h2>Titre de section de niveau 2</h2>
…
<h6>itre de section de niveau 6</h6>
<i>italique</i>
<b>gras</b>
<del>barré</del>
Séance 4 - HTML - Éléments de base
•
Paragraphes et sauts de lignes
<p>
Ceci est un paragraphe. Un espace est automatiquement
créé avant et après le paragraphe.
</p>
Ceci est un saut de ligne.<br>
Il permet de changer de ligne sans débuter un nouveau paragraphe.
Notez que le marqueur <br> n’a pas de fermeture.
Séance 4 - HTML - Éléments de base
• Attributs de certaines balises
<p align="right">Paragraphe aligné à droite</p>
<font size="2">Texte de taille 2</font>
<font size="+2">Augmentation de la taille de 2 unités</font>
<font size="-2">Diminution de la taille de 2 unités</font>
<font size="2" face="verdana">Taille 2 et police Verdana</font>
<body bgcolor="green">
Séance 5 - Notions de HTML: Lien vers un autre document
Pour pointer vers un autre document via un hyperlien
– attribut HREF ajouté à la balise <A>.
– Sites HTTP: Un pointeur menant à un document situé sur un autre
serveur WWW (dont le URL commence donc par http) se bâtit de la
manière suivante:
<A HREF=“http://URL_complet_document’’>Nom du lien</A>
NB: Il est aussi possible de créer des hyperliens qui pointent vers des
sites ftp, telnet ou des adresses courriel…
<A HREF=“ftp://ftp.uqam.ca’’>Site FTP de l’UQAM</A>
<A HREF= “mailto:[email protected]’’>Nous écrire</A>
– Si le document se situe dans le même dossier ou sur le même serveur
que le document HTML en construction, on peut se contenter
d'indiquer le URL relatif, c'est-à-dire d'indiquer le chemin de sousdossiers à parcourir pour parvenir au document appelé
Séance 5 - Notions de HTML: Lien vers une image
– La balise servant à intégrer des images dans un document HTML est
<IMG>; il n'existe pas d'annotation de fermeture </IMG>.
– Attribut SRC obligatoire: indique le URL (Uniform Resource Locator
ou adresse WWW) menant au document.
<IMG SRC="URL_de_l'image">
(URL relatif tel que SRC="images/dejeuner.gif" ou URL complet tel que
SRC="http://www.uqam.ca/images/dejeuner.gif")
– Autres attributs de l’image: ALT et ALIGN
ALT: Pour assurer la compréhension des documents par les utilisateurs
de fureteurs qui ne peuvent afficher les images, il est conseillé de
proposer un texte alternatif avec l'attribut ALT. <IMG
SRC="images/dejeuner.gif" ALT="Déjeuner">
ALIGN: Pour aligner l'image
Les paramètres "top" , "bottom ", "middle", "Left", "Right",
– Une image peut servir d'hyperlien.
Ouvrir la balise <A> avant le <IMG> et la refermer (</A>).
Séance 5 - Notions de HTML
• Lien relatif vers une image de niveau inférieur.
index.html
<img src="img/logo.gif" >
page1.html
page2.html
<img src="rep/img/hec.gif" >
rep
fille1.html
img
hec.gif
img
logo.gif
Séance 6 - Notions HTML: Metatags et référencement
Pour optimiser le référencement:
•
•
•
•
•
•
•
Utilisez des headings (<h1>) plutôt que des images pour vos titres de sections
et de paragraphes
Soigner le contenu du premier paragraphe de votre page afin qu’il contienne
des mots clés judicieux
Utilisez le caractère gras pour mettre en valeur certains mots clés
Choisissez bien les mots de vos hyperliens
Utilisez l’attribut ALT sur les images pertinentes
Nommez les fichiers et répertoires avec des mots clés complets, séparés de
tirets (e.g. pantalons-hommes-1.html au lieu de ph1.html)
Choisissez un nom de domaine, si possible, qui contient des mots clés
(séparés de tirets).
Séance 6 - Notions de HTML: Listes
<ul>
<li>Lait</li>
<li>Fruits</li>
<ul>
<li>Oranges</li>
<li>Pommes</li>
</ul>
<li>Pain</li>
</ul>
•
•
•
Lait
Fruits
o Oranges
o Pommes
Pain
Séance 6 - Traitement des images
Deux formats d’images pour le Web: .gif et .jpg
.gif: Image possédant une palette constituée de 2 à 256 couleurs. Format
utilisé pour les images représentant du texte (e.g. titres) ou des éléments
de design d’un nombre limité de couleurs.
.jpg: Image possédant une palette de millions de couleurs. Format utilisé pour
des images photographiques ou des images ayant beaucoup de dégradés
de couleurs. Le format .jpg peut être compressé (ce qui diminue la taille du
fichier, mais aussi la qualité de l’image).
Un format d’image émergeant pour remplacer le .gif: .png (Portable Network
Graphics). Format non-propriétaire recommandé par le W3C possédant
plusieurs qualités (meilleure compression, qualité de l’image). N’est par
contre pas encore supporté par tout les navigateurs.
Séance 7 - Utilisation des tableaux
•
Avantages
– Mise en page,
– Possibilité de créer zones spéciales (« sidebars »),
– Outil pour atteindre certaine indépendance par rapport à la résolution.
• attribut « width » en pixels ou en %
•
Application type :
– Aide à la localisation d’éléments sur une page.
•
Inconvénients :
– Balises plus sophistiquées, parfois complexes.
Séance 7 - Balises et attributs des tableaux
Exemple de code
<table border="1" width="600">
<tr>
<td height="38" width="100"> </td>
<td height="38" width="100"> </td>
<td height="38" width="100"> </td>
<td height="38" width="100"> </td>
<td height="38" width="100"> </td>
<td height="38" width="100"> </td>
</tr>
<tr>
<td rowspan="2" width="100"> </td>
<td colspan="3" rowspan="2"> </td>
<td height="86" width="100"> </td>
<td height="86" width="100"> </td>
</tr>
<tr>
<td height="95" width="100"> </td>
<td height="95" width="100"> </td>
</tr>
<tr>
<td colspan="6" height="93"> </td>
</tr>
</table>
Sandrine Prom Tep, Mai 2003
Séance 7 - Balises et attributs des tableaux
Exercice à faire:
http://www.hec.ca/sites/cours/30-771-01/fich/cours_10/exercice1.html
Séance 7 - Utilisation des volets ou cadres (frames)
•
•
Avantages
– Solution intéressante pour les éléments communs de conception
– Affichage de plus d’une fenêtre à la fois
– Peut aider à réduire une partie des tâches d’entretien de sites
Inconvénients
– Bris de la métaphore « un affichage – une page »
– Impose une navigation fixe (sans aucune rétroaction)
– Difficulté de pose de signets
– Difficulté d’impression
– Difficile d’indexer le contenu
– Note: des solutions existent toutefois pour pallier ces difficultés.
– Exemple de page bien faite avec frames:
http://www.radio-canada.ca/
– Exemples de pages mal faites avec frames: : http://netmarketingsolution.com/
http://www.aqiii.org
Séances 8-9 - Survol de la méthode
Identifier la
nécessité d’une conception
centrée sur l’opérateur
humain
Comprendre et
spécifier le contexte
d’utilisation
Évaluer les
conceptions par
rapport aux exigences
Le système répond aux
exigences de l’utilisateur
et de l’organisation
Spécifier les
exigences liées à
l’utilisateur et à
l’organisation
Proposer des
solutions de
conception
•
•
•
•
Conception détaillée
- Principes cognitifs, règles
et critères
- Dispositifs d’interaction
Conception globale
– Guides: style et
ergonomiques
– Architecture
Évaluation
Spécification
•
•
•
•
•
•
•
•
Analyse de la demande
Identification de la mission
Objectifs de conception d’IHM
Caractérisation des utilisateurs
Analyse de la tâche
Revue d’interfaces et de produits existants
Identification des connaissances pertinentes
Contraintes et possibilités techniques
Séances 8-9 - Conception détaillée: Guides ergonomiques et
perception visuelle
•
•
•
•
•
Facteurs influençant l’exploration visuelle:
– objets larges, colorés, en mouvement
– effets de la lecture ( exploration en Z )
– centre du champs visuel au détriment des bords
– objets adjacents
Il y a des différences dans les patrons de fixation / exploration entre novices et
experts  seriel vs global.
Traitement de l’information toujours en contexte: macro/micro
Principe de perception Figure/Fond
L’oeil cherche l’ordre pour l’extraction de structures:
– l’alignement
– le regroupement (association)
– Le contraste ou l’anomalie (mouton noir)
– “L’anarchie” (n’importe quoi n’importe comment) ne fait pas de sens pour
l’individu sinon en poésie…
Séances 8-9 - Perception visuelle
• En général, la lecture (texte et autre) à l’écran est
différente de la lecture sur papier :
– typos avec empattement pour le papier est préférable (serif: Times New
Roman E) vs sans empattement à l’écran (sans serif: Arial E)
– 20 à 30 % plus lente que sur papier (facteurs comme luminosité,
réflection de la lumière, distance, etc).
• On lit sur un écran à une distance supérieure (approx. 60-90 cm) à
la lecture sur papier (approx. 35 cm.)
• En général, une meilleure résolution à l’écran diminue les
différences avec la lecture sur papier
• mais attention la lisibilité est une chose différente de l’usage de la
lecture donc même avec le même niveau de confort pour la lecture,
l’usage n’est pas nécessairement le même, différence de
“portabilité”...(livre, pamphlet ou magazine vs ordi, palm, cell, etc.)
Séances 8-9 - Perception visuelle
•
Facteurs influençant la lecture de texte sur écran:
– Polarité (foncé sur pâle ou pâle sur foncé)
• foncé sur pâle peut réduire problèmes de reflets
• Idéal= texte noir sur fond blanc.
– Couleurs saturées
• éviter rouge et bleu, bleu et vert sur fond foncé, ou rouge et vert
pour éviter l’effet 3-D.
voici un exemple
à ne pas suivre
ni ça
et ça non plus
Séances 8-9 Structures de sites Web
•
Processus de conception de sites: Architecture *
Séquentielle:
Utilisée quand:
•
•
•
Grille:
Groupes d’information sont ordonnés (p. ex.,
logique, chronologie, du général au spécifique,
alphabétique)
Plutôt pour petits sites ou pour sous-sites à
l’intérieur d’un grand site
Ex: tour guidé, présentation historique, tutoriel,
long formulaire d’enregistrement (ex: recruitsoft)
Utilisée quand:
•
•
•
•
* Adapté de: Yale’s Web Style Guide, disponible
à: http://info.med.yale.edu/caim/manual/contents.html
Présente manuels de procédure, listes de cours,
corrélations de type « temps – catégorie »
Notes: exige une grande uniformité dans la
structure de l’information (on peut accéder en tout
point de façon équivalente)
pour information sans organisation hiérarchique
Ex: WW: différents angles de vue de 3
modèles de voitures : Coccinnelle, Golf et
Jetta ou 3 livres et différentes éditions dans
le temps…
Séances 8-9 Structures de sites Web
Hiérarchie:
Utilisée quand:
•
•
Veut refléter la structure d’une organisation
Note: une des plus utilisées
car rappel: cognition et ordre
Voir aussi une AI proche : AI en rayon lorsque tout se
rapporte à une même chose (objet, personne,
etc.)
Utilisée quand:
Toile:
•
•
•
•
Veut poser peu de restrictions sur l’utilisation de
l’information et la navigation, favorise
l’exploration, la découverte, interfaces ludiques
can be « very engaging »
Veut favoriser une densité très élevée de liens
Note: peut propager la confusion et rendre plus
difficile l’élaboration d’un modèle pour
l’utilisateur – Plutôt pour petits sites et experts
Ex: Savedbythebelles.com (17 tableaux selon
l’humeur)
Séances 8-9 Structures de sites Web
•
Problèmes fréquents :
Structure trop large, page d’accueil
surchargée de liens souvent peu reliés
entre eux.
Structure trop profonde, nécessite
beaucoup de clics pour la parcourir et
trouver l’information requise.
Illustration conjointe de ces 2 problèmes:
http://www2.canoe.com/index.html
Intégration de différents sites ex: cinéma
Morale: pas de règle fixe, nécessité d’équilibre tests d’utilisabilité et bon jugement.
Ergonomie: Science (règles, principes et méthodes) et un Art (bon sens et expérience)
Séances 8-9 - Sites Web
•
Lecture de pages :
– une étude * montre que 79 % des utilisateurs « balaient » la page et que seulement 16
% la lisent « mot à mot »
– Exemple d’amélioration de l’utilisabilité en appliquant ces règles:
Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In
1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument
(132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie
Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).
0%
In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument,
Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State
Historical Park.
58 %
In 1996, six of the most-visited places in Nebraska were:
•Fort Robinson State Park
•Scotts Bluff National Monument
•Arbor Lodge State Historical Park & Museum
•Carhenge
•Stuhr Museum of the Prairie Pioneer
•Buffalo Bill Ranch State Historical Park
Nielsen, J. « Alertbox for October 1, 1997: How Users Read on the Web », www.useit.com
124 %
Séances 8-9 - Sites Web
•
Organisation de l’information
– La connaissance de nos publics cibles détermine le type d'organisation
de notre information
– Selon Kilian, le contenu et le style de notre information textuelle doivent
refléter ce que nous savons de nos visiteurs. Nous devons donc
chercher à cerner le mieux possible nos publics cibles et nos objectifs.
– Citant son collègue Jeffrey Zeldman, Kilian admet trois grandes
catégories de publics cibles sur le Web :
– Les « téléspectateurs », à la recherche de divertissement visuel 
narratif,
– Les « utilisateurs », à la recherche d'information pour leur projet 
hiérarchique
– Les « lecteurs », qui font défiler de longues pages  thématique.
• L'organisation thématique est la plus répandue sur le Web.
Séances 8-9 - Sites Web
•
Erreurs fréquentes pour les sites WWW :
– Cadres ("frames") =>impression et renvoi d’un url plus difficiles,
– Gadgets et animation gratuite,
– Boîte de défilement de texte, animation => utilisateurs confondent avec
la publicité et l’ignorent,
– Éléments de navigation excèdent la taille de la page visible,
– Couleurs inhabituelles pour les liens et texte souligné,
– Information obsolète,
– Temps de téléchargement excessif.
Adapté de: http://www.useit.com/alertbox/990502.html
Séances 8-9 - Recommandations – accessibilité WWW
Web Content Accessibility Guidelines 1.0 (W3C Recommendation)
1. Provide equivalent alternatives to auditory and visual content.
2. Don't rely on color alone.
3. Use markup and style sheets and do so properly.
4. Clarify natural language usage
5. Create tables that transform gracefully.
6. Ensure that pages featuring new technologies transform gracefully.
7. Ensure user control of time-sensitive content changes.
8. Ensure direct accessibility of embedded user interfaces.
9. Design for device-independence.
10. Use interim solutions.
11. Use W3C technologies and guidelines.
12. Provide context and orientation information.
13. Provide clear navigation mechanisms.
14. Ensure that documents are clear and simple.
Séances 10-11 - Problèmes fréquents avec les IHM
•
•
•
•
Faible guidage
Incohérences vis à vis du guide de style (ex. canoë infos)
Exige souvent, implicitement, trop de qualification des utilisateurs
Pas de définition claire du but de chaque affichage
•
Cas spécial:
– Le transfert sur logiciel de formulaires est généralement un défi de taille.
Une conversion du type "un formulaire => une fenêtre" ne fonctionne
généralement pas très bien.
Séances 10-11 - Méthodes d'évaluation
•
Plusieurs méthodes d'évaluation:
– Inspections heuristiques
– Tests d’utilisabilité
– Cognitive Walkthrough (low fidelity papier)
– Semi-automatique (Web)
•
Chaque méthode d'évaluation:
– permet d'identifier différentes améliorations à apporter
– est appropriée à un moment différent dans le cycle de vie d'un produit (ex.
Cognitive walkthrough plutôt au début et semi-automatique à la fin d’un
développement)
•
Choix d'une méthode dépend:
– du moment dans le processus de développement
– du type de tâches à valider (terminologie ou séquences)
– des caractéristiques des utilisateurs visés (experts ou grand public)
– de la nature du système à développer
– des ressources disponibles (ex.: temps, budget, échéancier)
Séances 10-11 - Inspection heuristique
•
Une inspection heuristique consiste à faire examiner une interface par un nombre
restreint d’évaluateurs qui posent un jugement sur sa conformité à un ensemble de
principes d’utilisabilité ("heuristiques").
– Avantages:
• rapide, peu coûteux.
• permet d'identifier des problèmes importants.
• ne requiert pas la participation des utilisateurs.
– Désavantages:
• en dépit de sa simplicité apparente, demande une grande expertise des
évaluateurs par rapport à l'ergonomie des IHM.
• ne trouve que 30 à 50 % (en général) des problèmes que vivront les
utilisateurs.
Séances 10-11 - Inspection heuristique
•
Liste d’heuristiques recommandés: (adapté de Nielsen & Mack, 1994)
–
–
–
–
–
–
–
–
–
–
Visibilité de l’état du système (qu’est-ce qui se passe)
Pairage entre système et langage/concepts de l’utilisateur
Contrôle et liberté de l’utilisateur (undo, redo, sortie..)
Cohérence et conventions par rapport au guide de style utilisé
Prévention des erreurs
Reconnaissance plutôt que rappel
Flexibilité et efficacité d’utilisation (utilisateurs novices et experts)
Minimalisme (less is more)
Aide les utilisateurs à reconnaître, diagnostiquer, et corriger les erreurs
Aide et documentation (simple, dirigée, etc.)
– Autre grille Bastien et Scapin:
http://www.ergonomia.ca/hec/CriteresErgonomiques.pdf
Séances 10-11 - Inspection heuristique
•
Quand l'utiliser:
– Quand la conception détaillée est assez stable
– Idéalement, avant le développement ou le déploiement d’une d'IHM
– Comme technique complémentaire lorsque des difficultés semblent se présenter
lors de l’utilisation du logiciel.
•
Conseil:
– Ce type d’évaluation peut être perçue comme négative (alors que c’est en fait
sa nature même). Il faut donc prévoir la façon dont les résultats seront
communiqués et préparer le terrain avant même le début de l’évaluation. Ceci
est TRÈS important!
Séances 10-11 - Tests d’utilisabilité
•
Un test d’utilisabilité consiste à faire utiliser une maquette, un prototype,
ou un système par des utilisateurs représentatifs de ceux visés et à leur
faire exécuter des simulations de tâches représentatives de celles prévues.
•
Évaluation basée sur la performance de l'utilisateur.
•
Existe en plusieurs saveurs...
•
Norme:
– ISO 9241-11 Ergonomic requirements for office work with visual display
terminals (VDTs) Part 11: Guidance on usability
Séances 10-11 - Tests d’utilisabilité
•
Avantages:
– Permet d'identifier a priori des problèmes d'utilisation sérieux ou
récurrents d'un système.
– Permet de mettre l'emphase sur les problèmes importants au lieu de
s'attarder sur les moins importants.
•
Désavantages:
– Nécessite une grande expertise des évaluateurs
– Grande variabilité dans la façon d'effectuer des tests d'utilisabilité
– Relativement coûteux en termes de ressources (incluant les utilisateurs),
temps et $; toutefois, bien moins chers que des ventes perdues, clients
mécontents, correction au logiciel, etc.
Séances 10-11 - Tests d’utilisabilité
•
Quand l’utiliser:
– Pour raffiner la conception détaillée de l'IHM
– Avant ou durant le développement ou le déploiement d’une IHM
– Avant le déploiement d'une IHM
– Avant de choisir un nouveau logiciel
– Lorsque des difficultés semblent se présenter lors de l’utilisation du logiciel
(temps d'apprentissage excessif, erreurs, mauvaise performance, insatisfaction)
•
•
Durée d'un test d'utilisabilité < 2 heures max
Nombre de sujets:
– des données limitées suggèrent que 80 % des problèmes d’utilisabilité d'une
version de la maquette ou du produit pourront être trouvés avec 4-5 sujets.
– Note:
•
Si les tests d’utilisabilité servent lors des premières itérations de la conception détaillée, il est
probablement meilleur d’utiliser la stabilité de la conception plutôt que le nombre de sujets indiqué ici
pour juger de la qualité de la conception. Par exemple, si chaque test permet d’identifier de nouvelles
lacunes, il vaut mieux continuer les tests plutôt que d’arrêter à 4 ou 5…Idem s’il s’agit d’une situation
où le risque est élevé
Séances 10-11 - Cognitive Walkthrough
•
Le "Cognitive Walkthrough" consiste à utiliser une maquette de l'IHM à partir de
tâches spécifiques et d'identifier les écarts entre les actions et le feedback observés
par rapport aux buts et aux connaissances des utilisateurs.
– Méthode basée sur la théorie de l'apprentissage par exploration et permet
d'identifier des problèmes rencontrés par l'utilisateur lors de l'apprentissage des
tâches.
– Peut être utilisée en conjonction avec l'évaluation heuristique
•
Avantages:
– Aide à bien définir les buts et les hypothèses de conception
– Peut être effectuée par les développeurs du système
•
Désavantages:
– Très difficile (pénible) à réaliser, demande beaucoup d'expertise
– N'identifie pas toutes les incohérences ou les problèmes généraux et récurrents
Bonne révision et bon succès!