Entretien avec Marie-Valentine Blond, Olivier Marcellin, Melina Zerbib, co-auteurs de l’ouvrage Lisibilité des sites web. Des choix typographiques au design d’information, collection « Accès libre », éditions Eyrolles, Paris, novembre 2009. Propos recueillis par Benoît Drouillat.

1. Quels sont vos parcours respectifs ?

MV J’ai obtenu un DSAA création typographique à l’école Estienne en 2005 après un BTS communication visuelle à l’ESAA Duperré.
J’ai ensuite travaillé trois ans en tant que graphiste dans une agence de design d’information, ce qui m’a permis de bien appréhender les problématiques liées à ce domaine.
Je travaille désormais dans le secteur de l’édition.

OM J’exerce le métier de designer depuis plus d’une dizaine d’années, avec une prédilection pour le savoir faire typographique et le design d’information.
Je possède un DSAA création typographique, obtenu à l’école Estienne.
Enseignant en typographie dès 2002 à l’école de communication visuelle (ECV), j’interviens désormais ponctuellement à l’université (licences, masters professionnels), sur des thématiques peu usitées telles que « la structuration de l’information sur le Web », « le processus de lecture sur les écrans digitaux », « la typographie pour le Web », « l’histoire de la typographie », etc.
Sensible à la démarche « d’ergonomie de l’information » comme j’aime à l’appeler, je privilégie une approche du design fonctionnel dans mon travail.
Depuis 2007, j’effectue des recherches sur la lisibilité des médias électroniques, pour des contenus orientés vers le savoir, les sciences, l’éducation et la culture. La lisibilité de l’information me passionne et d’autant plus sur les supports interactifs.

MZ Après un BTS en communication visuelle option multimédia, j’ai poursuivi mes études en DSAA création typographique à l’école Estienne. Malgré ma formation initiale plutôt portée vers l’écran, j’ai toujours été attirée par les techniques traditionnelles d’impression et le monde de l’édition papier, ce qui m’a conduit vers l’apprentissage de la typographie. Mon projet de diplôme de DSAA, obtenu en 2009, interroge les modèles graphiques actuels de la presse en ligne pour imaginer de nouvelles formes possibles de consultation de l’actualité sur le Web.

2. Comment est né le projet de votre livre ?

OM Muriel Shan Sei Fan, responsable éditoriale du secteur informatique des éditions Eyrolles, m’a contacté le 18 avril 2008, précédant la programmation d’un atelier intitulé : « La lisibilité des caractères typographiques sur les écrans numériques », à destination de professionnels du Web, que j’ai animé lors du Webdesign International Festival (Wif) à la technopole Ester, à Limoges.
Muriel était alors à la recherche d’un sujet d’écriture sur ce type de thématiques orientées vers la lisibilité des contenus sur internet. C’est donc à elle que revient l’initiative du projet de ce livre.
J’ai accepté avec un élan spontané ! tout en affirmant l’envie de constituer une équipe de travail avec Marie-Valentine, également pressentie par Muriel, de par ses recherches sur le processus de lecture et la typographie sur écran, pour lesquels j’avais publié des extraits sur mon blog Objetslivres (qui est consacré à l’histoire graphique des livres).
Par la suite j’ai proposé de confier l’écriture de la préface à Étienne Mineur, qui était président du Wif 2008. Étant tous deux chargés de cours en licence webdesign à l’université de Limoges cette même année, cela a permis par la suite des échanges fructueux, y compris avec un des étudiants, Maxime Mollon.
Il en a été de même avec Melina Zerbib, étudiante à l’école Estienne qui m’avait contacté en juin 2008, pour des renseignements sur la thèse d’Émile Javal, dans le cadre de son projet de fin d’étude à venir sur le design de presse en ligne, et à qui j’ai proposé de nous rejoindre en mars 2009.
Karine Joly, éditrice chez Eyrolles, a été notre principale interlocutrice tout au long de ce projet, avec l’aide de ses collaboratrices. Elle nous a accordé une véritable confiance, dès le début, alors que c’était notre toute première expérience d’auteurs.

3. Qu’est-ce qui vous a motivé à l’entreprendre ?

OM Le défi à relever a été le premier élément de motivation qui m’est venu à l’esprit, car il n’existait aucun ouvrage à ma connaissance ayant pour trait la lisibilité des sites web, du point de vue de la typographie et du design, du moins.
La seconde motivation a été l’excitation de concevoir un support pédagogique utile aux étudiants et pour les professionnels.
De même, cela a été une occasion formidable de constituer des éléments de recherches inédits, propice à l’essor de mon expertise professionnelle en design d’information appliquée aux médias numériques.

