Cours Ergo 1 Période 3 14 et 15 Décembre 2010

1. TECFA Technologies pour la Formation et l’Apprentissage Ergonomie et design centré utilisateurArchitecture de l’information et design de l’interaction1. Architecture de l’information Cours Ergo 1 Période 3 14 et 15 Décembre 2010 Mireille Bétrancourt, Louiselle Morand - TECFA

2. Plan • Rappel de la démarche globale • Retour Période 2 • Structuration et « squelettage » • Organisation de l’information • Outils de navigation et d’interaction • Travail attendu pour P3

3. Plan de travail analyse de la demande 1 entretien, ok Rapport Fin P4 analyse de l’activité Projet initial évaluation P2 Prototype 2 analyse concurrentielle évaluation Contenu et fonctionnalités Tri de cartes Arborescence Prototype 1 Fin P3 – Debut P4 implémentation Cahier des charges Maquettes statiques v2 P3 Confrontation Entre vous Maquettes statiques v1

4. Retour travail en Période 2 Comment avez-vous constitué les cartes ? Comment se sont passés les tris par les utilisateurs ? Comment avez-vous synthétisé les résultats des différents utilisateurs ? Chaque groupe interviewe un autre groupe (attention 5 mn par point) soyez concis et direct. Un rapporteur par groupe et par point Résultat : voir fichier dans Documents > P3: documents présentiel

5. Modèle de Garrett (2000) simplifié Vision orientée information Vision orientée tâche 3e Vision : orientée « immersion » (Olsen, 2003) Garrett, J.J. (2000). The elements of user experience.

6. Plan • Rappel de la démarche globale • Retour Période 2 • Structuration et « squelettage » • Organisation de l’information • Outils de navigation et d’interaction • Travail attendu pour P3

7. Quelques dates clés * 1945 : Vannevar Bush projet de la machine "Memex". * 1965 : Théodore Nelson crée le mot "hypertexte". * 1968 : Douglas Engelbart crée le système "Augment". * 1969 : Documentation en ligne du projet Appolo. * 1987 : Sortie d’Hypercard (Apple). * 1987 : Premières grandes conférences scientifiques. * 1991 : Tim Berners-Lee met au point le WWW. * 1994 : Ouverture du diplôme STAF (ex MALTT) * 1997 : Lancement du moteur de recherche Google * 2001 : Première page wikipedia en ligne * 2006 : Lancement de l’Edutechwiki @tecfa

8. Et alors jhkje iuoléj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iéupéiuoi lien Et alors jhkje iuoléj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iéupéiuoi Nœud (ou unité d’information) Et alors jhkje iuoléj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iéupéiuoi Et alors jhkje iuoléj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iéupéiuoi Et alors jhkje iuoléj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iéupéiuoi ancre La notion d’hypertexte Mode de gestion de l’information où cette dernière est représentée par des unités d’informations appelées nœuds, reliés par des liens, activables par action de la souris sur des ancres. @Pierre Dillenbourg

9. Structure sémantique La structure des hypertextes Dans un hypertexte, l’information est : découpée en unités d ’information structurée en réseau. Structure hiérarchique A--- ----- ----- A--- ----- ----- A--- ----- ----- A--- ----- ----- A--- ----- ----- A--- ----- ----- A--- ----- ----- A--- ----- ----- A--- ----- ----- A--- ----- -----

10. Déterminer l’architecture de l’information

11. 5 6 7 3 2 1 4 8

12. Analyse de sites Quel est le contenu proposé ? Comment est-il organisé ? Quels sont les outils de navigation ? Quels sont les outils d’aide disponibles ? Quels sont les problèmes potentiels ?

13. CONTRAINTES SITUATIONNELLES CONNAISSANCES DISPONIBLES EVALUATION Représentation de but Plan de recherche satisfaisante FIN Etat de la solution SELECTION TRAITEMENT Identification Estimation pertinence Choix de la cible Intégration Filtrage Compréhension Le cycle évaluation - sélection - traitement I. La recherche d’informations Tricot & Rouet, 1998

14. Information ProblemSolving

15. Difficultés de navigation • Sentiment de désorientation • Ne pas savoir comment retrouver une page particulière • Ne pas savoir où aller maintenant, • Ne pas savoir où trouver une information et comment y aller • Ne pas savoir ce que l’on a déjà exploré… Source image :http://www.interactivearchitecture.org/nevel-moving-labyrinth.html Calisir & Gurel 2003

16. Que nous dit la recherche : Limites Situation de « double tâche » surcharge cognitive Tâche de Recherche d’info Tâche de navigation Lecture Compréhension Mémorisation Représentation de la structure Mémorisation de son chemin Compréhension des outils

