Ergonomie, Rails et Architecture de l'information web (2.0)

Après dix jours de dur labeur dont trois de réflexion sur les changements à apporter, la nouvelle version du blog est enfin en ligne. Cette refonte en profondeur, graphique, ergonomique et fonctionnelle a entraîné nombres de développements, et ce afin de contourner certaines fonctionnalités de Typo et de lui en ajouter quelques autres.

La refonte graphique a certainement été de loin la plus longue et la plus fastidieuse. Elle a commencé par la lecture d’un excellent article de David Larlet sur l’importance du rythme vertical en CSS, et par la visite d’un très grand nombre de sites à la recherche d’idées. Sites de templates, de designers, blogs… soit près d’un millier de site visités en trois jours, et quelques moments de découragement durant lesquels il m’est arrivé d’envisager l’utilisation de templates tout faits. Mes desiderata tournaient autour de la simplicité, la propreté, un espace pour le contenu d’au moins 620 pixels de large afin d’afficher correctement mes photos, et un big footer. Merci à Jean-Luc Derrien, de Furya Créations de m’avoir aidé dans la transcendance de mon indigence artistique et photoshopienne.

Je viens enfin de finir de dépiler les quelque 27000 billets qui s’étaient pernicieusement accumulés dans mon agrégateur durant les vacances. Plein plein plein de très bonnes choses, dont :

• Design Float est un Digg like consacré uniquement au webdesign. Une mine de ressources pour ceux qui s’intéressent au sujet.
• Deziner Folio. Ils s’étaient fait connaître en offrant au téléchargement plus de 130 styles Photoshop web 2.0 (sic), mais leurs autres ressources sont probablement encore plus intéressantes.
• Six ways to start writing process, chez Lifehack. Six conseils pleins de bon sens pour ceux qui aspirent à écrire un peu sérieusement.
• Ultimate Server-Side Web Development Cheat Sheets, une liste impressionnante de cheat sheets sur les langages web coté serveur : Ruby, PHP, Perl, ASP.net, Python…
• Ultimate Web Development Cheat Sheet Guide, la même que précédemment, mais pour les langages orienté front : Javascript, CSS, XHTML…
• OpenXML is defective by design, 13 fautes de conception critiques qui rendent le format OpenXML bon à jeter.

Quel est le plus court chemin transformant la visite hasardeuse en acte d’achat ? Malgré plus de 10 ans de web, la problématique du mode d’accès aux données revient fréquemment dans la conception d’un site ou d’une application web. C’est justement à ce problème que s’attaque Patricia Gallot-Lavallée dans son ouvrage édité à compte d’auteur, et préfacé par Frédéric Cavazza, disponible à partir du 5 septembre prochain.

À travers 60 fiches méthodologiques, le lecteur explore pas moins de 60 modèles de navigation, du plus classique au plus innovant, dans une optique alliant systématiquement ergonomie, accessibilité et référencement.

Chaque fiche est présentée sur une double page, et s’accompagne d’exemples glanés sur le web. Une évaluation visuelle permet de noter le modèle sur 3 points : appréciation globale, coût en termes de temps et de budget (les deux étant le plus souvent liés), et accessibilité. Un paragraphe intitulé “pour qui” décrit succinctement le genre de site auquel se destine le modèle étudé. Un avertissement portant souvent sur l’accessibilité ou un conseil complètent cette première colonne qui permet de se faire une idée rapide de la pertinence du modèle.

Le coeur de la fiche consiste en une série de conseils méthodologiques et de bonnes pratiques visant à une mise en place de qualité du modèle. L’approche est technique, mais accessible, et une explication accompagne chaque point abordé. La démarche donne systématiquement la place la plus importante à l’utilisateur dont la satisfaction complète constitue le coeur véritable du livre.

La fiche se termine sur une étude de cas accompagnée d’une interview mettant en avant les avantages, les inconvénients et les limites du modèle étudié.

Mon avis

Je viens de passer la moitié de la nuit et de la journée à dévorer ce livre que j’attendais depuis plusieurs mois jusqu’à la dernière page, et j’ai vraiment adoré. Le livre explore de nombreux éléments d’une page web faisant partie de la navigation sur lesquels je ne m’étais jamais vraiment penché. L’orientation pratique et les conseils très pertinents permettent de se mettre au travail sans attendre, et les bénéfices sur la navigation sont immédiats. On ne regrettera qu’une seule chose : les fiches sont beaucoup trop courtes, et on aimerait pouvoir en lire plus, la limitation venant de la seule double page allouée aux fiches.

Je recommande cet ouvrage aussi bien aux directeurs artistiques et aux designers qu’aux chefs de projets chargés de la conception ou de la refonte d’un site. Conçu comme un livre de recette, Internet, donne moi ce que je veux est un must have dont la place se trouve sur le bureau de tout architectes de l’information.

[edit]
Afin de répondre à une question plusieurs fois posée, il n’y a pas d’erreur dans l’article, la date de sortie du livre est effectivement prévue pour le 5 septembre. Je fais simplement partie des heureux privilégiés à en avoir eu une édition spéciale pré release (et y’a même pas de dédicace, Patricia, prochaine fois qu’on se voit en soirée, tu n’y coupes pas).

