Journée Mondiale de l’Utilisabilité 2010

En introduction

Pour la 6ème année, Fred Cavazza a animé une participation française au World Usability Day (qui est tombé un jour férié en France, le 11 novembre. La France est donc en avance d’une journée).

Le thème pour cette année était sur l’utilisabilité des sites d’informations et le programme portait sur :

  • un panorama de la presse en ligne
  • le webdocumentaire
  • l’écrit web
  • la visualisation des données
  • l’information à l’heure du websocial
  • l’utilisabilité des interfaces mobiles

Le thème n’est pas, à priori, celui qui me concerne le plus. Pourtant, la diversité des interventions et le fil rouge utilisabilité ont permis un balayage riche.
Plus que de donner de l’information ou un apprentissage, cet événement était une bonne occasion de sortir un peu de flux de la production et de jeter un œil sur ce qui se fait.

En plus, petite satisfaction personnelle, j’ai eu le plaisir d’y voir Amélie Boucher. Na !

Panorama de la presse en ligne

Benoît Drouillat

A travers son panorama, Benoît Drouillat a fait remonter des points qui ont en particulier retenu mon attention :

  • « un nouveau médium ne s’ajoute jamais aux média antérieurs et ne les laisse jamais intacts. Il les bouscule sans cesse et leur trouve de nouvelles formes et de nouveaux emplois. » (Marshall Mac Luhan), bon, juste pour rappeler que non, Internet ce n’est pas la mort du livre, de la télé, de la carte postale ou de je ne sais quoi !
  • Respecter un design en passant d’un support à l’autre (charte graphique identique du Financial Times du papier à l’écran) est-ce un garant d’une bonne ergonomie ? L’amoureuse de l’identité graphique que je suis aurais tendance à répondre qu’il faut garder des éléments. Mais justement, l’identité graphique, c’est l’art de respecter une identité globale avec des éléments, des supports, des contextes différents. De plus, la plus-qu’amoureuse de l’expérience utilisateur que je suis aurait tendance à dire qu’il faut s’adapter au média et ses modes d’utilisation. Donc ? Donc respecter l’identité ne veut pas dire copier-coller une charte. Et le web a sa propre utilisation, grandement différente du papier.
  • La culture de l’innovation n’existerait pas ou peu en France dans les médias et les efforts sont plutôt portés sur les terminaux mobiles. C’est en effet l’incontournable du moment sans compter, bien sûr, sur le sempiternel blocage financier sur la R&D (Recherche et Développement).
  • Si les versions de journaux en ligne qui ne sont que des versions papier en PDF sont vraiment bien faibles par rapport aux possibilités, c’est au designer de proposer quelque chose exploitant le médium et favorisant les usages (bon, et à la direction de trouver des sous pour !)

Pour un compte-rendu (bien plus fidèle, de fait !) voir à la source 😉 :
Un panorama du design de la presse en ligne

Webdocumentaire

Upian

La conférence d’Upian a eut pour avantage d’ouvrir mes petits yeux d’intégrateur-du-bon-vieux-HTML-de-papa sur un autre support que la page web traditionnelle.
Les projets présentés étaient :

  • Gaza Sderot
  • Prison Valley

« Gaza Sderot » (mais ? tiens ! Jonez Ronez nous en avait aussi parlé lors de sa conférence sur la qualité éditoriale à Paris Web 2008 !) est un projet ayant pour but de présenter des vidéos faites à Gaza, en Israël et à Sderot, en Palestine. L’ensemble du webdocumentaire est basé sur cette volonté de toujours montrer les deux villes en parallèle.

« Prison Valley » (qui, selon Ben, serait « partout ») propose près de 3h de films articulés sur une frise chronologie permettant de l’interaction avec des éléments connexes.

Ce qui est à retenir c’est que ces deux webdocumentaires abordent la page web avec des principes de navigation originaux. Mais rien n’a été dit sur des tests d’utilisabilité (tests utilisateurs) fait pour valider ces navigations.
Je me demande aussi si l’accessibilité est prise en compte…

L’unique point technique soulevé était sur l’innovation et le fait que les équipes sont tournés vers les nouveautés technologiques pour toujours chercher à aller plus loin.

L’écrit web

Éric Mettout – Rédacteur en chef du site L’Express

