Typographie & graphique

Présentation au sujet: "Typographie & graphique"— Transcription de la présentation:

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

2 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

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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 03/12/2018

24 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

25 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 TF L ’oubli H Comique A Le Trou Noir H Policier 03/12/2018

26 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

27 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

28 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

29 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

30 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