Editorial Web Webdesign — 29 janvier 2014 — 6 commentaires
Comment améliorer l’ergonomie de votre site web

Vous connaissez tous le split-testing, ou « AB testing ». C’est une approche quantitative intéressante, qui a le mérite de fournir des éléments d’évaluation chiffrés donc objectifs (Exemple : « après modification des codes-couleur on constate une augmentation de + 7,54% de clics sur le bouton ‘ajouter au panier’, c’est donc qu’il est plus visible et / ou incite davantage au clic »). Sauf que le split-testing, ça prend du temps. Et parfois, surtout lorsqu’on travaille pour une jeune start-up, on n’a pas le temps de mettre du Biactol électronique sur chacun des « boutons » (aux deux sens du terme) de son site pré-pubère. Il y aurait tellement de choses à faire…

Dans ce cas, on aura recours à des témoignages d’utilisateurs, qui permettront de recueillir des informations de nature différente, plus « qualitatives » :

  • « je trouve que la couleur de ce bouton ne s’intègre pas bien à la charte graphique de votre site » ;
  • « je pense que cet élément se trouve trop bas dans la page et n’est pas assez mis en valeur » ;
  • etc…

Sachez que l’utilisateur a toujours raison et que les « mauvaises réponses » n’existent pas. C’est un peu comme le doyen d’une ancienne famille corse, au visage buriné et à la sensibilité exacerbée : ne le contredisez pas  ;-)

La page d’accueil

Exemples de retours d’utilisateurs concernant la page d’accueil de TonPsy.fr:

  • Votre site est visuellement trop chargé ;
  • Votre site n’est pas responsive (= redimensionnable sur différentes interfaces) ;
  • La barre de langue (qui était originellement en bas de page) ressemble trop à un footer (ce qui pose un gros problème car beaucoup de contenu se trouve en dessous de la ligne de flottaison) ;
  • La navigation principale (menu du haut) comporte trop d’occurrences. A ce titre, sachez que la mémoire à court terme d’une personne lambda peut en moyenne retenir 5 items, avec des variations de + ou – 2 selon les personnes. Inutile donc de surcharger vos menus : si l’internaute hésite et ne sait pas où cliquer, arrivé au dernier item, il ne se souviendra pas du premier, et devra donc recommencer la lecture au début.

