Chapitre 1 : Conception de sites Web M2-MIAGE

1. Chapitre 1 : Conception de sites Web M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire d’Informatique de Grenoble (LIG) 2008-2009

2. Objectifs du chapitre • Ce chapitre présente • une méthode • les principes élémentaires d’ergonomie applicables à la conception de sites Web • Les étudiants devraient éviter les erreurs de conception les plus courantes

3. Plan du chapitre • Introduction • Etape définition (expression des requis) • Etape conception

4. Introduction : Spécificité du Web … • Variabilité des ressources. Ce qui est rapide et lisible sur la station du concepteur ne l'est pas nécessairement dans le contexte d'utilisation. Une démo en interne ne suffit pas • Dispositifs physiques : station de travail, assistant personnel, électroménager, automobile, salle d'immersion • Bande passante réseaux • Grande diversité des utilisateurs • Difficulté de cerner l'utilisateur (tout public, internationalisation) • Difficulté d'être accessible à tous (cas des mal-voyants par exemple, voir travaux W3C)

5. Introduction : Spécifité du Web … • Nécessité d'un développement rapide : cycle de développement extrêmement court • Nécessité de fidéliser le visiteur (“sticky web site”) • Raisons de revenir sur un site (enquête auprès d’utilisateurs) • pour 75%, la qualité du contenu • pour 66%, la facilité d’utilisation • pour 58%, la vitesse de téléchargement

6. Introduction : Erreurs les plus fréquentes • Architecture de l’information • Structurer le site à l’image de la structure interne de l’entreprise • Au contraire, il convient de structurer le site à l’image de la tâche utilisateur • Conception des pages • Créer des pages somptueuses mais inefficaces (tps de réponse, bande passante) • Au contraire, rester réaliste même si le résultat est moins « cool » • Rédaction des pages • Ecrire selon le style linéaire d’un ouvrage • Au contraire, adopter un style qui va à l’essentiel suivi par un « pour en savoir plus » : principe de la pyramide inversée • Stratégie des liens • Considérer que votre site est le seul qui compte • Au contraire, référencer les sites en relation avec le sujet • Programmer avant de concevoir • La conception de site Web, c'est plus que l'écriture de code c'est plus que la création de belles images animées

7. Introduction : en résumé • La valeur du contenu et sa structure sont centrales • Un bon contenu => connaissance des besoins informationnels de l'utilisateur cible • Une bonne structure de contenu => connaissance de la tâche de l'utilisateur et du contexte de réalisation de cette tâche • Une bonne connaissance de l'utilisateur et de sa tâche implique une analyse de terrain ("Talking to users is not a luxury") La conception de site Web n’échappe pas à la règle On ne peut pas se dispenser de méthode !

8. Processus de conception : vue générale Cahier des charges Dossier de conception Conception IHM abstraite IHM concrète Analyse de la concurrence

9. Organisation de l’équipe • Chef de projet Coordonne le projet, prend les décisions en cas de conflit • Auteur Fournit le contenu informationnel • Concepteur d'interaction Conçoit l'architecture interactionnelle du site, l'organisation des pages • Développeur Est chargé de la mise en œuvre technique • Expert en utilisabilité Aide à la conception du site (enquêtes) et à son évaluation • Graphiste Produit les éléments graphiques, effets multimédia Règle clef : communiquer et former

10. Production du CDC • Pour ECOM, le CDC doit impérativement inclure les spécifications suivantes • Les objectifs généraux du site et les critères de succès • Les utilisateurs cibles • Les spécifications techniques de la (des) plate(s)-forme(s) d'accueil • (Les requis non fonctionnels) • La description des tâches les plus importantes (modèle de tâche) • La modélisation des concepts du domaine • La définition des scénarios / use case pertinents

