Pendant longtemps, le Webdesign, en France tout au moins, s’est résumé à la conception d’interface visuelle sous la forme de planches statiques et non reliées entre elles.
Depuis quelques années, l’étude approfondie de l’expérience utilisateur a permis de déceler les comportements réels des internautes et leurs interactions avec les interfaces digitales.
Jusqu’alors les retours étaient mesurés en terme de satisfaction client récoltée via des formulaire Web ou papier, des échanges informels …
Les outils permettent de mesurer le comportement réel des utilisateurs, que ce soit par :
- Les données de trafic, les pages visitées, avec quels mots-clés (comme avec Google Analytics),
- Les clics effectués avec la souris (ou avec votre doigt),
- Le scroll sur les pages,
- L’eye tracking (capturer les mouvements de l’œil face à un écran et le temps passé sur une zone)
- L’ensemble de ces outils d’analyse de l’ergonomie a permis d’apporter de précieux renseignements pour établir des stratégies de communication efficaces basées sur une analyse factuelle et moins intuitive, ou pire, liée à des effets de mode.
Les conclusions apportées dans cet article sont pragmatiques, basées sur les analyses de comportement réel et majoritaire. Je suis moi même parfois surpris, voire même déçu mais… l’utilisateur est roi.
Quels sont les constats apportés par l’user experience pour 2015 ?
Le temps d’attente
L’utilisateur est de plus en plus impatient, pourtant les utilisateurs en 3G / WiFi sont de plus en plus nombreux.
Pour Amazon, leader du e-commerce, chaque 0.1 sec de chargement supplémentaire (au delà de 3 secondes) réduit son chiffre d’affaire de 1%.
Le e-commerce n’est pas le seul a être impacté, tout site de transformation (landing page notamment) enregistrent de fortes baisses quand elles dépassent les 5 secondes d’attente. Pis, l’image de l’entreprise est dégradée et l’utilisateur va chez un concurrent.
Sachant que vous avez peut être payé une campagne Adwords, votre concurrent ne peut que vous remercier …
Google est en train de tester un indicateur qui annoncera les sites lents, sachant qu’il les pénalise dans les classements.
Donc en conclusion. Pensez aux basses connections, des sites légers, bien codés (CDN, Lazyload, etc.) pour ne pas perdre des visiteurs, être pénalisé par Google et donc perdre de l’argent.
Le sens de lecture
Grâce au Eye tracking (suivi des mouvements oculaires par caméra) nous apprenons que dans la majorité des cas, l’œil lit une page Web en formant un F (et un Z sur un format papier).
Les informations clés doivent donc se trouver en haut à gauche. Mais toujours à gauche pour les informations clés.
La présence d’une colonne a droite sur les sites est donc légitime si elle contient des informations visant à renforcer le contenu de gauche et dont le titre a été placé en haut et à gauche.
Par conséquent : Le titre de la page doit être à gauche, haut sur l’écran. Le fil d’Ariane également. Une navigation secondaire, des informations complémentaires elles peuvent être placées à droite.
La navigation
Elle doit être simple et intuitive. Fini les menus très chargés avec de nombreux liens rapprochés où dont les effets ne se déclenchent qu’au pixel près. Des menus aérés, avec des effets au survol identifiables.
Le mobile, où l’effet de survol n’existe pas et dont les liens sont difficiles cliquable avec votre doigt.
La surface étant réduite, il faut donc éviter les menus avec un trop grand nombre de liens, privilégiez le parcours naturel de l’utilisateur, comme s’il entrait dans un magasin. S’il a un besoin précis, la barre de recherche en champ libre est là pour ça. Sinon organisez la structure en grandes catégories.
En conclusion : moins de liens, plus de chances de clic.
La page d’accueil
Enjeu majeur de l’efficacité d’un site Internet, la page d’accueil doit être conviviale, immerger l’utilisateur dans l’univers de la marque.
Elle doit être riche en Call to action. Le site Internet n’est pas une plaquette papier que l’on distribue, c’est un outil marketing qui doit performer. A minima, tout site web a pour but de générer des prospects, de rassurer, de convaincre voire de faire acheter.
En conclusion : Son chargement est primordial et les informations clés doivent se trouver dans la zone above the fold. C’est à dire, dans la zone visible lorsque l’internaute arrive. S’il doit cliquer pour faire apparaître le contenu ou scroller, il part tout simplement dans 50% des cas.
Les images, l’iconographie et les illustrations
Les images ont pour but de renforcer l’information, elles ne constituent pas l’information. Les utilisateurs ont besoin de contenu textuel pour être convaincus.
Leur rôle est de mettre en valeur le contenu, pas l’inverse.
Le texte embarqué dans une image est néfaste :
- en zoomant, le texte perd en lisibilité (pixellisation),
- il est n’est pas traduisible par les logiciels ou les applications,
- et l’image a un poids et sera donc plus longue à charger et laissera une zone vide ou forcera l’utilisateur a patienter (Pensez aux utilisateurs en WiFi ou en 3G !)
Un Call to action sur une image a un très faible taux de clic. D’une part elle n’informe pas du lien qu’elle contient (et il n’y a pas d’effet survol sur les écrans tactiles), et d’autre part, force est de constater que son occupation d’espace est très largement supérieure à son importance.
Un bouton reste un bouton et appelle naturellement au clic.
Elles augmentent le temps de chargement et donc l’attente, même en lazyload, l’image n’étant pas chargée immédiatement l’utilisateur doit attendre si elle contient une information.
Pour chaque image il faut donc se demander quel est son intérêt ? Est-elle vraiment utile ?
Si les images sont décoratives, elles ne doivent pas distraire. L’Eye tracking révèle très bien cela.
En conclusion : Les images attirent le regard mais pas les clics. Elles risquent de distraire et de ne plus servir la cause initiale : conduire l’internaute vers vos formulaires.
Le site n’est pas une salle d’attente, l’internaute doit être actif et non dans l’expectative.
Autre conclusion qui peut paraître paradoxale, un article partagé sur un réseau social a plus de chance d’être cliqué s’il contient une image. Mais c’est le texte qui est cliqué.
Les carrousels ou slideshows
Ils occupent un espace visuel important (parfois 60% d’une page) et attirent le regard avec leur animation. Souvent ils n’ont aucun call to action.
Quand il y a un call to action clairement visible, le taux de clic est de… 1% sinon, c’est inférieur.
L’animation (quelques ko de javascript) n’a aucune incidence sur le taux de clic, les effets de type nivoslider sont jolis mais sans effet d’ergonomie ni d’incitation à l’action.
Votre site est-il un port-folio à feuilleter ? Sinon est-ce que 60% d’espace visuel, et des ko supplémentaires (donc un temps de chargement supérieur et les désagréments qui vont avec) vaut-il 1% de clic ?
En conclusion : oubliez les sliders. Ou alors pas sur l’accueil ou dans le contenu principal et si oui laissez l’internaute être actif.
Les dates
Afficher la date de création et/ou de modification sur une publication (article, produit, page) est un signal positif.
En effet cette information riche indique à l’internaute la fraîcheur du contenu et donc sa fiabilité. Quel crédit accorderiez-vous à cet article dans 5 ans si la date n’était pas affichée en haut sous le titre ?
De plus, si votre site a un balisage microdatas (ou RDFa), cette information sera visible dans le résultat de recherche de Google.
Si votre site contient des informations peu souvent mises à jour, alors oui vous pouvez les masquer. Mais la meilleure démarche est de mettre à jour vos contenus.
Votre entreprise évolue, vos services s’améliorent ? Ecrivez-le sur votre site.
Le nom de l’auteur et/ou un lien vers son profil et ses réseaux sociaux
Tout comme la date, il a un impact direct sur la fiabilité de l’information. Si vous lisez une publication dont je suis l’auteur sur un sujet d’économie ou un article de Jean Tirole, auquel des deux accorderiez-vous le plus de crédit ? J’espère pas à moi… Les internautes doivent être rassurés.
Les interactions au survol
Vous avez vu très certainement ces images qui laissent placent à un bouton et du texte quand vous passez la souris dessus ?
Si vous bougez la souris pour lire le reste du texte, l’information disparaît à nouveau. Et si vous utilisez un mobile ?
La conclusion coule de source : c’est totalement inutilisable, très joli mais ça ne suffit pas.
Les menus en font parti également. Comme les résolutions des écrans de mobiles et de tablettes sont parfois plus élevées qu’un ordinateur portable, il faut penser mobile. Donc mettre un déclencheur au clic et non au survol.
Les popins et popups automatiques
Les fenêtres publicitaires, les abonnements à des newsletters ou à vous suivre sur un réseau social qui s’affichent dans un popin…
Je vais être sec, et cette information m’enchante en tant qu’internaute : à bannir.
Les popups eux n’en parlons pas, vu que les navigateurs les bloquent automatiquement par défaut.
Au lieu d’utiliser un popin pour forcer les visiteurs à s’inscrire, donnez leur des raisons réelles de le faire. Les bonnes âmes qui céderont à votre vente forcée mettrons votre newsletter en spam juste pour être tranquille au lieu de vous lire.
En conclusion, le popin doit impérativement être déclenché par une action volontaire de l’internaute.
Les animations CSS3 / Javascript
Les effets visuels et les animations du contenu attirent le regard.
En se demandant simplement, combien ai-je d’informations clés dans ma page, vous obtenez la bonne réponse.
En conclusion : sobriété, pas plus d’effets que d’éléments importants, le but est de capter l’attention pour que le visiteur tombe dans votre toile, surtout pas de le disperser.
La vidéo / bande son en déclenchement automatique
Votre internaute a-t-il vos goûts musicaux ? Est-il dans cet état d’esprit au moment où il visite votre site ? N’est-il pas déjà en train d’écouter autre chose ?
La réponse est évidente : les internautes détestent ça, et ne s’attendent pas à tomber sur une radio !
Les articles trop longs
Ils doivent être scindés par un plan efficace quand ils abordent plusieurs problématiques.
Ça peut paraître très scolaire mais ça marche tout simplement. En plus, Google vous récompense parce qu’il indexera 2 pages avec chacune un contenu unique et à forte valeur ajouté plutôt qu’un article trop générique.
En parfait contre-exemple, cet article pourrait être scindé, mais au final, je vous ai compilé les conclusions illustrées de ce qui est réellement efficace en terme d’expérience utilisateur.
En conclusion
Cet article est une introduction, il démontre que l’Internet s’est structuré et que l’on ne peut plus penser uniquement espace visuel. La diversité des supports, leur dimension, les attentes des utilisateurs imposent des choix qui vont bien au delà de l’aspect graphique seul.
Pensez à l’utilisateur, pensez mobile first sans perdre de vue l’objectif réel de votre site.
Bref, vous vous demandez encore quel est l’intérêt réel d’une animation et si vous devez l’utiliser ? Consultez-nous.