IFT2905 Interfaces personne-machine 9. Design graphique
S´ebastien Roy
D´epartement d’Informatique et de recherche op´erationnelle Universit´e de Montr´eal
27 f´evrier 2007 Universit´e de Montr´eal
Horreur ou Splendeur?
Sugg´er´e par Vishy Venugopalan
Horreur ou Splendeur?
Museum of Modern Art’s Workspheres exhibition M´etaphore
Mur couvert de post-it + Simplicit´e extrˆeme + Esth´etique
- Trop simple. Impossible de diff´erencier les ´el´ements.
- Si on cherche quelque chose d’int´eressant?
- Si on cherche quelque chose qu’on a d´ej`a vu?
(Reconnaissance VS m´emorisation) La m´etaphore est le probl`eme...
Horreur ou Splendeur?
Esth´etique6= Utilisabilit´e
Le design graphique est important, mais il y a plus...
R´ ef´ erences pour le design Graphique
Simplicit´e Contraste Espacement Equilibre´ Alignement R´ef´erences
Designing Visual Interfaces, Kevin Mullet et Darrell Sano (Prentice-Hall, 1995)
The Visual Display of Quantitative Information, Edward Tufte’s
Don’t make me think, ...
Simplicit´ e
Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.
Antoine de St- Exupery Simplicity does not mean the absence of any decor. . . It only means that the decor should belong intimately to the design proper, and that anything foreign to it should be taken away.
Paul Jacques Grillo Keep it simple, stupid. (KISS)
Less is more.
Dans le doute, abstiens-toi.
Simplicit´ e
Pour atteindre la simplicit´e, on proc`ede par ´elimination, pas par accr´etion.
La simplicit´e est en constante opposition aux principes de design d’interface
→ Ex: ajoutons un ´el´ementsjuste au cas o`u...
La simplicit´e impose ...
... de justifiez chaque ´el´ement ajout´e
... d’´eliminer tout ce qui ne survit pas `a un examen minutieux
Vers la Simplicit´ e: la R´ eduction
R´eduction
´Elimination de tout ce qui n’est pas n´ecessaire. Trois ´etapes:
1. Qu’est-ce qui doit ultimement ˆetre transmit par le design?
2. Examen critique de chaque ´el´ement (´etiquette, bouton, couleur, police, ...) pour d´eterminer sa raison d’ˆetre 3. Si il n’est pas essentiel, l’´eliminer. Sinon, l’´eliminer quand
mˆeme, pour voir ce que ca donne...
Vers la Simplicit´ e: la R´ egularit´ e
R´egularit´e
Utiliser des motifs r´egulier
Limiter les variations non essentielles entre les ´el´ements Les irr´egularit´es attirent le regard et sugg`ere une importance et une signification.
Vers la Simplicit´ e: la double vocation
Double vocation
Combiner les ´el´ements pour augmenter l’impact visuel.
→ ou donner plusieurs rˆoles `a un ´el´ement
Barre de d´efilement(Scroll bar)
Sugg`ere la possibilit´e d’une changement de position Montre la position courante
Montre la portion visible
Autres exemples: une barre de titre ou un champs d’aide.
Contraste et Variables visuelles
Contraste
Diff´erence perceptible le long d’une dimension visuelleouvariables visuelles).
Le contraste encode l’information.
Mullet et Sano, p. 54 Chaque ´el´ement doit avoir un contraste coh´erent avec son
importance.
Contraste et Variables visuelles
Variable visuelle
Jacques Bertin propose 7 variables visuelles.
les variables se distinguent facilement au niveau de la perception, pas de la cognition.
Mullet et Sano, p. 54
Caract´ eristiques des variables visuelles
Echelle (type de comparaison)´ Nominal (=)
toutes les variables Ordre (<,>)
ordonn´e: position, taille, intensit´e, granularit´e d´esordonn´e: orientation, teinte, forme Quantitative
quantitatif: position, taille
non quantitatif: intensit´e, texture, orientation, teinte, forme
Longueur (nombre de niveaux distingables) - Tr`es long: forme (varit´et´e infinie de formes) - Long: position
- Moyen: la plupart des variables (≈10 niveaux) - Court: orientation (≈4 niveaux)
L’attention
Attention
Lampe de poche, qui pointe `a un seul endroit `a la fois (voir notes sur la perception).
L’attention se d´eplace s´equentiellement d’un canal d’entr´ee vers un autre.
Tous les stimuli d’un canalvisit´e par l’attention sont percus simultan´ements.
Le canal d’entr´ee est donc une variable visuelle.
S´ electivit´ e
Perception s´elective
Est-ce que l’attention peut ˆetre dirrig´ee vers une seule valeur d’une variable, en excluant les aurtes variables et valeurs?
S´electif
position, taille, orientation, teinte, intensit´e, texture Non s´electif
forme
Ex: on peut distingue imm´ediatement un objet vert ou tr`es petit, mais pas un objet d’une certaine forme.
S´ electivit´ e
Trouver les lettres de la moiti´e gauche (position) Trouver les lettre en forme de K (forme)
Trouver les lettre rouges (teinte)
Associativit´ e
Perception associative
Facilit´e avec laquelle une variable peut ˆetre ignor´ee lorsqu’on observe une autre variable.
Ex: le fait qu’un objet soit petit (taille) r´eduit la perception de la forme de cet objet.
Ex: le fait qu’un objet soit rouge (teinte) n’influence pas la perception de la position de cet objet.
Ex: Petite taille et intensit´e faible interf`erent avec la perception de la teinte, intensit´e, texture, forme.
Associatif
position, teinte, intensit´e, texture, forme, orientation Non associatif
taille, intensit´e
Associativit´ e
Losrque la taille varie, la forme et teinte des petits objets est plus difficile `a percevoir.
Utilisation du contraste
Choisir une variable visuelle appropri´ee Utiliser le plus de longueurpossible Rendre les transitions bien perceptibles
Echelle multiplicative, pas additive´
Redondance des variables visuelles pour augmenter l’impact Exag´eration o`u cela facilite la perception
Test de la poussi`ere dans l’oeil (squint test)
Simule la perception visuelle de bas niveau, pour v´erifier si les contrastes sont bien perceptibles.
Fermer un oeil et entreouvrir l’autre, pour obtenir une vision floue.
Tout ce qui est percu dans ces conditions esttr`esperceptible dans des conditions normales.
Associativit´ e
Choix des variables visuelles pour le courriel
Etat de lecture: nominal, 3 valeurs (lu, non-lu, r´´ epondu) Pi`ece jointe, Importance: nominal, peu de valeurs
Auteur, Sujet: nominal (peut ˆetre ordonn´e), beaucoup de valeurs
Date: quantitatif
Noter l’utilisation de la teinte, forme, taille, etc...
Affichage d’information
Exemple d´emontrant l’utilit´e de la richesse des variables visuelles.
Pas besoin d’avoir l’air d’un formulaire pour afficher de l’information...
Contraste dans les publications
Le contraste visuel rend un article plus facile `a lire. Doit-on maximiser le contraste en transformant le document en sapin de No¨el? Non. Ne pas oublier la simplicit´e...
Simplicit´ e VS Contraste
La boˆıte de Tukey affiche 5 statistiques. On peut simplifier, mais le contraste en souffre beaucoup...
Probl` eme de contraste
source: Interface Hall of Shame Il faut distinguer ´etiquette et champs de donn´ee...
La teinte est peu diff´erentiable et les autres variables sont identiques.
En plus, c’est plutˆot encombr´e...
Espace
Si mon ´ecran ´etait plus grand...
L’espace disponible pour une interface usager est limit´e. On est donc tent´e d’encombrer l’espace pour ”en donner plus”. Cela r´esulte en une interface inefficace et difficile `a parcourir.
Utiliser les espaces pour grouper, plutˆot que des lignes Utiliser des marges pour attirer le regard
Harmonie entre les plans avant et arri`ere
Choisir des tailles proportionnelles aux espaces disponibles Ne pas grouper les boutons trop serr´e
L’entassement cr´ee une tension spatiale et ralenti le parcours visuel
Espace
source: Mullet et Sano, p.110 Pas de marge
Contrˆoles trop serr´es Lignes pour le groupement
Espace
source: Mullet et Sano, p.96 Exemple d’utilisation de l’espace:
Interface de gauche difficile `a parcourir
Interface de droite utilise efficacement l’espace
Regroupement
Principe de Gestalt
Principes gouvernant le regroupement d’´el´ements visuels simples en un tout coh´erent.
Regroupement
Proximit´e
Les ´el´ements rapproch´es sont group´es ensembles.
On voit 4 colonnes plutˆot que 4 lignes).
Similarit´e
Les ´el´ements aux attributs similaires sont group´es ensembles.
On voit 4 rang´ees plutˆot que des colonnes.
Continuit´e
L’oeil suppose un contour comme un objet continu.
On voit 2 lignes qui se croisent plutˆot que 4 ou 2 coins en contact.
Regroupement
Fermeture
Si des contours sont manquant, l’oeil compl`ete pour precevoir des formes pleines.
On voit un triangle blanc plutˆot que 4 pacman.
Aire
Si deux ´el´ements se superposent, le plus petit est percu comme en avant du plus gros.
On voit un petit carr´e devant un gros plutˆot qu’un trou carr´e.
Symm´etrie
L’oeil pr´ef`ere une interpr´etation plus symm´etrique.
On voit 2 carr´es superpos´es plutˆot que 3 polygones.
Espace
On peut r´eduie l’encombrement visuel en remplacant les lignes d’une grille par des blancs.
Equilibre et symm´ ´ etrie
Choisir un axe (en g´en´eral vertical)
R´epartir les ´el´ements ´egalement autour d’axe
Harmoniser autant la masse (nombre de pixels non vide) que la dimension (l’espace occup´e par ces pixels).
Alignement
On peut simplifier le design par un alignement simple horizontal ou vertical. Un nombre r´eduit de r´ef´erences d’alignement am´eliore la lisibilit´e.
Aligner les ´etiquettes `a gauche ou `a droite.
Aligner les contrˆoles `a gauche ou `a droite
Permettre l’expansion lorsque n´ecessaire.
Aligner les lignes de texte
Exemple d’alignement al´eatoire...
Alignement
Les grilles sont efficaces pour l’alignement et l’´equilibre simultan´ement.
source: Mullet et Sano, p.165
Alignement
La couleur doit ˆetre utilis´ee avec mod´eration. Trop de couleur rend l’interface complexe, encombr´ee, et distrayante.
Limites de la vision humaine
daltonisme, texte rouge sur bleu, petit texte bleu, ...
Eviter les couleurs satur´´ ees (fatigue visuelle) La couleur du fond doit ´etablir un bon contraste.
Utiliser des couleurs contrastantes (mais pas seulement ca) Coh´erence... OK en rouge, CANCEL en vert...
