Designer une interface complexe comme un dépliant ou une page de site web peut présenter quelques défis pour bien organiser les informations. Pour vous aider, découvrez dans cet article quelques lois connues dans le milieu du design graphique qui structurent nos perceptions.
Pas de panique, ça ne veut pas dire que vous finirez en prison parce que vous avez utilisé du Comics Sans sur votre flyer ! Il s’agit surtout de grands principes qui influencent notre compréhension des supports sans qu’on le sache, et que vous pouvez facilement appliquer à tous vos supports print et web.
Que ce soit la théorie de la Gestalt, les lois de Fitts, Hick, Miller et Jakob, le concept d’affordance ou le nombre d’or, ces concepts utilisent des notions d’ergonomie appliquée au design et de psychologie cognitive. En effet, ils sont souvent basés sur des biais cognitifs ou des illusions d’optique qui, correctement utilisés, permettent de mieux structurer une mise en page ou encore de rendre un design plus limpide.
Souvent, leur utilisation permet de générer plus d’harmonie, de cohérence et de compréhension de vos messages par le public que vous visez. Elles peuvent aussi vous aider à ajouter le détail qui fait tout ou trouver le juste degré d’originalité pour vous différencier.
Que ce soit pour designer une carte de visite, visualiser des données ou créer l’interface d’un site web, ces principes peuvent donc s’avérer être de précieux compagnons de réflexion et de création.
Voyons ensemble quelques-unes de ces notions majeures utilisées en design graphique et en UX/UI design (design de sites web mettant l’utilisateur au centre de l’expérience).
La théorie de la Gestalt : comment notre cerveau organise l’information visuelle
Commençons par un concept que beaucoup de designers utilisent sans forcément connaître son nom. Née en Allemagne au début du XXe siècle, cette théorie du Gestalt (dont le nom signifie “forme” en allemand) se situe à mi-chemin entre psychologie de la perception et philosophie. La théorie de la Gestalt part du principe que notre cerveau cherche à simplifier les éléments d’un environnement complexe pour en faciliter la perception, par exemple en les groupant, en les ordonnant ou en les assimilant les uns aux autres. Autrement dit, notre cerveau déteste le chaos visuel et essaie toujours de remettre un peu d’ordre dans ce qu’il voit.
7 lois permettent de simplifier cette théorie aux multiples paramètres.
- La loi de la bonne forme, décrite comme la loi principale dont les suivantes sont inspirées. Elle indique que, cherchant à reconnaître des formes familières, notre cerveau va automatiquement regrouper des éléments qui vont ensemble pour créer une forme globale, stable et simple. Un exemple de cette loi souvent utilisé est le vase de Rubin, représentant deux visages ou un vase selon notre perception. Ainsi, on comprend que sur une mise en page ou une interface web, notre œil va dans un premier temps découper le support en ensembles pour en dégager des formes.
- La loi de continuité précise que nous percevons plusieurs éléments proches comme des prolongements les uns par rapport aux autres. Ce lien peut permettre de créer des formes, des mots etc. et guider notre regard.
- La loi de la proximité stipule que ce sont les éléments les plus proches les uns des autres qui vont être regroupés en priorité. Cela peut donc influencer notre lecture des interfaces graphiques.
- La loi de similitude ou similarité, quant à elle, s’applique si la loi de proximité ne permet pas de créer des groupes de points. Dans ce cas, notre cerveau regroupera les éléments selon leurs points communs (en termes de forme ou de couleur par exemple).
- La loi de clôture nous permet de compléter des formes incomplètes, discontinues, pour imaginer une forme générale et fermée. C’est un principe souvent utilisé dans la création de logotypes (on pense notamment au “C” du logo Carrefour).
- La loi de destin commun est liée à la trajectoire des formes. Lorsque celles-ci ont une même direction ou un même mouvement, elles semblent appartenir au même groupe.
- Enfin, la loi de familiarité fait appel à notre mémoire, puisqu’une forme familière ou significative nous attirera en priorité. Elle rejoint le concept d’affordance, expliqué ci-après.
Sans que l’on s’en rende compte, ces lois nous aident à hiérarchiser visuellement les interfaces et les mises en page en se basant sur les biais de notre cerveau. Elles expliquent pourquoi certaines mises en page semblent immédiatement claires quand d’autres demandent presque une enquête pour les déchiffrer. Une fois que notre cerveau a organisé les formes, voyons comment il interagit avec elles.
La loi de Fitts : 3 techniques pour mettre en avant un élément visuel
Inventée en 1954 par Paul Fitts, psychologue de l’université d’Etat de l’Ohio, cette loi propose une astuce simple pour rendre un élément particulièrement visible sur un support. En effet, le temps nécessaire à notre cerveau pour atteindre une cible se voit grandement réduit si on ajoute à cette cible au moins l’une de ces 3 techniques d’attention visuelle suivantes :
- Contraste de taille : lui donner une taille plus importante qu’aux autres éléments.
- Contraste d’espace : ajouter du vide autour de cet élément.
- Contraste de couleur : lui donner une couleur différente des autres éléments.
Cette loi s’applique particulièrement aux CTA sur des interfaces web ou aux logos sur des packagings. C’est aussi pour cela que les boutons “Acheter” sont rarement minuscules !
Pour aller plus loin (et découvrir entre autres la formule mathématique de cette loi), rendez-vous sur notre article sur la loi de Fitts.
Loi de Miller : la limite de notre mémoire de travail
Vous êtes vous déjà demandé pourquoi on énumère les chiffres d’un numéro de téléphone deux par deux ? Ou pourquoi quand on survole le menu d’un site il se décompose en sous-menus ? La loi de Miller y répond avec précision.
C’est le psychologue cognitif états-unien George A. Miller qui a théorisé cette loi en 1956. En analysant notre capacité de traitement de l’information, et notamment de notre mémoire à court terme, il s’est rendu compte quel’on mémorise en moyenne 7 éléments. Au-delà de ce nombre, notre cerveau commence à avoir du mal à suivre.
Ce “nombre magique” de 7 permet de déterminer une limite de mémorisation de notre cerveau, par exemple face à un menu, une liste, un numéro de téléphone etc. Il est donc utile de limiter le nombre d’entrées pour rendre la prise d’informations plus efficace et impactante auprès de vos clients et collaborateurs.
Loi de Hick : plus il y a de choix, plus la décision est lente
La loi de Hick ou loi de Hick-Hyman démontre la relation de cause à effet entrele nombre de possibilités proposées à un utilisateur et son temps de réaction pour faire un choix. Cette situation arrive très souvent dans notre quotidien : on a tous vécu des dilemmes insolvables au moment de choisir quel film regarder le soir sur sa plateforme de streaming préférée ou encore face à une carte de menu bien remplie au restaurant.
C’est le même problème sur une interface ou un support print : plus le client a de choix, plus il lui est difficile de se décider. Cette loi résonne avec la loi de Miller, puisque limiter le nombre de choix à faire permet à l’utilisateur de prendre des décisions plus rapides, comme celle de commander un produit ou un service.
Loi de Jakob : les utilisateurs préfèrent les interfaces familières
Cette loi, formulée par l’expert en ergonomie informatique danois Jakob Nielsen, est liée avec le sentiment de familiarité qu’on éprouve face à une interface, comme un site web.
Par exemple, ayant déjà parcouru de nombreux sites, les utilisateurs vont s’attendre à voir un logotype en haut à gauche et un panier en haut à droite. C’est pour cela que si vous changez ces habitudes visuelles, cela peut perturber leur compréhension de votre site web : quand ces repères disparaissent, l’utilisateur passe plus de temps à chercher qu’à lire.
L’idée est donc de tirer profit des grandes structures qui sont familières aux utilisateurs pour faciliter leur compréhension d’un support. Que ce soit pour un site, un design de flyer, la mise en page d’un livre, le placement d’une signalétique… l’objectif est de trouver le juste équilibre entre conventions et innovations.
Affordance : quand la forme suggère l’usage
Vous avez sûrement déjà utilisé un objet sans qu’on vous explique comment faire. Ouvrir une porte, actionner une bouilloire, taper un code… C’est exactement cette idée que le concept d’affordance illustre. Comme la loi de Jakob, l’affordance fait appel à notre mémorisation intuitive des interfaces qui nous entourent au quotidien. Elle a été créée par le psychologue américain James J. Gibson dans les années 1970 avec pour racine le terme “afford”, qu’on peut traduire de l’anglais par “offrir et être en mesure de faire quelque chose”. Elle désigne donc la capacité d’un objet à évoquer son utilisation. En voici quelques exemples :
- Devant un magasin avec plusieurs portes, si vous voyez une flèche devant l’une, c’est celle-ci que vous emprunterez pour entrer.
- En naviguant sur un site, si vous voyez un groupe de mots soulignés, vous comprendrez qu’en cliquant dessus une nouvelle page apparaîtra.
- Si on vous tend un flyer avec un chiffre dans un gros rond rouge bordé de pics, vous devinerez qu’il s’agit d’une offre promotionnelle.
Cette loi est donc présente partout dans notre quotidien et nous incite à passer à l’action sans nous poser de question, que ce soit sur le web, face à un objet print, une signalétique ou encore un objet.
Rendez-vous sur notre article centré sur l’affordance pour plus d’exemples !
Nombre d’or : une proportion idéale du design
Il s’agit du nombre permettant de créer des visuels esthétiquement plaisants et équilibrés, utilisé par certains des plus grands architectes, artistes, et même visible dans la nature.
Ce nombre équivaut approximativement à 1,62, mais si vous êtes perfectionniste ou amoureux des mathématiques, son écriture exacte est (1+√5)/2.
Concrètement, on peut l’utiliser pour calculer les proportions d’un logotype, l’écart de taille des titres et textes, les mises en pages et compositions de documents etc.
Retrouvez plus d’exemples de l’utilisation du nombre d’or dans notre article.
Comment utiliser ces lois dans vos créations sans en abuser
Ces lois peuvent paraître très abstraites. Mais bonne nouvelle : vous en utilisez probablement déjà certaines sans vous en rendre compte. Et oui, il va de soi de regrouper un titre avec son paragraphe comme de placer un header de site en haut de la page.
L’idée n’est donc pas d’appliquer ces lois de manière absolue sur tous vos designs, mais plutôt de vous appuyer dessus pour corriger ou améliorer ce que vous créez. Elles fonctionnent un peu comme une boussole : elles ne dessinent pas le design à votre place, mais elles vous indiquent la bonne direction. Mieux connaître ces lois est aussi la meilleure manière de les détourner lorsque vous voulez expérimenter une esthétique différente pour vous démarquer !
Alors maintenant, si quelque chose vous gêne sur vos nouvelles cartes de visite, si vous constatez que votre kakémono manque de hiérarchie ou que votre flyer est illisible, vous savez quoi faire : vérifiez si les lois de Fitts, de Jakob ou de Miller peuvent vous aider à rendre votre message plus clair et harmonieux.