Le blogde Chapal & Panoz

Concept Design : NonFiction+Screen!

Parce qu’il permet de publier à bas coût, le livre numérique fait revivre d’anciens concepts (pensez aux séries) et en voit également se démocratiser de nouveaux. Parmi les concepts qui se démocratisent aujourd’hui, on peut trouver les compilations d’articles de blog retravaillés : on choisit un thème, on sélectionne des articles, on organise le tout, on édite un peu et on publie. L’idée n’est pas forcément mauvaise — si les choses sont bien faites — puisque cela permet aux lecteurs de rémunérer le site tout en y gagnant un certain confort (pas besoin de chercher sur le site, pas besoin d’être en ligne, confort supplémentaire de lecture sur liseuse, etc.).

Les exemples ne sont pas difficiles à dénicher, et certains sont même parlants : O’Reilly publie ainsi son Best of ToC en allant piocher les articles de sa communauté quand le site Smashing Magazine compile ses propres articles par thème (WordPress, typographie, etc.).

La problématique, exception faite d’une écriture pensée en séries, est l’organisation d’un contenu web (non-linéaire) pour le livre numérique (linéaire). Bien souvent, nous nous retrouvons juste avec des articles l’un à la suite de l’autre, et certains peuvent ne pas nous intéresser tant que ça de prime abord pour diverses raisons (déjà lu, pas ce qu’on cherche mais qui peut nous intéresser plus tard, sujet de l’article ne nous parle pas, etc.). Comment répondre à cette problématique ?

Où chercher l’inspiration ?

Prenons les services et applications qui gèrent le contenu web (via RSS). Ils sont très nombreux et ont explosé ces deux dernières années. Ils ne font que prendre du contenu web pour l’organiser au mieux et rendre la consultation plus confortable. On pourra par exemple citer Pulse, Feedly ou encore Flipboard, sur lequel j’avais rédigé un article il y a quelques mois. Ce sont nos inspirations ici.

Elles ont en commun qu’elles présentent le contenu de manière graphique. Elles invitent l’utilisateur à consulter le contenu en faisant appel à sa curiosité, ses ressentis, ses interprétations (images qui attirent son attention, images qui lui parlent).

Que pouvons-nous en retenir ?

Ces images sont présentées sous forme de grille ; elles peuvent parfois représenter une thématique, parfois l’article en lui-même ; elles sont utilisées dans un système simple, presque trivial ; elles sont des portes d’entrée au contenu ; un soin particulier est apporté à la typographie, dans la volonté d’améliorer la lisibilité donc le confort 1, bien qu’on puisse juger le design global minimaliste.

Notre but est donc d’intégrer ces idées dans notre livre numérique : il nous faut construire un système de navigation léger et compréhensible — donc sans explications, ce qui est bien souvent la tare des magazines enrichis sur tablette — qui invite le lecteur à une lecture non linéaire et, si possible, construit une expérience d’utilisation remarquable.

Tout repose sur cette grille. Une idée particulièrement simple mais pourtant très difficile à mettre en œuvre dans l’écosystème EPUB tant il subsiste encore des bugs et des limitations aujourd’hui.

Navigation, interaction

Les livres numériques ont une table des matières par défaut. Pourquoi ne pas s’en servir ? D’une part, y accéder relève parfois du parcours du combattant (oui Sony Prs-350, je parle bien de toi). D’autre part, elle fait sortir le lecteur de sa lecture (on y accède par les menus). Nous n’allons donc pas construire notre solution sur cette table des matières standard, ce qui implique que nous ne devions pas en dupliquer la fonction et l’usage. C’est une contrainte à prendre en compte.

Ainsi, notre objectif est de construire un système de navigation ad hoc directement dans le livre numérique. Il faut donc qu’il s’intègre au contenu sans le parasiter.

Page de titre

La page de titre nous sert également de sommaire, on peut y présenter soit des thèmes (on pourra alors réutiliser le design de la page de titre comme première page de cette partie thématique) soit directement les articles. C’est la première page sur laquelle le lecteur va tomber (après la couverture). Comme vous pouvez le voir, nous présentons le contenu de manière très graphique, pour jouer sur la curiosité du lecteur.

En tapotant sur un bloc (au pire le texte pour les possesseurs de certaines liseuses Bookeen et Sony), le lecteur accède au contenu.

Bien évidemment, on peut aussi imaginer des blocs sans photographie, un mélange de blocs photo et de blocs couleur, et même une mise en avant de certains articles en doublant leur longueur — également pratique s’il vous manque un ou deux blocs pour compléter la grille. Les options sont nombreuses, la grille étant modulable.

