couv-ergonomie

Ergonomie et design pour un site plus « pro »

Parfois, vous vous dites que le site de votre concurrent fait plus pro, alors qu’il propose le même contenu que vous. C’est simple, la différence se situe au niveau du design et de l’ergonomie, et parfois ça ne se joue pas à grand chose !

Pour intégrer ces notions, il faut d’abord se dire que le web est un outil avant d’être un support de communication. Lorsqu’une personne se rend sur internet, c’est pour satisfaire un besoin (trouver, comprendre, acheter, découvrir, etc.). Notre travail est de faciliter au maximum le parcours de l’internaute pour satisfaire son besoin, sinon il ira voir ailleurs.

Ergonomie et design = conception web

L’ergonomie et le design sont deux éléments importants de la conception web. Je le répète souvent, la partie la plus importante du projet est la conception qui permet de prendre en compte les objectifs du site, les besoins de l’internaute, les impératifs techniques, afin de fabriquer le meilleur produit possible.

Dans les agences, la conception va toucher transversalement différents métiers : rédacteur, ergonome, graphiste, chef de projet… En tant que D.A. freelance, c’est moi qui prend en charge ces expertises. Si le budget le permet, je peux faire appel à d’autres indépendants spécialisés dans la rédaction par exemple.

Quel rapport entre ergonomie et design ? En matière de conception, la frontière est mince entre les deux. Le design comprend les éléments graphiques purs, mais aussi l’agencement des éléments entre eux, le contraste entre les différents contenus, le choix des couleurs… bref, tout ce qui peut aider l’ergonomie dans un seul but : répondre aux besoins de l’internaute.

Principes de base de l’ergonomie

Un site web est ergonomique quand il propose à l’internaute une navigation simple et intuitive. La disposition des éléments, allié au contraste, doit permettre à l’internaute de visiter votre site de manière fluide et avec confort.

L’accessibilité

Le site doit pouvoir être pris en main par le plus grand nombre :

  • choix d’une technologie universelle
  • accessibilité mobile
  • respect les usages auxquels sont habitués les internautes : menu de navigation en haut de la page, couleurs associés à une thématique, liens hypertextes soulignés, etc. Inutile de vouloir casser les codes !
L’arborescence

Elle permet de structurer le contenu dans un rubricage logique. La manière dont les idées sont « rangées » doit rassurer l’internaute dans son parcours. C’est aussi une marche à suivre qui amène l’internaute vers nos objectifs. Quelques conseils :

  • les éléments de navigation doivent être bien visibles
  • l’intitulé des liens doit être explicite pour la cible
  • le contenu doit être hiérarchisé en pyramide inversée
La mise en page

La lisibilité du contenu est influencé par les espaces vides. La vitesse de lecture et la compréhension sont accrues lorsque le contenu du site a été mis en page avec des espaces.

  • les textes du site doivent être aérés par l’interlignage et les uns par rapport aux autres
  • utiliser différents niveaux de titre permet d’analyser le contenu facilement
  • les différents niveaux d’importance doivent être contrastés
Liens hypertexte et boutons
  • Les liens doivent être facilement identifiables dans un texte
  • Les boutons doivent présenter leur finalité (pas de « cliquez ici »)
Fonctionnalités

Les fonctionnalités du site doivent avoir une réelle valeur ajoutée et répondre à un besoin. Ajouter un moteur de recherche pour un site contenant deux pages ne sert à rien, un formulaire détaillé de devis peut permettre de répondre rapidement aux questionnements du visiteur.

Les deux types de design

Le design comprend deux sous-spécialités :

  • Design structurel : aider la navigation en attirant l’oeil sur les éléments important.
  • Design émotionnel : créer un univers graphique agréable et unique qui marque et rassure l’internaute.

Ils doivent être complémentaires pour créer la meilleur expérience possible. Aujourd’hui de nombreux concepteurs de site arrivent à doser savamment le graphisme et l’usabilité d’un site, c’est le cas de l’éditeur de newsletter Mailchimp ou du site e-commerce Archiduchesse. Cette tendance a eu un impact sur de petits détails du parcours utilisateur comme ces nombreuses pages 404 uniques.

La crédibilité de votre site internet dépend de la qualité de son design. Celui-ci doit être moderne, en accord avec les tendances graphiques actuelles. Tous les éléments rentrent en jeu et doivent être étudiés avec attention : icônes, polices de caractère, etc.

La qualité d’un site va aussi dépendre de la régularité de sa structure. Utiliser une grille permet de construire des pages homogènes et agréables à l’oeil. En effet de simples défauts de grille rendent une page web dérangeante pour l’oeil humain, sans que le visiteur sache vraiment ce qui cloche. Les grilles sont aussi utiles pour la création de sites en responsive design.

Conseils pour améliorer votre site

Définissez vos objectif

Vos objectifs marketing vont définir les choix ergonomiques et graphiques, dans le but de les satisfaire.

Travaillez votre page d’accueil

Elle est très importante car elle reflète tout le contenu du site, c’est la vitrine qui doit donner envie de continuer la visite.

Aussi, elle doit contenir de manière distincte :

  • les zones de navigation claires
  • un accès direct aux produits ou services
  • les contacts ou un accès aux contacts
  • des actualités récentes
  • un descriptif de ce qu’on va trouver dans le site
Humanisez votre site

On entre dans le domaine de l’émotion. Le visiteur ne doit pas se retrouver dans l’inconnu mais dans un univers rassurant et qui lui est proche. Les photos, les illustration, les couleurs et les icônes vont permettre d’apporter cette touche d’humanité dans votre site.

