18 avril 2017 Sophie Cochet

Comment améliorer l’ergonomie de votre site internet pour le rendre plus efficace ?

Comment améliorer l'ergonomie de votre site internet pour être plus efficace?

Pourquoi l’ergonomie est importante pour un site internet?

Parce que l’internaute est un être impatient et versatile, le moindre agacement ressenti lors de la consultation d’un site web (attente, mauvais affichage, présentation non instinctive etc.) peut être synonyme d’abandon de page et générer de fâcheuses conséquences : panier non validé, perte de prospect ou de client…

Comme la rétention du visiteur est le nerf de la guerre sur le web, tous les moyens sont bons pour lui éviter tout type d’expériences négatives (d’autant plus que c’est un critère de référencement Google). A cette fin, la définition de l’ergonomie de votre site est une étape fondamentale dans la création / refonte de votre site internet.

EN 2000, Staples, entreprise américaine de fourniture de bureau, entreprit la refonte de son site internet selon une démarche ergonomique pour améliorer la qualité de sa relation client. Après une enquête, des audits d’ergonomie et des tests utilisateurs, il parvient à augmenter de 67% la fidélité de ses clients et de 80% la fréquentation du site lui procurant une augmentation de revenus de plus de 490%. (Nogier, J.F; Leclerc, J. (2016)).

Mais qu’est-ce que l’ergonomie pour le web?

L’ergonomie correspond à l’analyse et à la compréhension des habitudes et réactions humaines, dans un contexte donné, en vue d’en améliorer l’expérience et la productivité. Un objet ergonomique est commode à l’utilisateur et lui permet d’être productif. Par exemple, le tableau de bord d’une voiture est spécifiquement pensé pour permettre au conducteur d’accéder facilement à toutes les fonctionnalités dont il a besoin pour manœuvrer et avoir une bonne visibilité sur son environnement.

Sur le web, un site ergonomique est suffisamment intuitif et simple d’utilisation pour que l’internaute y trouve aisément une information, valide un panier, lise un article, s’inscrive à un évènement, remplisse un formulaire de contact… Un site efficace passe avant tout par une interface bien pensée en fonction du profil et des besoin d’un usager.

Comment penser et améliorer l’ergonomie de son site internet ?

1. Organiser l’information pour faire simple, utile et intuitif

  • Préparer votre arborescence et l’architecture de votre communication en amont
  • Débarrasser votre site internet des fonctionnalités qui l’encombrent inutilement en vous basant sur l’analyse de l’expérience utilisateur ;
  • Proposer une navigation fluide, bien présenter chaque élément via des fiches produits par exemple et mettre en évidence les éléments d’action pour pousser à l’achat (boutons, calls to action, …);
  • Respecter les standards et s’inspirer d’autres sites de votre secteur d’activité. Veiller à la disposition de vos éléments pour que le visiteur ne se perde pas sur votre site :Le compte et panier client sont situés généralement en haut à droite. Le langage HTML est plus pertinent pour le référencement que les images. Ne pas se limiter à du texte. Préférer la qualité à la quantité ;
  • Être clair, à chaque étape, pour ne pas perdre l’acheteur ou usager en route, d’une étape à l’autre, que ce soit dans l’action de payer ou de tout simplement de s’inscrire ;
  • Envisager chaque page sur laquelle peut atterrir un internaute comme une potentielle page d’arrivée ;
  • Éviter à l’internaute de se répéter (en conservant ses données d’un formulaire à un autre, ou en gardant un historique de ses recherches…);
  • Prévoir les erreurs les plus courantes : (ex : mauvaise orthographe sur un moteur de recherche) pour indiquer au visiteur ses erreurs (ex: mauvaise répétition de password…);
  • Proposer une sécurité adéquate à votre visiteur tout au long de son parcours d’achat.

Si Airbnb a réussi à se faire adopter par une aussi grande proportion de la planète c’est grâce au design impeccable et à l’ergonomie extrêmement intuitive de son site :

En misant sur des fonctionnalités permettant de voir et confirmer le sérieux des hôtes et des voyageurs (notation par étoile avec témoignage, photo pro, visite du staff Airbnb, assurances…) le groupe a réussi à faire oublier toute notion de danger ;

Le site propose un tunnel d’achat simple, intuitif et sécurisé ;

L’interface de recherche Airbnb avec son écran partagé et sa carte interactive est maintenant devenue une norme en termes d’ergonomie reprise sur la plupart des grands portails sur internet.

airbnb - interface à écran partagé érgonomique

Page de recherche Airbnb – Exemple d’interface ergonomique