À mesure que le haut débit se démocratise et que les machines disposent de suffisamment de RAM pour faire tourner de grosses quantité de Javascript, nombreuses sont les sociétés décidant de migrer qui une partie de leurs applications métier, qui une partie de leurs applications éditées, sur une plate-forme web. Difficile de ne pas être tentés par le Saint Graal des applications instantanément déployées sur des milliers de postes pour les premières, et des applications impossibles à pirater pour les secondes. Encore faut-il faire les choses correctement : bien que le web ne soit finalement qu’un vecteur de transmission et de présentation des informations, les applications web sont très différente des applications de bureau, et le portage ne manque pas de pièges.

L’envie d’écrire un billet sur le sujet me travaille depuis mon expérience sur le projet Optimia / Niveau 1 en 2003. Optimia était l’outil de gestion des dossiers clients d’EDF/GDF. J’avais rejoint l’équipe de développement au moment où ils passaient d’un outil client lourd développé en Power Builder connecté à une base Sybase vers une plate-forme web en J2EE. Toute la difficulté résidait dans une contrainte de 99% d’isométrie ergonomique et fonctionnelle avec la version précédente. Ces contraintes étaient dictées par des impératifs économiques et pratiques – difficile de former des milliers d’utilisateurs en un temps record – et un contexte politique et social hyper tendu avec l’ouverture des marchés de l’énergie à la concurrence dans lequel les changements devaient être limités au maximum. Incidemment, cela coïncidait avec les premières utilisations sérieuses d’AJAX et un regain d’intérêt de ma part pour le web après des années de dédain.

Ce billet tente de mettre l’accent sur des erreurs à éviter et des points clés du portage. Il ne cherche en aucun cas à être exhaustif, bien qu’il ne soit pas exclu que j’aborde un certain nombre d’autres points dans des articles à venir. Les difficultés envisagées sont d’ordre techniques et humaines :

1. La bande passante.
2. Les habitudes des utilisateurs du web.
3. Les habitudes des utilisateurs d’applications desktop.
4. La résistance au changement.

Tout le monde ne dispose pas d’une bande passante illimitée

Bien qu’en France, le haut débit se soit très largement démocratisé, la majorité de la planète utilise encore de vieux modems 56k, et de très nombreuses entreprises utilisent encore en interne des liaisons RNIS 128k.

Afin de permettre à tous de pouvoir utiliser les applications, tâchez de ne rafraîchir que le minimum d’une page tant qu’il ne s’agit pas de valider des informations. L’AJAX est maintenant une technologie éprouvée, disponible par défaut de manière simple dans la plupart des framework web, et son utilisation à bon escient permet d’éviter bien du trafic inutile.

Cependant, afin de rester accessible au plus grand nombre, n’oubliez pas de développer en progressive enhancement, qui veut que l’on développe des applications fonctionnant de la manière la plus simple possible – c’est à dire sur des navigateurs ne disposant pas de Javascript – avant d’ajouter les améliorations clica convi. Les aveugles et les déficients visuels vous en remercieront.

Dans les esprits, une application web doit se comporter comme un site web

Il y a 3 ans maintenant, j’ai été amené à assurer la formation des futurs utilisateurs d’une application utilisant massivement de l’AJAX afin d’utiliser au minimum une liaison RNIS ridicule et par ailleurs déjà saturée. S’agissant du premier portage d’une application desktop sur un environnement de ce type, le retour des testeurs était très important afin d’assurer le portage d’un grand nombre d’autres applications du même genre. Le retour avait été unanime : quand on valide un formulaire et que la page ne se recharge pas, on n’a pas l’impression que les données ont été effectivement transmises au serveur.

Les utilisateurs s’attendent naturellement à ce qu’une application web agisse comme un site web traditionnel. Cela implique particulièrement que tout changement d’état des données manipulées à l’écran doit passer par un rechargement complet de la page, quand bien mêmes les données seraient-elles envoyées en AJAX. Ce point représentait plus qu’une gène pour les utilisateurs qui cliquaient frénétiquement sur leur souris tout en remplissant fiches de bugs sur fiches de bugs, se plaignant qu’aucune des pages ne marchait.

Afin de pallier ce problème, nous avons du provoquer artificiellement le rechargement de la page à chaque validation de formulaire, quand bien même ce rechargement n’entraînait systématiquement aucun changement sur les données manipulées.

Le clic droit n’est pas une fatalité

Une des problématiques auxquelles vous devrez faire face lors du portage d’une application vers le web portera sur l’utilisation du clic droit sur l’application d’origine. En effet, nombreuses sont les applications qui l’utilisent afin de proposer des actions contextuelles qu’il faudra reproduire d’une manière ou d’une autre.

Il est certes possible de récupérer le clic droit en javascript, et de déclencher une action, par exemple l’affichage d’un petit menu déroulant, mais ce n’est clairement pas une bonne idée :

1. Ce n’est absolument pas accessible.
2. Ce n’est pas “web”.
3. Cela supprime des fonctionnalités utiles du navigateur.

