30-771-01 Conception de sites Web

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.

2
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 à laide des
  acétates de chaque séance.

3
Séance 1- Problématique des sites Web

• Problèmes généraux de conception
• Modèle daffaires considérer le Web comme un
  moyen de publicité traditionnel (p. ex.,
  brochure).
• Besoins de lentreprise vs besoins des
  utilisateurs du site.
• Architecture de linformation
• Structure de lentreprise
• Mission du site
• Conception des pages composant le site
• Surface vs contenu
• commentaires informels vs évaluation

Nielsen, J., Conception de sites Web lart de
la simplicité. CampusPress. 2000
4
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 dintroduction
• Gadgets vs besoins

5
Séance 1 - Aperçu de la méthode - ISO 13 407

• Pourquoi utiliser une méthode?
• Facilité de compréhension et dutilisation
• Satisfaction de lutilisateur
• 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 à
  lutilisateur et à la tâche,
• Répartition appropriée des fonctions entre les
  utilisateurs et la technologie.

6
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é lt gt facilité dutilisation

ISO 9241-11 Exigences ergonomiques pour travail
de bureau avec terminaux à écrans de
visualisation
7
Séance 2 - Survol de la méthode ISO 13407
8
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 dIHM
• Caractérisation des utilisateurs
• Analyse de la tâche
• Revue dinterfaces 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 dinteraction
• Canevas
• Évaluation
• Spécification

9
Séance 2 - Caractérisation des utilisateurs
10
Séance 3 - Analyse de la tâche

• Rôle de lanalyse de la tâche
• Technique danalyse hiérarchique de la tâche
  (AHT)
• Exercice

11
Séance 3 - Analyse hiérarchique de la tâche (AHT)

• Macro vs Micro exemple de format graphique
  arborescent

• Activité décomposée
• en étapes dactions
• nécessitant des opérations pour la réalisation
  concrète
• Difficulté conceptuelle déterminer les étapes
  séquentielles vs parallèlles pour linteractivité

12
Séance 3 - Analyse de sites concurrents

• Pour compléter lidentification des
  fonctionnalités requises
• Permet didentifier 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.

13
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
  lentreprise
• affichage
• moniteurs (type, taille et résolution)
• couleurs
• dispositifs dinteraction
• 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

14
Séance 4 - HTML - Éléments de base

• HTMLlangage lingu franca du Web format de
  fichier (format de fichier le plus répandu voir
  la source dune 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 dautres textes
• Définition hypertexte liaison contextuelle
  infinie
• www world wide web toile daraigné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 demboî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)

15
Séance 4 - HTML - Éléments de base

• Ossature HTML type
• lthtmlgt Ouverture du contenu HTML
• ltheadgt Ouverture de la partie en-tête
• lttitlegt Ouverture du titre
• Bla bla Titre du document
• lt/titlegt Fermeture du titre
• lt/headgt Fermeture de la partie en-tête
• ltbodygt Ouverture de la partie corps du texte
• Bla bla Contenu du document
• lt/bodygt Fermeture de la partie corps du texte
• lt/htmlgt Fermeture du contenu HTML

16
Séance 4 - HTML - Éléments de base

• Éléments de mise en forme
• lth1gtTitre de section de niveau 1lt/h1gt
• lth2gtTitre de section de niveau 2lt/h2gt
• lth6gtitre de section de niveau 6lt/h6gt
• ltigtitaliquelt/igt
• ltbgtgraslt/bgt
• ltdelgtbarrélt/delgt

17
Séance 4 - HTML - Éléments de base

• Paragraphes et sauts de lignes
• ltpgt
• Ceci est un paragraphe. Un espace est
  automatiquement
• créé avant et après le paragraphe.
• lt/pgt
• Ceci est un saut de ligne.ltbrgt
• Il permet de changer de ligne sans débuter un
  nouveau paragraphe.
• Notez que le marqueur ltbrgt na pas de fermeture.

18
Séance 4 - HTML - Éléments de base

• Attributs de certaines balises
• ltp align"right"gtParagraphe aligné à droitelt/pgt
• ltfont size"2"gtTexte de taille 2lt/fontgt
• ltfont size"2"gtAugmentation de la taille de 2
  unitéslt/fontgt
• ltfont size"-2"gtDiminution de la taille de 2
  unitéslt/fontgt
• ltfont size"2" face"verdana"gtTaille 2 et police
  Verdanalt/fontgt