Cette conférence aurait largement pu prendre une demi-heure de plus. Les informations données par Éric Mettout ne sont pas nouvelles (pour quiconque consomme des informations sur le sujet, en tout cas) mais c’est très bien retranscrit. Il me semble que cette conférence balaye la totalité du sujet. Les diapositives étaient très complètes et peuvent aisément servir de « rattrapage ».

Mes notes en vrac :

  • la longueur d’un texte sur le web est aussi dépendante de la façon dont on va architecturer le texte. Penser à laisser des respirations dans un texte long.
  • les questions 5W2H (What, Where, Who, When, Why, How, How many) doivent avoir été couvertes par les premiers éléments : titre, intertitre, chapô, et, au pire, premier paragraphe.
  • C’est également dans cette même zone que doivent figurer les mots qui permettront aux moteurs d’indexation de classer la page.
  • L’écriture web c’est aussi des photos, des vidéos (attention aux droits de diffusion !), des mashups, l’anticipation des commentaires à venir, des liens. Le rédacteur web doit avoir ces outils là en tête et s’en servir.
  • A propos des mashups, Éric Mettout a évoqué les frises chronologiques, la visualisation de données, les arborescences, les webdocumentaires. Il a alors souligné le fait que, grâce à des outils en ligne (dipity, Many Eyes, Pearltrees…), l’éditeur est maintenant à même de travailler lui-même ces éléments (voilà pourquoi ils rejoignent les tâches de l’écrit web).
  • Le rédacteur en chef de L’Express atteste que plus on fournit des liens externes à un internaute …plus il revient ! (Si ce principe me paraît plein de bon sens, il semble que là, il ait été vérifié et validé par un site dont les revenus sont probablement basés sur l’audience. Voilà qui apporte de l’eau à ce moulin)
  • chaque article est potentiellement une page d’atterrissage. Cela doit être prise en compte dans les principes de navigation du site.
  • L’écrit web (journalistique) peut aussi être du live-blogging ou l’écriture dédiée à des réseaux sociaux. Commenter une manifestation en direct, animer une page éditoriale sur Facebook, alimenter un fil Twitter d’actualité est un exercice spécifique auquel le journaliste doit s’adapter. Il en va de même pour le blog.

Enfin, Éric Mettout a fini de balayé tout son paysage de journaliste web en insistant sur combien les informations de web analytics pouvait être précieuses (et nouvelles !) pour un éditeur qui voit rapidement quels sont les contenus qui « marchent » le mieux. Le rédacteur web doit donc faire appel à ces informations et s’en servir.

Si la conférence a été faite au pas de course, je pense donc que le diaporama vaut une lecture.

Visualisation des données

Caroline Goulard

Caroline Goulard est venue nous « vendre » la visualisation des données. On a donc commencé par une introduction rappelant que la visualisation des données permettait de rendre compréhensible aisément une multitude d’informations car elle fait appel à notre intelligence visuelle plutôt que verbale. Bon, je ne sais pas pour vous, mais moi j’en étais déjà convaincue.
Spécifiquement à propos de l’utilisabilité, elle a précisé que la visualisation de données permet :

  • la personnalisation
  • l’interactivité
  • l’affinité
  • l’immersion

et que ces éléments permettaient donc une expérience utilisateur positive (en fait, on est plus dans la désirabilité que l’utilisabilité selon moi et en me référent au schéma de P. Morville).
Les trois modes d’engagement de la visualisation de données offre une forte préhension de l’utilisateur :

  • la vision
  • la manipulation
  • la circulation

Pour organiser une visualisation de données, il faut penser « LATCH » : Localisation Alphabet Temps Catégorie Hiérarchisation.
Les conseils finaux de Caroline Goulard pour concevoir une visualisation de données :

  • de garder à l’esprit que le but est de fournir de l’information ;
  • de privilégier la fonction et non l’esthétique ;
  • de donner du contexte ;
  • de tester ses interfaces à l’aide de tests utilisateurs.

L’information à l’heure du websocial

Fred Cavazza nous livre un passage en revue des impacts du websocial et des usages qui en découlent sur les médias informatiques.

Il note que le multiplicités des usages apporte une nouvelle complexité aux interfaces qui prévoient maintenant plusieurs couches d’information :

  • l’éditoriale,
  • une partie communautaire
  • reliée à une partie sociale.