Il est donc nécessaire de repenser l’accès aux fonctionnalités contextuelles apportées par le clic droit à l’aune du médium web. Pour cela, plusieurs méthodes existent. La plus simple est encore de créer une barre d’icônes, toujours au même endroit, donnant accès aux fonctionnalités contextuelles généralement offertes par le clic droit. N’oubliez pas de reproduire les raccourcis clavier de l’application originale en récupérant les séquences de touches. Si le portage ne diffère pas trop de l’originale, ses utilisateurs habituels vous remercieront largement de les avoir conservés.

Une refonte ergonomique n’est pas toujours un mal

J’aime à croire que tout n’est pas immuable en ce bas monde, et la conduite du changement est une chose aussi risquée qu’excitante. Tenter un portage à l’identique de l’existant afin de ne pas dépayser l’utilisateur n’est pas toujours une bonne idée. Bien souvent, la refonte ergonomique de l’existant et la formation des utilisateurs vous coûteront moins cher et vous fera perdre moins de temps que de tenter de plaquer un existant sur un média pour lequel il n’est pas fait. Ajoutez-y les économies réalisées par le gain de productivité engendré par l’optimisation des processus au sein de la nouvelle application, et la nécessité d’une réflexion de fond s’impose d’elle-même. Aussi, avant d’exiger une application 100% isométrique à l’existant, penchez vous sur l’équation suivante :

Coût du portage iso - (coût de la refonte ergonomique + communication sur le changement + formation des utilisateurs - économies après la hausse de productivité due à la refonte étalée sur 3 ans)

Si le résultat vous semble largement supérieur à 0, n’hésitez plus : repartez de zéro, ou presque, et à vos utilisateurs une application neuve, mieux adaptée à l’environnement web, plus belle et plus facilement utilisable. Ils vous en remercieront.

Une refonte de processus non plus d’ailleurs

On oublie trop souvent qu’une refonte ergonomique ne se limite pas à inscrire des interfaces à Relooking Extrême. Les applications web, et plus généralement les applications centralisant les données sur une unique plate-forme déportée – serveur de fichiers, serveur de base de données – et non sur le poste client permettent de dématérialiser et d’optimiser de nombreux processus.

Toute la difficulté réside alors dans une très bonne conduite du changement : évangéliser afin de créer une dynamique de groupe qui entraînera l’adoption des nouveaux processus par l’ensemble des acteurs concernés. Mais ceci est une autre histoire.

Je suis tombé un peu par hasard ce matin sur un excellent article – un peu ancien – de Scott Manning intitulé If architects had to work like web designers. L’auteur y transpose ce que nous, chefs de projets en contact direct avec le client, subissons au quotidien à l’aune des architectes, dont le travail produit des résultats beaucoup plus “concrets”. Vous en trouverez ci-dessous la traduction augmentée de mes réflexions sur le sujet.

La traduction

Cher architecte,

Je souhaite vous confier la conception et la construction de ma nouvelle maison. Je ne sais pas encore vraiment de quoi j’ai réellement besoin, aussi vous fais-je entièrement confiance pour élaborer ce qui me conviendra le mieux. La maison devra héberger entre 2 et 45 chambres. Établissez donc les plans de telle sorte qu’on puisse facilement en ajouter ou en retrancher une. Les plans que vous me fournirez me permettront de voir de quoi j’ai vraiment besoin. Aussi, pensez à indiquer les impacts budgétaires de chacune des options de telle sorte que je puisse choisir sur ce seul critère.

Entendons-nous : la maison de mes rêves devra me coûter moins cher que mon habitation actuelle. Assurez-vous cependant d’en corriger toutes les imperfections : le plancher de la cuisine vibre quand je la traverse, et les murs sont insuffisamment insonorisés.

Tant que vous y êtes, diminuez au maximum les coûts de maintenance annuelle, quitte à utiliser dans un premier temps des matériaux plus coûteux comme l’aluminium, le vinyle ou des matériaux composites. Sachez que si vous vous décidez de ne pas utiliser d’aluminium vous devrez justifier ce choix de manière plus que convaincante.

Soyez certain d’utiliser des méthodes de conception de pointe et des matériaux d’avant-garde, je veux en effet que cette maison soit un exemple de ce qui se fait de plus innovant dans le métier. N’oubliez cependant pas que la cuisine hébergera – entre autres choses – mon réfrigérateur Gibson de 1952 sans dépareiller du reste de la maison.

La maison devra convenir à ma famille. Dans ce but, prenez contact avec chacun de mes enfants et de mes gendres. Contactez également ma belle-mère : ses visites annuelles lui donnent une opinion très juste et très précise de la manière dont cette maison doit être conçue.

Pesez attentivement tous les éléments afin de prendre la bonne décision, que je me réserve le droit de contester et modifier sans justification ni préavis.

Vous serez gentil de ne pas m’ennuyez avec les détails pour l’instant. Vous devez concevoir les plans généraux de cette maison, ce n’est donc pas encore le moment de choisir la couleur des tapis. Ceci dit, n’oubliez pas que ma femme aime le bleu.

Pas la peine de mobiliser les ressources pour la construction elle-même. Votre priorité absolue est de créer des plans détaillés. Je compte cependant voir la maison sur pieds 48 heures après les avoir validés.

