Ergonomie et design centré utilisateurArchitecture de l’information et design de l’interaction
1. Architecture de l’information
Cours Ergo 1Période 3
14 et 15 Décembre 2010
Mireille Bétrancourt, Louiselle Morand - TECFA
TECFATechnologies pour la
Formation et l’Apprentissage
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
Plan de travail
Contenu et fonctionnalités
analysede l’activité
Prototype 1
évaluation
Maquettes statiques v1
Projet initial
analyse de lademande
Prototype 2
ConfrontationEntre vous
évaluation
Rapport
Tri de cartes
analyseconcurrentielle
1 entretien, ok
P2
P3Maquettes statiques v2
implémentation
Fin P3 – Debut P4 Arborescence
Fin P4
Cahier des charges
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érentsutilisateurs ?
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
Modèle de Garrett (2000) simplifié
Vision orientée tâche
Vision orientée information
3e Vision : orientée « immersion » (Olsen, 2003)
Garrett, J.J. (2000). The elements of user experience.
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
* 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
Quelques dates clés
Mode de gestion de l’information où cette dernière estreprésentée par des unités d’informations appelées nœuds,reliés par des liens, activables par action de la souris surdes ancres.
La notion d’hypertexte
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 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
lienNœud (ou unité
d’information)
ancre@Pierre Dillenbourg
Dans un hypertexte, l’information 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
Déterminer l’architecture de l’information
1
2
7
3
4
5
6
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 ?
Le cycle évaluation - sélection - traitementI.
La re
cher
che
d’in
form
ation
s
CONTRAINTESSITUATIONNELLES
CONNAISSANCESDISPONIBLES
EVALUATION Représentation de but
Plan de recherche
SELECTION
Identification
Estimationpertinence
Choix de la cible
TRAITEMENT
Intégration
Filtrage
Compréhension
Etat de la solution
satisfaisanteFIN
Tricot & Rouet, 1998
Information Problem Solving
Difficultés de navigationSentiment de désorientation
Calisir & Gurel 2003Source image :http://www.interactivearchitecture.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 l’on a déjà exploré…
Que nous dit la recherche : Limites
Situation de « double tâche » surcharge cognitive
Tâche deRecherche d’info
LectureCompréhensionMémorisation
Tâche de navigation
Représentation de la structureMémorisation de son cheminCompréhension des outils
Que nous dit la recherche : facteurs
Les résultats dépendent
De la structuration de l’hypertexte
De la tâche (lecture, rappel d’information locale, compréhension globale)
Des pré-requis des utilisateursEx : Connaissances préalables, comme médiateur de la motivation et de l’intérêt (Moos & Marroquin, 2010)
Des outils de guidage et de navigation disponibles
Que nous dit la recherche : facteursDe 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 contenuNavigation 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 structuredu document
plan indicateurs depositionnement
indicateurs devolume
Page 21/28
III. L
es H
yper
text
es
III. L
es H
yper
text
es
Outils d’accès à la structure
aide à la compréhension de la structuredu document
outils de navigation
historiquepoints de repères
défilement retourannonces de destination
info locale
Outils de navigation : points de repères
HistoriqueIII
. Les
Hyp
erte
xtes
Historique
Outils de navigation : informations locales
Clic ici
University of Georgia
http://www.uga.edu/
Fonctionnalités et mode d’interaction : langage de commande
Inconvénients
Apprentissage difficile : lexique, syntaxe
Visibilité réduite, feed-back inexistant
Avantages
Concision, extensivité
Précision, absence d’ambiguité
Langage « transparent »
Ex langage Unix : mkdir /web/tecfa/IPM/Cours
Fonctionnalités et mode d’interaction : 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
Fonctionnalités et mode d’interaction : 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
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
Représentation des fonctionnalitésReprésentation deFonctionnalité interactives
Insérer carte
Entrer codePIN
Codeerroné ? oui
Codeoublié ?
Echecoui
non
Choisir ou entrermontant
Choisir ticketO / N
non
Retrait carte
Retrait billets
Réussite
non
Retrait carte
Retrait billets
Retrait ticket
Réussite
oui
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
Plan de travail
Contenu et fonctionnalités
analysede l’activité
Prototype 1
évaluation
Maquettes statiques v1
Projet initial
analyse de lademande
Prototype 2
ConfrontationEntre vous
évaluation
Rapport
Tri de cartes
analyseconcurrentielle
1 entretien, ok
P2
P3Maquettes statiques v2
implémentation
Fin P3 – Début P4 Arborescence
Fin P4
Cahier des charges
Cahier des charges : exemple de structure
Objectif stratégiquePublic cible choisiFocus
Contenu et organisation : arborescence complète n annexeOutils de représentation de la structure et de navigationFonctionnalités (ne seront pas développées dans le proto)SourcesContraintes à respecter
Aspects techniquesMise à jour de l’informationMaintenanceRéférencement
Cahier des charges : conseils
Soyez positifNe 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écifiquesNe pas dire : Le site doit être accessible aux handicapésMais 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 subjectivesNe pas dire : Le site doit être performantMais dire : Le site doit être capable de supporter 1000 requêtes simultanées