Concevoir des sites web conviviaux

Un site facile à naviguer ou User Fiendly

Un site doit être facile à naviguer. La capacité d’un site à être facilement navigable et clair est aujourd’hui essentielle pour se démarquer. Les internautes détestent chercher et sont de plus en plus exigeants en terme d’ergonomie web. En anglais cette caractéristique est appelée « User Friendly » ou en d’autres termes : « amical pour l’utilisateur ».

La convivialité d’un site peut se définir par sa facilité à le comprendre et à le manier avec rapidité. Pour concevoir des sites conviviaux il est indispensable de s’inspirer des tendances design, mais aussi des apports de l’UX (ou expérience utilisateur) [1] .

L’importance de l’accessibilité

L’accessibilité d’un site est tout aussi importante que la convivialité. Elle peut se définir comme la possibilité de naviguer sur un site, quelles que soient les capacités visuelles, auditives, cognitives ou physiques de l’utilisateur. Le site doit pouvoir s’adapter à tout type d’utilisateur, et non pas le contraire, sans altérer ni le contenu ni l’expérience.

La liste des critères à prendre en compte est définie sur le site du gouvernement consacré au RGAA [2]. A noter que ses critères sont obligatoires pour les sites des administrations et des collectivités locales.

La navigation, claire et minimaliste

Concevoir une navigation claire et homogène est primordial dans la réalisation de sites internet conviviaux. Celle-ci fait être pensée en fonction de l’architecture du site. Dans notre démarche nous la considérons comme essentielle à la conception d’un site web. C’est pourquoi nous proposons de la réaliser de manière collective selon la méthode du tri par cartes.

En savoir plus sur le tri par carte https://www.usabilis.com/tri-par-cartes-une-architecture-de-linformation-construite-par-les-utilisateurs/

Il est par conséquent primordial de créer des noms de pages clairs et de réduire au maximum les sous-navigations et les sous-menus.

Ne jamais perdre de vue que l’utilisateur doit à tout moment savoir ou il trouve dans le site. Rappeler sans cesse le contexte en distinguant le menu de 1er niveau ou il se trouve et proposer un fil d’Ariane [3] .

Un design attractif

L’identité du site est définie par sa police, ses couleurs, ses visuels et ses logos. Ces éléments sont ce qui imprègne en premier la mémoire de l’internaute. Une erreur de conception de design peut être dangereuse pour la perception de l’image et de la marque de votre site.

Bien avant le contenu, le visuel est la première chose que verront les internautes. La définition d’une charte graphique est cohérente, détaillant les polices, les couleurs, la navigation et les icônes sont essentielles.

Par principe nous considérons préconisons les éléments suivants :

  • Pas plus de 3 polices sur un site
  • Pas plus de 5 couleurs (hors blanc et noir)

Tous ses éléments sont déterminés et choisis avec vous, pour validation, avant être intègré aux maquettes du site.

Proposer une recherche efficace des contenus

Vous aurez beau concevoir la navigation et l’ergonomie la plus claire possible, il y’aura toujours des utilisateurs qui ne trouveront pas votre contenu. Il n’y a rien de plus désagréable que de multiplier les clics pour trouver un contenu.

Le formulaire de recherche doit être accessible sur toutes les pages du site et doit être facile à trouver. Par convention on le place souvent en haut à droite dans la barre de menu.

Proposer une seule boite de saisie de recherche accompagnée d’un bouton de validation. Ne pas proposer de recherche multi critères en premier niveau de recherche, cela complexifie la recherche et ce n’est pas naturel pour les utilisateurs.

L’utilisateur doit pouvoir disposer après sa recherche :

  • de filtres, pour pouvoir affiner sa recherche
  • de tris, pour pouvoir classer les résultats
  • du nombre de résultats
  • d’une pagination précise pour naviguer dans les résultats.

 Voir l’article sur la conception d’un moteur de recherche


[1Voir la définition de l’expérience utilisateur sur Wikipédia : https://fr.wikipedia.org/wiki/Expérience_utilisateur

[2Voir le site internet consacré au RGAA : https://references.modernisation.gouv.fr/rgaa-accessibilite/

[3Voir la définition du fil d’Ariane : http://aide.meabilis.fr/glossaire/f/definition-fil-d-ariane.html