Bien que vous conceviez cette maison à ma seule intention, dites vous bien que je la vendrai tôt ou tard. Elle devra donc plaire au plus grand nombre d’acheteurs potentiels possible.

Avant de terminer les plans, assurez-vous que le consensus se fasse dans le voisinage. Je vous conseille d’aller vois la maison que mes voisins ont fait construire l’an dernier, nous l’aimons beaucoup. Elle présente beaucoup d’agréments que nous souhaitons voir figurer dans notre nouvelle maison, particulièrement la piscine de 25 mètres. Je suis certain qu’une réflexion poussée permettra de l’ajouter à notre nouvelle maison sans modifications budgétaires.

Préparez un jeu de plans complet. Ce n’est pas encore la peine de faire le design définitif, nous les utiliserons uniquement pour négocier les coûts de construction avec d’autres entrepreneurs. Veuillez toutefois noter que vous nous serez redevable de tous les surcoûts liés à des changement de design postérieurs.

Vous devez être particulièrement excité de travailler sur un projet aussi intéressant ! Disposer d’une telle liberté créatrice dans l’utilisation de techniques et de matériaux d’avant-garde ne doit pas arriver tous les jours.

Revenez vers moi avec vos idées et vos plans aussi vite que possible.

PS : ma femme vient juste de me dire qu’elle est en désaccord total avec la majorité des instructions que je viens de vous transmettre. Il est de votre devoir d’architecte de résoudre ce différend. J’ai tenté de le faire par le passé, mais sans parvenir à un quelconque résultats satisfaisant. Si vous ne pouvez pas prendre cette responsabilité, je me verrai dans l’obligation de m’adresser à un autre architecte plus compétent.

PPS : peut-être n’ai-je finalement pas besoin d’une maison, mais d’un camping car. Si c’est le cas, merci de me le dire le plus rapidement possible.

Signé : le client

Le commentaire

Saisissant, n’est-ce pas ? Pour un peu on pourrait presque croire qu’il s’agit d’une situation vécue, et nombreux sont ceux d’entre vous qui se retrouveront dans ce texte.

À mon sens, le problème vient clairement d’une méconnaissance flagrante du travail nécessaire à la réalisation d’un site ou d’une application web de la commande à la livraison. Autant pour une maison, il est possible de s’imaginer la quantité de travaux nécessaires pour telle ou telle amélioration, ne serait-ce que parce que la pierre est “réelle”. À cette réalité vient s’opposer le “virtuel” du web – le travail pour y parvenir est lui, bien réel – donc une fausse idée de rapidité et de facilité, que ce soient dans la réalisation ou dans des “modifications mineures” de dernière minute.

Outre l’opposition entre le concret et le virtuel, on peut attribuer cette méconnaissance du métier à plusieurs autres facteurs :

1. La grande majorité des équipes projet côté client sont composées exclusivement de personnes issues du marketing, ou, dans le cas d’applications web, de spécialistes métier sans aucune connaissance technique, sans pour autant qu’il soit fait appel aux équipes IT – ce qui n’est souvent pas plus mal – ni à une assistance à maîtrise d’ouvrage. Ce point fera d’ailleurs l’objet d’un billet dédié.
   Quelles que soient les raisons de cet ostracisme de la technique – incompatibilités culturelles, guerres de prérogatives en interne – ce dernier est souvent la cause de nombreux problèmes dans un projet web, charge au prestataire de démêler, puis de gérer à l’avantage du projet les querelles politiques de son client.
2. Enfin, le web se remet à peine de la première bulle, et il doit maintenant conquérir, si ce ne sont ses lettres de noblesse, au moins une certaine crédibilité aux yeux des décideurs, face aux applications clients lourds et aux coûteux systèmes d’informations propriétaires qui semblent nettement plus “rassurants” et “crédibles” qu’un site ou une application web, lesquels gardant une réputation de logiciels futiles et jetables.

Dans tous les cas, la méconnaissance est telle qu’une relation de travail, peut-être un futur collaborateur, me confiait récemment qu’un client lui avait demandé combien de “pages” il lui avait vendu. En 2007.

Lors du premier Yulbiz Paris, j’ai eu la chance de rencontrer Patricia Gallot-Lavallée, consultant web chez Kenazart Strategy Interactive. Patricia finalise en ce moment son premier livre ”Internet, donne-moi ce que je veux !” (dont la couverture resemble furieusement à celle de Don’t make me think), ouvrage d’ergonomie dans lequel elle passe au crible pas moins de 60 modèles de navigation afin d’en extraire la substantifique moelle :

• Les meilleures pratiques en termes d’ergonomie et d’agencement de l’information.
• Les erreurs à ne surtout pas commettre.
• Les critères à respecter en termes d’accessibilité.
• Les éléments permettant de booster le référencement naturel.

Le tout, agrémenté par des exemples en grandeur réelle.

À qui s’adresse le livre ?

• Aux chefs de projets web.
• Aux responsables web.
• Aux responsables mercatique (c’est le mot français pour marketing) et communication.
• Aux ergonomes et concepteurs web.
• Aux directeurs artistiques et aux designers.
• Aux développeurs web.
• Bref, à au moins 95% d’entre vous.

