Conversion Rate Optimization
Optimisation du Taux de Conversion de vos SItes

Réduction de la charge cognitive par divulgation progressive

Une explication de « I made tea », révélée couche par couche, finit par s'étendre à soixante-six fois sa taille initiale

Le problème observé

Une place de marché de voyage en ligne affichait, à côté du contenu principal de chaque page produit, un widget de réservation censé résumer la sélection du visiteur. En pratique, les testeurs alternaient constamment entre le contenu principal et ce widget, une bascule d'attention qui divisait leur concentration plutôt que de les aider à décider.

La solution testée

Le widget a été transformé en résumé compact, replié par défaut en quatre sections (Travel Details, Transfer, Hotels, Tours), chacune ouvrable individuellement. Chaque section a reçu un lien d'édition direct, et cliquer sur une section du widget fait défiler la page principale jusqu'au contenu correspondant, transformant la barre latérale en outil de navigation plutôt qu'en second flux d'informations à suivre en parallèle.

Résultat

La variation a produit une hausse de 41 % des conversions.

Révéler la valeur au moment où elle se pose

La divulgation progressive ne sert pas seulement à cacher un excès d'information : elle sert aussi à révéler une information manquante exactement quand elle devient utile. Un service de captures d'écran d'applications signalait ses fonctionnalités payantes par un simple badge « Pro », sans expliquer ce qu'elles apportaient : un visiteur intéressé devait interrompre sa recherche pour aller chercher la réponse sur une page de tarification séparée. Ajouter une info-bulle déclenchée au survol ou au clic du badge, avec une image de démonstration, une explication du bénéfice et un bouton de mise à niveau, a permis de répondre à la question exactement au moment où elle se posait, sans faire quitter la page. Le résultat a été une hausse de 9 % des abonnements payants, avec un taux de déclenchement de l'info-bulle (21 % des visiteurs) supérieur aux attentes de l'agence, signe que l'information était activement recherchée à cet instant précis.

Le mécanisme

Réduire la quantité d'informations visibles simultanément ne retire rien au visiteur : chaque donnée reste accessible en un clic. Ce qui change, c'est la capacité mentale laissée disponible pour la décision elle-même plutôt que pour la simple gestion de l'affichage. La logique rejoint celle des autres cas de surcharge documentés dans le corpus, où un excès d'options ou d'informations simultanées, plutôt qu'un déficit d'information, freine la décision.

Un exemple ludique pour saisir le principe d'un coup d'œil

Le designer Joe Davis illustre le principe de façon volontairement absurde avec « I made tea » : une explication qui, révélée couche par couche, finit par s'étendre à environ soixante-six fois sa taille initiale. L'exagération rend visible ce que la divulgation progressive fait discrètement sur un site sérieux — chaque couche supplémentaire n'apparaît que si le lecteur choisit explicitement de l'ouvrir, jamais imposée d'emblée.

Application pratique

Face à un module qui affiche beaucoup d'informations en permanence (un résumé de commande, un comparateur, un configurateur), la question à poser est de savoir combien de ces informations sont réellement nécessaires au moment où le visiteur les regarde pour la première fois, et lesquelles peuvent rester repliées jusqu'à ce qu'il choisisse explicitement de les consulter.

Les briques élémentaires d'un élément de divulgation progressive

Construire un élément de divulgation progressive revient à combiner quatre choix indépendants. D'abord, le signal indiquant que davantage d'information peut être révélée : une flèche, un triangle ou un chevron ; un texte à l'apparence de lien ; une icône (+, ? ou i) ; une loupe (zoom ou champ de recherche selon le contexte) ; l'absence totale de signal, si l'on ne cherche pas activement à ce que le visiteur découvre l'information ; ou un élément visuellement coupé net (une photo partiellement visible, par exemple), que le visiteur devine à juste titre prolongeable.

Ensuite, le déclencheur qui fait apparaître l'information : le clic (quand on ne veut la montrer qu'aux visiteurs suffisamment motivés) ; le glissement tactile façon carrousel (utile pour beaucoup de contenu sans désorienter le visiteur, à l'image de Google Maps, idéalement complété par des flèches cliquables) ; le survol (quand on souhaite au contraire que l'information soit vue, sachant que les écrans tactiles ne le permettent pas et imposent alors le clic) ; le défilement jusqu'à une certaine distance ; l'intention de sortie, détectée quand le curseur quitte la zone de la page ; ou, à l'inverse d'une divulgation classique, une apparition spontanée au chargement puis une disparition (notifications de Booking.com, enquêtes sur page de Qualaroo réductibles par un bouton).

Puis le format dans lequel l'information apparaît : une page séparée (si l'on n'est pas pressé de voir le visiteur revenir à la page d'origine) ; une fenêtre superposée, souvent efficace pour ne pas distraire du tunnel de conversion ; un carrousel, pratique pour beaucoup d'information similaire ; une info-bulle, adaptée aux petites quantités d'information mais parfois délicate en bord d'écran ; ou une expansion au sein même de la page (comme les boutons « Lire la suite » d'Amazon), particulièrement utile quand l'information n'a pas besoin d'être remasquée et que son affichage ne perturbe pas la mise en page.