Il se livre ensuite à son exercice préféré (enfin, c’est une interprétation toute personnelle) : les hypothèses d’évolution.
Il en cite trois :

  • la personnalisation : des médias d’information dont les pages sont créées à mon image
  • l’information à géométrie variable : comme le New York Times par exemple, qui propose une interface classique, une interface écrémée ne gardant plus que le contenu « brut » et une interface linéaire chronologique.
  • la contextualisation en fonction du terminal : si je suis sur mon ordinateur de bureau je ne voudrais pas avoir accès au mêmes fonction qu’en mobilité, par exemple.

Utilisabilité des applications mobiles

Backelite

Backelite est spécialisé en interfaces mobiles. A travers la présentation de leur société et de quelques unes de leurs réalisations, ils insistent sur :

  • la complexité liée à la multiplication des plateformes,
  • l’importance de se consacrer d’abord sur les fonctions premières,
  • le fait que le design doit être dédié à la simplicité et à l’explication
  • et que le contenu doit être adapté au terminal.

En conclusion

Félicitations à Fred Cavazza qui a réussi, je trouve, un joli éventail de sujet autour de l’utilisabilité via les sites d’information. On a abordé, au cours de cette demi-journée, les sites de presse traditionnels, le webdocumentaire et ses originalités, l’écriture web (bien) vue par un journaliste, l’information de données et sa retranscription visuelle (et utilisable !), l’incursion du websocial dans la consommation et les usages de l’information et un focus sur les applications mobiles (inévitable, par les temps qui courent) !

Encore une fois, cette conférence était plus un temps d’arrêt sur ce qui se fait que de la mise en pratique.

A cette occasion, Eyrolles, Designers Interactifs et L’Express ont gentiment distribués quelques livres, extraits et magazines.

Les 100 agences qui font le design interactif, Les métier du design numérique, Ergonomie web illustrée
Les 100 agences qui font le design interactif, Les métier du design numérique, Ergonomie web illustrée

Voir : Journée Mondiale de l’Utilisabilité 2010

Responsable Qualité web

Après quelques années sur mon poste actuel de chef de projet web, me voilà maintenant chargée d’une nouvelle mission : responsable Qualité web.

En fait d’une nouvelle mission, il s’agit plutôt de continuité. En effet, depuis que j’étais arrivée sur mon poste d’intégrateur (HTML / CSS), c’était surtout avec la casquette « interface » et pour travailler sur toutes les problématiques d’ergonomie, d’accessibilité, de référencement naturel, etc.
Tous ces aspects ni visant qu’une chose : l’expérience utilisateur positive et l’optimisation côté développement.

Je fais donc un pas de plus pour me retrouver tout à fait du côté de la conception et pousser plus en avant tous les aspects qualité.
Ma mission englobe différents postes : le suivi des sites (amélioration de l’existant, conseil sur les projets), la gestion et la rédaction de documents de référence, le développement de méthodes et d’outils, l’animation autour de la Qualité web (information, formation, montée en compétence) et, peut-être mon préféré : la veille. 🙂

J’attaque cette mission dont le changement porte essentiellement sur l’organisation de mon quotidien ; pour le contenu, ce n’est « que » la suite de ce que j’aime depuis toujours.

Ma petite pêche du 13/11/2008

Voici, via Blogmarks, le ou les derniers favoris que j’ai recueillis.

Synchronisation automatique et quotidienne via Blogmarks, outil de gestion de favoris en ligne.

Guide éditorial pour rédacteur web

Le métier de rédacteur web est un métier à part. Celui qui l’exerce doit avoir des compétences rédactionnelles, bien sûr, mais il doit aussi savoir s’adapter à son média si particulier : Internet.

Le rédacteur web doit également être capable de répondre aux attentes des autres intervenants de la conception de site web. Des notions d’accessibilité, de référencement, d’ergonomie sont indispensables (comme c’est d’ailleurs le cas pour tous les métiers d’interface).

Voici un guide rédactionnel pour le web.
Son but est d’aider le rédacteur web, élément par élément, à répondre aux spécificités du média. Pour cela, deux objectifs sont visés :

  1. Connaitre les règles de la rédaction web
  2. Comprendre les règles de la rédaction web

