C’est bien connu avec le design, on peut tout faire car ça fonctionne ! Les problèmes de contraste s’afficheront, les soucis d’alignement aussi. Ce seront les utilisateurs qui auront pour le coup une mauvaise expérience ! Je te donne ici quelques pistes pour améliorer l’UI de ton site.

‍

Drop Shadow

‍

‍

La plupart des designers utilisent ce que l’on appelle un “drop shadow” (box-shadow pour le CSS) sur les cards ou des images ainsi que des buttons. Aujourd’hui il y a une tendance qui incite à marquer cette ombre pour donner un style rétro, mais c’est pas de ça que je veux te parler. Dans l’exemple ci-dessus, tu verras clairement qu’à gauche, l’ombre saute aux yeux. Perso je trouve que ça a un effet un peu daté. En plus d’attirer l’oeil de l’utilisateur. On surcharge le design inutilement. A droite j’ai descendu l’opacité de la couleur noire à 6%, poussé le blur à 13 et… voilà. Le relief est là, mais plus subtil, quasi imperceptible mais l’effet est quand même présent. Je t’invite à regarder le site d’Apple tu verras qu’ils utilisent le drop shadow avec autant de subtilité. Le rendu est classe et moderne.

‍

Hiérarchie et Alignement

‍

‍

Dans le design tout est une question de groupe. Tu verras jamais un button perdu entre une image ou un texte, il sera toujours près d’un élément car il en dépend. Lorsqu’un titre apparait il aura également un sous-titre, puis un paragraphe. Le sous-titre sera proche du titre et assez éloigné du paragraphe. Travaillant avec une grille de 8px, j’aime séparer mes titres des sous-titres de 8 pixels ou le double selon la taille de mon titre. On va préférer une couleur grise pour le sous-titre car l’info est secondaire. J’aime saturer le gris avec la couleur primaire du site, c’est une pratique courante. Si ma couleur primaire est bleu alors je vais chercher le gris le plus proche du bleu sur ma palette. Sur l’exemple donné, on voit clairement la différence au niveau de la hiérarchie avec le titre en gras, la taille du sous-titre sera en général 4px en dessous de la taille du texte principal. Puis le paragraphe placé 18 pixel en dessous.

‍

Le Contraste

‍

‍

Le contraste est sûrement l’erreur la plus récurrente sur les sites web et applications. Personnellement c’est devenu un réflexe de vérifier sur le site d’Adobe si le contraste du texte est ok. C’est une règle d’accessibilité qui devrait être intégrée pour l’expérience des utilisateurs. Sur l’exemple au dessus, à gauche rien ne va : le mot sur la photo ou le texte et la couleur de fond du button. Les textes sur les photos peuvent être un piège, je vois beaucoup d’exemples sur Dribbble où évidemment le texte passe car l’arrière plan est clair, mais si la photo change ? On va pas demander au développeur de dev un algo pour modifier la couleur du texte selon l’arrière plan. L’horreur. Un petit bandeau d’une couleur approprié fera le job. Car il sera toujours là.

‍

Dark Theme

‍

‍

Jusqu’à récemment, même Youtube ne respectait pas tous les codes du dark theme. La règle est simple : les zones d’interactions pour l’utilisateur doivent différer avec le background, pour apporter un relief. L’user reconnait facilement les zones avec lesquels il peut interagir. Un input, un button, ne doit pas avoir la même couleur que le fond si il est dark.  Cette erreur revient souvent sur les sites qui utilisent le dark theme.

‍

Loading

‍

‍

Vous avez dû remarquer que l’animation qui indique à l’utilisateur que la page se charge évolue. Les loading spinners que l’ont voyait un peu partout changent pour un squelette qui ressemble à l’image qui devra s’afficher. Des études démontrent que l’animation grisâtre que l’on voit dans l’exemple de droite ci-dessus, engage les utilisateurs à attendre plus longtemps, car ils ont la sensation que le contenu est sur le point de s’afficher. La “petite loop” qui tourne donne envie aux users de se déconnecter et laisse l’impression d’un bug ou d’une image/texte impossible à afficher.

‍

Dropdown Menu

‍

‍

Lorsqu’on veut que l’utilisateur fasse un choix, on le met souvent face à un menu déroulant. C’est souvent à la première chose à laquelle on pense lorsqu’on code ou lorsqu’on fait du design. A partir de 3 choix en effet cette option est séduisante, mais elle est à éviter si il n’y a a que deux choix. On va éviter un clic à l’utilisateur et lui proposer des radios buttons comme dans l’exemple ci-dessus. Il se peut que tu aies plusieurs questions avec deux choix uniquement à chaque réponse, donc imagine le nombre de clics épargnés à l’user..Tu peux même t’amuser à designer de jolis petites cards pour les réponses, c’est le moment d’être créatif !

J’espère que ces tips t’ont plu, à bientôt pour un nouvel article sur le design ui/ux !

Cheers

VS‍