Le parcours de l’internaute est facilité par un grand nombre de suggestions et d’appels à l’action pertinents : recommandations thématiques, suggestions, recherche avancée….

2. Limiter le nombre de clics

  • Éviter les pages dites « tunnels » qui obligent le visiteur à utiliser un long chemin pour arriver à l’information recherchée. Il faut que le visiteur ait à accomplir le moins d’actions possibles.
  • Préférer l’action « scroller » plutôt que l’action « cliquer » qui nécessite l’ouverture d’une nouvelle page. Donc favoriser les pages longues plutôt que la division en plusieurs sous-pages (à moins qu’il y ait un vrai enjeu de référencement qui implique cette séparation).
  • Utiliser des « ancres » et des rappels / suggestions de liens pour favoriser la navigation au sein des pages ou du site.

Précurseur en la matière, Amazon introduit en 1999 sur son site la méthode de paiement en un clic pour permettre aux internautes de commander un produit en un clic avec les résultats fulgurants que l’on connait. Leur brevet tombera dans le domaine public dans le courant 2017.

Bouton ergonomique

Exemple d’ergonomie :Bouton Achat en 1 clic sur le site Amazon.com afin de faciliter le tunnel d’achat

 

3. Tenir compte du format de lecture sur écran

  • La lecture d’un site se fait de plus en plus au travers d’un smartphone. Les internautes deviennent mobinautes. Adapter un site pour ce type d’expérience est devenu capital. L’écran s’est réduit, utiliser un « design responsive », permet de s’adapter à toute taille de support.
  • Suivre les normes de lecture via un écran : Les contenus prioritaires en haut, gauche et haut milieu de pages sont peu regardés car considérés comme des espaces publicitaires de bannières.
  • Éviter tout ce qui peut rendre la lecture sur écran compliquée :
    • Hiérarchiser les pages et limiter le scrollingsans fin ;
    • Favoriser les fonds clairs pour alléger et fluidifier la lecture ;
    • Choisir une police lisible de taille minimum 12. Opter pour une charte graphique cohérente, en raccord avec votre logo par exemple ;
    • Éviter le rouge qui renvoie à une notion d’erreur ou d’agressivité ;
    • Différencier les liens cliquables des autres grâce au Rollover par exemple. Différencier liens internes (qui renvoient vers votre site) des liens externes (qui font quitter le site ou ouvrir une nouvelle page indépendante de votre site) ;
  • Tenir compte du fait que les internautes ne lisent jamais ou presque une page dans sa totalité. Voilà pourquoi hiérarchiser sous-titré les paragraphes est important. Utiliser aussi des puces ou boutons. Favoriser des textes et titres concis.
  • Limiter le poids des pages :Gtmetrix permet d’analyser le site et corriger les problèmes de lecture.
Exemple de manœuvres possible sur une interface tactile

Un format mobile et tactile implique une réflexion plus avancée sur la définition de l’ergonomie et de l’expérience

 

 

4. Proposer un site universel et attrayant

  • Votre site doit s’adapter à tout type de visiteurs : il doit être lisible et cohérent de tous, répondre à leurs questions habituelles (quelle est cette société ? que fait-elle ?, quelles sont ses références ?, ou puis je la contacter ?) et multiplier les formats de contenu (texte, vidéo, image, graphique).
  • Travailler le design est capital : par le visuel, la cohérence graphique, le respect d’un thème. Eviter de trop charger une page, faciliter la compréhension visuelle de l’ensemble de la page d’un coup d’œil. Inutile de perdre un utilisateur avec des encarts dans tous les sens, de trop nombreux clics ou des pages qui n’en finissent pas. Il faut aller à l’essentiel de manière simple, alléger au maximum.
  • Soigner les visuels mais sans qu’ils prennent le dessus sur les » boutons d’action » qui doivent quant à eux rester visibles et sauter aux yeux de l’utilisateur ;
  • Eviter les musiques de fond sauf si votre site est une page de publicité ou de radio ;
  • Votre site doit être cohérent et identifiable. Il doit répondre à une vision, une ambiance, un univers. Fabriquer un logo, un slogan, constituer une charte graphique, un son peut-être ? Utiliser des formulations et un ton en adéquation, ne pas négliger le choix de la typographie. Tous ces détails sont capitaux pour conférer une identité visuellement reconnaissable.

5. Analyser l’expérience utilisateur pour adapter votre site