• ltbody bgcolor"green"gt

19
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 ltAgt.
• 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
• ltA HREFhttp//URL_complet_documentgtNom du
  lienlt/Agt
• NB Il est aussi possible de créer des
  hyperliens qui pointent vers des sites ftp,
  telnet ou des adresses courriel
• ltA HREFftp//ftp.uqam.cagtSite FTP de
  lUQAMlt/Agt
• ltA HREF mailtoabc_at_xyz.comgtNous écrirelt/Agt
• 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é

20
Séance 5 - Notions de HTML Lien vers une image

• La balise servant à intégrer des images dans un
  document HTML est ltIMGgt il n'existe pas
  d'annotation de fermeture lt/IMGgt.
• Attribut SRC obligatoire indique le URL (Uniform
  Resource Locator ou adresse WWW) menant au
  document.
• ltIMG SRC"URL_de_l'image"gt
• (URL relatif tel que SRC"images/dejeuner.gif"
  ou URL complet tel que SRC"http//www.uqam.ca/ima
  ges/dejeuner.gif")
• Autres attributs de limage 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. ltIMG
  SRC"images/dejeuner.gif" ALT"Déjeuner"gt
• ALIGN Pour aligner l'image
• Les paramètres "top" , "bottom ", "middle",
  "Left", "Right",
• Une image peut servir d'hyperlien.
• Ouvrir la balise ltAgt avant le ltIMGgt et la
  refermer (lt/Agt).

21
Séance 5 - Notions de HTML

• Lien relatif vers une image de niveau inférieur.

22
Séance 6 - Notions HTML Metatags et référencement

• Pour optimiser le référencement
• Utilisez des headings (lth1gt) plutôt que des
  images pour vos titres de sections et de
  paragraphes
• Soigner le contenu du premier paragraphe de votre
  page afin quil 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 lattribut 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).

23
Séance 6 - Notions de HTML Listes

• ltulgt
• ltligtLaitlt/ligt
• ltligtFruitslt/ligt
• ltulgt
• ltligtOrangeslt/ligt
• ltligtPommeslt/ligt
• lt/ulgt
• ltligtPainlt/ligt
• lt/ulgt

• Lait
• Fruits
• Oranges
• Pommes
• Pain

24
Séance 6 - Traitement des images

• Deux formats dimages 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 dun 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 limage).
• Un format dimage é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 limage). Nest par contre pas encore
  supporté par tout les navigateurs.

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

26
Séance 7 - Balises et attributs des
tableauxExemple de code
lttable border"1" width"600"gt lttrgt
lttd height"38" width"100"gt lt/tdgt lttd
height"38" width"100"gt lt/tdgt lttd
height"38" width"100"gt lt/tdgt lttd
height"38" width"100"gt lt/tdgt lttd
height"38" width"100"gt lt/tdgt lttd
height"38" width"100"gt lt/tdgt lt/trgt
lttrgt lttd rowspan"2" width"100"gt
lt/tdgt lttd colspan"3" rowspan"2"gt
lt/tdgt lttd height"86" width"100"gt
lt/tdgt lttd height"86" width"100"gt
lt/tdgt lt/trgt lttrgt lttd height"95"
width"100"gt lt/tdgt lttd height"95"
width"100"gt lt/tdgt lt/trgt lttrgt
lttd colspan"6" height"93"gt lt/tdgt
lt/trgt lt/tablegt
Sandrine Prom Tep, Mai 2003
27
Séance 7 - Balises et attributs des tableaux

• Exercice à faire
• http//www.hec.ca/sites/cours/30-771-01/fich/cours
  _10/exercice1.html

28
Séance 7 - Utilisation des volets ou cadres
(frames)

• Avantages
• Solution intéressante pour les éléments communs
  de conception
• Affichage de plus dune fenêtre à la fois
• Peut aider à réduire une partie des tâches
  dentretien 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é dimpression
• Difficile dindexer 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

29
Séances 8-9 - Survol de la méthode
30
Séances 8-9 - Conception détaillée Guides
ergonomiques et perception visuelle

• Facteurs influençant lexploration 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 linformation toujours en contexte
  macro/micro
• Principe de perception Figure/Fond
• Loeil cherche lordre pour lextraction de
  structures