MV Une des motivations principales pour ma part est le partage de connaissances : je suis souvent assez surprise de voir que les graphistes ou designers n’ont pas forcément de culture typographique, ceci est sans doute lié au fait que les formations ne mettent que rarement cette discipline en avant. J’ai eu la chance de rencontrer lors de ma formation tant à Duperré qu’à Estienne des « maîtres » passionnés qui m’ont donné envie de partager moi aussi mes connaissances. Tout au long de l’écriture, nous avons veillé à ce que le contenu du livre puisse apporter des connaissances aussi bien aux novices qu’aux webdesigners confirmés.
MZ J’espère que le livre permettra à un plus large public d’accéder à un certain nombre de recherches et de connaissances jusque là peu accessibles. J’aimerais qu’il puisse permettre à des lecteurs plutôt « techniciens » de comprendre les enjeux de la lisibilité pour tout site web, et qu’il permettra à des lecteurs plutôt « graphistes » d’approfondir leurs connaissances et de nourrir leur réflexion sur les spécificités du support web.

4. Dans cet ouvrage écrit à trois mains, comment avez-vous travaillé ensemble ?

OM Au tout début de l’écriture, lorsque que nous n’étions que deux co-auteurs sur les trois, au final – moi-même et Marie-Valentine –, nous avons constitué un plan du futur ouvrage.
Pour Marie-Valentine, il s’agissait d’établir une réflexion pédagogique sur les aspects cognitifs de la typographie, du texte, et de l’accessibilité web, dès la première partie, afin de donner les bases essentielles sur le processus de lecture sur les écrans, avant de passer aux autres parties, appliquées au webdesign.
De mon côté, j’ai proposé les contenus de la troisième partie consacrée pour l’essentiel à la « mise en écran » et à la structuration des contenus.
Les éléments de la seconde partie, dédiée à la typographie ont été créés pour moitié puis rassemblés en commun.
Cette méthode nous a permis de répartir au mieux le travail, en se complétant.
Pour cela, nous avons partagé nos champs respectifs de connaissances, par une discussion ouverte, ceci afin de faciliter le travail en toute autonomie, étant par ailleurs éloignés géographiquement l’un de l’autre.
Nous avons également choisi d’interviewer un grand nombre de professionnels dans différents disciplines, qui ont apporté leurs précieux témoignages : des créateurs de caractères, contactés par Marie-Valentine, et les professionnels du webdesign pour ma part.
Melina, qui est arrivée plus tard, a pu bénéficier utilement du plan, tout en apportant une grande valeur ajoutée. Son apport a également été précieux car non seulement elle a su nourrir l’écriture des chapitres qu’elle a choisi de traiter (pour l’essentiel sur la typographie numérique et le développement web), mais elle a également fait partager ses connaissances du design de presse en ligne, à travers des extraits de son mémoire de fin d’études, intégrés tout au long de l’ouvrage.
Karine Joly nous a guidé tout le long, d’une part en apportant le rythme nécessaire dans les dates de rendus des douze chapitres qui constituent cet ouvrage, mais en apportant aussi un regard externe sur la lexicologie de nos écrits.
Enfin, entre co-auteurs, nous avons systématiquement échangés nos contenus, afin de nous relire, ce qui a été l’occasion de donner des premiers avis.
Tout cela a pu constituer un véritable travail d’équipe, très stimulant.

5. L’ouvrage couvre un large spectre de problématiques relevant du design d’information : Pourquoi avoir choisi cette approche très transversale ?

MV Les différents aspects du design d’un site interagissent les uns avec les autres. Pour une problématique comme la lisibilité, on ne peut se contenter de couvrir un seul aspect. Quand on parle de lisibilité, c’est sans doute la typographie qui vient à l’esprit en premier lieu. Or, ce n’est pas le seul aspect qui compte : la rédaction web, la structure, la mise en forme, l’ergonomie, l’accessibilité sont autant d’éléments à prendre en compte, d’où la nécessité d’avoir une approche transversale.

OM La notion de design, en général, reste incomprise dans notre culture latine, étant attribuée pour l’essentiel au design objet. Ne dit-t-on pas couramment chez nous : « Ce meuble est design » ? pour signifier des valeurs, qui sont surtout du domaine de la forme, plus que du fond.
Même si l’esthétisme des sites web n’est bien sûr pas totalement écarté dans ce livre, les propos tenus s’orientent avant tout vers la définition originelle des métiers du design : c’est-à-dire celle du concepteur, et à dessein, de la fonctionnalité à donner aux interfaces graphiques.