11. Objectifs généraux du site • Indication explicite • des motivations • des bénéfices attendus (en accord avec le client) • Pour tout objectif : au moins un critère de succès, si possible quantifié • Améliorer la réussite des étudiants de 10% • Permettre aux étudiants de suivre le cours à distance à 80% du temps • Améliorer les ventes d’un site marchand de 20% • Améliorer la connaissance d’une marque de 10% auprès des moins de 30 ans • Définition des priorités (must, should, may) • Intérêt : résolution des conflits (contraintes contradictoires pouvant survenir au cours du développement) de manière rationnelle

12. Production du CDC • Le CDC doit impérativement inclure les spécifications suivantes • Les objectifs généraux du site et les critères de succès • Les utilisateurs cibles • Les spécifications techniques de la (des) plate(s)-forme(s) d'accueil • Les requis non fonctionnels • La description des tâches les plus importantes

13. Les utilisateurs cibles • Identifier les différentes catégories d'utilisateurs • Pour cela : interviews, observation sur le terrain • “Talking to users is not a luxury, it's a necessity" (Gould), • "Early and continual focus on the user" (Schneiderman), • "User centered design" (D. Norman)

14. Les utilisateurs cibles • Un bon questionnaire : pas si simple! • La 1ere question est essentielle (facile à comprendre, facile à répondre - ne pas offenser la personne, intéressante, en liaison avec les objectifs du questionnaire) • Activités dans la vie courante en relation avec le sujet du site (ses achats ds la vie courante) • Activités sur Internet (ses achats sur Internet) • Questions démographiques à la fin (non pas en 1er) • Pas deux questions déguisées en une seule ou ambigües (NON : satisfait des performances et de l’utilisabilité du systeme?) • Proposer des options de réponses (échelle de Likert), mais pas de quantificateurs vagues • NON : jamais, rarement, quelquefois, souvent • OUI : pas du tout, 1-3 fois par mois, plus d’une fois par jour, autre • Tester le questionnaire

15. Les utilisateurs cibles • Si plusieurs catégories d'utilisateurs • classement par ordre d'importance (1ère classe, 2ème classe, etc.). • Intérêt de la catégorisation • Facilite la résolution de conflits pouvant survenir au cours du développement, • Permet d'identifier les utilisateurs représentatifs pour les scénarios et les tests d'utilisabilité

16. Les utilisateurs cibles • Eléments de catégorisation d'un groupe d'utilisateurs • Ordre d'importance • Compétence (cf Rasmussen) • dans le domaine d'information du site • en informatique (connaissance du Web, utilisation de stations de travail), • Biométrie : taille, âge, sexe, déficiences (ex : 8% des hommes sont daltoniens), • Milieu socioculturel : niveau de formation, nationalité, géographie, • Fréquence envisagée d'utilisation du site : fréquent, occasionnel, rare.

17. Production du CDC • Le CDC doit impérativement inclure les spécifications suivantes • Les objectifs généraux du site et les critères de succès • Les utilisateurs cibles • Les spécifications techniques de la (des) plate(s)-forme(s) d'accueil • Les requis non fonctionnels • La description des tâches les plus importantes • La modélisation des concepts du domaine

18. Spécifications techniques • Définition du matériel et du logiciel de la plate-forme • Expression des dépendances entre matériel et logiciels • aujourd ’hui • demain (évolution, maintenance) • Exemple : différence de comportement des butineurs • Aspects sont souvent implicites (pb en cas de conflit)

19. Spécifications techniques • Définition du matériel et du logiciel de la plate-forme • Système d'exploitation : Windows, Unix, MacOs • Ordinateur : station de travail, assistant personnel, téléphone, automobile, etc. • Ecran : taille et résolution • Browser(s) (butineur) utilisés, version html, version Java, etc. • Dépendance aux changements de version de Browser : au cours du développement, après la livraison • Performances : temps de chargement des pages, etc. • Sécurité • Le site est-il un sous-site d'un site existant ? Si oui, veiller à son intégration (héritage de tâches, de guides de style).

20. Production du CDC • Le CDC doit impérativement inclure les spécifications suivantes • Les objectifs généraux du site et les critères de succès • Les utilisateurs cibles • Les spécifications techniques de la (des) plate-forme(s) d'accueil • Les requis non fonctionnels • La description des tâches les plus importantes • La modélisation des concepts du domaine • La définition des scénarios de conception