Le livre devrait sortir en juillet prochain, et j’avoue être particulièrement impatient de l’avoir entre les mains, ayant un moment songé à entamer un projet similaire sur ce blog. Et s’il reste de la place, je suis ultra motivé pour en faire la relecture, Patricia, si tu me lis…

Maxime Digue est étudiant en Master 2 Contenus et Projets Internet à l’Université de Metz où il mène un mémoire de recherche sur les thèmes de l’accessibilité et du web 2.0. Il m’a contacté afin que je réponde à un questionnaire sur les relations entre deux thématiques à la cohabitation pas forcément évidente. Il m’a autorisé à publier mes réponses ici. Le sujet est vaste, donc billet fleuve en perspective.

1. En quelques mots, pouvez-vous définir

L’accessibilité numérique

L’accessibilité numérique est le fait de pouvoir rendre une information, un contenu ou une fonctionnalité disponible à tous les utilisateurs quel que soit leur matériel ou leur handicap : surdité, cécité… J’ai par exemple appris il y a peu de temps lors d’un documentaire sur ARTE que 68% des sourds ne savaient pas lire correctement le français. Contrairement à ce que je pensais, le sous-titrage des vidéos ou la présence d’un texte alternatif n’est donc pas une solution au problème. La solution réside en fait dans le doublage des vidéos en langue des signes, ce qui représente un budget considérable.

Le web 2.0

Un joli terme marketing pour parler de la mise à disposition des masses des outils de publication automatisés ne nécessitant aucune connaissance technique, là où il fallait tout faire à la main il y a quelques années. Rajoutons à cela l’accroissement de la puissance des machines et de la bande passante qui permet de faire transiter des média lourds (vidéo, son, flash), une redécouverte du javascript, parent pauvre du web pendant des années, et un retour à une foi dans l’innovation et le progrès après la première bulle Internet, et vous avez le web 2.0

2. Quelles implications l’avènement et la maturation des technologies communément associées au web 2.0 (Ajax/Javascript, Flash/Flex, XML, microformats, etc.) ont-ils eu sur l’ergonomie et l’accessibilité ?

XML et les microformats n’ont pas eu un grand impact sur l’ergonomie et l’accessibilité. Flash et l’AJAX déjà plus.

Ces technologies dites “riches” ne font généralement pas bon ménage avec l’accessibilité. Elles nécessitent en effet pour la plupart un niveau technologique élevé (javascript, greffon dédié) tout en étant très attractives. Elles offrent en effet des possibilités d’interactions avec les utilisateurs qui ont permis de créer de véritables applications web “sexy”.

Il y a évidemment une contrepartie : le manque d’accessibilité, qui implique des développements et donc des coûts supplémentaires particulièrement importants, pour une tranche d’utilisateurs mal ou pas quantifiée par les entreprises, quand elle n’est tout simplement pas ignorée.

3. Selon vous, l’usage fait par les concepteurs de technologies est-il au détriment de l’accessibilité ?

Cela dépend comment est faite la conception. Si c’est au mépris des règles élémentaires d’accessibilité, oui. Afin de rendre un site accessible le concepteur utilisant des technologies riches (AJAX, Flash…) aura deux solutions.

• Soit il part d’une application ou d’un site parfaitement accessible, puis y ajoute les fonctionnalités riches. C’est le progressive enhancement : on se met au pas du plus faible, puis on ajoute des couches pour les plus favorisés.
• Soit il part d’une application non accessible, et chaque fois qu’il rencontre une fonctionnalité reposant sur des technologies riches, il met en place un moyen de contournement. C’est le graceful degradation, qui se met gracieusement au pas du plus faible. Et oui, ce nom est particulièrement ironique / cynique.

Évidemment, sur un projet neuf, une seule de ces méthodes est à envisager, je vous laisse deviner laquelle.

4. Quelles sont les solutions pour rendre ces technologies accessibles ?

Malheureusement, elles sont toutes coercitives et pénalisantes : loi puis pénalités financières pour les entreprises ne respectant pas un certain niveau d’accessibilité. Il est en effet illusoire de penser que le seul militantisme va permettre une prise de conscience générale là où la loi ne le permet déjà pas vraiment.

5. Vous semble-t-il possible de rendre accessible le contenu issu des outils de publication (blog, wiki, CMS) ainsi que des outils de partage (liens, photos, vidéos) ?

En ce qui concerne les outils de blog, ils le sont déjà pour la plupart à un certain niveau. En ce qui concerne les sites de partage photo ou vidéo, ça me semble beaucoup plus difficile pour deux raisons :

1. Lourdeur et coûts de la mise en oeuvre des moyens de contournement (doublage des vidéos en langue des signes par exemple).
2. Le fait que les producteurs de contenus (donc vous et moi) doivent être responsables de la fourniture de contenus alternatifs. Combien d’entre vous mettent systématiquement un titre et une description à la fois précise et détaillée à leurs photos ?

6. Réseaux sociaux, classification collaborative (folkosonomie) et travail collaboratif (groupware) rendent-ils l’information plus accessible ?