Le style éditorial

  • Utiliser un style rédactionnel simple
  • Faire des textes courts

L’écran (ou les synthèses vocales) font d’Internet un média où la lecture est plus difficile que sur papier.

Ces deux règles profitent à : l’accessibilité, l’ergonomie

L’organisation de l’information

  • Utiliser le principe de la pyramide inversée

L’internaute doit pouvoir trouver l’information principale très rapidement. Il faut donc mettre les contenus les plus importants et les arguments les plus marquants en début de texte et descendre au fur-et-à-mesure vers les précisions.

Ces deux règles profitent à : l’ergonomie, le référencement naturel

La rédaction des titres

  • Les titres doivent être compréhensibles hors-contexte
  • Les titres doivent être hiérarchisés et ordonner la page

Les internautes, en arrivant sur une page web, cherchent à savoir rapidement le contenu global d’une page.
Les titres sont une excellente manière de parcourir une page et de se faire une idée de son contenu. Visuellement, ils sont généralement mis en valeur et permettent de sauter de titre en titre.

La liste des titres d’une page est d’ailleurs un des points d’entrée de la synthèse vocale.

Les moteurs de recherche sont très attentifs à la titraille. Elle est pour eux un indice fort du contenu d’une page et donc de sa pertinence par rapport à la recherche d’un internaute.

De nombreux usages font que les titres d’une page web peuvent se retrouver isoler de leur contenu : flux RSS, résultats de recherche, liens directs à l’intérieur de la page…

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

L’emphase sur les mots-clé

  • Prévoir de l’emphase

De la même manière que les titres sont un repère pour l’internaute qui découvre une page, les mots importants doivent être mis en valeur pour servir d’accroche à l’œil qui parcourt la page.

Dans une moindre mesure que pour les titres, les moteurs de recherche y sont aussi sensibles.

L’emphase mise sur un mot sera relayée par de la couleur, de la graisse, de l’italique…

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

Les aides à la compréhension

  • Expliquer les abréviations

La règle de rédaction française dit qu’une abréviation doit être expliqueé, lors de sa première occurrence, directement dans le texte. Pour les occurrences suivantes, sur le web, l’explication peut apparaître en info-bulle au survol de l’abréviation.

Cette règle est à adapter en fonction de la complexité de l’abréviation et des usages.
« SNCF », par exemple, n’est pas forcément à expliquer ; l’usage en est suffisamment répandu. L’abréviation « PTFR », incompréhensible pour une majorité de personnes, n’est pourtant pas à traduire dans le cadre d’un intranet du groupe de travail qui à créé « PTFR ».
Parfois, c’est plutôt l’explication qui est obscure. Expliquer que « RSS » signifie « Really Simple Syndication » ne renseigne pas beaucoup. Il faut peut-être alors avoir plutôt recourt à un glossaire (voir ci-dessous).

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

  • Prévoir un glossaire

Faciliter la compréhension de vos textes en proposant un glossaire. Vous pouvez le prévoir en bas de page ou sur une page dédiée.

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

La langue

  • Indiquer et faire indiquer les changements de langue

Afin de pouvoir être bien compris, les mots, expressions et phrase dans une autre langue que la langue principale doivent être précisés au développeur qui intègre la page.

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

La rédaction des liens

  • Rédiger des liens explicites hors-contexte

Tous comme les titres et les mots en emphase, les liens sont des repères visuels sur lesquels l’internaute s’appuient pour parcourir la page.
Tous comme les titres, la liste des liens est un des points d’entrée lorsque l’on consulte une page à l’aide d’une synthèse vocale.

Le robot des moteurs de recherche utilise le libellé du lien comme un indice fort.

Cette règle profite à : l’accessibilité, le référencement naturel

  • Garder le même intitulé pour des libellés de liens pointant au même endroit.

Cette règle profite à : l’ergonomie, le référencement naturel

  • Différencier des liens similaires grâce à leur info-bulle

Dans certains cas, on voit des liens dont le libellé est le même alors que la destination est différente. C’est le cas typique des « Lire la suite ». Dans ce cas là, les titres peuvent être différenciés avec l’utilisation de l’info-bulle qui apparaît au survol du lien (exemple : Lire la suite de « Guide éditorial pour rédacteur web »).

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

  • Prévoir les informations supplémentaires

