Bonjour, Valérie jeune stagiaire en mission chez Telmedia, cette semaine je vous propose 10 conseils pour une meilleure expérience utilisateur.

1. Raconter une seule histoire à la fois.

Aimeriez-vous lire l’histoire du « Petit chaperon rouge » en même temps que celle de « Peter Pan » ? Qu’en auriez-vous retenu ? Certainement que Peter Pan se fasse manger par le loup et que le petit chaperon rouge ait une fée comme meilleure amie. Ce serait certainement très embêtant si vos internautes mélangeaient également les informations que vous vous efforcez à mettre sur votre site internet. Préférez donc une mise en page avec une seule colonne, et donc une seule histoire. Si vous voulez rendre votre histoire encore plus percutante, faites participer vos utilisateurs, en intégrant par exemple un « call to action » à la fin de celle-ci afin de continuer l’aventure.

source : "La véritable histoire du petit chaperon rouge" et "Peter Pan"
source : « La véritable histoire du petit chaperon rouge » et « Peter Pan »

2. Respecter les conventions et le bon sens.

Les outils, formes, couleurs, ou dispositions de vos éléments respectent des conventions afin que la courbe d’apprentissage de vos utilisateurs soit la plus faible possible lorsqu’ils découvrent votre site internet. Avec ces conventions, nous avons appris que pour fermer une fenêtre, il fallait cliquer sur la croix dans le coin supérieur droit (le plus souvent), ou qu’il suffisait de cliquer sur la flèche allant vers la droite pour atteindre l’élément suivant et inversement pour la flèche allant vers la gauche. Bien sûr, il y aura des moments où une convention sera dépassée, mais lorsque vous déciderez de rompre avec cette convention, assurez-vous que vos utilisateurs soient également prêts à le faire et que leur apprentissage ne soit pas difficile.

D'une logique imparable source : demotivateur.fr
D’une logique imparable source : demotivateur.fr

3. Distinguer les éléments.

Vos utilisateurs doivent pouvoir identifier au premier coup d’œil où ils sont et où ils peuvent aller. C’est pourquoi les couleurs, la profondeur et les contrastes sont les principaux repères visuels. Pour distinguer correctement vos éléments, les styles de vos actions (liens cliquables, boutons), vos objets qui seront sélectionnés ou vos textes doivent être clairement distincts les uns des autres, tout en créant une cohérence sur l’ensemble de votre page et de votre site internet.

source : goodui.org
source : goodui.org

4. Ne pas noyer vos utilisateurs.

La plupart d’entre nous savent qu’un couteau et une fourchette ou « fichier » et « enregistrer » sont des objets ou fonctions qui peuvent généralement se trouver ensemble. De manière générale, les éléments connexes sont destinés à être placés à proximité des uns des autres afin de respecter une certaine logique (cf. conseil n° 7). Regrouper les éléments est un moyen efficace d’augmenter considérablement la facilité d’utilisation de votre site internet. Retenez que vos utilisateurs n’aiment pas perdre de temps.

regroupement
source : goodui.org

5. Créer une hiérarchie visuelle.

Les espacements, les couleurs, les tailles des polices ou des éléments permettent de distinguer les différents niveaux de la hiérarchie de votre document ou interface. Lorsque ces éléments sont correctement agencés, ils permettent à l’utilisateur d’avoir un rythme de lecture et des repères visuels.

hierarchie
source: goodui.org

6. Essayer de ne pas trop en demander.

Les êtres humains sont réticents à aller au travail, ils le sont également quand il s’agit de remplir un formulaire, retenez bien cela quand vous devrez créer un nouveau formulaire. Chaque nouveau champ à remplir est une raison supplémentaire de quitter simplement votre site. Tout le monde ne remplit pas un formulaire à la même vitesse, et tout le monde ne remplira pas votre formulaire via son ordinateur. Il est donc nécessaire de penser aux utilisateurs plus âgés, en situation de mobilité ou ayant des difficultés à taper sur un clavier. Supprimer le plus possible de champs, ne garder que l’essentiel. Si vous avez besoin de beaucoup de renseignements et donc de champs à remplir, il faudra certainement penser à placer les champs « supplémentaires » ou « bonus » sur une page séparée, de manière à ne pas effrayer vos utilisateurs.

Un formulaire beaucoup beaucoup trop long !! source: restoducoeur.org
Un formulaire beaucoup beaucoup trop long !!
source: restoducoeur.org

7. Exposer les options.

Dans chaque menu déroulant que vous utilisez, se cache un ensemble d’actions pour lequel l’utilisateur doit fournir un effort pour le découvrir. Essayez de réserver des menus déroulants pour les options qui sont prévisibles et qui ne nécessitent pas de nouvel apprentissage de la part de l’utilisateur.

options
source: goodui.org

8. Adapter la taille de vos éléments.

Qu’il s’agisse de liens, boutons, formulaires, peu importe. Il est important que tous vos éléments soient d’une taille raisonnable et adaptés à leurs contenants. Si vos éléments sont trop petits, vos utilisateurs ne les utiliseront pas, ou ils ne les verront pas tout simplement. Bien sûr il ne faut pas aller dans l’abus et avoir des éléments trop gros, qui pourraient agresser vos utilisateurs. Il faut trouver le juste milieu pour que votre page soit uniforme.

taille
source: goodui.org

9. Choisir des icônes claires et simples à comprendre.

Les icônes nous sont bien utiles pour alléger un site internet, cela donne également un côté plus accessible, plus ludique. Cependant, choisir des icônes trop fantaisies ou qui sortent de l’ordinaire, peut contribuer à dérouter vos utilisateurs. Par exemple, un icône d’une flèche vers le bas : Allons déplacer un élément, abaisser sa priorité ou le télécharger ? Les combiner avec des mots simples peuvent enlever toutes les ambiguïtés.

Que pouvons-nous faire avec cette flèche ?
Que pouvons-nous faire avec cette flèche ?

10. Intégrer des animations qui changent tous.

Pourquoi se limiter en matière d’animation sur votre site internet, si cela peut être bénéfique pour vos utilisateurs ? Depuis quelques années, nous nous sommes accoutumés à l’ambiance animée que peuvent avoir certaines interfaces; ces animations dépendent la plupart du temps de l’environnement utilisateur. Cependant, vos utilisateurs ne sont pas tous égaux face à une même logique de navigation et d’interaction : il convient donc de définir les bonnes valeurs en matière de vitesse, durée et délais afin que vos animations demeurent cohérentes et lisibles pour vos utilisateurs.

Oh ! un menu qui s'anime  !  source : useyourinterface.com
Oh ! un menu qui s’anime !
source : useyourinterface.com

Conclusion

Si comme moi vous êtes un jeune padawan en design, ces 10 conseils devraient vous aider à créer des interfaces efficaces et centrées sur utilisateur.

Rejoint la team padawan memegen.fr
Rejoint la team padawan ! source: memegen.fr

Pour avoir encore plus de conseils, rendez-vous sur le site « Good UI » regroupant plus de 60 conseils pour une meilleure conversion et un site internet plus accessible.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec un *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>