le 17 Nov, 2016 par Nicolas Devaux

Temps de lecture : 10 minutes

Résumé : Créer son site internet c'est plus ou moins facile, ou plus ou moins difficile.. Mais comment créer un site qui soit ergonomique et qui donne une bonne expérience à l'utilisateur ?

Plan de l’article


Vous avez dit UX ? Non, ce n’est pas dernier groupe de rap à la mode. L’UX, pour User Experience, que vous aurez bien entendu traduit par expérience utilisateur se distingue de l’ergonomie et du design, même si elle les utilise pour accomplir son effet. L’expérience utilisateur, quand elle est de qualité, permet à l’internaute de naviguer sur votre site sans difficultés, et donc, chose pour laquelle existe votre site, d’accéder à l’information qui y est contenue.

L’un des précurseurs de cette très sérieuse science est un certain Steve Krug, dont le livre Don’t make me think est devenu le livre de chevet de nombreux Web Designers. L’idée principale, traduite en langage psy (version neuropsychologue) : éviter la surcharge cognitive à l’utilisateur afin qu’il puisse focaliser plus facilement son attention sur l’information.

Mais quels sont les ingrédients d’une telle chose et quelles sont les erreurs à éviter ? Petit voyage dans le monde de l’UX !

Alignement : attention aux écarts

Nous avons tendance à percevoir des éléments alignés comme plus cohérents et faisant partie d’un ensemble. Aligner des éléments de design peut aider à donner une impression d’unité et de cohésion, ou donner une représentation explicite de la relation d’éléments entre eux.

Un bon alignement permet également ce créer des lignes ou colonnes, sans avoir à les matérialiser par des éléments de design.

Testez-le vous-même !

Dans la boite ci-dessous, cliquez sur les boutons pour voir la différence.

See the Pen fffc7a7e0559d5c8c8010d3c97ee4158 by nicodev (@ndevaux) on CodePen.

Proximité : une question d’espace

Des éléments proches les uns des autres sont perçus comme plus en relation que des éléments distants les uns des autres.

Le principe de proximité se réfère à la théorie gestaltise de la perception. Grouper les éléments par proximité permet de simplifier la compréhension. Par exemple pour des liens de navigation.

Consistence et répétition

La composition des éléments d’un design et leur relations entre eux donnent une meilleure impression globale. Songez-donc à appliquer un pattern à votre design. Certains éléments graphiques doivent pouvoir se retrouver à divers endroits, donnant des indices visuels à l’utilisateur.

De même, gardez de la consistance dans le choix des couleurs, formes et polices de caractère. Pas plus de trois couleurs différentes, deux polices de caractères, une sans-serif et une serif.

Contraste: pensez à tout le monde !

Vous connaissez le daltonisme. Mais savez-vous qu’il existe d’autres formes de particularités visuelles, comme la deutéranomalie, l’achromatopsie, la protanotopie, ainsi que de nombreuses autres ?

Vos textes pourraient fort bien être inaccessibles à près de 8% de vos visiteurs… Sauf si vous prenez en compte cet élément d’accessibilité. Vous pouvez tester l’accessibilité de vos couleurs sur le site de la Web Accessibility In Mind, WebAIM.

Couleurs : oh la belle rouge… (sans jeu de mots)

Vous aimez les feux d’artifice ou les peinture de Pollock ?

Typographie : les belles lettres

Visibilité : 

Compréhensibilité : évitez le jargon !

Simplicité : keep it simple

Garder l’utilisateur informé