À noter que nous avons utilisé une technique de « pseudo-fixed-layout » spécialement développée pour l’occasion. Quand le lecteur modifiera la taille de caractères, cette grille ne sera pas modifiée.

Nous essayons de créer une mécanique simple à comprendre pour rendre le système fonctionnel : un sommaire qui accueille le lecteur + un bouton précédent (notre « version épurée » est présentée ici).

Action, réaction

Si vous utilisez Flipboard, comment consulter un fil thématique ? Les chances que vous passiez les articles un par un en tournant la page sont minces. Vous allez plutôt utiliser le bouton précédent pour retourner sur la présentation graphique de ces articles. Cette simple constatation va mener notre réflexion.

Au-dessus du titre, nous avons donc intégré un bouton de retour. Il permet de retourner sur la page de titre (le sommaire). Ainsi, le lecteur peut facilement consulter le contenu de manière non linéaire, si par exemple le titre de l’article suivant ne l’intéresse pas sur le moment. Cela permet aussi une consultation simplifiée dans le cas d’une relecture, d’une recherche d’un article en particulier, etc.

La mécanique imaginée est assez simple : la page de titre est la page d’accueil du livre, le bouton « précédent » permet d’y retourner, comme avec n’importe quel navigateur web. Pour ne pas parasiter l’interface de l’application ou du service de lecture, et pour ne pas surcharger l’écran, nous n’avons pas intégré de bouton « suivant » pour accéder à l’article suivant 2.

Puisque certaines liseuses ne supportent pas les liens sur images — alors que nous sommes en 2013 —, ces icônes sont créés avec une police de caractère que nous avons pris soin d’intégrer au fichier. Cela signifie donc que si l’application ou le service de lecture que le lecteur utilise ne les supporte pas, il verra apparaître des lettres à leur place. C’est une conséquence assez fâcheuse, mais le support des polices intégrées est si généralisé aujourd’hui que nous parlons là d’exception.

Dans le but de donner le maximum d’informations au lecteur, nous avons également intégré des mots clés. Cela lui permet d’avoir une idée du contenu de l’article. Notez que nous pouvons également nous servir de ces mots clés pour construire un index et ainsi enrichir le système de navigation.

Enfin, la composition typographique a été pensée pour du contenu web. Elle reste simple, aérée et privilégie une lisibilité optimale. Nous utilisons la police linéale Open Sans pour les titres, mots clés et boutons. Pour le corps du texte, nous portons notre choix sur Georgia, présente sur une grande partie des appareils de lecture. Si elle n’est pas disponible, alors une police à empattements prévue par les développeurs de l’app ou du service la remplacera (Droid Serif sur Android par exemple).

Social

En fin d’article, nous insérons des liens sociaux auxquels nous pouvons ajouter un bouton précédent si besoin est (il renverra au sommaire dédié à la partie thématique, au début d’article comme un scroll-to-top 3, ou à la page de titre). Beaucoup de lecteurs sont susceptibles de découvrir des auteurs qu’ils ne connaissaient pas, aussi auront-ils peut-être envie de les suivre sur Twitter ou de découvrir leur site. Nous ne devons pas enfermer ces auteurs dans un fichier, mais proposer aux lecteurs de les découvrir.

Penser à adapter selon les appareils

Bien évidemment, tous les boutons ont été prévus pour être facilement accessibles au doigt. C’est une interface avant tout tactile. Leur taille a donc été calculée pour offrir un confort certain.

Sur tablette et liseuse, la page de titre–sommaire fonctionne très bien. Mais sur téléphone, nous devons faire les choses autrement pour offrir une expérience d’utilisation de même qualité. La grille devient donc une simple liste — voir première photo de cet article. Le début des articles du livre est également modifié : un saut de page est automatiquement effectué après la liste de mots-clés, ce qui nous permet d’afficher une sorte de page introductive aux contours bien définis.

Les boutons sociaux sont également retravaillés pour soigner l’expérience utilisateur sur téléphone (trop petits, ils auraient été difficilement accessibles).

Nous sommes obligés d’utiliser des media queries pour ce faire, ce qui implique que seuls les appareils mobiles Apple profiteront de ces ajustements pour le moment. Les autres appareils afficheront la mise en pages normale.

Une mise en pages différenciée pour offrir le maximum de confort à l’utilisateur (lisibilité, éléments facilement accessibles, etc.).

Aller plus loin

