IFT2905 Interfaces personne-machine 9. Design graphique

Transcription

1 IFT2905 Interfaces personne-machine 9. Design graphique Sébastien Roy Département d Informatique et de recherche opérationnelle Université de Montréal 27 février 2007 Université de Montréal

2 Horreur ou Splendeur? Suggéré par Vishy Venugopalan

3 Horreur ou Splendeur? Museum of Modern Art s Workspheres exhibition Métaphore Mur couvert de post-it + Simplicité extrême + Esthétique - Trop simple. Impossible de différencier les éléments. - Si on cherche quelque chose d intéressant? - Si on cherche quelque chose qu on a déjà vu? (Reconnaissance VS mémorisation) La métaphore est le problème...

4 Horreur ou Splendeur? Esthétique Utilisabilité Le design graphique est important, mais il y a plus...

5 Références pour le design Graphique Simplicité Contraste Espacement Équilibre Alignement Références 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,...

6 Simplicité 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.

7 Simplicité Pour atteindre la simplicité, on procède par élimination, pas par accrétion. La simplicité est en constante opposition aux principes de design d interface Ex: ajoutons un éléments juste au cas où... La simplicité impose de justifiez chaque élément ajouté... d éliminer tout ce qui ne survit pas à un examen minutieux

8 Vers la Simplicité: la Réduction Réduction Élimination de tout ce qui n est pas nécessaire. Trois étapes: 1. Qu est-ce qui doit ultimement être transmit par le design? 2. Examen critique de chaque élément (étiquette, bouton, couleur, police,...) pour déterminer sa raison d être 3. Si il n est pas essentiel, l éliminer. Sinon, l éliminer quand même, pour voir ce que ca donne...

9 Vers la Simplicité: la Régularité Régularité Utiliser des motifs régulier Limiter les variations non essentielles entre les éléments Les irrégularités attirent le regard et suggère une importance et une signification.

10 Vers la Simplicité: la double vocation Double vocation Combiner les éléments pour augmenter l impact visuel. ou donner plusieurs rôles à un élément Barre de défilement(scroll bar) Suggère la possibilité d une changement de position Montre la position courante Montre la portion visible Autres exemples: une barre de titre ou un champs d aide.

11 Contraste et Variables visuelles Contraste Différence perceptible le long d une dimension visuelle ou variables visuelles). Le contraste encode l information. Mullet et Sano, p. 54 Chaque élément doit avoir un contraste cohérent avec son importance.

12 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

13 Caractéristiques des variables visuelles Échelle (type de comparaison) Nominal (=) toutes les variables Ordre (<, >) ordonné: position, taille, intensité, granularité désordonné: orientation, teinte, forme Quantitative quantitatif: position, taille non quantitatif: intensité, texture, orientation, teinte, forme Longueur (nombre de niveaux distingables) - Très long: forme (varitété infinie de formes) - Long: position - Moyen: la plupart des variables ( 10 niveaux) - Court: orientation ( 4 niveaux)

14 L attention Attention Lampe de poche, qui pointe à un seul endroit à la fois (voir notes sur la perception). L attention se déplace séquentiellement d un canal d entrée vers un autre. Tous les stimuli d un canal visité par l attention sont percus simultanéments. Le canal d entrée est donc une variable visuelle.

15 Sélectivité Perception sélective Est-ce que l attention peut être dirrigée vers une seule valeur d une variable, en excluant les aurtes variables et valeurs? Sélectif position, taille, orientation, teinte, intensité, texture Non sélectif forme Ex: on peut distingue immédiatement un objet vert ou très petit, mais pas un objet d une certaine forme.

16 Sélectivité Trouver les lettres de la moitié gauche (position) Trouver les lettre en forme de K (forme) Trouver les lettre rouges (teinte)

17 Associativité Perception associative Facilité avec laquelle une variable peut être ignorée lorsqu on observe une autre variable. Ex: le fait qu un objet soit petit (taille) réduit 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é faible interfèrent avec la perception de la teinte, intensité, texture, forme. Associatif position, teinte, intensité, texture, forme, orientation Non associatif taille, intensité

18 Associativité Losrque la taille varie, la forme et teinte des petits objets est plus difficile à percevoir.

