Loading

“Un écran de portable c’est plus petit, donc la typo sera plus petite, normal” Bah non… Inversement ! Pour que le contenu soit lisible et manipulable, le corps de police doit s’ajuster en conséquence. La gestion typographique a une importance cruciale dans la lecture d’une page/interface

Il n’existe pas de solution clé, chaque interface va avoir ses particularités qui guideront le choix de la taille, de l’écartement, de la police, du contraste, etc…

Néanmoins, il y a une règle à respecter : offrir à l’utilisateur un contenu accessible. C’est alors qu’un terrain harmonieux entre l’espace et les mots doit se former.

L’utilisateur est d’autant plus exigeant en matière de lisibilité sur mobile du fait que l’environnement dans lequel il est utilisé est changeant et dérangeant. La luminosité de l’écran, les reflets de la lumière, les rayures ou les éclats sur l’écran ( si si ) peuvent perturber la lecture.

[Tweet “Comment optimiser la lecture sur mobile #Typographie #UX “]

 

Un petit écran pour voir les choses en grand

La première erreur a éviter, c’est d’utiliser la même taille de police sur écran d’ordinateur et sur mobile. Même si le contenu s’adapte bien il est préférable d’augmenter légèrement la taille du texte courant ( 16px sur grand écran, 18px sur petit écran ). L’idéal c’est d’obtenir entre 30 et 40 caractères par ligne. 

 

tappable-holding-800x600pxby Aaron Humphreys

L’espacement est aussi primordiale, les lettres doivent respirer entre elles afin d’éviter des blocs compacts de mots illisibles. Il faut également éviter de juxtaposer les paragraphes entres eux et aligner le texte aux bordures de l’écran sans espacement.

L’utilisateur perçoit qu’une partie de la page, avec généralement une restriction en largeur, mais le déffilement en longueur est souvent libre. Ainsi sur mobile, une longue colonne de texte peut être facilement dissimulée sous la facilité du scroll. Il ne faut pas pour autant privilégier deux colonnes plutôt qu’une, tout dépendra du contenu du texte et du nombre de caractères par lignes.

Il faut savoir qu’une ligne entière sur grand écran va se retrouver divisée en plusieurs lignes sur mobile, donc inconsciemment cela va paraître plus long pour l’utilisateur de lire sur mobile que sur ordinateur. Sauf si l’espace entre chaque ligne est suffisant pour laisser respirer le texte. Notamment lorsqu’il s’agit de liste, il faut bien différencier un saut de ligne avec l’écart entre deux pastilles.

 

Une typographie lisible pour une lecture tout terrain

On ne lit pas un livre sur un écran portable, on lit difficilement un article et parfois on a du mal à déposer nos yeux sur les deux phrases introductives d’une home page. Donc il faut simplifier au maximum la lecture pour les utilisateurs dans toutes les situations et ceci commence par un contraste notable entre la typo et le fond.

Le texte gris clair sur fond blanc, on est d’accord ça rend bien sur un écran Mac 4K 15 pouces, mais pas sur un écran mobile avec le reflet des néons du métro dessus.

low-contrast-comparison-01-630x489

Typo gris foncée sur fond gris clair, cela peut vite devenir illisible avec des reflets lumineux

 

Les puristes diront que trop de contraste peut gêner l’œil et être contre productif. Je pense qu’il y a un juste milieu, ne pas forcer le blanc & noir et miser sur des couleurs légèrement nuancées.

Sans compter qu’il faut penser aux dyslexiques et daltoniens qui peuvent présenter des troubles de la lecture en fonction des couleurs choisies. Par exemple le texte en noir #FFFFFF sur fond blanc peut engendrer des effets de vibrances déreangeantes pour l’utilisateur.

C’est pourquoi il faut opter pour une couleur différente du noir total, comme un gris très foncé ou un noir légèrement contrasté, comme ci dessous :

DarkGraySwatches-630x191

Exemple de noir à utiliser pour éviter le “noir absolu”

Vous pouvez tester la qualité de votre contraste grâce à cet outil  qui affiche également les valeurs de la W3C

 

Quelle police choisir pour ses utilisateurs

La question se pose en effet, et je suis sûr que vous vous demandez aussi : Avec ou sans Serif ? Le choix de la police sur mobile est d’avantage compliqué que le nombre de résolution d’écrans différents est large.

 

SansSerif-630x191

En effet, en impression (print), la Serif est reconnue pour améliorer la lisibilité et faciliter la lecture en guidant l’œil horizontalement grâce aux empattements.

Cependant des études ont prouvé que sur écran, la différence entre sans serif et serif est nettement moins comparable. De plus les écrans sont faits de pixels carrés, donc la typo serif ( possédant + de courbes que la sans serif ) a tendance à “baver” sur des écrans à faible résolution. Ceci n’avantage pas la typo favorite des manuscrits, ainsi la sans serif se retrouve en grande majorité sur les interfaces digitales, au grand bonheur des dyslexiques et malvoyants.

 

nytimes-mobile    medium-mobile

The New York Times en haut. Un article Medium en bas.

Pourtant il existe bien d’irréductibles gaulois, comme TNYT ou Medium qui favorisent encore la Serif. The New York Times on peut se dire que c’est pour des raisons d’intégrité et d’image de l’enseigne, cependant pour Medium c’est purement intentionnel. Vous remarquerez quand même l’espacement entre les lignes sur Medium (à droite) est plus agréable que sur le TNYT (à gauche)

Encore une fois il n’y a pas de règle précise, cependant si votre contenu mise uniquement sur le texte, vous pouvez peut être envisager une police Serif qui soit propre et espacée, sinon il est préférable d’utiliser une sans serif.

yellow-app-dribbbv4

Mettre le titre en sans serif et le texte courant en serif c’est devenu très courant. by Bilal | S&N

La police est juge de la tournure du contenu

La typographie doit être le reflet de l’intention de votre site / application. Grâce aux codes instaurés avec le temps, l’utilisateur développe une opinion générale du site avec le simple choix de police. Imaginez le site de l’assemblée Nationale avec la typo et les codes couleurs du site Studio Bagel… Bon vous comprenez l’importance maintenant ?

 

coffee-shop-website-630x170

Il faut donc apporter une importance au choix de la typographie d’une manière globale pour le site et ses utilisateurs. Il ne faut pas se concentrer sur juste un élément en particulier mais sur l’ensemble du service/produit.

En considérant les fonctionnalités et le contenu du site on peut plus facilement determiner l’intention graphique qu’on souhaite apporter. Il sera plus évident de faire un choix cohérent après avoir pris connaissance de l’image que le site souhaite refleter.

La réflexion ne sera pas la même pour une police de texte courant que pour la typographie utilisée pour des boutons. Par exemple pour une application qui permet de commander un taxi,  la typographie se devra affordante afin de répondre aux actions mécaniques de l’utilisateur dans le but d’éviter la confusion.

 

 

La typographie c’est aussi une question de rythme

Tout ne se lit pas de la même manière, avec la même allure et concentration. On peut alors facilement jouer de ces codes pour rythmer la navigation de l’utilisateur. Vous l’aurez compris, une typographie très manuscrite s’appuyant beaucoup sur les pleins et les déliés est plus difficile à décrypter qu’une typographie baton. L’utilisateur va prendre plus de temps et va en profiter pour s’attarder sur d’autres éléments visibles, ce qui peut être un bon moyen de faire passer des informations importantes.

 

typographie mobile

by Aerin R

Cela fonctionne aussi avec les typos batons très fines et très compactes, si l’objectif est de ralentir l’utilisateur, il faut alors privilegier une belle mise en forme.

 

everquotes-dribble

by Sergiu Firez

Pour le reste, il faut faire des tests et recevoir le retour des utilisateurs, ce sont eux qui pourront le mieux vous conseiller dans vos choix.

 

Cover image : by Piper Lawson

Do you like Hugo Vermot's articles? Follow on social!
No Comments
Comments to: Les bonnes pratiques Typographiques sur mobile
Inscription obligatoire et gratuite

Suivez toutes nos actualités

Ne manquez pas un article ! Toutes les nouveautés directement dans vos emails.

ARTICLES LES PLUS APPRÉCIÉS

Articles des membres

Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]

LES NOUVEAUX ARTICLES

  1. Actualités
Cela n’est plus nouveau, la cybersécurité est un enjeu crucial pour toutes les entreprises et organisations qui utilisent des systèmes informatiques. Mais, en même temps, l’expérience utilisateur (UX) est également devenue un facteur clé pour la bonne utilisation des systèmes. Malheureusement, ces deux objectifs ne vont pas toujours de pair. En effet, sécuriser quelque chose […]
  1. Articles des membres
Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]