Ces outils apportent un avantage certain dans la mise en relation des personnes et des informations. De là à dire qu’ils rendent l’information plus accessible, je ne crois pas.

En revanche, site de bookmarks à la delicious / blogmarks rend – théoriquement – l’information plus accessible en la regroupant en un seul endroit avec des systèmes de classification pertinents quand il est utilisé correctement : description + tags.

7. Quels sont les impacts et enjeux des normes et organismes internationaux dans le cadre de l’accessibilité et du web 2.0 ?

Lorsque je suis allé au Mobile Web Seminar du W3C, l’idée prédominante de l’ensemble des conférences était que l’on doit développer pour un seul et unique web. Le rôle des organisations internationales est avant tout de proposer des directives d’accessibilité unifiées applicables à chaque pays.

C’est au plan national que les législation doivent se faire contraignantes à mesure que s’opère une prise de conscience des nécessités d’ouvrir le web à tous.

8. Selon vous, quelle importance doivent prendre les mesures législatives pour rendre le web plus accessible?

Il y a clairement une nécessité de régulation d’une part, et de mise en oeuvre de moyens incitatifs et coercitifs d’autre part si l’on veut que les choses avancent. C’est un peu dommage de devoir en arriver là, mais il semble que ce soit le seul moyen.

En France, cela a commencé par la mise en place de directives sur les sites web publiques et d’un référentiel général d’accessibilité, mais on ne doit pas s’arrêter là. Les entreprises qui n’emploient pas un certain quota d’handicapés sont aujourd’hui pénalisées. Cela pose d’ailleurs de gros problèmes de recrutement : en effet, être “marqué” COTOREP est considéré comme étant particulièrement dégradant, et de nombreuses personnes qui devraient avoir le statut d’emploi handicapé refusent cet étiquetage, avec un effet ubuesque. Certaines grandes entreprises ont en effet largement leur quota d’employés handicapés, mais leur handicap relativement léger ne nécessite pas une qualification COTOREP bien qu’ils y aient tout de même droit. Ces emplois ne sont donc pas comptés dans le calcul des quotas, et les entreprises se voient du coup pénalisées.

La mise en place de moyens coercitifs pour le non respect des directives d’accessibilité devra donc être soigneusement réfléchie : nécessaire, elle doit entraîner une prise de conscience des entreprises et des agences web, sans entrer dans le grand n’importe quoi.

9. Considérez-vous que le web sémantique (xml, xhtml/css, microformats) puisse être la solution pour rendre le web plus accessible ?

Le web sémantique apporte des moyens de classification et de tri de l’information. Ceux-ci ne seront cependant pas exploitables tant que :

1. Ils ne sont pas généralisés.
2. Les outils pour les exploiter ne sont pas fortement répandus.

Aujourd’hui, le web sémantique est avant tout une formidable opportunité pour les outils de data mining. Demain, son application autour des contenus multimédia non accessibles pourra leur faire prendre du sens auprès des plus démunis.

10. Selon vous, quelle est la responsabilité de chacun de ces acteurs du web dans le manque d’accessibilité ?

• Développeurs / intégrateurs : tout à fait responsables. C’est l’intégrateur qui choisira de développer “en divs” ou “en tableaux”, qui ajoutera des champs “alt” pertinents aux images… Et c’est le développeur qui rendra son javascript non obtrusif…
• Graphistes : tout à fait responsable. Il est responsable de choix technologiques fondamentaux, notamment de l’utilisation de Flash dans ses zones de navigation, ou du choix des contrastes entre couleur de fond et couleur des polices.
• Décideurs informatiques clients : tout à fait responsables. C’est à lui de spécifier à son prestataire qu’il doit se conformer aux directives WAI.
• Décideurs informatiques prestataires : tout à fait responsables. Leur mission de conseil les oblige à sensibiliser leurs clients sur les problèmes liés à l’accessibilité numérique. Encore faut-il qu’ils y soient eux-même sensibilisés (disclosure : mon employer est membre du groupe de travail Accessiweb).
• Directions marketing et financières clientes : plutôt responsable pour les directions marketing qui poussent souvent à l’utilisation des média riches, comme le flash, sans se préoccuper vraiment des parts de marché liées aux visiteurs présentants des déficiences visuelles, auditives…
• Directions marketing et financières prestataires : tout à fait responsables. Le handicap n’a jamais été très vendeur.
• Organismes internationaux (w3c) : pas du tout responsable, au contraire. D’une part, le W3C n’a pas de pouvoir normatif, et d’autre part, ce serait faux de dire qu’il est responsable du manque d’accessibilité alors même qu’il est à l’origine du WAI.
• Etats, gouvernements, parlements : tout à fait responsables, cf plus haut.
• Fabricants d’agents utilisateurs : pas vraiment responsables.

11. Quelles raisons peuvent expliquer le fait que l’accessibilité d’un service soit négligée ?

J’en vois trois, comme ça, sans réfléchir :

1. Pas de sensibilisation au sujet de l’accessibilité.
2. Pas rentable en termes de budget supplémentaire / parts de marché gagnées.
3. Je m’en foutisme royal.

