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

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

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

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

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),

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

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

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

Zones fonctionnelles de l’écran

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

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 minutes pour analyser la page d’accueil 10 minutes de discussion pour chaque projet

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

DESIGN VISUEL : ASPECTS PERCEPTIFS ET COGNITIFS Surface

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.

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

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

Du modèle transmissif de la communication… Personnages 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

…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: 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

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.