MZ Il est vrai que le livre traite de plusieurs étapes du webdesign, mais le propos est tout de même axé sur le design d’information à travers des conseils sur la structuration des contenus web, la mise en espace et la hiérarchisation des éléments : c’est d’ailleurs pour cela que la question typographique est centrale dans le livre. Mais en amont de ces étapes de travail graphique, il faut avoir pensé la conception d’un site web d’un point de vue de l’architecture d’information et de l’ergonomie. Nous y faisons donc bien sûr référence – d’autant plus que ces étapes préliminaires sont parfois manifestement bâclées – mais l’ouvrage ne prétend aucunement faire autorité ou être exhaustif sur ces sujets. En revanche nous fournissons des pistes de lecture, entre autres ouvragesErgonomie web d’Amélie Boucher (chez Eyrolles).

6. Quels sont pour vous les enjeux du design d’information des sites web ?

MV L’amélioration de l’accès au contenu pour tous les internautes est l’un des enjeux principaux. L’accessibilité des informations est une problématique essentielle, mais pour autant, il ne faut pas négliger l’aspect esthétique, c’est tout l’interêt du design d’information : associer le fonctionnel et le plaisant à l’œil.

OM Alors que la consultation de contenus sur le Web s’accroît de plus en plus, la lecture sur les écrans est de plus en plus soutenue, sans pour autant disposer d’une réelle réflexion sur l’efficience des messages effectivement assimilés par les internautes.
Le design d’information apporte ce savoir-faire sur la qualité des messages à transmettre, essentiellement par une optimisation de la structuration des pages des sites web et de leur mise en espace.

7. Et qu’en est-il de la typographie pour le Web ?

MV Pour l’instant, la typographie est le parent pauvre du webdesign. Mais cela devrait évoluer très rapidement avec les nouvelles possibilités d’incorporation des polices dans les pages web. Il faut voir maintenant comment les licences de polices vont être gérées.
Je suis assez curieuse de voir ce que ces nouvelles opportunités dans le choix typographique vont engendrer dans le paysage web.

MZ Il faut entendre le terme « typographie » dans son acception la plus large, c’est-à-dire à la fois les caractères typographiques et leurs bons usages. Je pense que pour l’heure, des limitations (ou tout du moins, des complications) techniques ainsi que notre manque de recul sur les nouvelles technologies freinent le travail des webdesigners, mais le manque de reconnaissance du rôle primordial du graphisme et de la typographie dans un projet de site web est tout aussi dommageable.

OM La typographie est associée pleinement à la même démarche que le design d’information, en particulier pour la structuration de l’information.
Pour autant, la maîtrise de la typographie ne se limite pas aux seuls choix de caractères et à leur composition, mais bien plus largement à la bonne compréhension du processus de lecture des informations.
Cela englobe la connaissance des signes mais aussi des symboles et plus largement des formes graphiques qui participent à la lisibilité de l’information.
Le design d’information, la typographie et le design interactif devraient donc être systématiquement valorisés lors de la conception de sites web, comme le démontre les quelques contre-exemples donnés en illustration, dans ce livre.

8. L’ouvrage n’a pas d’équivalent en langue anglaise, pourtant habituellement mieux positionnée sur ce sujet : Comment l’expliquez-vous ?

MV Il existe en langue anglaise des ouvrages très spécialisés sur des domaines précis, mais pas vraiment d’ouvrage transversal. Peut-être que les attentes du lectorat anglo-saxon ne sont pas les mêmes que celles des lecteurs francophones ? J’ai aussi une autre hypothèse. Il existe deux mots en anglais pour parler de lisibilité : « legibility » et « readability ». L’un concerne la forme, l’autre, le fond. Il existe des ouvrages en anglais qui traitent de ces aspects séparément, mais pas conjointement.

OM Il semblerait en effet qu’il n’y ait pas d’autres ouvrages du même type, ni en Grande Bretagne, en Allemagne, et ni même aux États-Unis, du moins avec cette approche mêlant les sciences cognitives appliquées au processus de lecture, de la typographie, du design d’information et du webdesign.
Je ne saurais l’expliquer, d’autant plus pour des pays traditionnellement attachés à une grande qualité du design… peut être que ce besoin n’est pas exprimé car les professionnels possèdent ce savoir faire. Très simplement, ils n’auraient donc pas besoin de faire part de leurs connaissances à travers un écrit spécifique, mais ce n’est qu’une simple hypothèse.

MZ Je ne pense pas qu’on puisse l’expliquer par le fait que les professionnels anglo-saxons soient plus compétents. En revanche, je pense que le peu d’ouvrages publiés sur le sujet s’explique par le fait qu’il en va de la lisibilité sur le Web comme des autres sujets liés à cette discipline : c’est justement internet qui reste le terrain d’échange et d’apprentissage privilégié pour ces métiers, car cela offre la possibilité d’échanger entre initiés et d’obtenir des informations à jour. En revanche, il y est plus difficile de trouver un discours didactique et exhaustif, de faire la synthèse de toutes ces informations et d’en sélectionner les plus crédibles… ce qu’un livre peut offrir.

