Ergonomie et design centré utilisateur Architecture de linformation et design de linteraction 1. Architecture de linformation Cours Ergo 1 Période 3 14.

Présentation au sujet: "Ergonomie et design centré utilisateur Architecture de linformation et design de linteraction 1. Architecture de linformation Cours Ergo 1 Période 3 14."— Transcription de la présentation:

1 Ergonomie et design centré utilisateur Architecture de linformation et design de linteraction 1. Architecture de linformation Cours Ergo 1 Période 3 14 et 15 Décembre 2010 Mireille Bétrancourt, Louiselle Morand - TECFA TECFA Technologies pour la Formation et lApprentissage

2 Plan Rappel de la démarche globale Retour Période 2 Structuration et « squelettage » – Organisation de linformation – Outils de navigation et dinteraction Travail attendu pour P3

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

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 stratégie Objectif stratégique Besoin utilisateur Focus Contenu Fonctionna- lités Structure Architecture Design de linteraction Squelette Navigation Design de linterface Surface Design visuel Esthétique Modèle de Garrett (2000) simplifié Vision orientée tâche Vision orientée information 3 e 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 linformation – Outils de navigation et dinteraction Travail attendu pour P3

7 *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 dHypercard (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 lEdutechwiki @tecfa Quelques dates clés

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

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

10 Déterminer larchitecture de linformation

11 1 2 7 3 4 5 6 8

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

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

14 Information Problem Solving

15 Difficultés de navigation Sentiment de désorientation Calisir & Gurel 2003 Source image :http://www.interactivearchitectu re.org/nevel-moving- labyrinth.html - 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 lon a déjà exploré…

16 Que nous dit la recherche : Limites Situation de « double tâche » surcharge cognitive Tâche de Recherche dinfo Lecture Compréhension Mémorisation Tâche de navigation 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 structuration de lhypertexte De la tâche (lecture, rappel dinformation locale, compréhension globale) Des pré-requis des utilisateurs Ex : Connaissances préalables, comme médiateur de la motivation et de lintérêt (Moos & Marroquin, 2010) Des outils de guidage et de navigation disponibles

18 Que nous dit la recherche : facteurs De la structuration de lhypertexte Lee & Tedder (2003)

19 Que nous dit la recherche : facteurs Structuration de lhypertexte Outils daccès à cette structure fournis à lutilisateur Représentation de lorganisation 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 daccès à la structure aide à la compréhension de la structure du document planindicateurs de positionnement indicateurs de volume Page 21/28

22 III. Les Hypertextes

23

24 Outils daccès à la structure aide à la compréhension de la structure du document outils de navigation historiquepoints de repères défilementretourannonces de destination info locale

25 Outils de navigation : points de repères

26 Historique III. Les Hypertextes Historique

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

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

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

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

31 Fonctionnalités et mode dinteraction : Manipulation directe Actions physiques (souris, joystick) vs. commandes textuelles Représentation continue de lobjet vs. ligne à ligne Les opérations sur lobjet 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 Représentation des fonctionnalités Représentation de Fonctionnalité interactives Insérer carte Entrer code PIN Code erroné ? oui Code oublié ? Echec oui non Choisir ou entrer montant Choisir ticket O / N non Retrait carte Retrait billets Réussite non Retrait carte Retrait billets Retrait ticket Réussite oui

36 Plan Rappel de la démarche globale Retour Période 2 Structuration et « squelettage » – Organisation de linformation – Outils de navigation et dinteraction Travail attendu pour P3 – Cahier des charges – Arborescence – Prototype horizontal : Page daccueil – Prototype vertical : maquette interactive

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

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 linformation Maintenance Référencement

39 Cahier des charges : conseils Soyez positif Ne pas dire : Le système ne doit pas permettre à lutilisateur daccéder à la page p sans être authentifié Mais dire : Si lutilisateur 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