En ce moment, mes recherches ebook design sont centrées sur la navigation dans le livre numérique. Je ne suis pas le seul à le faire puisque nous nous rendons compte que les éléments de navigation par défaut (ceux pensés par les fabricants) sont parfois déficients au niveau UI/UX (interface et expérience utilisateur) pour la non-fiction.

Un ficher au format EPUB est accompagné d’une table des matières intégrée (un fichier toc.ncx). Théoriquement, nous n’avons donc pas besoin de nous préoccuper de gérer la navigation. Dans les faits, une observation sur plusieurs mois me démontre que l’utilisation de ce fichier peut ne pas être bien exécutée par les revendeurs.

Le travail d’un designer étant de faciliter la lecture, donc de gérer le contenu selon sa nature (form follows function), je me suis mis en quête d’un système intégré plus « performant » et confortable. Regardons ça de plus près.

La table des matières par défaut. Peut-on lui adjoindre un système plus engageant ?

Les carences du modèle par défaut

Mon opinion a bien changé sur le sujet. Auparavant, je ne voyais pas la pertinence d’une table des matières intégrée dans le livre, qui avait pour défaut de faire doublon avec le fichier prévu pour ça. Mais en observant les lecteurs, je me suis rendu compte que beaucoup d’utilisateurs non technophiles n’utilisaient pas cette fonctionnalité — certains n’étaient même pas au courant de son existence et l’ont découverte le jour où je leur ai montrée.

En cause une mauvaise gestion de ce fichier. Souvent, la table des matières est accessible par les menus. Mais en plus, elle est placée dans un sous-menu peu explicite. Par conséquent, elle n’a pas une visibilité suffisante. Imaginez un site web dépourvu de page d’accueil et d’un menu de navigation. Vous arrivez sur le site et le dernier article publié se présente à vous, sans rien autour. Vous êtes obligé de faire un clic droit pour aller chercher le menu de navigation, situé dans un sous-menu dont le titre est « Aller à » puis scroller jusqu’à l’article que vous souhaitez consulter. Si quelques articles vous intéressent, l’expérience de navigation se révélera mauvaise. Or, la non-fiction appelle à une lecture non linéaire : on vient lire ceci, on revient sur cela, on relit le tutoriel quand on en a besoin, etc.

Quand le développeur se remet en question

Une petite expérience menée par un confrère américain sur Kindle a démontré qu’une table des matières dans le livre n’était pas forcément une mauvaise idée.

Il semble qu’Amazon utilise le fichier toc.ncx pour gérer la barre de progression. Alors pourquoi demander aux développeurs d’intégrer une table des matières au début du livre, surtout qu’ils avaient l’occasion de changer les choses avec leur nouveau format, KF8 ?

Il n’a malheureusement pas publié cette expérimentation mais en a fait part à plusieurs personnes, et comme les résultats sont plus intéressants qu’il ne le dit lui-même, je résume aujourd’hui.

La table des matières n’étant pas visible à l’ouverture du livre (ou placée à la fin), ses beta-testeurs utilisaient les boutons de navigation pour aller d’une (sous-)partie à l’autre, ne pensaient pas naturellement à aller chercher dans le menu sur le Kindle non tactile. À noter que le résultat était le même sur iPad (faire glisser son doigt sur la barre de progression).

Première conclusion : ses beta-testeurs préfèrent rester « dans le livre » et ne pas avoir à consulter une page dédiée (un pop-up ferait l’affaire).

Une fois la table des matières visible à l’ouverture du livre, les beta-testeurs Kindle allaient beaucoup plus naturellement utiliser la fonctionnalité dans le menu. Il a alors demandé aux testeurs ce qui déclenchait cette utilisation différente.

Deuxième conclusion : Il faut montrer aux utilisateurs que le livre dispose d’une table des matières pour qu’ils pensent à l’utiliser. Ceci s’explique par le nombre incalculable de livres numériques de mauvaise qualité (pas de table des matières sur Kindle par exemple, mauvaise mise en page, non-réflexion sur l’organisation du contenu, etc.).

Malheureusement, une partie non négligeable des testeurs n’utilisait toujours pas la fonctionnalité disponible dans le menu. Et là, la conclusion sonne comme un échec pour les fabricants en ce qui concerne l’UI/UX, à l’exception peut-être des développeurs d’iBooks sur iOS qui ont pris soin de rendre l’icône accessible directement (même chose pour Adobe Digital Editions où la même icône est accessible en permanence).

Troisième conclusion : des utilisateurs non technophiles ne sont même pas au courant que cette fonction existe ! Et il ne sert à rien de leur expliquer dans un manuel d’utilisation préchargé dans la liseuse, beaucoup ne le lisent pas. Là, une démonstration (optionnelle) au premier allumage ou, encore mieux, une visibilité accrue au niveau de l’interface du livre permettraient de régler le problème. Pensez que sur ma liseuse Sony, je suis obligé de faire 3 sous-menus pour accéder à une sous-partie…

