Chapitre

p IV
Design des Interfaces Graphiques
(Guide de styles)
 Plan du cours
I. Introduction
II. Fenêtres
III. Organisation de ll’interface
interface Graphique
IV. Textes et Caractères
V. Couleurs
C l
VI. Icones
VII. Menus
VIII Pointeurs
VIII.
IX. Conclusion

2
 I. Introduction
La conception
p et l’organisation
g de l’interface
graphique est un problème complexe associant de
multiples éléments: placement des boutons et des
menus, disposition du texte, choix de la police des
caractères utilisation des couleurs et des icones,
caractères, icones
rédaction des messages, gestion d’une densité de
données etc.
données, etc

L’objectif
L’ bj tif de
d ce chapitre
h it estt de
d vous présenter
é t des d
conventions et recommandations pour mieux
concevoir
i votre IG.
3
 II. Fenêtres
1 Ouverture des fenêtres d’application
1. d application

 Nouvelle fenêtre : au centre … ou presque

Biais du regard vers le haut.

haut
Alignement horizontal légèrement au‐dessus du milieu

 Réouverture:
Ré d
dans l’é
l’état ( ill position,
(taille, ii affichage)
ffi h ) à la
l
4 fermeture.
 II. Fenêtres
2 Ouverture des fenêtres contextuelles
2.

 Près
P è ddu ffocus d’attention
d’ i
 Focus toujours
j visible

5
 II. Fenêtres
3 Stratégies d’affichage
3.

Multi-fenêtrage
M lti f êt ( i chap.
(voir h II)
 Mosaïques de fenêtres
((tuilage:
il sans superposition)
ii )
 Recouvrement de fenêtres
(avec superposition)

Recommandations
 Autoriser les recouvrements de fenêtres pour les
utilisateurs ayant un minimum dd’expérience;
expérience;
 Utiliser le tuilage (mosaïque) pour les utilisateurs novices
ainsi
i i que pour les l informations
i f ti quii doivent
d i t être
êt toujours
t j
6 visible.
 III. Organisation de l’interface
Graphique
h

7
1. 1ère visualisation de l’écran : parcours en Z
2. Ensuite : parcours sélectif
3. Meilleure visibilité et accessibilité au centre de l’écran

8
 Influence du contexte applicatif

9
 IV. Textes et Caractères
Mayhew (1992), Götz (1998)

 Les lettres droites sans empattement facilitent la lecture des

éléments textuels isolés (menus) : Arial, Helvetica, Verdana

 Les lettres sérifiées, avec empattement (Times New Roman)

créent une ligne virtuelle horizontale qui facilite la lecture des
t t long.
textes l

10
 IV. Textes et Caractères
(suite)

 Éviter,
É sauf cas particulier, (mise en évidence d’un
élément) les polices en italique.
Éviter à tout prix une inclinaison supérieure à 45°.
45°

Éviter à tout prix une inclinaison supérieure à 45°

 Justifier le texte à ggauche ((culture occidentale).
) Une
justification à droite et gauche crée des espaces de
longueur variable qui gène la lecture.

11
  Limiter les majuscules au mots isolés ou titres courts;
majuscules moins lisibles que minuscules.
minuscules

12
Taille des caractères :
 Taille minimum : 8 points ; des caractères de plus petite taille
sont quasiment illisibles ;
 Taille maximum : 16 points ; l’utilisation de caractères de
plus grande taille gêne la lisibilité.

Police de caractères :
 Choisir la police de caractères en fonction de critères de
lisibilité (éviter ll’italique)
italique).
 Eviter d’utiliser plus de trois polices de caractères différentes