• lalignement
• le regroupement (association)
• Le contraste ou lanomalie (mouton noir)
• Lanarchie (nimporte quoi nimporte comment)
  ne fait pas de sens pour lindividu sinon en
  poésie

31
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 lusage de la lecture donc même
  avec le même niveau de confort pour la lecture,
  lusage nest pas nécessairement le même,
  différence de portabilité...(livre, pamphlet ou
  magazine vs ordi, palm, cell, etc.)

32
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 leffet 3-D.

33
Séances 8-9 Structures de sites Web

• Processus de conception de sites Architecture

• Utilisée quand
• Groupes dinformation 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 à
  lintérieur dun grand site
• Ex tour guidé, présentation historique,
  tutoriel, long formulaire denregistrement (ex
  recruitsoft)

Séquentielle
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 linformation (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

Adapté de Yales Web Style Guide, disponible
à http//info.med.yale.edu/caim/manual/contents.
html
34
Séances 8-9 Structures de sites Web
Hiérarchie

• Utilisée quand
• Veut refléter la structure dune 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
• Veut poser peu de restrictions sur lutilisation
  de linformation et la navigation, favorise
  lexploration, 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 dun modèle pour
  lutilisateur Plutôt pour petits sites et
  experts
• Ex Savedbythebelles.com (17 tableaux selon
  lhumeur)

Toile
35
Séances 8-9 Structures de sites Web

• Problèmes fréquents

Structure trop large, page daccueil surchargée
de liens souvent peu reliés entre eux.
Structure trop profonde, nécessite beaucoup de
clics pour la parcourir et trouver linformation
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 dutilisabilité et bon jugement. Ergonomie
Science (règles, principes et méthodes) et un Art
(bon sens et expérience)
36
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 damélioration de lutilisabilité 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 124
Nielsen, J.  Alertbox for October 1, 1997 How
Users Read on the Web , www.useit.com
37
Séances 8-9 - Sites Web

• Organisation de linformation
• 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.

38
Séances 8-9 - Sites Web

• Erreurs fréquentes pour les sites WWW
• Cadres ("frames") gtimpression et renvoi dun url
  plus difficiles,
• Gadgets et animation gratuite,
• Boîte de défilement de texte, animation gt
  utilisateurs confondent avec la publicité et
  lignorent,
• É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.ht
ml
39
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.
40
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 gt une fenêtre" ne
  fonctionne généralement pas très bien.

41
Séances 10-11 - Méthodes d'évaluation

• Plusieurs méthodes d'évaluation
• Inspections heuristiques
• Tests dutilisabilité
• 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 dun 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)

42
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
  dutilisabilité ("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.

43
Séances 10-11 - Inspection heuristique

• Liste dheuristiques recommandés (adapté de
  Nielsen Mack, 1994)
• Visibilité de létat du système (quest-ce qui se
  passe)
• Pairage entre système et langage/concepts de
  lutilisateur
• Contrôle et liberté de lutilisateur (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é dutilisation
  (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

44
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 dune d'IHM
• Comme technique complémentaire lorsque des
  difficultés semblent se présenter lors de
  lutilisation du logiciel.
• Conseil
• Ce type dévaluation peut être perçue comme
  négative (alors que cest 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!

45
Séances 10-11 - Tests dutilisabilité

• Un test dutilisabilité 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

46
Séances 10-11 - Tests dutilisabilité

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

47
Séances 10-11 - Tests dutilisabilité

• Quand lutiliser
• Pour raffiner la conception détaillée de l'IHM
• Avant ou durant le développement ou le
  déploiement dune IHM
• Avant le déploiement d'une IHM
• Avant de choisir un nouveau logiciel
• Lorsque des difficultés semblent se présenter
  lors de lutilisation du logiciel (temps
  d'apprentissage excessif, erreurs, mauvaise
  performance, insatisfaction)
• Durée d'un test d'utilisabilité lt 2 heures max
• Nombre de sujets
• des données limitées suggèrent que 80 des
  problèmes dutilisabilité d'une version de la
  maquette ou du produit pourront être trouvés avec
  4-5 sujets.
• Note
• Si les tests dutilisabilité servent lors des
  premières itérations de la conception détaillée,
  il est probablement meilleur dutiliser 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
  didentifier de nouvelles lacunes, il vaut mieux
  continuer les tests plutôt que darrêter à 4 ou
  5Idem sil sagit dune situation où le risque
  est élevé

48
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

49

• Bonne révision et bon succès!