L’UI/UX au service des interfaces de lecture
En 1963, l’ingénieur en informatique Ivan Sutherland pose les bases de l’interface
graphique avec l’invention de son Sketchpad, première interface personne-machine. Il faut
attendre les années 1970 pour que Xerox PARC, suivi d’Apple et de Microsoft, crée les
interfaces utilisateurs (UI) que nous connaissons aujourd’hui. D’autre part, c’est à la fin des
années 1990 que naît le terme de « User eXperience » (UX, traduit par « expérience
utilisateur » en français) avec le psychologue cognitiviste Donald Norman, alors architecte
de l’expérience utilisateur chez Apple. La notion d’UI/UX est donc relativement récente
dans le monde du design graphique et pose de nouvelles problématiques au designer avec
l’émergence des smartphones, tablettes et autres machines informatiques avancées.
Ces nouveaux médiums représentent un enjeu particulièrement important, notamment
pour la lecture de textes longs, narratifs ou théoriques. De la tablette d’argile à la tablette
numérique, notre façon de lire a évolué au cours de l’histoire et s’impose maintenant de
s’adapter aux avancées technologiques. Mais comment y parvenir tandis que notre oeil est
habitué à lire sur support imprimé ?
Une étude menée par Anne Mangen, Gérard Olivier et Jean-Luc Velay en 2019 démontre
que, pour la lecture d’un long texte narratif, « la manipulation d’un vrai livre pendant la
lecture apporte des informations sensorielles et motrices plus riches. (…) ». Mais au-delà
de l’aspect purement scientifique, plusieurs sondages et enquêtes attestent que le livre
papier est majoritairement préféré à son homologue numérique. L’article de John Anderer
« Survey : Most people prefer reading paper books on tablets, phones », publié dans la revue
en ligne studyfinds.org, nous apprend que selon une étude d’Oxfam, « seuls 16 % des
adultes préfèrent les livres numériques ». De la même manière, la majorité des sondés
apprécie le support papier pour ses propriétés uniques comme le fait de tourner
matériellement les pages, l’odeur du papier, la sensation de tenir un livre entre les mains ou
la facilité d’immersion dans l’histoire.
À travers ces différentes sources, nous constatons que le support numérique est loin
d’offrir à ses utilisateurs – ici des lecteurs confirmés – une expérience de lecture égale à
celle d’un support imprimé. L’on peut dès lors réfléchir à la façon dont le designer
graphique pourrait intervenir pour proposer une expérience utilisateur différente afin
d’optimiser la lecture de textes longs sur écran. Rappelons que l’UX qualifie « Les
perceptions et les réponses d’une personne qui résultent de l’utilisation prévue d’un
produit, d’un système ou d’un service ». Notre réflexion nous amène donc à nous
demander en quoi l’UI/UX peut améliorer notre expérience de lecture sur interfaces
numériques. En fonction des besoins de l’utilisateur, comment le designer peut-il créer une
navigation fluide avec des repères visuels ? Comment favoriserait-il l’immersion et la
concentration et quelles seraient ses propositions graphiques pour le confort et la
personnalisation de l’interface par l’utilisateur ?
I – Une navigation fluide avec des repères visuels
Quel pourrait bien être le besoin premier d’un utilisateur confronté à une interface de
lecture, si ce n’est pouvoir lire facilement son contenu ? Les lecteurs confirmés le savent, il n’y a rien de pire qu’une absence de structure claire pour apporter confusion et perte de
motivation. Pour l’éviter, une navigation fluide et des repères visuels sont nécessaires.
Tout comme dans un livre imprimé, une interface de lecture a besoin d’une table des
matières. Elle permet au lecteur de se référer rapidement à une partie spécifique d’un
article ou d’un roman. Mais si pour un livre imprimé l’utilisateur doit se rendre à la bonne
page lui-même, le numérique a le pouvoir de le rediriger directement à la section souhaitée
d’un simple clic ou tapotement du doigt. L’encyclopédie en ligne Wikipédia possède, pour
chacun de ses articles, une table des matières dynamique comportant les sections et
sous-sections. Elle est particulièrement utile pour les longs articles.
Afin que l’utilisateur garde des repères dans sa lecture, des indicateurs de progression
sont aussi importants. Ils « expriment un temps d’attente non spécifié ou affichent la durée
d’un processus » et peuvent prendre plusieurs formes. Ça peut être à travers une
pagination séquentielle, une barre de chargement déterminée ou un indicateur du temps
de lecture. Selon Akshat Biyani, rédacteur et collaborateur chez MarTech, entreprise axée
sur la mercatique et la technologie, « les lecteurs sont plus susceptibles de cliquer sur un
article s’ils savent qu’ils ont le temps de le lire ». Indiqués généralement en haut de page,
ces indicateurs se développent notamment sur les blogs informatifs ou les sites web de
presse, comme Medium ou le New York Times.
Contrairement au livre papier où le lecteur tourne les pages, le texte sur écran défile en
scrollant. L’interface se doit donc d’être aisée à scroller, avec des liens de retour en haut
de page pour faire gagner du temps à l’utilisateur. De la même manière et comme le ferait
un marque-page, une option de sauvegarde de la position de lecture lui serait bénéfique.
Elle lui permettrait de quitter l’interface ou revenir en arrière dans sa lecture sans craindre
de perdre sa progression. C’est ce que fait déjà la plateforme d’écriture en ligne Wattpad,
qui sauvegarde automatiquement la position de lecture pour toutes les histoires lues, et ce
sur plusieurs appareils.
La facilité de navigation et les repères visuels pour un long texte sont importants. Ils
évitent de frustrer l’utilisateur et les aident à mieux se situer dans le contenu sans que leur
présence ne vienne parasiter la lecture.
II – Favoriser la concentration et l’immersion
Une navigation fluide et des repères visuels sont un premier pas vers une interface
de lecture optimale. Mais que seraient-ils si la capacité de concentration et d’immersion
dans le contenu n’était pas au rendez-vous ?
Avant de parler méthodes et interface utilisateur, il est de mesure de rappeler la
différence entre concentration et immersion. Les scientifiques d’une étude basée sur le
sujet les définissent conjointement comme « un état mental similaire dans lequel une
personne est préoccupée par une tâche particulière ». Toutefois, nous pouvons noter une
subtilité entre les deux. En effet, la concentration n’est pas toujours synonyme de plaisir ni
naturelle, contrairement à l’immersion. Lire un roman peut nous apporter une forme
d’immersion, tandis qu’un article de presse nous demandera plutôt de la concentration.
Que ces différents écrits soient sur format numérique ou papier, la question de
l’immuabilité les oppose. Une fois imprimé, le support n’est plus modifiable, ce qui n’est
pas le cas avec le numérique qui évolue sans cesse en termes de visuel et de contenu. Et
parmi tous les éléments présents sur une page web, les pop-up sont les plus susceptibles
d’être modifiés. Utilisés pour afficher une notification, un avertissement ou une publicité, ils
portent bien leur nom de « fenêtre surgissante » en français car ils sont souvent
envahissants. En attirant notre oeil, ils en viennent à déconcentrer l’utilisateur. On les
retrouve souvent sur les sites web informatifs, comme Business Insider, axé sur les
finances et la technologie. S’ils servent parfois l’intérêt de l’utilisateur, comme lui notifier
un message par exemple, l’idée serait tout de même de les diminuer ou de les optimiser.
Une pratique pertinente avait été utilisée par le passé sur le site web de The Dye Lab,
marque de vêtement nigériane. Les pop-up pouvaient être repositionnés comme des post-it ou refermés par l’utilisateur, les rendant ludiques et moins intrusifs.
La question des pop-up peut être résolue avec les solutions citées ci-dessus. Or, ajouter un
« Mode Lecture » reste la meilleure option si l’utilisateur tient à les faire disparaître
complètement. Il s’agit d’une mise en page épurée sans distractions où seul subsiste le
texte pour favoriser la concentration. Si le navigateur Safari sur Mac ou des sites comme
celui du New York Times en possède un, d’autres comme Medium ont une interface pensée
et conçue comme un mode lecture.
Ce qui fait de lui une bonne pratique en termes de concentration et d’immersion, ce sont aussi ses marges et espacements autour et dans le texte. Appelé aussi « espace négatif » et exploité dès le Moyen-Âge sur papier par les moines copistes pour des questions d’hygiène, il peut « être mis à profit pour générer un contraste entre les éléments devant être vus et des zones de repos ». Les marges sont plus ou moins larges selon le contenu et la grille utilisée par le designer. Il existe un tableau indiquant les valeurs de marges conseillées selon la taille de l’écran. Si l’on suit ses indications, il faut prévoir des marges de 16px (pixels) sur smartphone, 32px sur tablette et 200px sur ordinateur. Plus la marge est grande, plus le texte sera facile à lire. Attention tout de même à ne pas en abuser, au risque de créer un trop grand décalage et une condensation du contenu.
Si les éléments évoqués jusqu’ici servaient surtout la concentration, une idée évoquée par
l’UI/UX designer Guillaume Tranel se révèle très intéressante en matière d’immersion. La
diffusion d’un bruit blanc, son continu souvent associé à des éléments naturels (vagues,
vent, pluie…), permettrait de détendre l’utilisateur durant sa lecture. Très utilisé pour
endormir les jeunes enfants, il a la capacité d’apaiser et de masquer les bruits parasites. Avec un bouton à activer sur le site ou l’application, l’utilisateur pourrait lire tranquillement
tout en étant stimulé émotionnellement par un son agréable.
III – Le confort visuel et la personnalisation par l’utilisateur
Offrir une bonne concentration et faciliter l’immersion de l’utilisateur est l’un des
principaux objectifs d’une interface de lecture. Or, pour la rendre chaleureuse et ouverte à
tous types d’utilisateurs, son visuel doit être réfléchi au niveau UI et UX.
Pour commencer, le texte et ses caractéristiques sont fondamentaux. Rappelons
qu’une « création disponible sur le Net ne s’affiche pas de la même manière que vous
utilisiez le navigateur Opera ou Firefox, un grand ou un petit écran », nous dit Nicolas
Frespech lorsqu’il aborde la question des livres d’artistes numériques. Le designer doit
donc adopter une démarche adaptative dans ses projets web. Guillaume Tranel
préconise une taille de 13px ou 14px pour les annotations selon la hauteur d’x, 15px ou
16px pour le texte de labeur et entre 32px et 40px pour les titres. À noter que la plupart des
navigateurs définissent la taille du texte par défaut à 16px.
Concernant la typographie, choisir une police linéale comme l’Inter, la Roboto ou la
Montserrat est le plus adapté pour le texte de labeur « car les empattements sont trop
petits en pixels » et risquent de gêner la lecture. Il existe toutefois des exceptions,
comme la Georgia qui « a été optimisée pour fonctionner à l’écran sur de longues
compositions, et constitue un choix adéquat pour les livres numériques ». Le choix reste
assez libre pour les titres, même si une mécane est conseillée pour bien différencier les
lettres « O » des chiffres « 0 ».
« La longueur des lignes, l’interlettrage et l’interlignage sont trois facteurs qui contribuent à
la lisibilité du texte ». C’est ce que démontrent Mary Clare Dyson et Mark Haselgrove
dans leur étude sur la longueur des lignes sur l’efficacité de lecture sur écrans. Selon elle,
une moyenne de 55 caractères par ligne assure une compréhension globale du texte. Pour
ce qui est de l’interlignage, il doit être plus élevé et se chiffre autour de 140 % pour le
labeur et 120 % pour les titres. Quant à l’interlettrage, il est augmenté de 0,2 % pour
améliorer la lisibilité du texte de labeur. Enfin, celui-ci se doit d’être bien hiérarchisé avec
des titres, sous-titres et paragraphes car « ils aident les lecteurs à distinguer une idée
d’une autre ».
Le texte est une chose, mais il coexiste sur l’interface avec d’autres éléments cruciaux, la
couleur et les contrastes. L’expression « écrit noir sur blanc » s’applique autant sur format
imprimé que numérique, mais qu’en est-il des « Dark Mode » ? Traduit en français par
« mode sombre », ils concernent des interfaces au texte clair sur fond sombre. S’ils restent minoritaires par défaut sur les sites web, une étude chinoise atteste qu’il réduit la fatigue
visuelle par rapport à un mode clair, en se basant sur la fréquence de clignement de l’œil et
du diamètre des pupilles. Il serait donc une solution pour les lecteurs sensibles aux fortes
lumières.
En dépit du mode utilisé, les contrastes restent le plus important. Les couleurs doivent être
accessibles à tous types de handicaps visuels comme le daltonisme. Selon le Web Content
Accessibility Guidelines (WCAG), « la présentation visuelle du texte et des images du texte
a un rapport de contraste d’au moins 4,5:1 », soit le niveau A:A. En suivant cette norme, le
designer est libre dans son choix de couleurs, tant qu’il reste cohérent et harmonieux pour
ne pas surcharger l’interface et perdre l’utilisateur. Il ne lui viendrait jamais à l’esprit
d’écrire de toutes les couleurs et Jason Tselentis le dit bien dans son ouvrage Design
graphique pour écrans : « (…) Un déferlement soudain de couleurs vives risque d’écœurer le
visiteur (…). ».
Avec ses différents choix graphiques, le designer crée l’interface mais l’utilisateur peut-il
avoir un rôle dans son adaptation ? C’est la question qui se pose avec l’essor des
interfaces personnalisables. Dans son article « Customization vs. Personalization in the User Experience », Amy Schade nous dit que « l’objectif principal de la personnalisation est de fournir un contenu et des fonctionnalités qui correspondent aux besoins ou aux intérêts
spécifiques des utilisateurs (…) ». De cette idée, Guillaume Tranel distingue deux types de
personnalisation. La première, assez rudimentaire, concerne le choix entre le mode clair ou
sombre et l’ajustement de la taille du texte. La seconde, qu’il nomme l’hyperpersonnalisation, inclut la couleur de l’interface, la typographie, la musique si option il y a et les suggestions proposées par l’interface, sur le modèle des recommandations Netflix ou Youtube. Dans le cas d’une interface de lecture, il serait pertinent d’offrir en priorité aux utilisateurs le choix de leur typographie et de sa taille, notamment pour les malvoyants. D’autres options secondaires, comme le choix du bruit blanc ou de la couleur de fond, hors light ou dark mode, peuvent être apportées. Celles-ci sont bénéfiques pour l’utilisateur qui devient en quelque sorte le maître de l’interface. Néanmoins, elles ont des limites, comme le coût de leur intégration en ce qui concerne le design et le développement. De plus, elles ajoutent du travail au designer qui doit prendre en compte les choix de l’utilisateur et adapter la mise en page. Beaucoup de contraintes pour le designer mais, selon Guillaume Tranel, aucune pour l’utilisateur tant qu’il peut revenir en arrière car tout résulte de son choix.
Ces fonctionnalités ouvrent de nouvelles portes en termes d’expérience utilisateur sur
l’interface mais les nombreuses contraintes qu’elles posent les rendent assez rares sur le
web.
Pour conclure
Articles de blogs, de presse ou romans numériques, les interfaces de lecture
revêtent différentes formes qui ne cessent d’évoluer. Si le support imprimé a encore de beaux jours devant lui, le numérique prend de plus en plus de place dans notre quotidien,
avec des attentes utilisateurs toujours plus grandes. C’est là qu’intervient le designer pour
proposer de nouvelles façons de naviguer sur l’interface, avec une expérience de lecture
améliorée et un visuel en adéquation avec le besoin utilisateur. Permettre à un plus large
public d’apprécier la lecture sur écran et lui procurer des sensations égales au support
papier, tel est son but à l’aide des interfaces et études de l’expérience utilisateur.