N’hésitez pas à faire faire des shootings de vos produits par un professionnel. Vous pouvez aussi envisager des mises en situation d’employés ou de clients. Les images doivent montrer ce que vous faites et qui vous êtes.

Si l’iconographie est suffisamment belle et explicite, le travail de design sera plus facile et moins important.

metrecarre

Le constructeur de maison Mètre Carré utilise une iconographie forte pour faire passer son message.

 

Orientez le visiteur

Si votre site propose des services en lignes, de la vente ou une application quelconque, mieux vaut afficher ce qu’on appelle un « How to ». C’est une explication concise et illustrée du fonctionnement de votre site ou des actions à effectuer.

howto

Le site de location ZipCar utilise cette méthode pour exprimer la simplicité d’utilisation de son service.

 

Sim-pli-fiez

L’important c’est de répondre à la demande de l’internaute : simplifiez au maximum le contenu du site et allez à l’essentiel.

Evitez de multipliez les actions à réaliser : diminuez le nombre de clic pour aller à l’information, facilitez le choix, le paiement, etc.

Insérez des liens

Les liens hypertextes ou les boutons vont permettre d’orienter le visiteur tout au long de sa visite. Au lieu de multiplier le contenu dans toutes les pages, simplifiez l’arborescence et effectuez des liens entre les contenus. Si ces liens sont intelligemment placés dans le site, l’utilisateur trouvera tout seul son chemin vers l’information qui l’intéresse.

L’ensemble des liens internes et externes constituent ce qu’on appelle le maillage du site.

Augmentez la vitesse de chargement des pages

Un internaute sera insatisfait s’il doit attendre que le contenu s’affiche, de nombreuses études l’ont prouvé.  De plus la vitesse de chargement d’un site compte dans son référencement naturel.

Testez vos pages

En tant que concepteurs et, pire, en tant que graphistes têtus, nous ne somme pas en mesure de certifier que nos choix sont les meilleurs. Il faut alors tester son site auprès de multiples utilisateurs. Leur utilisation du site nous en apprendra plus sur nos choix et nous permettra de redéfinir notre approche si besoin.

Il peut être intéressant de proposer deux versions différentes des pages afin d’observer quels choix ont de meilleurs résultats. C’est la méthode de l’A/B testing.

Faites confiance à votre graphiste

Nous autres graphistes et designer, passons beaucoup de temps à scruter les tendances graphiques et technologiques. Grâce à notre expertise, nous vous soumettons ce que nous pensons être le mieux adapté à votre projet. Lorsque vous achetez une voiture, vous n’allez pas voir M. Renault pour lui expliquer comment fabriquer un moteur ? Alors faites de même avec votre prestataire.

Les mauvaises pratiques et tendances à oublier

Les images en filigrane : les photos en arrière plan du texte n’aident pas du tout la lecture du contenu et n’apportent aucune information.

Une animation en page d’accueil : cela fait perdre du temps à l’internaute et n’apporte généralement pas d’information.

Un pré-accueil : ces « pages tunnels » n’apportent aucune information et demandent au visiteur un effort supplémentaire, à éviter !

« cliquez ici » : mieux vaut expliciter le but d’un bouton plutôt que l’action à effectuer.

Les icônes farfelues : une icône doit être claire et facilement identifiable. Il faut utiliser les icônes qu’on connait et que l’on voit tous les jours, c’est de la pure communication.

Nombreuses polices de caractère : il faut limiter le nombre de polices utilisées (max. 3), elles doivent aussi être associées à des niveaux d’information. Les polices très graphiques ne doivent être utilisées que pour de rares éléments de contenus (sliders, en-têtes…).

Les  carousels : c’est une tendance qui commence à disparaitre car beaucoup d’utilisateurs ne s’en servent pas. Il vaut mieux privilégier le contenu, une page longue est plus appréciée car le scroll est plus facile.

Les  mega-menu : certains concepteurs sont allés trop loin dans le « mega » en collant tout le contenu du site dans le menu. Le menu tout comme l’arborescence de votre site doivent être simplifiés. Si vous avez un e-commerce avec de nombreuses références, utilisez un système de classement par critères plutôt que des pages par « sous-catégories ».

Les pop-in: ces fenêtres qui s’affichent par dessus le contenu pour vous obliger à vous inscrire à la newsletter, c’est insupportable.

Délaisser les « page internes » : de nombreux commanditaires et créateurs de site se concentrent sur la qualité de page d’accueil et ne font que « décliner » le graphisme en une page simple qui sera dupliquée pour tout le contenu du site. C’est une erreur, chaque page doit être soignée et créée en fonction de son contenu. De plus le référencement naturel de vos pages a pour conséquence que de nombreux internautes atterrissent sur vos pages internes sans passer par la case départ.

Le trop plein d’explication : inutile de se faire du mouron en pensant que les internaute ne vont pas comprendre le but de votre site. J’ai vu trop de client qui ont voulu ajouter de nombreux textes, icônes, photos pour expliquer à quoi sert leur site. Résultat : le site devient anxiogène, incompréhensible,  et les internautes s’en vont. Avec une bonne ergonomie, des fonctionnalités claires, des boutons explicites, les visiteurs comprendront vite à quoi peut servir votre site.

 

Pour aller plus loin

Les bonnes pratiques de l’Interface Utilisateur

Comments (1)

  1. Merci pour tous ces conseils. Pour une PME, le site Internet est le principal outil de communication en ligne, car il lui permet de cibler un public très large. C’est comme une brochure que les internautes peuvent consulter à tout moment, c’est pourquoi elle doit être claire et ergonomique. Le visiteur doit comprendre rapidement les produits et les services proposés, afin de décider s’ils correspondent à ce qu’il recherche.

Leave a Comment