Google met à disposition des webmasters un service gratuit d’outils d’analyse d’indexation afin d’optimiser le référencement d’un site. La Webmastertool fournit un nombre important d’informations capitales pour l’élaboration ergonomique de son site web en réponse aux données recueillies. Il permet par exemple de tester l’affichage de son site sur différents formats, de connaitre les statistiques de visites du site au jour le jour, de demander des suggestions d’amélioration HTML et des rapports d’erreurs concernant son site, etc.

Les outils Google Analytics  vous permettent par ailleurs d’analyser différents paramètres tels que les :

  • Taux de rebond : pourcentage de visiteurs qui ont consulté uniquement la page d’arrivée ;
  • Temps de séjour sur le site :  temps moyen passé par les utilisateurs sur votre site ;
  • Pages de sorties :pages qui ont indisposé les usagers et les ont incité à quitter le site ;
  • Entonnoir de conversion : série de pages empruntées par un visiteur avant d’accéder à son objectif.

 

Quelques notions et astuces en termes d’ergonomie de site

  • Le menu Hamburger : Souvent méconnu des usagers, c’est le bouton carré à l’intérieur duquel trois barres horizontales se superposent et qui constitue le lien renvoyant au menu du site ou application. Y rajouter le libellé fera considérablement augmenter les interactions (environ 61% selon Moovweb). Ce menu hamburger génère en général un taux de clic de 20% exponentiel avec l’insertion du simple mot Menu.
menu à développer

Ergonomie : Exemple d’un menu hamburger

  • The three-clicks rule ou règle des trois clics: ou comment permettre à l’utilisateur de trouver ce qu’il est venu chercher sur votre site en moins de trois clics. Cette règle limitera la frustration et la perte d’usagers.
  • Le Test A/B ou A/B Testingil s’agit d’un technique marketing utilisée afin de déterminer quelle version, A ou B, est la plus efficace et génère le plus d’intérêt. L’exemple le plus représentatif et connu est celui de la campagne présidentielle de Barack Obama.
  • Le call to action ou CTA: méthode consistant à faire agir l’utilisateur. Littéralement il s’agit d’un appel à l’action. C’est le plus souvent un bouton et donc lien cliquable qui se détache visuellement de l’ensemble de la page. Suffisamment gros, centré et visible sans avoir à scroller ou qui apparaitra en tête et en bas de page, il contiendra une phrase à l’impératif (ou mot) qui incite à une action immédiate.

    appel à action

    Ergonomie : Exemple d’un bouton call-to-action (appel à l’action)

  • Hover effects ou Rollover effet : principe qui consiste à modifier l’apparence d’un élément dès lors que la souris le survole : taille, couleur, mouvement, etc. Ceci aurait pour effet un taux de clics supérieur mais aussi la prise de conscience d’une zone cliquable.
Exemple d'un hover effect

Exemple d’un hover effect

  • La ligne de flottaison : c’est la ligne imaginaire qui sépare la partie visible à l’atterrissage de la partie invisible, accessible seulement par défilement. Il est primordial d’accrocher l’internaute immédiatement et de l’inciter à en voir plus sous cette ligne de flottaison. A moins bien sûr de pouvoir concentrer tout de suite des éléments incitant à la conversation au-dessus de cette ligne, ce qui est encore mieux.

 

Exemple d'une ligne de flottaison sur wireframe

Exemple d’une ligne de flottaison sur wireframe Source

Pour aller plus loin :

  • Le site Goodui.org est une référence pour améliorer les performances de votre site depuis une approche graphique et ergonomique : statistiques à l’appui, le site regorge de bons conseils pour agencer votre site ;
  • Demandez vous pourquoi certains sites vous semblent particulièrement ergonomiques, au contraire d’autres. Les étudier vous donnera des éléments clef pour améliorer votre propre site ;
  • Sollicitez l’avis de vos proches et de vos employés pour améliorer l’existant ; un petit brainstorming peut se révéler fort utile ;
  • Et bien sûr un dernier conseil : mettez en pratique sans attendre les idées que vous puisez sur internet il n’y a pas de meilleure méthode qu’empirique !

L’étude de l’ergonomie est un passage, certes indispensable mais fort rentable, lors de la création ou de la refonte d’un site. N’hésitez pas à vous faire accompagner de professionnels de l’UX (user expérience) ou de votre agence web pour vous aider à optimiser et améliorer votre site selon vos critères et vos objectifs.

 

Sources :

  • Van Laethem, N. Boyé, M. A. March, V. Schipounoff, N. (2015) Les fiches outils du webmarketing. Broché
  • Nogier, J-F. Leclerc, J. (2016) UX Design et ergonomie des interfaces – 6e éd. Broché

 

 

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer