Ergonomie pour tout

Pour rebondir sur mon article « L’importance du graphisme », je vous présente quelques illustrations qui montrent ce qu’est l’ergonomie.

Premier exemple, le bouton.

Utilisé partout, sur tous les sites, toutes les applications, le bouton est parfois un « pain point » (le but de la page) qui n’est pas forcément bien conçu.

Tout d’abord, le bouton classique, sans style :

boutonBad

Pour pousser le vice, j’ai réalisé ce bouton sans aucun style, comme ça peut être le cas si on ne prend pas le temps de faire nos 3 lignes de CSS.

Le même bouton (le même rôle) mais avec un peu de style :

boutonOK

Plus gros, coloré (une couleur positive), et visuellement compréhensible si jamais on ne sait pas lire… Ce n’est pas long à faire, une image, du css pour la largeur, la hauteur, la couleur de fond et – en bonus – les coins arrondis.

Sur lequel auriez-vous envie de cliquer ?

 


Ensuite, le (la barre de) menu

Présent sur la grande majorité des sites, il permet de naviguer entre les pages, les sections, les rubriques intéressantes.

Logiquement, il se situe en haut de la page, soit centré, soit à gauche. Certains farfelus préfèrent le placer en bas de page, mais d’après moi, ça peut sérieusement nuire à la navigation.

(Petit bonus) Principe à ne pas oublier : l’utilisateur se crée des habitudes de navigation ! Un logo en haut à gauche, une barre de menu en dessous, la recherche… Les utilisateurs (qui, pour le rappeler, sont au cœur du projet) ne comprendront pas facilement et rapidement si l’agencement de l’interface est … « originale » :)

 

Les exemples ! Les exemples ! Les exemples ! Oui OK.

barreOK

 

Celle ci est certainement la plus connue du web ! Oui, c’est la barre de menu Google.

Les éléments sont simples, séparés, distincts par un liseré de couleur… Aussi et surtout, les libellés de menu sont très simples, et indiquent clairement le rôle du bouton.

Un gros 10/10.

 

 

Autre exemple, un peu « moins bon » : (cliquer sur l’image pour agrandir)

barreBadLe menu ici présent est celui du site d’une des plus grandes enseigne de grande distribution dont le nom n’est pas Auchan.
Le problème ici est l’effet d’entassement des éléments… Il faut lire, lire, lire… Le rapprochement des liens les rends parfois même illisibles !
Aussi, pour accéder au sous-menu, on passe la souris dessus SANS CLIQUER ! Si vous cliquez, vous accéder au menu. C’est aussi difficile à utiliser qu’à expliquer.
Pour le tactile, ce genre de menu est… inutilisable, agaçant, et donne envie de changer de site.

 

 

 

 

 

 

Vous comprenez ?

Une bonne ergonomie donnera un bon confort d’utilisation. L’utilisateur reviendra, rouvrira l’application, et l’utilisera.

 

Je vous invite à lire l’article L’importance du graphisme, qui vous donne un peu plus de détails !

 

Si vous avez des questions, n’hésitez pas !

Laisser un commentaire

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