Typographie & graphique Cédric Dumas (Ecoles des Mines de Nantes) Patricia Plénacoste (Université de Lille I) 03/12/2018

Ergonomie de interfaces Étroitement liée à la psychologie cognitive Les règles évoluent avec les systèmes informatiques Ne pas augmenter inutilement la charge cognitive de l’utilisateur 03/12/2018

Typographie .1 Police de caractère Impact sur la lisibilité et la perception d ’une information Importance du contexte d’usage et du propos importance de l ’application ou du support Affecte le processus de lecture et de compréhension facilite le regroupement d ’information 03/12/2018

Typographie .2 Prêter attention à la typographie Un seul usage pertinent et cohérent par fonte Fontes Standards et bien formées Utiliser le Sérif pour le texte : excroissance aux extrémités (times, courier,…): g b d f h k s ih facilite la lecture (deplact de l ’œil) 03/12/2018

Typographie .3 Utiliser les polices sans sérif pour les titres, les libellés police droite (Geneva, arial, helvetica ….): g b d f h k s ih Créer un contraste & non gras pour Police <= 10 pt Utiliser Arial, Helvetica pour les § Réserver les polices de fantaisie pour les grands titres 03/12/2018

Typographie .4 Lecture à l ’écran police 12pt utiliser le Gras ou la couleur = >Pour contraster Espace 1 pixel entre les lettres Ne pas utiliser le soulignement Ne pas utiliser l'italique Ne pas mettre le texte en MAJUSCULES Utiliser la mise en gras uniquement pour la mise en évidence 03/12/2018

Typographie .5 Prévoir les variations de taille de police Table avec police de taille fixe Libellés au-dessus des champs 03/12/2018

Typographie .6 Mise en forme Ligne : entre 60 et 80 caractères Maxi : 2 polices de caractères, 3 tailles, 2 variations Attention à l ’harmonisation. Si > crée une intrusion visuelle (lecture, distrait Utilisateur) 03/12/2018

Typographie .7 Utiliser un contraste positif: noir sur fond blanc ou gris clair Si Ex: Blanc sur noir (Contraste négatif= moins lisible). A même taille les lettres blanches apparaissent plus petite Non ajustement de l ’écran à la luminosité ambiante Papier est réflexif donc il s ’ajuste Écran est émissif d ’éclairement Trop de Contraste entre police et fond => fatigue visuelle et augmentation du reflet sur l ’écran 03/12/2018

Typographie .8 Pas d ’écart inégaux Pas de mot en majuscule dans une colonne, entre les mots, et lignes d ’un paragraphe. Pas de mot en majuscule Différentiation difficile entre les groupes de lettres 03/12/2018

Typographie .9 Texte Donner du rythme à la lecture: Paragraphes, lignes blanches, retraits. Hiérarchiser l ’information Polices et variations Travailler les 3 niveaux : la forme, la structure (contenu et navigation) et le fond (le message et le ton) 03/12/2018

Typographie .10 Texte : Présenter des textes cours Travailler la forme et le contenu pour faciliter la lecture et la compréhension Présenter une information suffisante pour la compréhension Ajouter un fichier qui peut être imprimé (ex pour le web pdf,ps, zip) pour les textes longs 03/12/2018

Typographie .11 Faciliter l ’action et la compréhension de l ’action S ’adapter à la sémantique d ’usage Vérifier le sens des termes et des actions génériques Un libellé = un sens Le sens est perçu contextuellement Faciliter l ’interaction donc la manipulation 03/12/2018

Typographie .12 Interaction Présenter des concepts et/ou objets qui sont les invariants de la tâche de manière interactive Dynamiser la tâche de l ’utilisateur en le Rendant actif => comprendre dans l ’action Contrôler la manipulation du contenu et de la structure ( compréhension et but) Trop d ’interaction tue la compréhension 03/12/2018

Typographie .13 Texte à l ’écran: Plus exigent que le papier Exige de la sobriété et de la simplicité Dépend de la finalité de la tâche 03/12/2018