12. Pensez-vous que le futur du web soit dans son accessibilité ?

C’est évident, et ce pour plusieurs raisons :

La multiplication des services en ligne, notamment au niveau institutionnel – paiement de l’impôt – rend l’accessibilité nécessaire, au risque de voir la fracture numérique se creuser un peu plus.

La multiplication des types de terminaux, de l’ordinateur portable au smartphone rend nécessaire l’interopérabilité des contenus publiés sur le web, et donc une amélioration progressive des services en partant de la base.

Enfin, parce qu’on peut espérer que le web permettra aux handicapés de s’ouvrir au monde extérieur, et rien que pour cela, ça vaut le coupe de faire un effort.

13. Peut-on espérer que ce qui suivra le web 2.0 sera vraiment accessible ?

Le web 2.0, c’est le web tout court. Donc oui, évidemment, mais il y a encore beaucoup de travail. Même ici.

14. Remarques, critiques, complément d’information sur des sujets non évoqués ?

Envoyer le message à 45 personnes en affichant toutes les adresses dans le champs “TO”, c’est mal. D’un autre coté, quand je vois les personnes incluses, ça fait vachement de bien à l’ego. Merci beaucoup de m’avoir sélectionné pour ce questionnaire.

Les mauvaises langues qui diront que j’ai parcouru tous les didacticiels Photoshop estampillés “web 2.0” afin de réaliser ce thème ne seront pas très loin de la vérité. Cette remise à neuf part d’une constatation évidente : difficile de parler d’ergonomie et de webdesign quand on a un design peu soigné, et surtout peu utilisable. Certes, les cordonniers sont toujours les plus mal chaussés, mais il y avait des limites.

C’est la seconde fois que je commence par coucher le résultat final sous Photoshop, avant de me lancer dans le développement, et les résultats sont visibles : c’est nettement plus propre. Ma démarche habituelle consiste à ouvrir Textmate avec une vague idée de ce que je veux faire, et à coder. La démarche inverse, même si elle est beaucoup plus fastidieuse en rajoutant un très grand nombre d’étapes nécessitant un outil que je ne maîtrise pas du tout, est aussi très intéressante, puisqu’elle m’oblige à aborder les problèmes à venir en amont.

J’imagine qu’il y a un certain nombre de bugs sous Internet Explorer, principalement dans sa version 6 à cause du manque de support de l’alpha des images au format PNG, mais je n’ai pas de machines sous Windows pour tester. Ils attendront donc lundi soir que je sois au bureau pour un recensement exhaustif.

Et pour finir, la liste de mes sources d’inspiration :

• Iris Design pour les gros boutons Aqua de la barre latérale.
• Shadowness pour les onglets de navigation.
• Simple entrepreneur pour la mise en valeur des zones de souscription.

Ensemble d’éléments me permettant de savoir d’un coup d’oeil où je me trouve, où je suis allé, où je peux aller et comment m’y rendre, la navigation est une composante majeure d’un site web qu’il ne faut en aucun cas négliger. D’une navigation adéquate dépendent aussi bien la fidélisation de vos visiteurs que la transformation d’une visite en vente. Car ne vous y trompez pas, qu’il s’agisse d’un billet sur votre blog, du remplissage d’un formulaire de contact par un futur prospect ou d’un troupeau de zébus malgaches, si vous exposez sur le web, c’est que vous avez forcément quelque-chose à vendre.

Quelques principes simples

Comme vous l’avez vu plus haut, la navigation est :

Un ensemble d’éléments : la navigation ne se compose pas uniquement du menu, mais de tous les éléments permettant de… naviguer et de se retrouver sur le site. Nous reverrons cela en détails plus loin, mais on peut citer des éléments aussi divers que :

• Le menu.
• Le chemin de fer.
• Les liens d’évitement.
• Les titres de parties et sous parties dans un texte.
• Les éléments contextuels.
• Le pied de page.
• Le plan du site (bien qu’on ne puisse pas vraiment parler de navigation à proprement parler).
• Le titre de la page.

Me permettant de savoir où je me trouve : idéalement, l’arrivée sur une page d’un site devrait immédiatement me permettre de savoir où je me trouve, sans rien connaître du site, et surtout sans jamais avoir à réfléchir. Idéalement, si je me suis profondément enfoncé dans l’arborescence du site, je dois également pouvoir en visualiser les différentes étapes.

Me permettant de savoir où je suis allé : lorsque je tombe sur des éléments de navigation, je dois pouvoir reconnaître d’un seul coup d’oeil si je m’y suis déjà rendu ou non, et évidemment sans réfléchir. Pratiquement, cela passe le plus souvent par de la mise en forme. On pourra choisir de modifier la couleur de la police de caractères, traditionnellement en la rendant plus foncée. Pour des raisons d’accessibilité, il n’est cependant pas recommandé de supprimer le soulignement des liens afin de toujours les reconnaître pour ce qu’ils sont. En fonction de la typologie du site, on pourra également afficher la liste des derniers produits visualisés ou des derniers billets lus dans un encart contextuel.

Me permettant de savoir où je peux aller : l’ensemble des grandes rubriques du site doivent être clairement affichées, et cela passe notamment par :