Enfin, le mécanisme qui referme l'information : la disparition à la fin du survol (à utiliser selon que les visiteurs ont plus de mal à maintenir le survol ou à fermer un grand élément — le survol ne s'appliquant de toute façon pas aux écrans tactiles) ; un clic sur une icône de fermeture, souvent la meilleure option ; un clic en dehors de l'élément, pratique mais peu découvrable, donc à combiner avec une icône de fermeture visible ; une disparition spontanée après un délai, pour les informations apparues elles-mêmes spontanément ; ou l'arrêt de l'action qui avait déclenché l'affichage. Sur SimpliSafe, société de sécurité domestique dont les visiteurs ont besoin de beaucoup de conseils pour l'auto-installation, l'agence a masqué une grande quantité d'information derrière de simples signes « + », dans le cadre d'un programme ayant multiplié le revenu par plus de cinq.

Quand la divulgation progressive ne suffit pas : les solutions de repli

Même la meilleure architecture d'information laisse parfois un visiteur incapable de trouver ce qu'il cherche. Quatre solutions de repli restent alors disponibles, chacune avec ses limites propres. Un champ de recherche aide à retrouver l'information, au prix d'une téléportation vers une autre partie du site où le visiteur perd souvent ses repères — examiner régulièrement les journaux de recherche révèle typiquement que l'information cherchée n'était pas là où les visiteurs l'attendaient. Une base de connaissances aide de la même façon, avec la même limite de perte de repère dans le tunnel de conversion. Le live chat permet à un opérateur de trouver ce que le visiteur ne trouve pas seul, sa viabilité économique dépendant du modèle d'affaires plutôt que des seules préférences de l'équipe support. Un numéro de téléphone bien visible convertit remarquablement bien pour les visiteurs prêts à décrocher, mais ne passe pas à l'échelle aussi facilement qu'un site conçu pour faire l'essentiel du travail lui-même — d'où l'intérêt de traiter les solutions de repli comme un filet de sécurité, non comme un substitut à une bonne architecture de l'information.

FAQ

Pourquoi empiler trop d'informations en même temps ralentit-il une décision, même si rien n'est réellement caché ? Parce que réduire la quantité d'informations visibles simultanément ne retire rien au visiteur — chaque donnée reste accessible en un clic. Ce qui change, c'est la capacité mentale laissée disponible pour la décision elle-même plutôt que pour la simple gestion de l'affichage.

Comment la transformation d'un widget de réservation en résumé compact replié a-t-elle produit une hausse de 41 % des conversions ? Les testeurs alternaient constamment entre le contenu principal et le widget de réservation, une bascule d'attention qui divisait leur concentration. Le replier par défaut en quatre sections ouvrables individuellement, avec un lien d'édition direct par section, a transformé la barre latérale en outil de navigation plutôt qu'en second flux d'informations à suivre en parallèle.

Comment une info-bulle déclenchée au survol d'un badge « Pro » a-t-elle amélioré les abonnements payants ? Le badge signalait une fonctionnalité payante sans expliquer ce qu'elle apportait, obligeant le visiteur intéressé à quitter la page pour chercher la réponse ailleurs. Ajouter une info-bulle avec une image de démonstration, une explication du bénéfice et un bouton de mise à niveau a répondu à la question exactement au moment où elle se posait, produisant une hausse de 9 % des abonnements.

Qu'est-ce que le mécanisme réel derrière la divulgation progressive, si l'information reste toujours accessible ? Le mécanisme ne consiste pas à retirer de l'information, mais à libérer de la capacité mentale pour la décision elle-même. La logique rejoint celle des autres cas de surcharge documentés dans le corpus, où un excès d'options ou d'informations simultanées, plutôt qu'un déficit d'information, freine la décision.

Comment l'exemple « I made tea » de Joe Davis illustre-t-il le principe de façon volontairement absurde ? Cette explication, révélée couche par couche, finit par s'étendre à environ soixante-six fois sa taille initiale. L'exagération rend visible ce que la divulgation progressive fait discrètement sur un site sérieux : chaque couche supplémentaire n'apparaît que si le lecteur choisit explicitement de l'ouvrir, jamais imposée d'emblée.

Quels sont les quatre choix indépendants qui composent un élément de divulgation progressive ? Le signal indiquant que davantage d'information peut être révélée (flèche, icône, loupe), le déclencheur qui fait apparaître l'information (clic, survol, glissement tactile, intention de sortie), le format dans lequel elle apparaît (page séparée, fenêtre superposée, info-bulle, expansion sur place), et le mécanisme qui la referme.

Que montre l'exemple SimpliSafe sur l'usage des signes « + » pour masquer de l'information ? Sur ce site de sécurité domestique, dont les visiteurs ont besoin de beaucoup de conseils pour l'auto-installation, l'agence a masqué une grande quantité d'information derrière de simples signes « + », dans le cadre d'un programme ayant multiplié le revenu par plus de cinq.

Que faire quand la divulgation progressive ne suffit pas à ce qu'un visiteur trouve ce qu'il cherche ? Quatre solutions de repli restent disponibles : un champ de recherche, une base de connaissances, un live chat, ou un numéro de téléphone bien visible. Chacune a ses limites propres, et il vaut mieux les traiter comme un filet de sécurité plutôt que comme un substitut à une bonne architecture de l'information.