IA et automatisation
Personas
SaaS et Startup
ROI
À court terme (< 3 mois)
Donc, je suis assis là, à regarder le site Web d'un autre client avec des titres parfaitement dimensionnés selon tous les guides de design qui existent. 18px pour le texte de corps, 24px pour les H3, 32px pour les H2, et ainsi de suite. Tout semblait "correct" selon les normes de l'industrie.
Le problème ? Personne ne lisait au-delà de la première section.
Cela s'est produit avec un client SaaS B2B dont la page de fonctionnalités avait tous les bons éléments : un texte convaincant, des preuves sociales, des propositions de valeur claires. Mais le taux de rebond était brutal, et les tests utilisateurs ont montré que les gens survolaient les descriptions des fonctionnalités.
C'est à ce moment-là que j'ai réalisé quelque chose que la plupart des designers n'admettront pas : les "meilleures pratiques" en matière de typographie sont souvent juste des moyennes qui ne tiennent pas compte de votre public spécifique, de la longueur du contenu ou des objectifs de conversion.
Dans ce livre de jeu, vous découvrirez :
Pourquoi les recommandations de taille de police standard échouent pour les pages de fonctionnalités
Mon cadre de test pour trouver la hiérarchie de titres optimale
La psychologie derrière la lisibilité des titres de fonctionnalités
Comment différentes industries nécessitent des approches différentes
Un système pratique pour tester la typographie qui convertit réellement
Si vous en avez assez de suivre des règles de design génériques alors que vos pages de fonctionnalités ne donnent pas de résultats, ceci est pour vous. Plongeons dans ce qui fonctionne réellement lors de la création de sites Web axés sur la conversion.
Normes de l'industrie
Ce que chaque designer a appris
Entrez dans n'importe quelle école de design ou parcourez la documentation sur les systèmes de design, et vous trouverez les mêmes recommandations typographiques répétées partout :
La Hiérarchie Typographique Standard :
En-têtes H1 : 36-48px
En-têtes H2 pour les fonctionnalités : 28-36px
En-têtes H3 pour les sous-fonctionnalités : 20-24px
Texte du corps : 16-18px
Légendes : 12-14px
Les systèmes de design de Google, Apple et des grandes entreprises SaaS suivent tous des modèles similaires. La logique semble solide : créer une hiérarchie visuelle claire, maintenir la lisibilité sur tous les appareils, et suivre les directives d'accessibilité.
La plupart des designers s'en tiennent à ces recommandations parce qu'elles sont « sûres ». Elles ne vous feront pas renvoyer, elles ont un aspect professionnel, et elles reposent sur des recherches sur la lisibilité de l'ère de l'impression.
Le problème avec cette sagesse conventionnelle ? Elle traite tout le contenu de la même manière. Un en-tête de fonctionnalité pour un logiciel d'entreprise reçoit le même traitement qu'un titre de blog ou un nom de produit e-commerce.
Mais voici ce que les guides de conception ne vous disent pas : les en-têtes de fonctionnalité ont un travail complètement différent de celui des en-têtes ordinaires. Ils doivent arrêter les lecteurs, communiquer de la valeur instantanément et fonctionner dans le contexte d'éléments concurrents sur la page.
L'approche standard optimise pour « avoir l'air professionnel » plutôt que pour « convertir les visiteurs ». Cela va bien pour les directives de marque, mais c'est limitant lorsque votre objectif est de transformer les visiteurs en utilisateurs.
Considérez-moi comme votre complice business.
7 ans d'expérience freelance avec des SaaS et Ecommerce.
Le coup de fouet est venu lors d'un projet de refonte de site web pour une startup SaaS B2B. Leur site existant suivait parfaitement toutes les meilleures pratiques typographiques : une hiérarchie claire, des rapports de contraste appropriés, des tailles de police accessibles. Le design avait l'air poli et professionnel.
Mais le taux de conversion de leur page de fonctionnalités était de 0,8 %. Aïe.
Lors des sessions de test utilisateur, j'ai remarqué quelque chose d'intéressant. Les gens atterrissaient sur la page, faisaient défiler rapidement les sections de fonctionnalités, puis rebondissaient. Quand je leur ai demandé ce dont ils se souvenaient, la plupart peinaient à évoquer un seul avantage de fonctionnalité.
Les titres de fonctionnalités se perdaient dans le bruit visuel.
Le client avait 8 fonctionnalités principales, chacune avec un titre standard de 28px (parfaitement dimensionné selon leur système de design). Mais quand vous mettez 8 titres de taille similaire sur une page avec des boutons, des témoignages, des images et du texte, tout rivalise également pour attirer l'attention.
J'ai commencé à remettre en question tout. Et si les tailles de police "correctes" nous nuisaient en réalité ? Et si rendre certains titres plus grands et d'autres plus petits pouvait créer un flux de lecture qui guidait les utilisateurs à travers les fonctionnalités les plus importantes en premier ?
C'est à ce moment que j'ai décidé de mettre le livre des règles par la fenêtre et de commencer à tester. Pas seulement des tests A/B de tailles différentes, mais des tests basés sur les priorités commerciales, le comportement des utilisateurs et la psychologie de la conversion.
L'approche traditionnelle traitait toutes les fonctionnalités comme égales. Mais en réalité, certaines fonctionnalités sont vos principaux arguments de vente tandis que d'autres sont des détails d'accompagnement. La typographie devrait refléter cette hiérarchie, et non lutter contre elle.
Voici mon Playbooks
Ce que j'ai fini par faire et les résultats.
Au lieu de suivre les échelles de typographie standard, j'ai développé un cadre de test basé sur la priorité des fonctionnalités et le comportement de balayage des utilisateurs. Voici le processus exact que j'ai utilisé :
Étape 1 : Audit de Priorisation des Fonctionnalités
J'ai travaillé avec le client pour classer ses fonctionnalités par impact commercial :
Niveau 1 : Différenciateurs essentiels (titres de 40-48px)
Niveau 2 : Fonctionnalités de soutien importantes (titres de 28-32px)
Niveau 3 : Fonctionnalités optionnelles (titres de 20-24px)
Étape 2 : Analyse du Modèle de Balayage
En utilisant les données de carte thermique, j'ai identifié où les utilisateurs s'arrêtaient naturellement en faisant défiler. Les 3 principales fonctionnalités devaient attirer l'attention à ces "points de pause" avec une typographie plus grande et plus audacieuse.
Étape 3 : Ajustement de la Longueur du Contenu
Les descriptions de fonctionnalités plus longues nécessitaient des titres plus petits pour maintenir la proportion. Les fonctionnalités plus courtes et percutantes pouvaient supporter des titres plus grands sans sembler écrasantes.
Étape 4 : Tests Spécifiques aux Appareils
Les utilisateurs mobiles balaye différemment des utilisateurs de bureau. J'ai créé des hiérarchies de tailles de police distinctes :
Bureau : Gamme plus large (20px-48px)
Mobile : Gamme compressée (18px-32px)
Étape 5 : Déclencheurs Psychologiques
J'ai utilisé la typographie pour créer de l'urgence et de l'importance :
Fonctionnalités de sécurité : Polices légèrement plus grandes (création de confiance)
Fonctionnalités de rapidité/efficacité : Polices condensées (perception de la vitesse)
Fonctionnalités de collaboration : Polices arrondies (accessibilité)
L'insight clé : la taille de la police doit soutenir votre stratégie de conversion, pas seulement l'esthétique visuelle.
J'ai aussi découvert que rompre les règles de hiérarchie traditionnelles fonctionnait parfois mieux. Par exemple, rendre un titre de fonctionnalité de Niveau 2 plus grand qu'un titre de Niveau 1 s'il apparaissait plus bas sur la page, là où les utilisateurs avaient besoin d'un incitatif visuel supplémentaire pour continuer à lire.
Cadre de test
Une approche systématique pour trouver des tailles optimales en fonction du comportement des utilisateurs et des priorités commerciales plutôt qu'en fonction des conventions de design.
Hiérarchie du contenu
Faire correspondre les tailles de police à l'importance des fonctionnalités et aux objectifs commerciaux au lieu de suivre des échelles typographiques génériques.
Contexte de l'appareil
Créer différentes stratégies de taille de police pour mobile et bureau en fonction des motifs de scan réels
Intégration psychologique
Utiliser la typographie pour renforcer l'impact émotionnel et l'urgence des différentes catégories de fonctionnalités
Les résultats parlaient d'eux-mêmes. Après avoir mis en œuvre la nouvelle hiérarchie typographique :
Impact sur la conversion :
Le taux de conversion de la page des fonctionnalités est passé de 0,8 % à 2,1 %.
Le temps moyen passé sur la page a augmenté de 34 %.
Les utilisateurs faisaient maintenant défiler 73 % des fonctionnalités (contre 31 % auparavant).
Changements de comportement des utilisateurs :
La cartographie thermique a montré que les utilisateurs suivaient désormais le flux de lecture prévu. Ils passaient plus de temps sur les fonctionnalités de niveau 1 et ne se perdaient pas dans la hiérarchie visuelle.
Mais le résultat le plus intéressant était de nature qualitative. Lors des tests utilisateurs de suivi, les personnes pouvaient réellement se souvenir et articuler les principaux avantages. La typographie soutenait maintenant la compréhension au lieu de la contrarier.
Le client a également rapporté que les conversations de vente étaient devenues plus faciles car les prospects arrivaient avec une compréhension plus claire des fonctionnalités clés qui importaient le plus.
Ce que j'ai appris et les erreurs que j'ai commises.
Pour que vous ne les fassiez pas.
Voici les idées clés que j'aurais aimé connaître avant de commencer cette expérimentation :
La priorité commerciale doit guider la hiérarchie typographique - Vos fonctionnalités les plus importantes méritent les plus grands titres, quelle que soit leur position sur la page.
Le contexte compte plus que la cohérence - Un titre entouré d'images nécessite une taille différente de celui entouré de blocs de texte.
Les schémas de balayage des utilisateurs sont prévisibles - Les gens ralentissent à certains points de défilement, et votre typographie devrait capitaliser sur ces moments.
Le mobile nécessite une stratégie différente - Ce qui fonctionne sur desktop semble souvent écrasant sur les appareils mobiles.
La typographie affecte la vitesse de compréhension - Des titres plus grands pour des fonctionnalités complexes aident les utilisateurs à traiter l'information technique plus rapidement.
Les tests battent toujours la théorie - Ce qui semble « erroné » aux designers convertit souvent mieux pour les utilisateurs.
Le contexte industriel façonne les attentes - Les utilisateurs de SaaS B2B s'attendent à un traitement typographique différent de celui des acheteurs en ligne.
La plus grande erreur que j'ai faite au début a été d'essayer de maintenir des rapports mathématiques parfaits entre les tailles de titres. Les utilisateurs ne se soucient pas de votre système de design - ils se soucient de comprendre votre produit rapidement.
Si je devais recommencer, je commencerais par la recherche utilisateur et les priorités commerciales avant de toucher à quelque taille de police que ce soit. Le design doit servir l'objectif de conversion, et non l'inverse.
Comment vous pouvez adapter cela à votre entreprise
Mon playbook, condensé pour votre cas.
Pour votre SaaS / Startup
Pour les produits SaaS, concentrez-vous sur la communication de la valeur des fonctionnalités :
Rendez les fonctionnalités d'intégration plus proéminentes (les utilisateurs évaluent les outils SaaS en fonction de l'adéquation aux flux de travail)
Utilisez des polices plus grandes pour les fonctionnalités de sécurité et de conformité (confiance)
Testez des titres plus grands pour des fonctionnalités techniques complexes qui nécessitent des explications
Considérez le rôle de l'utilisateur : les décideurs scannent différemment des utilisateurs finaux
Pour votre boutique Ecommerce
Pour l'e-commerce, mettez en avant les avantages des produits et l'urgence :
Rendez les titres de la politique d'expédition et de retour plus visibles (réduit l'anxiété d'achat)
Utilisez des polices plus grandes pour les propositions de vente uniques qui se distinguent de la concurrence
Testez des titres plus petits pour les spécifications techniques (les acheteurs les scannent souvent rapidement)
Considérez l'intention d'achat : les visiteurs occasionnels et les acheteurs ont besoin de hiérarchies visuelles différentes