• Montrer de manière explicite qu’il s’agit d’un élément de navigation. En 1996, le menu de mon premier site web arborait crânement la mention “menu”. Quelques semaines plus tard, je me rendais compte à quel point c’était évident, et j’éliminais la mention menu au profit d’indications quant aux rubriques : Cyberpunk, Jeux de Rôles, Roller, Contact.
• Séparer clairement la navigation du contenu.
• Utiliser une nomenclature claire, unifiée et adéquate. Des deux listes suivantes, l’une est bien, l’autre moins :
  • Écrire, Gestion, Discussion, Personnaliser, Configuration.
  • Écrire, Gérer, Discuter, Personnaliser, Configurer.

Les niveaux de navigation

On distingue deux niveaux de navigation : la navigation globale et la navigation contextuelle.

Navigation globale

La navigation globale est présente sur l’ensemble du site. Elle ne change pas quel que soit la page du site sur laquelle l’utilisateur se trouve, qu’il soit authentifié ou non.

En ce qui concerne ce dernier point, j’avais la semaine dernière le cas de la conception d’un site dont la partie “espace authentifié” devait être particulièrement mise en avant, et notamment apparaître dans la navigation global. Afin de résoudre ce point, nous avons placé le formulaire d’inscription et d’authentification derrière l’onglet “mon espace personnel” quand l’utilisateur n’est pas authentifié. Cela nous a permis de libérer de l’espace dans la têtière en n’ajoutant pas de lien “identification” / “inscription”

On trouvera habituellement la navigation dite “globale” sur la têtière, à gauche, ou à droite, et sur le pied de page qui regroupe généralement l’ensemble des liens utilitaires :

• Mentions légales.
• Licence sous laquelle est publiée le contenu.
• Contact.
• Plan du site.

Navigation contextuelle

On voit souvent la confusion entre navigation contextuelle et contenus contextuels, l’un et l’autre étant relativement semblables.

La navigation contextuelle, comme son nom l’indique, se compose d’éléments de navigation contextuels à la partie du site visitée. Le contenu contextuel, lui, est un ensemble de contenus en rapport avec le contenu affiché.

Dans le contenu contextuel, on trouvera notamment :

• Articles de la même famille que celui visité.
• Articles achetés par les visiteurs ayant acheté l’article en cours de consultation.
• Articles complémentaires de l’article consulté (des chaussettes si je regarde une paire de bottes en caoutchouc…).
• …

Nomenclature

La nomenclature, aussi appelée wording est fondamentale en termes de navigation. Elle est d’autant plus délicate à mettre en place que celui qui la choisit est généralement profondément immergée dans le site. Ce qui lui semblera limpide comme de l’eau de roche pourra sembler parfaitement obscure pour le visiteur. Une fois le problème de clarté des libellés bien compris, reste le problème de l’efficacité. La navigation doit en effet inciter le visiteur à acheter cliquer, et pour cela, une seule solution : lui donner envie. Autre point à prendre en compte, les codes et standards généralement admis sur le web. Ces codes peuvent être aussi bien écrits que visuels (oui, je sais, on parle de nomenclature). Si ces codes peuvent sembler clairs pour les spécialistes, il n’en est pas forcément de même pour le grand public.

Exemple :

1. Syndiquer ce site.
2. 
3. Fil RSS.

Ces trois libellés veulent dire exactement la même chose, mais ne seront pas perçus du tout de la même manière par un non spécialiste :

1. Syndicat ? Syndicat ? Qu’est-ce que ça vient faire là, j’ai déjà ma carte à la CGT moi.
2. …
3. Fil RSS, j’ai lu ça dans le dernier Vieille et Moche, ça sert à suivre un blog sans avoir à revenir dessus tous les jours.

Ce site étant destiné à des spécialistes, le choix d’une icône colorée et mise en valeur, reconnue par les gens du sérail, s’imposait d’elle-même.

Pour résumer, le nomenclature de la navigation doit être :

• Très claire : je dois comprendre où je me trouve, et où je peux aller.
• Incitative : je dois avoir envie de cliquer.
• Adaptée aux us et coutumes du public auquel mon site est destiné.

Typologie des sites étudiés

Bien qu’il existe un très grand nombre de sites différents, nous étudierons dans la seconde partie de cet article des mode de navigations en rapport avec 5 typologies de site qui m’ont semblé les plus pertinents :

1. Le site portail institutionnel.
2. Le site marchand.
3. Le site marketing produit.
4. Le blog.
5. L’application web.

À suivre…

Jeudi 5 avril 2007, c’est la CSS Naked Day, une journée durant laquelle tous les heureux possesseurs d’un site web sont invités à retirer gentiment leur feuille de style.

Pourquoi se mettre tout nu ?

L’idée derrière les CSS naked days est de promouvoir les standards du web et l’utilisation d’un XHTML propre, correct sémantiquement, et accessible. Si vous arrivez à naviguer normalement sur ce site sans sa feuille de style (il faudrait que je mette un titre à ma section thématiques), c’est gagné.

[edit]
La journée finie, il était temps de me rhabiller.