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