Février 2016 Séance du mardi 23 Thème : Design du squelette et de la surface ERGONOMIE ET DESIGN CENTRÉ UTILISATEUR NIVEAU 2 Mireille Bétrancourt & Vincent.

Présentation au sujet: "Février 2016 Séance du mardi 23 Thème : Design du squelette et de la surface ERGONOMIE ET DESIGN CENTRÉ UTILISATEUR NIVEAU 2 Mireille Bétrancourt & Vincent."— Transcription de la présentation:

1 Février 2016 Séance du mardi 23 Thème : Design du squelette et de la surface ERGONOMIE ET DESIGN CENTRÉ UTILISATEUR NIVEAU 2 Mireille Bétrancourt & Vincent Widmer - TECFA - FPSE TECFA Technologies pour la Formation et l’Apprentissage

2 Stratégie Objectif stratégique Focus Contenu Structure Architecture Squelette Navigation Surface Design visuel Modèle de Garrett (2000) simplifié Vision orientée tâche Vision orientée information Garrett, J.J. (2000). The elements of user experience. Besoin utilisateur Fonction- nalités Design de l’interaction Design de l’interface Esthétique

3 Garett, 2003 Modèle de chaque page-écran Esthétique Valeurs Perception

4 Navigation : éviter la désorientation Situation de « double tâche » avec risque de 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

5 Information Problem Solving Lazonder, A. W., & Rouet, J.-F. (2008). Information problem solving instruction: Some cognitive and metacognitive issues. Computers in Human Behavior, 24(3), 753-765

6 Outils d’aide pour l’utilisateur Structuration de l’hypertexte Découpage en unités, modèle de données et regroupement qui font sens pour l’utilisateur Quatre dimensions (Downey & Banerjee, 2011) Organisation de l’information Accès à l’information Eventuelle gouvernance pour structure et processus Expérience utilisateur

7 Outils d’aide pour l’utilisateur Outils d’accès à cette structure 1. Aide à la représentation de l’organisation du contenu Plan ou carte indicateurs de positionnement indicateurs de volume

8 Outils d’aide pour l’utilisateur Outils d’accès à cette structure 1.Aide à la représentation de l’organisation du contenu 2.Navigation dans la structure historiquepoints de repères défilement retour annonces de destination info locale menu

9 Zones fonctionnelles de l’écran

10 Différents modèles de page d’accueil Type portail Type tablette

11 Exercice de commentaires des pages d’accueil Reprenez le modèle de page d’accueil d’un autre groupe selon le modèle proposé Analysez la disposition proposée en fonction de la méthode des cadres et relativement aux zones fonctionnelles de Nogier Proposez éventuellement une autre disposition Présentez votre analyse à l’autre groupe 10-15 minutes pour analyser la page d’accueil 10 minutes de discussion pour chaque projet

12 Debrief par groupe Prenez le temps de réfléchir aux commentaires de vos collègues

13 DESIGN VISUEL : ASPECTS PERCEPTIFS ET COGNITIFS Surface

14 Notion de charge cognitive Les traitement de l’information en mémoire de travail demande des ressources cognitives. Le design des pages peut faciliter (ex groupement) ou rendre plus complexe.

15 Le design visuel participe à la charge cognitive Le site Restorang en 2004 …puis en 2010

16 Lois de la Gestalt theory (~1920) Principe de proximité Principe de similitude Principe de continuité Principe de clôture

17 Du modèle transmissif de la communication… Personnages de @Einar Faanes, CC Shannon, C. E. & Weaver, W. (1949). A Mathematical Model of Communication. Urbana, IL: University of Illinois Press SourceEmetteur Signal Message RécepteurDestinataire codagedécodage   Journée PECUSI – Lyon, 12 Juillet

18 …au modèle pragmatique de la communication Searle, J. R. (1975). A Taxonomy of Illocutionary Acts. In: Gunderson, Keith (ed.) Language, Mind, and Knowledge. Minneapolis: University of Minnesota: 344-369. Sperber, D. & D. Wilson (1986/1995) Relevance: Communication and Cognition. 2nd edition. Oxford: Blackwell. Objectif  Représentation de la situation, Modèle de l’autre Représentation de la situation, Modèle de l’autre Représentation de la situation, Modèle de l’autre Représentation de la situation, Modèle de l’autre Vous avez l’heure ? Oui 11h30

19 Petit exercice Par deux ou trois : recherchez des informations sur le design visuel des pages Web selon les thèmes indiqués dans le wikipspaces (sites, articles…). Sélectionnez max deux liens intéressants et fiables, et indiquez dans le wiki en quoi ils le sont. Cet espace vous servira de zone de ressources.