D’autres raisons

Vous pensez que ce sont les seules raisons qui justifient la présence d’une table des matières au début du livre ? Vous vous trompez.

Il existe également des raisons marketing à cela, et il n’y a guère que les américains pour penser à ce genre de détails mercantiles et en parler ouvertement.

Beaucoup de livres de non-fiction en anglais disposent d’une table des matières. On pourrait penser que c’est par fainéantise (pas besoin de différencier l’EPUB pour conversion Kindle), mais ce n’est pas vraiment le cas… même s’il y a une part de vrai.

De fait, beaucoup de publishers placent la table des matières dans la description du livre sur les pages revendeurs et sur leur site. L’idée est de dégager le moindre doute quant à l’achat.

Quand vous cherchez un livre sur un sujet, vous voulez trouver quelque chose de précis et de complet. La description ne peut être que globale puisqu’il faut résumer le contenu en quelques lignes. Donc, vous ne savez pas si le livre sera intéressant et répondra à vos attentes. Si la Table des Matières suit le résumé, vous aurez une vue beaucoup plus détaillée. Et si suffisamment de choses vous intéressent, l’achat sera perçu comme « rentable » et peu « dangereux ».

En outre, cela semble changer le comportement de notation chez les lecteurs. Quand ils achètent un livre dont le contenu est vague, ils ont tendance à baisser leur note (s’ils ne trouvent pas ce qu’ils sont venus chercher), voire même saquer. S’ils sont avertis du contenu avant achat, ils percevront les digressions comme des bonus et leur jugement sera beaucoup plus juste. En résultent une meilleure note et une critique plus objective sur lesquelles le publisher peut s’appuyer pour le bouche-à-oreille.

Enfin, cela permet également de soigner l’aspect SEO (Search Engine Optimization) puisque des recherches effectuées sur un moteur de recherche pourront mener au livre numérique présenté sur le site de l’éditeur. Certains n’hésitent d’ailleurs pas à intituler les parties et sous-parties de leur livre pour optimiser toute la partie SEO et soigner la visibilité de leur livre dans Google Books.

Mais qu’est ce qui peut expliquer l’intégration de la table des matières au livre d’un point de vue marketing ? Eh bien beaucoup de gens ne lisent pas la description du livre au complet. Elle est même parfois coupée et il faut cliquer pour la dévoiler. Mais beaucoup de gens téléchargent l’extrait. Et si la table des matières s’affiche à l’ouverture de l’extrait, alors les lecteurs pourront juger de la valeur de l’ouvrage, ce qui insuffle un a priori positif qui peut mener à une conversion vers l’achat.

Un système bête et méchant

Fort de ces constats, j’ai donc réfléchi à un système de navigation ad hoc, un système dont le designer prend la charge. Le but est de satisfaire tous les utilisateurs : ceux qui sont habitués au système par défaut et les autres.

Premièrement, et ce n’est pas inutile de le rappeler, je crois qu’un livre de non-fiction doit en passer par une réflexion profonde qui porte sur la gestion du contenu. Si ce n’est pas fait, il y a de grandes chances que l’expérience de lecture soit médiocre. L’auteur tend bien sûr à organiser les parties et sous-parties naturellement, d’une façon logique. Mais nous pouvons au moins optimiser son organisation et sa hiérarchie.

Ce système de navigation est un élément qui vient s’intégrer à cette réflexion. Ce n’est pas quelque chose que l’on rajoute à la fin !

Nous veillerons donc à utiliser ce système correctement, comme un système à part entière, pas comme un doublon de ce que nous avons déjà à disposition. Aussi, la forme et le contenu de la table des matières seront différenciés. Nous pouvons imaginer une table des matières sous forme de grille (et pas de liste). C’est difficilement réalisable pour le moment (d’un point de vue technique) mais la dernière mise à jour du moteur de rendu Adobe laisse espérer que cela sera possible à court-terme. À mon avis, une grille sera d’ailleurs plus touch-friendly qu’une liste.

Les images font naître la curiosité. Aussi pourrions-nous utiliser une table des matières visuelle qui laisse le lecteur commencer par ce qui l’attire. Imaginons un magazine EPUB…

Mais difficile de faire une table des matières complète et lisible sous forme de grille, d’autant qu’il y a à gérer des écrans minuscules. Aussi nous créerons un système de table des matières à deux niveaux : une table des matières générale avec les parties, des tables des matières pour les parties (dont le contenu est constitué par les sous-parties). L’idéal serait de la déployer une fois que l’utilisateur a cliqué sur un bloc, mais ce n’est malheureusement pas possible aujourd’hui. Nous pouvons donc essayer d’utiliser les tables des matières des parties au début de chaque partie, et pas à la suite de la table des matières générale. Mais il n’est pas impensable de réaliser une table des matières en grille totalement complète : à gauche, le titre de la partie, à droite un résumé textuel réalisé avec les titres des sous-parties, titres dont le lien mène directement à cette sous-partie. Vous aurez compris que tout est réalisable ou presque (voir image ci-dessus). Bien sûr, pour une meilleure expérience utilisateur, nous conviendrons que cette table des matières ne doit pas dépasser deux pages.

