Combien de mots ?

Bon, alors, je vois venir les technos de loin… oui, oui, bien sûr, il existe des dizaines de tailles d’écran différentes sur le marché du mobile. Et naturellement, la police de caractère utilisée, sa taille ainsi que certains paramètres utilisateurs vont influencer le nombre de caractères qui peuvent, au final, s’afficher dans l’écran.
Mais notre objectif est d’avoir un ordre de grandeur. L’analyse détaillée des statistiques de résolution d’écran en vigueur au mois de juin 2018 permet tout de même de se faire une idée de la cour dans laquelle on joue.

Statistiques de résolutions d’écrans des mobiles en France
(mais les chiffres mondiaux sont très proches) pour le mois de juin 2018.

La résolution 360 x 640 pixels domine le marché. De nombreux appareils proposent une légère variation, qui ne fait pas une différence radicale. Donc pour considérer l’expérience utilisateur mobile sans prétendre couvrir toutes les situations, partons ici de la résolution 360 x 640 pixels.

L’orientation de l’appareil en mode horizontal (paysage) ou vertical (portrait) va également influencer la manière dont le texte va occuper l’espace. Il semble, néanmoins, que très peu d’utilisateurs ont recours à l’affichage en mode « paysage » (ou « landscape »).

Sur un échantillon de 780.000 visiteurs, le site minimaxir.com a identifié
seulement 4% de visiteurs mobiles qui optent pour l’affichage en « paysage ».

En clair, pour refléter l’expérience mobile la plus répandue (si, si, je vous jure, en vrai, j’ai un grand respect pour les minorités), nous allons simuler l’affichage de texte sur un écran 360 x 640 pixels, en mode portrait.

Voici le volume de texte affiché ce 14 août 2018 sur trois pages d’accueil de sites médias (respectivement CNN, Le Monde et Washington Post) :

Voici le volume de texte affiché sur trois pages d’accueil de sites e-commerce (respectivement Sony, Pixmania et la Fnac) :

Et encore, nous avons été gentils, en comptant le texte inclus dans les images !

Vous voyez que l’espace d’accroche est très réduit, sur mobile, au-dessus de la ligne de flottaison.

Même les sites purement éditoriaux affichent, pour la plupart, moins de 50 mots, titres et accroches comprises. Ce qui impose une écriture très aiguisée.

Voici 3 conseils pour maîtriser l’espace-écran réduit du mobile :

#1 – Le message principal « above the fold »

Faites en sorte que vos messages les plus importants soient visibles au-dessus de la ligne de flottaison.

Dans l’exemple ci-dessous, le message principal qui accompagne l’image du produit (« un contraste inégalé ») n’est pas visible immédiatement dans l’écran. Le visuel prend une place excessive, au détriment de l’accroche texte.

#2 – Des titres ne dépassant jamais 3 lignes

Pour éviter de devoir rédiger deux titres (un pour le desktop et un pour le mobile), nous vous conseillons d’adopter la stratégie de la plupart des médias en ligne : un seul titre, mais suffisamment court pour être élégant également sur mobile.

Sur mobile, il est quasi impossible de maintenir vos titres sur une seule ligne, comme nous vous le conseillons en desktop. En revanche, nous vous recommandons de rédiger vos titres de manière à ce que, même sur mobile, ils ne soient jamais affichés sur plus de 3 lignes.

Source : https://mobile.lemonde.fr
© image : yellowdolphins.com

Dans l’exemple ci-dessus, le titre sur 4 lignes est visuellement moins efficace en termes d’accroche. Il exige une énergie de lecture plus importante.

Le journaliste pourrait réécrire le titre de la manière suivante, par exemple :

#3 – Des paragraphes qui font moins d’un écran

L’ergonomie de lecture est meilleure lorsque la taille des paragraphes reste inférieure à la taille de l’écran. Autrement, un énorme pavé de texte vient remplir tout l’espace et le lecteur n’en voit pas le bout. Ce qui provoque une sensation de lourdeur, une obligation de scroller en cours de lecture d’un paragraphe et une imprédictibilité de la longueur du paragraphe.

Ci-dessous, certains paragraphes du journal Le Monde dépassent les limites de l’écran. La lecture en est alourdie en version mobile.

Source : mobile.lemonde.fr – 15 août 2018

Ci-dessous, le résultat est encore plus dramatique, en raison des choix typographiques : une police de caractère plus petite, un espace interligne plus serré et une largeur de texte plus importante sont des facteurs qui aggravent le manque de lisibilité d’un texte insuffisamment découpé en paragraphes.

Source : mobile.lexpressiondz.com – 16 août 2018

Une formule que nous aimons pratiquer chez Yellow Dolphins dans la partie haute des pages mobiles, c’est de créer des appuis graphiques (sous-titre, bandeau, puces numérotées, etc.) sur du simple texte. Ce qui permet d’afficher déjà une belle quantité de contenu tout en proposant une mise en scène agréable à la lecture.

Source : yellowdolphins.com

>> REVENIR AU SOMMAIRE DU DOSSIER <<
Rédiger pour les mobiles (12 bonnes pratiques)