Ergonomie : quelques bases
Je ne suis pas l'utilisateur type (ma grand-mère non plus)
Il est impératif de connaître les futurs utilisateurs du site (aptitude "technique", âge, catégorie socio-professionnelle... ). Pour cela, on va définir des utilisateurs types appelés personas pour étudier les parcours-utilisateurs.
La loi de proximité
Des objets proches les uns des autres semblent appartenir à un même ensemble (même nature, même fonction...)
Afin de tirer parti de cette observation, on va veiller à :
- Rapprocher les éléments qui ont un lien entre eux
- Eloigner les éléments qui n'ont rien en commun
- Créer des respirations, des marges entre les différents groupes d'information.
Exemple (avant) / Exemple (après correction)
La loi de similarité (ou de similitude)
On associe mentalement des objets qui se ressemblent.
Ce principe prend toute son importance dans la création des styles des différents composants qui structurent les pages et en particulier les familles de liens et de boutons.
On doit respecter une certaine cohérence. Si les styles des objets changent d'une page à l'autre, l'utilisateur mettra plus de temps à les identifier.
La loi de Fitts
Plus un élément est proche (de l'emplacement du curseur) et grand, plus il est facile à atteindre.
Les onglets contenant les intitulés cliquables "Une formation" et "un établissement" devraient également être cliquables pour élargir le champ d'action de l'utilisateur et faciliter l'accès aux contenus.
De plus, un changement d'état au survol conforterait l'utilisateur qu'il s'agit bien de liens.
Certains éléments de navigation ou fonctionnalités majeures (bouton Acheter) sont parfois doublées en haut et pied de page afin d'en faciliter l'accès.
http://vod.mk2.com/films/thriller-policier (pagination en haut et en pied de page)
http://www.aufeminin.com (navigation principale doublée en pied de page)
De plus, le clic des utilisateurs n'est pas toujours très précis.
- Augmenter la taille réelle des éléments cliquables
- Augmenter la taille virtuelle (la surface cliquable) des éléments cliquables
- Augmenter la distance entre 2 (petits) éléments cliquables afin d'éviter les risques de confusion
L'affordance
L'affordance est la possibilité d'action suggérée par le design d'un objet.
Le site est bien rangé
Lorsque l'architecture d'information d'un site est bien pensée, l'utilisateur atteind plus facilement ses objectifs.
La page est bien rangée
- Ne pas surcharger les pages
- Respecter une cohérence visuelle
Organiser la page
Distinguer :
- Les espaces de navigation
- Les différents blocs de contenu
- Les éléments d'interaction (boutons d'action, formulaires...)
- Utiliser les vides (marges) pour séparer les principaux espaces
- Utiliser des titres et des filets pour structurer le contenu (exemple de formulaire)
- Différents niveaux de blocs, de titres, de textes pour dessiner la hiérarchie dans une page
Le site capitalise sur l'apprentissage externe
L'utilisateur est allé sur d'autres sites que le vôtre et y a acquis des automatismes.
- Logo en haut à gauche
- Navigation en haut ou à gauche
- La recherche en haut
- Le panier en haut à droite
- Convention de vocabulaire : accueil, panier, recherche, plan du site, contact...
- Texte souligné = lien
Il faut donc tenir compte des conventions du web, sans se sentir bridé pour autant dans sa créativité. Il s'agit de doser l'impact visuel des différents composants.
- www.rowenta.fr : du fait de son emplacement et de ses dimensions, la navigation Outils du site Rowenta devient plus importante que la navigation principale en pied de page.
- QuakeQuizSF : la navigation en pied de page est suffisamment forte visuellement pour s'affranchir des conventions
Le site capitalise sur l'apprentissage interne (cohérence du site)
- dans l'emplacement des éléments (surtout pour la navigation)
- dans les intitulés, le vocabulaire utilisé
- dans les interactions (style des liens, comportement des objets...)
Réaliser des tests utilisateurs
Les concepteurs d'un site doivent constamment se mettre dans la peau du futur utilisateur.
Pour les aider à prendre du recul, les tests utilisateurs s'avèrent très efficaces. Ces derniers peuvent être mis en place dès les premières maquettes graphiques, voire dès les premiers schémas de page fonctionnels.
Si on n'a pas les moyens humains et financiers de mettre en place ces tests, demander à quelqu'un de son entourage qui ne connait rien au site de réagir sur les maquettes peut également aider.