Ergonomie
Théorie de Gestalt
Cette théorie stipule que l’oeil perçoit toujours une image dans son ensemble avant de se concentrer sur les éléments individuels qui la constituent — raison pour laquelle, dans l’image qui suit, on va voir un triangle, un rectangle, une sphère et un serpentin avant de voir qu’aucun contour ne les délimite.
Il existe 8 lois de Gestalt qui constituent cette théorie, par ordre d’importance dans la perception
-
La loi de la proximité: Les gens regroupent d’abord les objets les plus proches comme faisant partie d’un “objet”.
-
La loi de similitude: Si la distance ne permet pas de distinguer des objets, alors on les regroupe par similarité: forme, couleur, etc.
-
La loi de clôture: Notre perception remplit les vides lorsqu’on observe des formes qui ne sont pas fermées
-
La loi de symétrie: Lorsque deux éléments sont symétriques, nous allons naturellement les associer comme faisant partie d’un même objet. Dans l’exemple suivant, on voit 3 paires de parenthèses symétriques et non 6 parenthèses individuelles.
-
La loi du destin commun: Nous regroupons ensemble les objets ayant la même trajectoire, qui vont dans la même direction. Dans l’image qui suit, on voit un triangle qui pointe vers le logo.
-
La loi de continuité: Lorsqu’on voit une ligne, on attribute à cette ligne une trajectoire, même si cette trajectoire est interrompue par d’autres trajectoires.
-
La loi de bonne figure: Lorsqu’on voit un ensemble de traits, on va percevoir les objets de la manière la plus simple possible. Ainsi, dans l’exemple suivant, on voit un triangle et un carré et non deux polygones quelconques.
-
La loi de familiarité : On voit en priorité les formes familières. Dans l’exemple suivant, on voit un cube.
Il est important de tenir en compte ces lois dans un design, pour ne pas créer de composition qui va à l’encontre de l’intuition.
Loi de Hick
La loi de Hick énonce que chaque choix supplémentaire augmente le temps nécessaire pour prendre une décision. Ce principe s’apparente au « Paradoxe du Choix »: plus vous donnez de choix aux gens, moins ils choisissent. Vous pouvez améliorer l’expérience de vos clients en réduisant le nombre de choix disponibles.
Exemple: si vous vendez une grande quantité de produits, vous ajoutez des catégories, sous-catégories et filtres.
Loi de Fitts
La loi de Fitts énonce que le temps requis pour se déplacer vers une zone cible est fonction de la distance de la cible divisé par la taille de la cible. Autrement dit, plus un objet est proche et gros, plus il est facile à atteindre.
Afin de ne pas polluer l’espace, la taille d’un bouton doit être proportionnelle à sa fréquence d’utilisation.
Effets
-
Le plus souvent, la solution la plus simple est la meilleure. Ajouter des effets, comme des ombres, des textures et des dégradés peut charger inutilement le design. Un design simple est généralement plus facile à lire et plus agréable à l’oeil.
-
Éviter d’ajouter des effets au texte, ils peuvent paraître surfaits et donner un air amateur.
-
Les dégradés peuvent être utilisés en arrière plan ou pour les boutons.
-
Les couleurs peuvent être utilisées pour créer des formes ou des motifs et ajouter un intérêt visuel à une couleur unie.
Repères directionnels
-
Ajouter des repères visuels ajoute de l’intérêt au texte et augmente l’engagement du lecteur.
-
Si les répères pointent dans une direction, s’assurer que cette direction pointe vers le contenu et non vers l’extérieur.
Exemple:
Contraste foreground / background
-
S’assurer que la police d’écriture a un contraste suffisant avec le background.
-
Pour faire ressortir du texte sur une image, on peut assomblir l’image.
The Complete Guide for How to Marry Text and Images In Your Designs
-
Ou on peut superposer un motif.
Utiliser l’opacité pour éviter une rupture brutale entre le background et foreground.
How to Effectively Use Transparent Backgrounds in Graphic Design
Contraste de couleurs
Le WCAG (Web Content Accessibility Guidelines) donne les recommendations suivantes :
-
Utiliser de préférence des couleurs très simples, à contraste élevé, comme le noir et le blanc
-
En deuxième choix, les couleurs qui ont la même teinte mais une saturation et luminosité très différente
-
Éviter les combinaisons intrinsèquement difficiles à distinguer pour les humains, en particulier pour les daltoniens.
Exemple: le rouge et le vert, ou le bleu et l’orange
-
Respecter l’harmonie naturelle des couleurs.
Le jaune est une couleur naturellement claire, le bleu est une couleur naturellement plus foncée. Associer un jaune foncé et un bleu clair crée une expérience utilisateur génante.
-
Le contraste couleur chaude / couleur froide n’est pas suffisant pour être lisible.
On peut en revanche l’utiliser pour créer de la profondeur.
Hiérarchie visuelle
La hiérarchie visuelle est l’organisation et prioritisation du contenu pour communiquer un message.
Les éléments les plus “catchy” sont les plus importants.
La taille des titres, des textes, icones et boutons reflète cette hiérarchie. La couleur vient également renforcer cette hiérarchie.
