Alignement et proximité
Le dernier principe de design que je vais vous apprendre concerne la façon de créer un ordre et donner une signification aux éléments de votre design, sans ajouter plus d’éléments. Cela parait subtil, mais affecte tout ce que vous voyez, chaque jour :
Vous venez juste d’arriver ? Vous voudrez peut être commencer par qu’est ce que l’UX design.
Aujourd’hui, nous allons dire au revoir aux canards en caoutchouc, mais d’abord ils vont nous permettre de démontrer deux des plus fondamentales principe de perception visuelle.
L’alignement
Dans la première image, nous voyons un groupe d’éblouissant, de merveilleux canards, mais nous voyons également une relation, à cause de la façon dont ils sont alignés :
Nous voyons deux lignes :
- Le canards le plus à gauche et celui plus à droite semblent séparés
- Ceux du centre semblent plus organisés
- Les canards ont l’air d’aller tous dans la même direction
Si vous voyez du mouvement, le canard le plus à gauche semble être à la traine, et le plus à droite semble mener
Les 6 canards sont identiques. C’est juste leur alignement qui créer ces perceptions.
Les boutons avec des fonctions similaires peuvent être alignés.
Des boutons avec des fonctions similaires peuvent être alignés. Différents niveaux de contenus peuvent être alignés. L’information peut être dans une tableau avec des lignes et des colonnes pour créer du sens complexe.
Proximité
La proximité ou la distance entre deux objets créer un sentiment que ces objets sont connectés ou non. Cette distance est appelée proximité.
Dans la seconde image, vous pouvez voir 6 canards (toujours identiques et toujours magnifiques), qui ne sont alignés ni horizontalement, ni verticalement, mais pourtant, on voit bien deux groupes de canards. Les canards des deux groupes semblent être ensemble, comme une équipe ou une famille. La seule chose qui créer cette impression, c’est leur proximité.
Dans vos designs, mettez les éléments communs proches les uns des autres et les éléments qui n’ont rien à voir plus éloignés.
Par exemple : un titre, un bloc de texte et un bouton qui sont communs à une même action – comme un achat ou le téléchargement d’une application, sont souvent présenté comme un ensemble. Cela permet à l’utilisateur de comprendre qu’ils vont ensemble sans lire quoi que ce soit.