21. Requis non fonctionnels … • Facteurs qualité de McCall

22. Requis non fonctionnels … • Objectifs qualité quantifiés centrés utilisateur Exemples (cf. référentiel de Scapin-Bastien) • L'utilisateur doit toujours percevoir ce qu'il y a d'autre à explorer • L'utilisateur doit toujours être capable de se situer (ex. quel chap. d'un cours), • La recherche d'information doit être efficace (ex, en moins de 3 clics pour les tâches fréquentes) • Au moins 95% des utilisateurs doivent être capables de percevoir ce qu'il y a d'autre à explorer • Au moins 75% des utilisateurs doivent trouver l'information plus rapidement que sur le site X concurrent. • Les utilisateurs nouveaux venus devront trouver l’information recherchée en moins de 2 mn; users experts (après 5 ou 6 visites) en moins de 30 sec. • Pour une tâche donnée, les users iront visité pas plus de 3 pages « incorrectes » • Au moins 75% des users qui mettent qq chose ds le panier, achèteront le produit • Au moins 50% des users enregistrés visiteront le site au moins une fois par mois

23. Requis non fonctionnels … • Spécifier les "adjectifs clés" du site identifiés avec le client et les utilisateurs représentatifs. Ces qualités permettent de guider les choix subjectifs de conception tels que le style pictural, les couleurs. • Exemple : "attrayant", "professionnel", "innovant". http://www.eye4u.com • Si le site est un sous-site, quelles sont les dépendances en matière de charte de style, de services ?

24. Production du CDC • Le CDC doit impérativement inclure les spécifications suivantes • Les objectifs généraux du site et les critères de succès • Les utilisateurs cibles • Les spécifications techniques de la (des) plate-forme(s) d'accueil • Les requis non fonctionnels • La description des tâches les plus importantes • La modélisation des concepts du domaine • La définition des scénarios de conception

25. Modèle de tâche … • Tâche • un but (état souhaité) • procédure pour atteindre le but • Procédure : un ensemble de sous-tâches liées par • des relations de composition • des relations temporelles • Tâche élémentaire : tâche décomposable en actions physiques • Action physique : opération sur un dispositif d’entrée/sortie qui provoque un changement d’état du dispositif • clic souris ou clavier, déplacement de souris, énoncé vocal, etc. • production d’un bip, affichage d’un cercle, etc.

26. Modèle de tâche ... • Une structure arborescente • Nœud : un but • Sous-arbre : procédure pour atteindre le but • Décoration des nœuds • concepts du domaine = objets référencés (param. d’E/S, var. globales) • préconditions (conditions d’entrée) • postconditions (but) • fréquence, • complexité, • criticité (niveau de danger, caractère irrévocable, sécurité ->solution technique et peiement sécurisé, par ex., protocole SSL (Secure socket Layer) pour sécuriser le protocole HTTP = https • contraintes temporelles (durée maximale) • acteur responsable de l’éxecution de la tâche (utilisateur et/ou système) • autres (selon le domaine, must-should-may)

27. Modèle de tâches et notations • Formalismes et notations • UAN • CTT • HTA • MAD • Use cases et diagrammes de séquences d’UML • Ma notation : arbre et toutes ses décorations + opérateurs UAN

28. Modèle de tâches : ma notation Utiliser le site * * * Gérer panier Gérer compte Trouver 1 produit Trouver 1 liste de produits intéressants * * * ; ; Choisir 1 produit Agir sur le produit ou ou Mettre ds panier Voir en détail Rechercher Par mots-clefs Donner avis Rechercher Ds le catalogue Rechercher Parmi les bons plans Voir les avis Décorations : pour chaque tâche, spécifier les concepts du domaine (diagrammes de classe UML) et les ordonner par ordre d’importance Tâches : Must, Should, May, Fréquence, Criticité, Optionalité, Répétition

29. Modèle de tâches : ma notation Gérer panier * Traiter 1 article Passer cmd Vider panier * * ; Choisir 1 produit Agir sur le produit ou Supprimer Voir en détail Modifier Q

30. Modèle de tâche et notations : Use cases (UML) • Use case diagram et sequence diagram (diagramme de séquence) • Le diagramme de séquence (OK pour tâches feuilles) • décrit le comportement (y compris les cas d’exception) d’un nœud de use case • exprime les concepts du domaine en entrée et en sortie (indique les concepts du domaine à rendre observables en sorte de réduire les distances d’exécution et d’évaluation - au sens de Norman)

31. Les tâches : comment s ’y prendre? • Exploration de la concurrence (évaluation summative) • Sondages • Focus group, personna, etc.

32. Les tâches : comment s ’y prendre? Sondage exploratoire • La méthode la moins chère • Approche • serveur web (mais les réponses doivent venir d’utilisateurs représentatifs) • en face à face (bien choisir le lieu, heure, etc.) • Questionnaire (voir plus haut à propos de l’utilisateur cible)

33. Production du CDC • Le CDC doit impérativement inclure les spécifications suivantes • Les objectifs généraux du site et les critères de succès • Les utilisateurs cibles • Les spécifications techniques de la (des) plate-forme(s) d'accueil • Les requis non fonctionnels • La description des tâches les plus importantes • La modélisation des concepts du domaine • La définition des scénarios de conception

34. Analyse du contenu • Identifier les unités d'information • ces unités doivent satisfaire les objectifs du site • techniques d’identification semblables à celles de l’analyse de tâche • Grouper les unités en collections. Si besoin, utiliser la technique de tri de fiches • Ecrire un sujet par fiche. • Demander à trois ou quatre utilisateurs représentatifs (ou quelqu’un d’autre) de constituer ensemble les groupes. Technique du "thinking aloud" : les choix doivent être justifiés ; essayer d'identifier les raisons de conflit et de convergence. • Etiqueter en quelques mots chaque groupe de fiches de manière non ambiguë • Itérer jusqu'à ce qu'il n'y ait plus de fiches à classer et jusqu'à ce que l'intersection entre les groupes soit vide • Produire les diagrammes de classes UML

35. Analyse du contenu Exemple : Polytech’

36. Analyse du contenu Exemple : UFR IMA

37. Production du CDC • Le CDC doit impérativement inclure les spécifications suivantes • Les objectifs généraux du site et les critères de succès • Les utilisateurs cibles • Les spécifications techniques de la (des) plate-forme(s) d'accueil • Les requis non fonctionnels • La description des tâches les plus importantes • La modélisation des concepts du domaine • La définition des scénarios

38. Les scénarios de conception • Un scénario (nominal/exception) décrit une situation représentative d'accomplissement de tâches avec le futur système • Couverture • tâches centrales fréquentes, et/ou critiques, • pour chaque catégorie d'utilisateurs • pour les contextes d'utilisation les plus fréquents • A ce stade du développement, le scénario doit exprimer • Le contexte général d'usage (situation professionnelle ou domestique) • La valeur ajoutée en utilisant le système • Les supports (PC, PDA) • mais il ne doit pas faire référence aux actions physiques (pas de clic souris!)

39. Processus de conception : vue générale Cahier des charges Dossier de conception Conception IHM abstraite IHM concrète Analyse de la concurrence

40. Production du dossier de conception • Concevoir l’IHM Abstraite • Concevoir l’IHM Concrète • Concevoir la présentation de la page d'accueil • Concevoir la présentation des autres pages • En parallèle, concevoir le noyau fonctionnel (NF) • prototypage et évaluation formative

41. Du modèle de tâche à l’IHM abstraite • Tâche -> espace de travail qui doit rendre accessibles les concepts du domaine nécessaires à la tâche • Relations entre tâches -> enchaînements entre les espaces de travail T1 T1 T2 T1 T2 T1 T2 T1 T2 T2 T2 T2 T1 T* = T1 ; T2 T* = T1 | T2 T = T1 <->T2

42. Du modèle de tâche à l’IHM abstraite UFR XX • Pour tout espace de travail : inscrire les concepts du domaine pertinents • Utiliser les concepts du domaine en décoration des tâches (les var psychologiques) • Ou bien les concepts/attributs spécifiés dans les diagrammes de séquences (use Case, diagrammes de classe) • Regroupement d’espaces de travail (raccourcir les trajectoires d’interaction) • Tâches fréquentes accessibles d’emblée (ds “page” d’accueil) • Vérifier la conformité des enchaînements avec le modèle de tâche (distance sémantique au sens de Norman) • Ajoût des services d’utilité publique (couper, coller, undo/redo, valeurs par défaut, aide) ? Filières Emploi du temps Services aux etudiants Stages … RICM1 RICM2 DESS-GI …. Emploi du temps Xx Yy Zz IHMA ou IHM “fil de fer”

43. Du modèle de tâche à l’IHM abstraite • Pour tout espace de travail : inscrire les concepts du domaine pertinents • Utiliser les concepts du domaine en décoration des tâches (les var psychologiques) • Ou bien les concepts/attributs spécifiés dans les diagrammes de séquences (use Case, diagrammes de classe) • Regroupement d’espaces de travail (raccourcir les trajectoires d’interaction) • Tâches fréquentes accessibles d’emblée (ds “page” d’accueil) • Vérifier la conformité des enchaînements avec le modèle de tâche (distance sémantique au sens de Norman) • Ajoût des services d’utilité publique (couper, coller, undo/redo, valeurs par défaut, aide) ?

44. Production du dossier de conception • Concevoir l’IHM Abstraite • Concevoir l’IHM Concrète • Concevoir la présentation de la page d'accueil • Concevoir la présentation des autres pages • prototypage et évaluation formative

45. IHMC-Mise en page • Communication visuelle efficace : • Simplicité : ni plus, ni moins (s’appuyer sur l’IHMA- fil de fer) • Cohérence : unité d’ensemble du site (commencer par la page d’accueil, puis les autres pages) • Focus : être attentif aux points clefs de chaque page • Ne pas oublier l’évolution du site (un bon concepteur sait envisager l’avenir) • Dessiner un canevas (IHM semi-concrète) • Page d’accueil, puis autres pages-clefs correspondant aux tâches fréquentes/critiques/must (par ex., panier, bon de commande, etc.) • Analyser l’existant

46. IHMC-Mise en page • Quelques principes de la théorie «Gestalt » (1920) • Notre système visuel construit des structures fondées sur les attributs visuels suivants • Proximité • Ressemblance, différence (éléments qui émergent du reste) • Points de jonction ou de contiguïté • Couleur, forme, mouvement

47. IHMC-Mise en page • Quelques règles générales (théorie Gestalt, ICS) • Structure verticale : Essayer de réduire le nombre de colonnes (3 ou 4). • Si la page a l’air encombré, vérifier les alignements verticaux Bon Moins bon

48. IHMC-Mise en page • Quelques règles générales (suite) • Limiter le nombre d’éléments émergents sinon distraction, sauf cas précis Bon : items en caractères gras (résultat recherche “usability”) OK (idem pour le panier) Plutôt mauvais

49. IHMC-Mise en page • Quelques règles générales (suite) • Disposition symétrique (site de Tulane) • Équilibre naturel • Facile à implémenter • Plus facile à modifier • Disposition asymétrique (site UJF,ou ci-contre) • Originalité • Moins facile pour site dynamique

50. IHMC-Mise en page • Le problème de la largeur de page • Largeur variable : on ne contrôle pas toujours la mise en page, lecture rendue difficile • Largeur fixe : on ne tire pas parti des possibilités des grands écrans • Combinaison des deux • Imposer une largeur minimale pour certaines parties de la page (texte principal) et permettre l’agrandissement de la page