dans une même fenêtre ou sur plusieurs fenêtres affichées
simultanément.
 Donner un rôle précis à chaque police (titre,
(titre paragraphe,
paragraphe
13 encadré, etc.)
 Formats d’affichage
g
(Directives de Smith & Mosier)

 Justifier à gauche les listes de données alphabétiques

 Justifier à droite les entiers
 Aligner les valeurs décimales avec la virgule
 Éviter les zéros non significatifs (sauf conventions
contraires)
 Découper les nombres par groupes de 3 à 4 chiffres
 Eviter les lignes écrites en lettre majuscules; moins
lisibles
 Eviter les lignes trop courtes (idéal: 60 caractères, 8-10
mots)
14
 V. Les couleurs
L'idée du codage couleur (ou code des couleurs) est
d'
d'associer
i à chaque
h couleur
l d l'interface
de l'i t f une signification
i ifi ti
précise et uniforme pour l'ensemble de l'application.

Recommandations
 L'utilisateur devrait pouvoir nommer les couleurs utilisées
 Ne ppas utiliser la couleur,, concevoir d'abord en noir/blanc.
 Eviter les fonds marrons et verts (Mayhew 1992, Götz
1998). Utiliser une couleur neutre et claire pour le fond
d'écran.
 N'ajouter
N ajouter de la couleur que lorsqu
lorsqu'elle
elle est utile à une
15 fonction ou qu'elle apporte un bénéfice en terme d'esthétique.
 Recommandations (suite)

 Eviter le bleu saturé pour des affichages critiques ou du texte

ou des objets de petite taille. Utiliser de préférence le bleu
pour encadrer.
 Limiter le nombre de couleurs pour favoriser leur
discrimination: 4 au maximum dans un display et 7±2 sur
l’ensemble de l’interface.

 Utiliser la même couleur pour le même

type dd’information;
information;
 Utiliser des couleurs contrastées pour
exprimer une différence;
 Choisir des couleurs peu contrastées pour
exprimer une similarité;
16
 Recommandations (suite)

 Éviter certaines combinaisons de couleurs

17
 Code des couleurs
(Guidelines de Brown)

 Blanc / Noir : Couleur fondamentale

 Rouge : Alarmes ou erreurs; Stop
 Jaune : Avertissements ou données exigeant de
l’attention
 Vert
V t : Normal/OK,
N l/OK Couleur
C l d base
de b sii blanc
bl t
trop clair
l i
 Bleu saturé : Mise en retrait. Ne pas utiliser pour les
données critiques
 Rose (Magenta) : Couleur d’alarme secondaire,
différenciation des données
…

18
 VI. Les icônes
Représentations métaphoriques :

1. des objets
 corbeille, disques

 programmes

 fichiers, dossiers

2. des actions
enregistrer

Intérêt
 Rapidement identifiables;
19  Compacts : peu de place dans l’interface.
 Construction des icônes

1. Méthodologie

1. Identifier toutes les commandes à iconifier et les créer en même

temps;
2. Limiter les icônes aux commandes fréquentes;
3 Les icônes utilisées doivent être représentatives de ll’action
3. action ou
du concept que l’on souhaite représenter;
4. Q
Quand une icône est utilisée ppour représenter
p quelque
q q chose,, la
conserver pour l’ensemble de l’application;
5. Limiter leur nombre (12 au mieux, 20 max);
6. Privilégier une association icône/texte;
7. Grouper les icones par famille;
8 Toujours valider la conception par une expérimentation.
8. expérimentation
20
 Difficu
ulté d’interpréétation
2. Règles de construction

21
 Icones IPhone

1. Est‐ce que vous avez pu identifier facilement et rapidement ces

icones ? Justifier votre réponse.
2
2. Est‐ce
Est ce que ces icones sont représentatives des actions pour lesquels
sont destinés ? Justifier .
22
 VI. Les Menus

Définition
 Zone où on précise ses choix pour orienter l’interaction.
 Différents types ne se limitant pas au menus applicatifs
classiques.
Intérêt
Structurer des fonctionnalités du système suivant une
organisation
g logique
g q cohérente donc aisément mémorisable.

Limitation
 Manque de rapidité : utile surtout aux utilisateurs novices
et occasionnels;
 Prévoir des raccourcis pour les experts.
23
 Types de Menus
1. Arborescente
b
 Actions regroupées en groupes
cohérents : arbre d’options,

 Adapté
d pour regrouper
sémantiquement les actions les plus
fréquentes dd’une
une interface.
interface

 Profondeur du menu: nombre de

niveaux de sous-menu auxquels il
permet d’accéder.
 Largeur du menu: nombre d'items
qu’il comporte.
24
25
 menu de gauche menu de droite

C
Comparaison
i d 2 types
de t d menus:
de
 Le menu de gauche permet de présenter 9 options avec 4 niveaux de
profondeur,
profondeur
 Le menu de droite permet de présenter 8 options avec seulement 2
niveaux de profondeur.

26  Préférer des menus larges aux menus profonds;

 D
Donner la
l profondeur
f d et lla largeur
l d
de ce menu …
27
 2. Linéaire
Tâche séquentielle simplifiée en une
suite de sous-tâches
Force l'utilisateur à parcourir un chemin
pour accéder à une opération.
opération

3 Structure de réseau
3.
On peut accéder à des fonctions ou options à partir de différents
points à l'intérieur de l’application.

28
 Ordre de présentation des items

1. Tri (Ordonnancement ) naturel pour les données séquentielles

Dates, nombres, prix, pagination ,etc.

2. Ordonnancement statique

 Fréquentiel: items les plus utilisés en premier

 Fonctionnel: items les plus importants en premier
 Non lié à la tâche : ordre alphabétique des items

29
 Ordre de présentation des items (suite)

3. Ordonnancement dynamique
 Derniers items utilisés en premier
 Fréquentiel adaptatif

4. Menus partagés
C
Compromis
i des
d solutions
l ti précédentes:
é éd t
 3-4 items les plus fréquents,
 Derniers items sélectionnés,
 Menu statique
q fonctionnel pour
p la suite,,
30
 Guidelines Généraux (Schneidermann, Plaisant 2005)

 Se baser sur la sémantique de la tâche pour organiser les

menus;
 Grouper les menus d’une manière cohérente;
 Préférer des menus larges aux menus profonds;
 Un menu statique q favorise l’apprenabilité
pp vs. menu
dynamique;
 Un menu dynamique peut améliorer la rapidité
d’interaction;
 Préférer des noms d’items brefs : verbes (actions) ou
noms/adjectifs (attributs);
 Utiliser des items comme noms pour les sous-menus;
 Autoriser les raccourcis.
raccourcis
31
 Règles pour les items de menu

 Limiter le nombre de items à 7±2 (sinon autre composant

ou autre répartition)
ii )
 Libellé possible en plusieurs mots (max 4)
 Items de même nature regroupés et séparés par un trait
horizontal
 prendred en compte: thématique,
h i f
fréquence d
d’usage,
ordre d’utilisation, ordre alphabétique
 Items de menus qui conduisent à un dialogue suivis de …
 Grisé si l'action est indisponible,

32
  Marquer les items de menu des propriétés ou modes actifs :
actif / non actif
 Sélection de la propriété active parmi plusieurs

33
 VII. Les Pointeurs
Dispositifs de pointage:
souris,
i trackball,
kb ll joysticks,
j i k ….

34