Dévoiler les secrets d'une interface utilisateur sans encombrement

Dites adieu aux interfaces encombrées et déroutantes ! Dans le monde numérique d'aujourd'hui, il est crucial de s'assurer que l'interface utilisateur de votre application, site Web ou application Web présente les informations de manière claire et concise. Saviez-vous que 90 % de l'interface utilisateur est constituée de texte ? C'est pourquoi il est essentiel de se concentrer sur la présentation du texte et de réduire le bruit visuel .

Plongeons-nous dans un exemple de wireframe d'un écran d'application de podcast.

L'écran fournit une liste d'épisodes, le bouton de lecture et le temps restant pour l'épisode en cours de lecture. Les informations les plus cruciales qui doivent être mises en évidence sont l' emplacement de l'utilisateur dans l'application et les actions disponibles qu'il peut effectuer . Dans ce cas, l'onglet "Épisodes" et l'épisode en cours de lecture sont les indicateurs les plus importants. Le reste de l'information, comme la date et la durée de l'épisode, peut se voir accorder moins d'importance par

1. réduire la taille de la police,
2. réduire le poids de la police,
3. réduire le contraste des couleurs (tout en s'assurant qu'il est accessible)

Pour guider l'utilisateur sur ce qui est cliquable et ce qui ne l'est pas, utilisez la couleur primaire pour mettre en évidence l'état actuel et des couleurs neutres pour les actions secondaires.

En utilisant cette approche, vous pouvez aider l'utilisateur à analyser les informations critiques et à prendre des décisions éclairées sur les actions qu'il doit entreprendre.

Quelques points clés à retenir de cet exercice-

• Évitez d'utiliser la même couleur pour vos boutons principaux et le texte non cliquable, à moins que la couleur du bouton ne soit bien sûr noire.

• Accentuer en désaccentuant. Mettez en surbrillance votre contenu important, comme les titres et les puces, en utilisant une couleur sombre, une police en gras ou en augmentant la taille de la police. D'autre part, gardez le contenu secondaire, comme les extensions de date et les informations supplémentaires, discret en utilisant une couleur grise, un poids de police normal ou en réduisant la taille de la police.

• Assurez-vous que vos utilisateurs savent ce qu'ils peuvent faire ! Les actions principales doivent être limpides, les actions secondaires doivent être facilement perceptibles mais pas écrasantes, et les actions tertiaires doivent être là pour que l'utilisateur les découvre mais ne les éloigne pas de l'objectif principal.

Les références-

Le wireframe utilisé dans cet exercice a été fourni à l'origine par Arjun lors du défi Visual 50 jours.