19 Utilisation du contraste Choisir une variable visuelle appropriée Utiliser le plus de longueur possible Rendre les transitions bien perceptibles Échelle multiplicative, pas additive Redondance des variables visuelles pour augmenter l impact Exagération où cela facilite la perception Test de la poussière dans l oeil (squint test) Simule la perception visuelle de bas niveau, pour vérifier 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 est très perceptible dans des conditions normales.

20 Associativité Choix des variables visuelles pour le courriel État de lecture: nominal, 3 valeurs (lu, non-lu, répondu) Pièce jointe, Importance: nominal, peu de valeurs Auteur, Sujet: nominal (peut être ordonné), beaucoup de valeurs Date: quantitatif Noter l utilisation de la teinte, forme, taille, etc...

21 Affichage d information Exemple démontrant l utilité de la richesse des variables visuelles. Pas besoin d avoir l air d un formulaire pour afficher de l information...

22 Contraste dans les publications Le contraste visuel rend un article plus facile à lire. Doit-on maximiser le contraste en transformant le document en sapin de Noël? Non. Ne pas oublier la simplicité...

23 Simplicité VS Contraste La boîte de Tukey affiche 5 statistiques. On peut simplifier, mais le contraste en souffre beaucoup...

24 Problème de contraste source: Interface Hall of Shame Il faut distinguer étiquette et champs de donnée... La teinte est peu différentiable et les autres variables sont identiques. En plus, c est plutôt encombré...

25 Espace Si mon écran était plus grand... L espace disponible pour une interface usager est limité. On est donc tenté d encombrer l espace pour en donner plus. Cela résulte en une interface inefficace et difficile à parcourir. Utiliser les espaces pour grouper, plutôt que des lignes Utiliser des marges pour attirer le regard Harmonie entre les plans avant et arrière Choisir des tailles proportionnelles aux espaces disponibles Ne pas grouper les boutons trop serré L entassement crée une tension spatiale et ralenti le parcours visuel

26 Espace source: Mullet et Sano, p.110 Pas de marge Contrôles trop serrés Lignes pour le groupement

27 Espace source: Mullet et Sano, p.96 Exemple d utilisation de l espace: Interface de gauche difficile à parcourir Interface de droite utilise efficacement l espace

28 Regroupement Principe de Gestalt Principes gouvernant le regroupement d éléments visuels simples en un tout cohérent.

29 Regroupement Proximité Les éléments rapprochés sont groupés ensembles. On voit 4 colonnes plutôt que 4 lignes). Similarité Les éléments aux attributs similaires sont groupés ensembles. On voit 4 rangées plutôt que des colonnes. Continuité L oeil suppose un contour comme un objet continu. On voit 2 lignes qui se croisent plutôt que 4 ou 2 coins en contact.

30 Regroupement Fermeture Si des contours sont manquant, l oeil complète pour precevoir des formes pleines. On voit un triangle blanc plutôt que 4 pacman. Aire Si deux éléments se superposent, le plus petit est percu comme en avant du plus gros. On voit un petit carré devant un gros plutôt qu un trou carré. Symmétrie L oeil préfère une interprétation plus symmétrique. On voit 2 carrés superposés plutôt que 3 polygones.

31 Espace On peut réduie l encombrement visuel en remplacant les lignes d une grille par des blancs.

32 Équilibre et symmétrie Choisir un axe (en général vertical) Répartir les éléments également autour d axe Harmoniser autant la masse (nombre de pixels non vide) que la dimension (l espace occupé par ces pixels).

33 Alignement On peut simplifier le design par un alignement simple horizontal ou vertical. Un nombre réduit de références d alignement améliore la lisibilité. Aligner les étiquettes à gauche ou à droite. Aligner les contrôles à gauche ou à droite Permettre l expansion lorsque nécessaire. Aligner les lignes de texte Exemple d alignement aléatoire...

34 Alignement Les grilles sont efficaces pour l alignement et l équilibre simultanément. source: Mullet et Sano, p.165

35 Alignement La couleur doit être utilisée avec modération. Trop de couleur rend l interface complexe, encombrée, et distrayante. Limites de la vision humaine daltonisme, texte rouge sur bleu, petit texte bleu,... Éviter les couleurs saturées (fatigue visuelle) La couleur du fond doit établir un bon contraste. Utiliser des couleurs contrastantes (mais pas seulement ca) Cohérence... OK en rouge, CANCEL en vert...