Dans tous les cas où le libellé manque de précisions, l’info-bulle permet de relayer ces informations sans apparaître directement dans le texte. Attention toutefois, tous les internautes n’auront pas le réflexe de survoler le lien pour y chercher des renseignements.

L’info-bulle doit toujours être plus longue que son libellé.

Cette règle profite à : l’accessibilité, l’ergonomie

Les aides rédactionnelles au téléchargement

  • Prévoir les informations techniques du téléchargement

Si un téléchargement est prévu, par exemple un PDF, il faut indiquer le format du document à télécharger, son poids, sa langue.

Ces informations doivent être présentes dans l’intitulé du lien et / ou dans son info-bulle. Pour des raisons de visibilité, elles peuvent également être reprises dans le texte, dans une zone à part…

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

La rédaction des éléments de tableau

  • Rédiger un titre pour le tableau

Le titre du tableau doit permettre à l’utilisateur de savoir immédiatement de quoi va parler le tableau.

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

  • Rédiger un résumé du tableau qui explique son organisation

Le résumé du tableau n’apparaît pas directement dans la page. C’est une source supplémentaire insérée dans le code. Il doit indiquer, notamment pour les lecteurs d’écran, le contenu du tableau, son organisation, ses entêtes.

Cette règle profite à : l’accessibilité

  • Signaler les entêtes et pied-de-tableau

Chacune des entêtes de tableau doit être signalée car elles sont codées différemment. S’il y a un pied de tableau, il doit également être signalé au développeur.

Cette règle profite à : l’accessibilité, l’ergonomie

  • Donner un résumé pour chaque en-tête

Enfin, pour chaque entête, il est bon d’indiquer une version « raccourcie » du texte. Car les lecteurs d’écran reprennent, avant chaque cellule, le libelé de l’entête à laquelle elle se réfère. Ce texte répété régulièrement peut être remplacer par un résumé qui n’apparaîtra pas dans la page.

Cette règle profite à : l’accessibilité

Les compléments textuels des images

  • Prévoir l’alternative textuelles des images

Normalement, le rédacteur web n’a a s’occuper que des images de contenu. Les illustrations ou images décoratives prévues par le designer ne sont pas concernées. Pour les images de contenu, l’alternative est soit une courte phrase, soit un texte descriptif. Si l’image est un lien, l’alternative indique également la fonction du lien.

Exemples :
Pour le logo d’un site qui permet de revenir à l’accueil : « Nissone Veille – Retour à l’accueil ».
Pour un graphique : un texte expliquant la totalité du graphique.

Cette règle profite à : l’accessibilité, le référencement naturel

Le style rédactionnel des boutons

  • Utiliser des verbes

Qu’il s’agisse de bouton de formulaire ou de liens présentés sous forme de bouton pour inciter l’internaute à agir (les « call-to-action »), utiliser des verbes contribue à indiquer à l’internaute qu’il doit, lui, interagir et rappelle que quelque chose va se passer en réaction à son clic.

Cela peut être des verbes à l’infinitif ou à la première personne du singulier, selon le style rédactionnel retenu.

Cette règle profite à : l’ergonomie

L’organisation textuelle des formulaires

  • Réunir les items par groupes logiques

Pour faciliter la compréhension d’un formulaire, les items, s’ils sont nombreux, peuvent être répartis par groupes logique (exemple : adresse de facturation / adresse de livraison).

Il faut alors donner un titre à chaque groupe logique. Ce titre doit aider à comprendre dans quel contexte les champs du groupe doivent être remplis.

Cette règle profite à : l’accessibilité, l’ergonomie

Les règles typographiques

  • Prévoir et signaler les règles typographiques

Le web n’échappe pas aux règles typographiques (espaces de double ponctuation, quadratins…). Signalez-les et imposez-les au développeur web qui intègre vos textes.

Ce guide a été écrit à l’aide de mes connaissances d’intégration mais aussi en ergonomie, en référencement naturel et en accessibilité. Les sources suivantes sont celles dont je me suis aidée ou dont je vous recommande la lecture :

Voir aussi le Mémo Rédacteur web / intégrateur HTML qui fait suite à ce billet et qui reprend dans un tableau ces différents points pour le rédacteur comme pour l’intégrateur.