Typographie .14 Compromis compréhension/concision Guidage explicite : ajouter un complément derrière le verbe Guidage implicite : utiliser la proximité spatiale Ex: boîte de dialogue de paramétrage avec onglets « Rétablir » est dans l ’Onglet actif, porte sur le contenu « Ok » et «Annuler » sont hors l ’onglet actif, porte sur l ’ensemble de la boite de dialogue(+générale) 03/12/2018

Typographie .15 Donner les indices utiles à l ’activité de l ’utilisateur Vérifier que l’interacteur fait sens : OK, servir à accuser réception d ’un message d ’information ou lancer un traitement volumineux, action souvent irréversible 03/12/2018

Typographie .16 Vérifier la compréhension des actions génériques avec le niveau de contexte Si j ’annule la boite de dialogue est ce que toutes les actions réalisées dans la boite seront annulées Vérifier la modularité entre les fonctions accessibles au travers des boites de dialogue 03/12/2018

Typographie. 17 Choix de la boite de dialogue pour l ’interaction Modalité (partielle - totale) Dialogue ponctuel et/ou mise en suspend du contexte en arrière-plan (ex: Wizards) S ’assurer du sens de lecture des actions oui-non S ’assurer des automatismes 03/12/2018

Typographie .18 Ecran Eviter les boutons dans les fenêtres S  ’assurer de la cohérence des boutons pour l ’ensemble des fenêtres Laisser la page au contenu Utiliser une barre d ’outil pour les boutons qui s ’ajuste avec le contexte Vérifier la mise en page/taille écran 03/12/2018

Graphique .1 Utiliser les graphiques de manière approprié Adjoindre du texte à chaque graphique Réutiliser les mêmes graphiques Utiliser du texte pour s'assurer que le graphique véhicule bien l'information prévue Utiliser les mêmes icônes, les mêmes logos,... 03/12/2018

Graphique .2 Utiliser des icônes et pictogramme Rapidité de compréhension Utiliser les représentations de la vie courante A évaluer par les Utilisateurs Eviter les surcharges de contenus d ’écran et surfaces colorées 03/12/2018

Graphique .3 Préférer une courbe à un tableau numérique associée à des axes, graduations, repères, unités Présenter les données numériques : longues et compliquées ENREG345797 En blocs de 3 ou 4 unités ENREG-345-797 03/12/2018

Graphique .4 Entourés de cadres les blocs de données : Données Alphanumériques Justifiés à gauche Données Numériques entières (102) Justifiés à droite Données Numériques réelles (102,08) Alignés sur le point décimal 03/12/2018

Graphique .5 Groupement des items et données en inter relation CHAINE PROGRAMME HORAIRE GENRE TF1 L'OUBLI 12H34 COMIQUE A2 LE TROU NOIR 12H41 POLAR Chaîne Programme Horaire Genre TF1 L ’oubli 12H34 Comique A2 Le Trou Noir 12H41 Policier 03/12/2018

Graphique . 6 Choisir une convention et s'y maintenir Utiliser une seule appellation pour une même variable et pour l'ensemble des vues graphiques Standardiser les valeurs associées aux commandes et les garder tout au long du dialogue : exemple : 1 pour OUI et 2 pour NON) 03/12/2018

Graphique .7 Respecter les stéréotypes de l ’utilisateur Standards de l'entreprise Respecter la logique humaine pour éviter les sources d'erreurs : 03/12/2018

Graphique .8 Garder en tête les limites des graphiques Utiliser des dimensions appropriées Largeur (graphique) < 600 pixels Garder en tête les limites des graphiques Utiliser des dimensions appropriées 03/12/2018

Graphique .9 Les graphiques doivent être simplifiés Utiliser les GIF entrelacés, les images fractales Ne pas ajouter de bords aux graphiques Attention aux effets 3D Ne pas enregistrer les graphiques avec bordure 03/12/2018

Graphique .10 Utiliser des graphiques transparents sur un fond d'écran tramé Rendre les icônes rondes transparentes Soumettre au convertisseur en ligne 03/12/2018