La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Conception de sites Web

Présentations similaires


Présentation au sujet: "Conception de sites Web"— Transcription de la présentation:

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 à l’aide 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 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

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 d’introduction 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 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.

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é < > facilité d’utilisation * ISO Exigences ergonomiques pour travail de bureau avec terminaux à écrans de visualisation

7 Séance 2 - Survol de la méthode ISO 13407
Identifier la nécessité d’une conception centrée sur l’opérateur humain Comprendre et spécifier le contexte d’utilisation 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 Évaluer les conceptions par rapport aux exigences Proposer des solutions de conception Ce processus est amorcé dès la formulation des spécifications initiales du produit ou du système.

8 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 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 Évaluer les conceptions par rapport aux exigences 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

9 Séance 2 - Caractérisation des utilisateurs

10 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 Voir:

11 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’identifier 2- Choisir le compte 3- Spécifier le montrant 4- Exécuter le retrait 1.1 Insérer sa carte 1.2 Entrer son NIP Faire 1,2,3,4 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é

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

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

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

15 Séance 4 - HTML - Éléments de base
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

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

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

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

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

20 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>).

21 Séance 5 - Notions de HTML
Lien relatif vers une image de niveau inférieur. index.html page1.html page2.html rep fille1.html img hec.gif logo.gif <img src="img/logo.gif" > <img src="rep/img/hec.gif" >

22 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).

23 Séance 6 - Notions de HTML: Listes
<ul> <li>Lait</li> <li>Fruits</li> <li>Oranges</li> <li>Pommes</li> </ul> <li>Pain</li> Lait Fruits Oranges Pommes Pain

24 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. Extensions .jpg et .gif en minuscules.

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 tableaux Exemple de code
<table border="1" width="600"> <tr> <td height="38" width="100"> </td> </tr> <td rowspan="2" width="100"> </td> <td colspan="3" rowspan="2"> </td> <td height="86" width="100"> </td> <td height="95" width="100"> </td> <td colspan="6" height="93"> </td> </table> <td rowspan="2" width="100"> </td> j’ai fusionné 2 rangées <td colspan="3" rowspan="2"> </td> j’ai fusionné 3 colonnes et 2 rangées <td colspan="6" height="93"> </td> j’ai fusionné 6 colonnes Sandrine Prom Tep, Mai 2003

27 Séance 7 - Balises et attributs des tableaux
Exercice à faire:

28 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: Exemples de pages mal faites avec frames: :

29 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 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 Évaluer les conceptions par rapport aux exigences Proposer des solutions de conception 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

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

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 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.) (Tests de lisibilité des polices courantes)

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 l’effet 3-D. voici un exemple à ne pas suivre ni ça et ça non plus

33 Séances 8-9 Structures de sites Web
Processus de conception de sites: Architecture * 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) 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 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… * Adapté de: Yale’s Web Style Guide, disponible à:

34 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: 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) Toile: AI = Architecture de l’information

35 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. Idéalement, règle du 3 clics: Produits / Équipements informatiques / Ordinateurs). Illustration conjointe de ces 2 problèmes: 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)

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 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 124 % Nielsen, J. « Alertbox for October 1, 1997: How Users Read on the Web »,

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

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

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 => une fenêtre" ne fonctionne généralement pas très bien. Guidage: Où je suis? (titre sur la page, logo en haut à gauche…) D’où je viens? (fil d’ariane, bread crumbs…) Où puis-je aller? (hyperliens clairement définis, orientés sur les tâches possibles à accomplir)

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

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

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

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

45 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 Ergonomic requirements for office work with visual display terminals (VDTs) Part 11: Guidance on usability

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

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

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 La démarche d'évaluation est découpée en 3 étapes : La préparation de l'évaluation : spécification d'une série de tâches et des séquences d'actions que l'utilisateur doit réaliser pour atteindre chaque tâche L'évaluation qui consiste à imaginer ce que l'utilisateur pensera et de détecter les difficultés qu'il peut rencontrer. L'interprétation des résultats 4 questions fondamentales à se poser pour chaque action : L'utilisateur pensera-t-il qu'il peut ou qu'il doit faire cette action ? L'utilisateur verra-t-il le dispositif de contrôle (bouton, menu, interrupteur,…) pour lancer l'action ? Après avoir trouvé le dispositif de contrôle, est-ce que l'utilisateur reconnaîtra que celui-là déclenchera bien l'action désirée ? Une fois l'action déclenchée, l'utilisateur comprendra-t-il le retour d'information (feedback) lui permettant de passer en toute confiance à l'action suivante ? Après l'évaluation Modifier la conception ! Rendre les dispositifs de contrôle plus évidents Utiliser des étiquettes que l'utilisateur saura reconnaître Fournir un meilleur feedback Source:

49 Bonne révision et bon succès!


Télécharger ppt "Conception de sites Web"

Présentations similaires


Annonces Google