Design : 4 principes visuels pour les concepteurs débutants

Un guide moldu pour la conception de l’interface utilisateur

LComme de nombreux UXers, je suis entré dans l’industrie à partir d’un arrière-plan non visuel (dans mon cas, c’était Business et plus tard Human Cognition). Même si j’ai trouvé de grands avantages provenant de ces antécédents, cela signifiait également que je n’avais pas de compétences UI / Visual à mettre en pratique au début. Si vous venez également d’un milieu non visuel, je ressens votre douleur 🙂

Dans cet article, je rejoins un ensemble de principes fondamentaux que j’ai appris tout au long de mon parcours, qui m’ont aidé à devenir un meilleur penseur visuel et à exécuter de meilleures interfaces utilisateur.

Remarque: tous les principes ci-dessous font référence à des «éléments». Par éléments, je veux dire tous les composants que vous essayez peut-être d’équilibrer dans une interface utilisateur (comme le texte, les formes, les images, l’appel à des actions, etc.)

Lors de la conception des interfaces, ce que nous essayons essentiellement de faire est de transmettre du sens (aider les utilisateurs à comprendre l’interface) afin qu’ils puissent atteindre leurs objectifs (par exemple, passer une commande en ligne, partager une image avec un ami, etc.). Afin d’aider les utilisateurs à diffuser des informations, les éléments d’une interface doivent avoir une hiérarchie qui aide les utilisateurs à trouver ce dont ils ont besoin en premier.

Comment appliquer le contraste et la signification lors de la conception?

La hiérarchie est véhiculée par le contraste (entre les éléments). Le contraste peut être créé en utilisant des indices visuels tels que la couleur, la position, la taille, la forme, l’orientation, etc. Savoir comment utiliser ces formes de contraste est essentiel pour concevoir des interfaces qui prennent en charge les objectifs de l’utilisateur.

Prenons l’exemple d’Airbnb. Il utilise une police grande et audacieuse pour les en-têtes par rapport au corps du texte qui est petit et mince (afin que les utilisateurs puissent facilement numériser les informations de politique qu’ils recherchent). Il utilise également la couleur et la forme pour mettre en évidence l’appel principal à l’action «voir les dates» par rapport à l’autre appel à l’action «afficher» (pour guider visuellement les utilisateurs vers leur prochaine étape du flux d’utilisateurs).

Points clés à retenir: Le design est en grande partie une application de contrastes visuels, qui sont utilisés pour définir la hiérarchie. « Chaque élément de la page doit être positionné, stylisé, dimensionné ou autrement distingué en fonction de son importance spécifique. »

Les principes de la Gestalt sont un ensemble de «lois» qui décrivent comment les gens ont tendance à voir les objets en regroupant des éléments similaires et en trouvant des modèles. Il fait référence à la tendance humaine à «percevoir somme de toutes les parties par opposition aux éléments individuels ». C’est la raison pour laquelle nous pouvons identifier la forme carrée sur l’image du haut, même s’il ne s’agit que d’un ensemble de lignes détachées les unes des autres.

Comment appliquer les principes de la Gestalt lors de la conception? Utilisez des éléments visuels comme la forme, la couleur ou la taille pour déduire une relation visuelle sur des éléments qui sont logiquement connectés. Par exemple, si deux éléments sont étroitement liés, réduire l’espace négatif entre eux, leur donner la même forme ou les placer sous le même arrière-plan conduit le cerveau humain à penser qu’ils sont en effet étroitement liés. D’un autre côté, des éléments de «regroupement» visuels qui ne sont pas logiquement connectés peuvent dérouter les utilisateurs. Certains de ces éléments visuels communiquent des relations plus fortement que d’autres (e.i couleur> taille> forme). Découvrez comment Spotify utilise différentes formes et tailles pour créer une distinction visuelle entre les différents types de contenu qu’ils présentent (les mixages quotidiens sont grands et de forme carrée tandis que le contenu « Bonjour » est petit et de forme rectangulaire).

Points clés à retenir: Déduisez une relation visuelle aux éléments qui ont une relation logique. Et l’inverse.

Pour en savoir plus sur les principes de la Gestalt, consultez cette article et ça une.

Le ratio d’or (A / B = 1,618 = PHI) est un rapport basé sur la séquence de Fibonacci où A est la longueur la plus longue et B la plus courte. C’est intéressant car il est très répandu dans le monde physique, des proportions de plantes et d’animaux au rapport utilisé pour équilibrer les ovales du logo Toyota. Je sais, c’est bizarre de penser que la plupart des choses dans le monde ont le même ratio mathématique! Même si nous ne remarquons pas consciemment ce ratio lorsque nous regardons les choses autour de nous, il est si répandu que la science a découvert que le cerveau humain identifie et traite les images basées sur le nombre d’or plus rapidement que les images avec un ratio différent.

Comment appliquer le nombre d’or lors de la conception? Il nous aide à créer des formes esthétiques (prenez un rectangle par exemple) en multipliant la longueur du petit côté (A) par le nombre d’or de 1,618. Ainsi, le côté long (B) devrait avoir une longueur de 1,618.

Points clés à retenir: L’utilisation du rapport 1,618 nous aide, en tant que concepteurs, à créer des couches attrayantes et plus faciles à traiter pour les yeux et le cerveau. En outre, l’utilisation du nombre d’or pour créer ou utiliser des guides nous aide à placer les éléments de manière équilibrée.

Pour en savoir plus sur le ratio d’or, consultez cette article.

La règle des tiers est un moyen simple de positionner les éléments là où les yeux de nos utilisateurs ont tendance à tomber dans l’écran. Ces zones douces sont au nombre de quatre et leur attrait pour les yeux diffère les uns des autres (voir l’image ci-dessus). Cela peut s’expliquer par la façon dont l’œil filtre généralement les informations comme un «F», en partant du haut à gauche, puis en bas, puis en haut mais à droite et enfin en bas à droite.

Comment appliquer cette règle lors de la conception? Lorsque vous placez des éléments en arrière-plan, tenez compte des points sensibles de l’écran. Cela peut être fait en divisant l’écran également en tiers, à la fois horizontalement et verticalement, ce qui donne 9 boîtes de forme égale.

Points clés à retenir: Utiliser les points sensibles en plaçant des éléments clés (comme un appel à l’action) vers lesquels l’œil tombera automatiquement peut aider votre produit et vos utilisateurs à atteindre ses objectifs.

Pour en savoir plus sur la règle des tiers, consultez cette article.