9. Comment l’expérience de cet ouvrage change-t-il votre pratique du design ?

MV Je suis beaucoup plus attentive à l’aspect de l’accessibilité, et aussi plus critique vis à vis de ce que j’observe sur le Web.

OM Les recherches que j’ai menées pendant plus d’un an, en particulier sur l’espace de la page et du Web, ou encore la structuration des informations dans la troisième partie qui m’ont demandé le plus de travail, m’ont permis de renforcer mon point de vue initial sur les innovations à trouver en termes de lecture sur les écrans, et d’amorcer de nouveaux objectifs dans mon activité professionnelle.
Ainsi, mon activité de conseil et de création se trouve d’autant plus stimulée dans les domaines des NTIC (nouvelles technologies de l’information et de la communication).

MZ En effet, je pense aussi que je m’interroge plus qu’auparavant sur les problématiques d’accessibilité, qui sont souvent écartées, j’ai l’impression. Je crois que l’expérience m’a également encouragée à avoir plus d’ambition dans la conception de projets web, car l’étude que nous avons réalisée m’a vraiment démontré l’importance et la valeur ajoutée du design d’information dans ce domaine.

10. Il existe peu d’ouvrages sur le design d’interface web en langue française : pensez-vous que des réflexions comme la votre peuvent trouver un écho dans d’autres problématiques ?

OM Ces réflexions peuvent tout aussi bien s’appliquer au design d’interaction, tels que la conception d’interfaces logicielles, ou pour des bornes interactives, de systèmes d’informations voyageurs sur les écrans LCD, du design d’interfaces des applications des smartphones et des tablettes tactiles, des systèmes d’exploitation, et d’une manière générale, dans toutes les disciplines où la lecture sur écran de données complexes doit être lisible, et donc performante pour l’usager.

11. Quel est selon vous le site d’information en ligne le mieux conçu ?

OM Malheureusement, il n’y en a pas beaucoup à ce jour, et surtout chez nous.
La conception de la quasi totalité des sites web d’information, outre le fait qu’ils se ressemblent tous, est calquée sur le même modèle que celui des blogs.
Par exemple, ils laissent lire une disposition chronologique de l’information sans aucune prise de contrôle par l’internaute (alors qu’ils apprécieraient de disposer de choix personnifiés), avec une densité des contenus présentés qui ne laisse quasiment aucune place à la circulation du regard, qui est pourtant essentielle à l’assimilation des contenus.
Ce n’est donc pas une question de technicité car il y a suffisament de technologies performantes, mais uniquement de design et aussi d’un modèle économique à trouver.
Pour autant, des recherches existent, notamment aux USA, comme par exemple le prototype de page d’accueil du New York Times Article Skimmer créé par le designer et développeur André Behens ou encore Le Times Reader, qui est une application de lecture parfaitement opérationnelle (à télécharger), utilisable aussi bien Online qu’Offline. L’accès aux informations y est en partie payant.

MZ J’appuie la remarque d’Olivier sur le NY Times Article Skimmer. Je pense que le nœud du problème se situe aussi dans les difficultés des sites d’information en ligne à trouver un équilibre économique, ce qui les pousse à faire des concessions sur leur projet éditorial, et qui se répercute donc ensuite sur leur forme graphique. Il en va de même dans tout projet : un client peu certain de ce qu’il recherche conduira le graphiste à apporter une réponse approximative, pas complètement appropriée.
À mon sens, c’est pour cela que l’amélioration de la lisibilité des sites d’information évoluera en fonction de la capacité des éditeurs à définir leur identité. Je trouve par exemple que le site de Rue89 est assez intéressant. S’il n’est pas parfait, il est tout du moins plutôt confortable à lire, notamment par l’utilisation différente qu’il fait du modèle classique en trois colonnes : sur Rue89, c’est la colonne centrale qui est dédiée au flux d’informations, et non celle de gauche, ce qui est assez judicieux car on sent mieux la hiérarchie entre cette colonne d’information, la plus importante, et les deux autres, qui n’ont qu’un rôle de complément. Mais ce que je trouve important, c’est que Rue89 a eu dès le départ une identité visuelle distincte des autres sites d’information, plus brute et rentre-dedans – on aime ou pas – et cela participe aussi à son succès. Assez proche de Libération.fr dans sa ligne éditoriale, Rue89 a aussi une approche de l’identité visuelle comparable à celle du quotidien ; on n’est pas dans le typographiquement subtil et parfaitement calé, mais on recherche avant tout la cohérence entre le graphisme et le contenu éditorial, ce qui est capital pour aider le lecteur-internaute à s’y retrouver dans la pléthore de sites d’information qui co-existent.