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

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

Identifier lanécessité d’une conception

centrée sur l’opérateur humain

Comprendre et spécifier le contexte

d’utilisation

Le système répond auxexigences de l’utilisateur

et de l’organisation

Spécifier lesexigences liées à l’utilisateur et à l’organisation

Évaluer lesconceptions par

rapport aux exigences

Proposer des solutions deconception

Ce processus est amorcé dès la formulation des spécifications initiales du produit ou du système.

Séance 2 - Survol de la méthode

• On peut représenter schématiquement le processus et ses activités comme suit:

• 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

• Conception globale– Guides: style et ergonomiques– Architecture

• Conception détaillée– Principes, règles et critères– Dispositifs d’interaction– Canevas

• Évaluation• Spécification




d’utilisation







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

Retirer X $du cpte chèque

1- S’identifier2- Choisir le

compte3- Spécifier le

montrant4- Exécuter

le retrait

1.1 Insérer sa carte 1.2 Entrer son NIP

Faire1,2,3,4

Faire 1.1, 1.2

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


• Ossature HTML type

<html> Ouverture du contenu HTML <head> Ouverture de la partie «en-tête» <title> Ouverture du titre Bla bla Titre du document </title> Fermeture du titre </head> Fermeture de la partie «en-tête» <body> Ouverture de la partie «corps du texte» Bla bla Contenu du document </body> Fermeture de la partie «corps du texte» </html> Fermeture du contenu HTML


• É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>


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


• 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 sous-dossiers à 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

page1.html

page2.html

repfille1.htmlimg

hec.gif

imglogo.gif

<img src="img/logo.gif" >

<img src="rep/img/hec.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 Orangeso 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.

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

Séance 7 - Balises et attributs des tableauxExemple de code

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

http://www.radio-canada.ca/

http://netmarketingsolution.com/

http://www.aqiii.org/

Séances 8-9 - Survol de la méthode




d’utilisation







• 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

• Conception détaillée - Principes cognitifs, règles et

critères - Dispositifs d’interaction

• Conception globale– Guides: style et

ergonomiques– Architecture

• Évaluation• Spécification

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 çaet ça non plus

Séances 8-9 Structures de sites Web

• Processus de conception de sites: Architecture *

* Adapté de: Yale’s Web Style Guide, disponible à: http://info.med.yale.edu/caim/manual/contents.html

Séquentielle: Utilisée quand:• 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)

Grille:

Utilisée quand:• 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…


Hiérarchie: Utilisée quand:• Veut refléter la structure d’une organisation• Note: une des plus utilisées

car rappel: cognition et ordreVoir aussi une AI proche : AI en rayon lorsque tout se

rapporte à une même chose (objet, personne, etc.)

Toile:Utilisée quand:• 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)


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

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)

Illustration conjointe de ces 2 problèmes: http://www2.canoe.com/index.htmlIntégration de différents sites ex: cinéma

http://www2.canoe.com/index.html

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:

Nielsen, J. « Alertbox for October 1, 1997: How Users Read on the Web », www.useit.com

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

124 %

http://www.useit.com/papers/webwriting/studyfiles/travelnebraska/promotional/carhenge.html

http://www.useit.com/papers/webwriting/studyfiles/travelnebraska/concise/carhenge.html

http://www.useit.com/papers/webwriting/studyfiles/travelnebraska/combined/carhenge.html


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


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

• 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


• 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!


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


• 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é


• 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

Séances 10-11 - Cognitive Walkthrough

Bonne révision et bon succès!

Documents

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