Cours Ergo 1 Période 3 8 & 10 Décembre 2014 Ergonomie et design centré utilisateur 3. Architecture de l’information Mireille Bétrancourt, Vincent Widmer.

Présentation au sujet: "Cours Ergo 1 Période 3 8 & 10 Décembre 2014 Ergonomie et design centré utilisateur 3. Architecture de l’information Mireille Bétrancourt, Vincent Widmer."— Transcription de la présentation:

1 Cours Ergo 1 Période 3 8 & 10 Décembre 2014 Ergonomie et design centré utilisateur 3. Architecture de l’information Mireille Bétrancourt, Vincent Widmer - TECFA TECFA Technologies pour la Formation et l’Apprentissage

2 Plan des séances 1. Introduction Debriefing période 2 Rappel de la notion d’activité et de la démarche globale 2. Les documents non linéaires et la recherche d’information Définition d’un document non linéraire Navigation et recherche d’info au niveau cognitif ? 3. L’oculométrie en ergonomie des sites Web Démo et vidéo 4. Architecture de l’information Impact de l’organisation au niveau visuel et cognitif Quels outils pour faciliter la tâche de l’utilisateur ? Elaborer l’architecture : méthode du tri de cartes 4. Préparation de la période à distance Travail attendu pour P3 Prise en main du logiciel Axure

3 Hyperdocuments et apprentissage 1) Pourquoi des documents non-linéaires pour l’apprentissage ? 2) Quels éléments de design pour faciliter l’apprentissage dans des documents non linéaires ?

4 http://wp.unil.ch/bases/ A partir du projet développé par Paola Rattu et Catherine Pahud Falcy en ERGO http://uegd1k.axshare.com/home.html Projet de Jessica Rochat et Romain Dewaele

5 Les cartes conceptuelles Source, définition du concept et logiciels : voir Edutechwiki et le mémoire de Paola Rattu (2014)Edutechwiki

6 Les documents non linéaires dans la sphère des technologies éducatives Activités Outils Ressources contenu LMS Simulation CBT Hypertextes Cartes de contenus Wikis Cartes conceptuelles

7 Pourquoi des hypertextes en ressources d’apprentissage ? Petit jeu : 2 personnes volontaires Chacun donne un mot à son tour.

8 Pourquoi des hypertextes en ressources d’apprentissage ? Organisation des connaissances en mémoire sous forme de réseau sémantique Collins & Quillian (1969) Source image : http://en.wikipedia.org/wiki/File:Se mantic_Net.svg

9 Avantages pour l’apprentissage ? Construction active par l’apprenant de son chemin Dee-Lucas, & Larkin (1995) Facilite la pensée créative (théorie de la Flexibilité Cognitive) Spiro, & Jehng (1990) Organisation en réseau sémantique Collins & Quillian (1969)

10 Apprentissage et document non linéaire Champs sémantique Cerveau Medium non linéaire Et alors jhkje iuoléj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iéupéiuoi

11 Est-ce que « ça marche » ? Depover (1996). Revue Informatique en Sciences humaines.  3 principes de design

12 Principe 1- Faciliter l’atteinte des buts d’apprentissage en fournissant des éléments de guidage pédagogique III. Les Hypertextes

13 aide index Liste des compléments (tableaux, vidéos, glossaire…) Table des matières Principe 1- Faciliter l’atteinte des buts d’apprentissage en fournissant des éléments de guidage pédagogique

14 Principe 2 – Fournir des outils d’aide à la navigation 2a : Représentation du contenu et localisation

15 Points de repère Fil d’ariane Principe 2 – Fournir des outils d’aide à la navigation 2b : Aide à l’orientation Prévisualisation

16 Principe 3 : Adapter l’hypertexte aux connaissances des utilisateurs 3 conditions de représentation et d’accès au contenu 47 participants, étudiants Procédure : Prétest de connaissances Etude du document Test

17 Principe 3 : Adapter l’hypertexte aux connaissances des utilisateurs *F(1,41) = 6.04, p <.01 *

18 Pause intégrative Prenez trois minutes pour noter ce que vous retenez de tout ceci et des questions que vous vous posez.

19 Architecture du contenu et organisation de la page d’accueil 1) Impact de l’architecture au point de vue perceptif et cognitif 2) Méthode pour déterminer l’organisation de l’information dans un site ou un document non linéaire

20 L’architecture de l’information Contenu Demandeur Docs institutionnels Entretien utilisateurs Non structuré structuré Organisation technique Interface utilisateur

21 Arborescence Maquette statique page d’accueil Attention ! Ne pas oublier de prévoir la structure sémantique (liens directs d’une page à l’autre)

22 Analyse oculométrique de l’exploration d’une page d’accueil Source image : http://www.uservision.co.uk/ Voir par exemple : http://www.ergologique.com/conseils/conseils.php?id_tip=24

23 Zones fonctionnelles de l’écran

24 Modèles de page d’accueil de sites institutionnels Ex: référentiel web gouvernemental du Luxembourg, http://www.renow.public.lu/ Classique Portail

25 Modèles de page d’accueil de sites institutionnels Personnalisé « Si Renow est un cadre strict dont le dessein est une excellente qualité des sites Internet de notre gouvernement, nous encourageons toute expression artistique permettant de transmettre les valeurs culturelles de notre pays. La page d’accueil fait souvent l’objet d’un design particulier permettant de vous distinguer."

26 Architecture du contenu et organisation de la page d’accueil 1) Impact de l’architecture au point de vue perceptif et cognitif 2) Méthode pour déterminer l’organisation de l’information dans un site ou un document non linéaire

27 Tri de cartes : lecture et exercice Lire l’article d’ergolab puis formez des groupes de 4 un-e util., un-e experimentatrice-teur, 2 observateurs, l’un qui note sur le processus de tri par l’utilisateur et l’autre sur la passation (esprit incident critique + et -). Avec les cartes fournies suivez les 4 étapes : 1. Immersion 2. Validation des contenus 3. Groupement 4. Labellisation Postez la photo du tri final sur openclass.ch/MALTT2015 #tri

28 Tri de cartes : à garder en tête Déroulement PassationTri de cartes

29 Travail à distance période 3 Voir ergo1516.wikispaces.com