17. Que nous dit la recherche : facteurs Les résultats dépendent De la tâche (lecture, rappel d’information locale, compréhension globale) Des pré-requis des utilisateurs Ex : Connaissances préalables, comme médiateur de la motivation et de l’intérêt (Moos & Marroquin, 2010) De la structuration de l’hypertexte Des outils de guidage et de navigation disponibles

18. Que nous dit la recherche : facteurs De la structuration de l’hypertexte Lee & Tedder (2003)

19. Que nous dit la recherche : facteurs Structuration de l’hypertexte Outils d’accès à cette structure fournis à l’utilisateur Représentation de l’organisation du contenu Navigation dans la structure Caro, S. & Bétrancourt, M. (1998). Ergonomie de la présentation des textes sur écran : guide pratique. in A. Tricot et J.F Rouet (eds.) Hypertextes et Hypermédias, Concevoir et utiliser les hypermédias: approches cognitives et ergonomiques. (pp. 123 - 137), Hermès : Paris.

20. Que nous dit la recherche : facteurs Potelle et Rouet, 2003

21. Outils d’accès à la structure aide à la compréhension de la structure du document indicateurs de volume plan indicateurs de positionnement Page 21/28

22. III. Les Hypertextes

23. III. Les Hypertextes

24. outils de navigation Outils d’accès à la structure aide à la compréhension de la structure du document défilement annonces de destination retour points de repères historique info locale

25. Outils de navigation : points de repères

26. Historique Historique III. Les Hypertextes

27. Outils de navigation : informations locales University of Georgia Clic ici http://www.uga.edu/

28. Avantages Concision, extensivité Précision, absence d’ambiguité Langage « transparent » Inconvénients Apprentissage difficile : lexique, syntaxe Visibilité réduite, feed-back inexistant Fonctionnalités et mode d’interaction : langage de commande Ex langage Unix : mkdir /web/tecfa/IPM/Cours

29. Avantages Indication de la procédure à suivre Correspondance entre information entrée et structure du système Ambiguité restreinte Inconvénients Ergonomie très importante Ajout d ’une information non prévue impossible Fonctionnalités et mode d’interaction : Formulaires

30. Avantages La liste des commandes possibles est disponible Séparation interaction / production Menus contextuel Inconvénients Menu pop-up : toutes les réponses doivent être prévues Menu déroulant : structuration des commandes, choix du vocabulaire Fonctionnalités et mode d’interaction : Menus

31. Fonctionnalités et mode d’interaction : Manipulation directe • Actions physiques (souris, joystick) vs. commandes textuelles • Représentation continue de l’objet vs. ligne à ligne • Les opérations sur l’objet sont rapides, réversibles et leur effet est immédiatement visible.

32. Modèle de Norman (1986)

33. MD: Distance sémantique A B

34. MD: Distance articulatoire La forme des expressions utilisées doit correspondre le plus possible à leur signification. = basée sur une relation analogique et non arbitraire EX : « envoyer à la corbeille » par clic vs. Drag & drop

35. non Code erroné ? Code oublié ? Echec oui oui non Choisir ou entrer montant Choisir ticket O / N oui non Retrait carte Retrait carte Retrait billets Retrait billets Retrait ticket Réussite Réussite Insérer carte Représentation des fonctionnalités Représentation de Fonctionnalité interactives Entrer code PIN

36. Plan • Rappel de la démarche globale • Retour Période 2 • Structuration et « squelettage » • Organisation de l’information • Outils de navigation et d’interaction • Travail attendu pour P3 • Cahier des charges • Arborescence • Prototype horizontal : Page d’accueil • Prototype vertical : maquette interactive

37. Plan de travail analyse de la demande 1 entretien, ok Rapport Fin P4 analyse de l’activité Projet initial évaluation P2 Prototype 2 analyse concurrentielle évaluation Contenu et fonctionnalités Tri de cartes Arborescence Prototype 1 Fin P3 – Début P4 implémentation Cahier des charges Maquettes statiques v2 P3 Confrontation Entre vous Maquettes statiques v1

38. Cahier des charges : exemple de structure • Objectif stratégique • Public cible choisi • Focus • Contenu et organisation : arborescence complète n annexe • Outils de représentation de la structure et de navigation • Fonctionnalités (ne seront pas développées dans le proto) • Sources • Contraintes à respecter • Aspects techniques • Mise à jour de l’information • Maintenance • Référencement

39. Cahier des charges : conseils Soyez positif Ne pas dire : Le système ne doit pas permettre à l’utilisateur d’accéder à la page p sans être authentifié Mais dire : Si l’utilisateur veut accéder à la page p sans être authentifié, le rediriger vers la page de login Soyez spécifiques Ne pas dire : Le site doit être accessible aux handicapés Mais dire : Le site doit être conforme aux recommandations du WCAG 2.0 (www.w3.org/WAI) en ce qui concerne… Evitez les contraintes ambigües ou subjectives Ne pas dire : Le site doit être performant Mais dire : Le site doit être capable de supporter 1000 requêtes simultanées