Nous nous sommes dans un premier temps focalisés sur un design assez épuré pour tester le concept : la feuille de styles est commune à tous les appareils de lecture, à l’exception du sommaire sur iPhone. Et si nous cherchions à complexifier la mise en pages et à l’optimiser pour ces différents appareils de lecture ?

Le même fichier — bien évidemment converti en KF8 pour Kindle —, un rendu un peu différent mais une identité conservée. Ici, c’est l’icône « grille » disposée sur l’image (en haut à droite) qui permet de retourner au sommaire, et plus la simple flèche.

Le fichier est bien évidemment le même, le HTML aussi, il n’y a que des modifications de styles de présentation (CSS). Il faut juste être malin dans l’organisation de plusieurs feuilles de styles afin que la bonne soit appliquée sans faire sauter la mise en page sur d’autres appareils de lecture 4. On peut alors également utiliser des propriétés CSS qu’iBooks supporte mais pas Adobe, ou encore prendre en compte les spécifications de chaque plateforme (les marges imposées chez Apple ou Amazon par exemple) pour adapter au mieux.

Les versions liseuse et iPad/Kindle sont légèrement différenciées pour des raisons purement techniques : le positionnement du titre et du lien « retour au sommaire » est différent parce qu’iBooks et Kindle supportent des propriétés que les liseuses utilisant RMSDK ne supportent pas.

Gros plan sur la version iPhone : la grille devient une liste, les barres colorées qui permettent d’identifier les catégories auxquelles les articles appartiennent sont déplacées, la mise en pages est légèrement revue dans un souci de lisibilité.

Sur iPhone, la grille se transforme toujours en liste, mais les photos y figurent cette fois-ci (alors que dans l’exemple de la première photo, il n’y en avait pas). Nous pouvons même précisément les positionner dans leur cadre. Le texte vient s’y apposer avec une légère ombre afin de le rendre lisible en toutes conditions (photo claire par exemple). Les barres de couleur sont par ailleurs déplacées dans un même souci de lisibilité. Quant aux titres des articles, ils migrent sous « l’image d’en-tête » : la photo étant forcément plus petite, du texte apposé viendrait la cacher.

Remarques supplémentaires

Techniquement, nous utilisons EPUB 2, même si des media queries nous permettent de différencier la mise en pages sur iPhone. Ces media queries 5 étant prévues pour ne pas avoir d’impact sur les autres styles de présentation — elles pourraient par exemple faire sauter toute la mise en pages sur le moteur de rendu Adobe —, cette solution est donc fonctionnelle de suite, pour un grand nombre d’appareils de lecture, y compris les liseuses.6 Bien évidemment, nous pourrons facilement la « mettre à jour » vers EPUB 3.

Quelques détails supplémentaires sur la mise en pages « avancée » : citation et galerie d’images.

La navigation est très facile à appréhender. On peut la comprendre au premier coup d’oeil. Et même si on ne la comprend pas, il suffit d’essayer une seule fois. Nous essayons de mettre en pratique l’adage d’Adrian Forty :

Un design ne fonctionne que s’il intègre des idées communément admises par les gens que ce design vise.

Dernier point, et non le moindre, on peut également utiliser cette solution pour des essais, des guides, des magazine-books (mooks) et bien d’autres types de publication. L’idée est simple, elle peut donc s’accommoder de différents contenus sans adaptation particulière.

* * *

  1. c’est une tendance générale, cf. le succès des apps et services de lecture différée comme Readability ou Pocket.
  2. Bien souvent, ce cas d’usage a été prévu par les développeurs des apps et services.
  3. L’idée peut paraître saugrenue mais imaginez un contenu difficile à appréhender. Dans ce cas, cela facilitera la relecture et éventuellement la prise de note. Et s’il y a beaucoup d’images, alors le lecteur pourra revenir en début d’article afin de les observer plus en détail.
  4. les media queries n’étant pas supportés par le RMSDK Adobe, il faut faire très attention.
  5. Elles souffrent malheureusement d’un bug assez gênant sur la nouvelle version d’iBooks…
  6. Cela ne s’est pas fait sans mal puisqu’il a fallu contourner un bug du RMSDK Adobe propre à Android tout en gardant un code performant, c’est-à-dire interprété rapidement par le logiciel de lecture.

1 Comment

  1. 22 mai 2013

    […] Parce qu'il permet de publier à bas coût, le livre numérique fait revivre d'anciens concepts (pensez aux séries) et en voit également se démocratiser de nouveaux. Parmi les concepts qui se démocrat…  […]