TECFA Technologies pour la Formation et lApprentissage Ergonomie

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

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

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

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 > P 3: documents présentiel

Modèle de Garrett (2000) simplifié Navigation Vision orientée tâche Fonctionna- Design de 3 e Vision : orientée « immersion » (Olsen, 2003) lités l’interaction l’interface Garrett, J. J. (2000). The elements of user experience. Surface Architecture Squelette Besoin utilisateur Contenu Structure Objectif stratégique Focus stratégie Vision orientée information Design visuel Esthétique

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

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

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. Nœud (ou unité d’informatio n) Et alors jhkje iuoléj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhg iéupéiuoi Et alors jhkje iuoléj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhg Et alors jhkje iuoléj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iéupéiuoi @Pierre Dillenbourg lien iéupéiuoi Et alors jhkje iuoléj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhg iéupéiuoi ancre

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----------- Structure sémantique A----------- A-----------

Déterminer l’architecture de l’information

5 6 7 3 2 1 4 8

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 ?

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

Information Problem Solving

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. interactivearchitectu re. org/nevel-movinglabyrinth. html Calisir & Gurel 2003

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

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

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

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.

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

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

III. Les Hypertextes

III. Les Hypertextes

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

Outils de navigation : points de repères

III. Les Hypertextes Historique

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

Fonctionnalités et mode d’interaction : langage de commande Ex langage Unix : mkdir /web/tecfa/IPM/Cours 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 : Formulaires 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 : Menus 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 : 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.

Modèle de Norman (1986)

MD: Distance sémantique A B

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

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

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 P 3 – Cahier des charges – Arborescence – Prototype horizontal : Page d’accueil – Prototype vertical : maquette interactive

Plan de travail analyse de la demande Rapport Fin P 4 évaluation Prototype 2 évaluation Projet initial 1 entretien, ok analyse de l’activité P 2 analyse concurrentielle Contenu et fonctionnalités Tri de cartes Prototype 1 Fin P 3 – Début P 4 Arborescence implémentation Maquettes statiques v 2 Confrontation Entre vous P 3 Cahier des charges Maquettes statiques v 1

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

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