Cette approche nous permet de présenter la table des matières aux lecteurs, de lui offrir une visibilité accrue, de nous en servir comme une page d’accueil qui facilite la lecture non linéaire et d’offrir un système de navigation alternatif.

Maintenant, nous allons faire en sorte que l’utilisateur ne quitte pas le livre numérique et ne casse pas le flux de lecture en allant se perdre dans les menus. L’idée est ici très simple : nous allons proposer un accès permanent à la table des matières que nous venons de créer.

Si nous daignons jeter un coup d’oeil au web design, il y a quelque chose que nous pouvons récupérer : les breadcrumbs.

Les breadcrumbs peuvent grandement améliorer « l’ergonomie du livre numérique », en indiquant au lecteur l’endroit où il se trouve dans la hiérarchie, en aidant à comprendre le contexte, en lui offrant un lien vers les éléments de navigation. Sur les sites web, on les trouve sous la forme

Accueil > Catégorie > Sous-catégorie

Ce sont donc des éléments textuels que nous pouvons aisément placer dans une mise en page, sans qu’ils ne paraissent déplacés ou ajoutés, et qui permettent une navigation alternative (c’est exactement ce que nous cherchons à faire ici).

Pour le livre, nous utiliserons donc

Titre du livre > Partie

Sous-partie (en gros, le heading).

Nous indiquons donc le chemin qu’a fait l’utilisateur depuis la table des matières. En cliquant sur le titre du livre, il retourne à la table des matières générale (niveau 1) ; en cliquant sur la partie, il revient à la table des matières de la partie (niveau 2).

Plus besoin d’ouvrir un menu, plus facile de naviguer dans le livre, un nombre de taps réduit (de 1 à 2 taps en moins par rapport au système toc.ncx par défaut, j’ai vérifié).

Ma première idée était de disposer un breadcrumb au début et à la fin de chaque (sous-)partie mais, en y réfléchissant, un seul suffira. En effet, à considérer que je gère mon contenu en blocs, et que cette approche implique des page-breaks réguliers, inutile de placer un breadcrumb à la fin de la sous-partie vu que les espaces blancs ne servent plus à marquer (inconsciemment) la fin d’une sous-partie ; les lecteurs tournent mécaniquement la page, ils comprendront donc que la sous-partie est finie lorsqu’ils verront le titre de la sous-partie suivante. Je peux donc faire l’économie de ce breadcrumb et en intégrer un seul, logiquement et naturellement, au header de ma mise en page sans qu’il ne constitue un obstacle dans la lecture.

Ici, le breadcrumb « book’s title » est un lien vers la table des matières visuelle. Mais il s’intègre assez bien à la mise en page de l’ebook (un template-prototype pour ne rien vous cacher).

Voilà, nous n’avons eu besoin que de deux éléments pour construire un système de navigation utile, alternatif et pleinement intégré au livre, sans remettre en question le système proposé par défaut. Il ne gênera pas les habitués, conviendra bien mieux aux non technophiles, ajoutera en lisibilité et pourra servir la hiérarchie.

Conclusion

Absolument rien n’est acquis ! N’oublions pas que nous en sommes au tout début du livre numérique, que l’ebook design n’existe même pas encore en tant que tel, que nous devons essayer des choses, mener des réflexions et inventer, prendre en compte l’idée d’interface utilisateur et d’expérience de lecture.

Nous devons donc prendre le réflexe d’expérimenter, de remettre en question ce que d’autres nous disent. Ici, j’ai remis en question « Il n’y a pas besoin d’une table des matières en HTML vu qu’il y a toc.ncx qui est là pour ça » qui a cours dans le développement ebook, un conseil que je donnais moi-même il y a quelques mois…

OK, un designer doit faire des choix et savoir les imposer, mais n’oublions pas que le designer de livre numérique doit faciliter. Ces choix doivent donc être faits pour faciliter la vie du lecteur, et c’est une erreur de ne pas remettre ses opinions en question de temps en temps. En d’autres termes, il faut se mettre à la place des utilisateurs — c’est ce que Steve Jobs faisait, et ça semble lui avoir réussi.

Si nous pensons que les choses sont mal faites et que nous pouvons les améliorer, alors faisons-le. Ne tenons rien pour acquis, intéressons-nous aux pratiques plutôt qu’à la théorie et proposons des choses. Il n’y a que comme ça que nous saurons si nos idées sont pertinentes ou non, et que les interfaces constructeurs pourront également être améliorées.

PS : Comme l’a justement fait remarquer La Dame au Chapal, ce genre de système de navigation alternatif permet également des expérimentations artistiques : organiser par personnages, donner des indices de lecture, créer des fils de lecture différents et ainsi de suite.