Voici donc à quoi le site ressemblait en octobre 2012 (j’en profite pour vous faire découvrir un site qui peut vraiment vous servir pour vos optimisations design, ou si vous devez faire une rétrospective à des fins pédagogiques : web.archive.org :

ancienne page d'accueil de TonPsy.fr

A l’heure où j’écris ces lignes, le site ressemble à cela :

page d'accueil d'un site de consultation de psy en ligne, TonPsy.fr

Comme vous pouvez le voir, nous avons amélioré de nombreuses choses (en peu de temps et souvent simultanément, ce qui nous aurait été impossible avec une démarche incrémentale comme celle du split-testing).

  • Nous avons diminué la hauteur du header, qui occupait une place trop importante et obligeait à scroller ;
  • Nous avons rajouté des visages afin d’humaniser le site : celui d’un psychologue, celui d’un patient, et enfin celui de la personne en charge du support (en bas à droite) ;
  • Nous avons remplacé le bouton « consulter notre blog » par « je prends un rendez-vous », car il s’agit de ce vers quoi nous voulons mener nos visiteurs. Nous avons conservé le blog, mais nous ne le mettons plus en avant, car ce n’est pas une priorité.

Le bouton like Facebook : less is more ?

bouton-facebook-tonpsyConcernant nos comptes sur les réseaux sociaux, nous avions opté originellement pour la possibilité de liker la page facebook directement sur les pages du site. Les internautes aiment généralement faire le moins d’efforts possible, il semblait donc opportun de leur permettre de liker en un seul clic, en non en 2 clics (un clic pour se rendre sur la page facebook et un clic pour liker). « Semblait », car en réalité c’était une fausse-bonne idée.

Nous avons finalement retiré ce dispositif car il impliquait une communication avec les serveurs de Facebook, et allongeait donc  considérablement le temps de chargement de la page.

 

Un “How to”

didacticiel de tonpsy, site de consultation de psy en ligne

Nous vous recommandons vivement d’afficher un petit “how to” sur votre site. Cela attire l’œil et montre que votre site est simple d’utilisation (même s’il l’est, si vous ne le dites pas, personne ne peut le savoir…)

Le choix du mode de paiement

Le choix du mode de paiement est un point que nous vous conseillons vivement de travailler. Méfiez-vous de Paypal, qui propose en premier lieu de régler avec un compte paypal et non par carte bancaire (même si les 2 sont permis par leur système) : vous pourriez perdre des internautes qui n’ont pas de compte paypal et qui croient cela nécessaire pour finaliser la commande.

Paiement psy en ligne : TonPsy

Vous pouvez utiliser la solution de paiement Stripe, qui est gratuite et, comme vous pouvez le voir, épurée à son maximum.

Si vous vendez des biens électroniques, vous n’avez pas besoin de recueillir une adresse postale, ou même un nom de famille. Pensez-y : le data mining n’est pas une obligation ! Vous gagnerez en fluidité au moment de l’inscription et / ou du paiement, vous convertirez donc davantage.

L’importance du contexte

Gardez à l’esprit que les visiteurs de votre site sont arrivés sur celui-ci par des sources différentes, via un user flow différent, et un niveau d’engagement différent . Il est donc important de leur présenter des contenus différents. Ainsi nous avons deux boutons comportant des incentives différents :

  • le premier (en bleu, en bas à droite), pour les internautes qui se trouvent sur le blog ou sur la page d’accueil, est “contact -orientation” : en effet, on part du principe qu’ils ont besoin de réponses à des questions d’ordre plutôt général.

support-psy

  • Le second (en orange, sur le côté droit), pour les internautes qui sont déjà en train de consulter la liste des psys ou le profil d’un thérapeute en particulier, et qui sont donc situés à un niveau plus avancé dans l’escalade à l’engagement, est plus frontal : “Quel psy choisir ?”

quel-psy-choisir

 

Il est tout à fait possible qu’un internaute arrive en premier sur le blog et voit donc le premier bouton bleu en bas, puis se dirige vers la liste des thérapeutes. Le risque est alors qu’il ne voit pas le 2ème bouton, si on l’affiche au même endroit et de la même couleur. Or nous voulons lui rappeler que nous sommes là pour le conseiller : pour donner un maximum de visibilité à ce second bouton, nous avons donc choisi d’en changer le format.

Dans cet article j’ai cherché à partager des exemples aussi variés et originaux que possible, car il me semblait important de vous faire percevoir les possibilités et la puissance des tests d’ergonomie (et ce n’est qu’un début, il y aurait encore de très nombreuses choses à ajouter). Plus riches que les données issues du split-testing, les informations provenant du feedback utilisateur constituent donc une approche complémentaire dont on aurait tort de se priver !

Articles recommandés

L'auteur

Yoann Hervouet

Yoann est formateur en référencement naturel et en webmarketing. Il est également co-fondateur et directeur de la communication de tonpsy.fr (relations presse, marketing direct, partenariats, publicités...)

 


6 Commentaires

  1. Article plutôt intéressant ! Merci.

  2. Pour compléter votre article, je dirai que si l’AB testing vous permet de tester deux solutions, il ne vous apprend pas quoi tester.
    Les solutions de tracking de mouvement de souris sur les pages de votre site vous permettent de bien vous rendre compte du comportement des internautes. Je plussoie votre idée de demander l’avis des internautes, soit par du feedback, soit en interrogeant un panel d’utilisateurs.
    En croisant les données issues de la navigation et les données de perception, vous pourrez avoir un état précis des améliorations à AB Tester sur votre site.

  3. Je rejoins Baguet pour l’A/B testing. Sans tracking impossible de savoir quelle configuration fonctionne le mieux.

  4. Qu’est ce qu’un « How to » ?

  5. @Charlotte : un « How to » c’est un mode d’emploi visuel et simplifié. D’ailleurs vous pouvez l’appeler « mode d’emploi » (c’est moins sexy mais ça peut être beaucoup mieux selon la cible)

  6. Tout à fait d’accord avec vos préconisations et notamment avec la recommandation d’apporter une dimension humaine aux sites. C’est très important pour un site relevant du domaine de la psychologie, où le contact humain est au coeur du métier.

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>