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

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.

You can read an English version of this post under the photo.

La version 4.1 de Typo est sortie depuis maintenant 15 jours, et quelques bugs nous ont été rapportés. À une exception près, ils ont été corrigés dans la version de développement. Une version intermédiaire corrigeant ces bugs devait initialement sortir ce week-end, mais je me suis quelque-peu laissé emporter dans mon élan, et celle-ci devrait être beaucoup plus conséquente que prévue :

Fonctionnalités

Éditeurs de texte

Ajout du support de trois éditeurs de texte différent pour l’écriture / édition de billets, pages et commentaire. Les utilisateurs peuvent maintenant choisir entre :

• Un éditeur visuel riche (TinyMCE).
• Un éditeur simple avec la pré visualisation (par défaut).
• Un éditeur simple sans pré visualisation. L’actuelle pré visualisation permet d’afficher le rendu des greffons de Typo, mais effectue des requêtes constantes sur le serveur, ce qui peut provoquer des surcharges ou ralentissements importants.

Pour l’instant, la configuration de l’éditeur se fait au niveau global, mais elle sera rapidement rajoutée dans les profils des utilisateurs. De même, TinyMCE utilise pour l’instant le thème simple, mais je prévois de rajouter quelques options, et de laisser les utilisateurs choisir entre un thème minimal et des fonctionnalités un peu plus riches.

Statistiques

Typo embarque maintenant le greffon de statistiques Sitealizer, accessible depuis l’interface d’administration. Sitealizer est un greffon encore jeune, mais prometteur, et il est prévu que nous participions à son évolution, notamment en fiabilisant la reconnaissance des systèmes d’exploitation et des navigateurs. Je suis entré en contact avec le développeur du greffon, et nous avons décidé de travailler ensemble.

Ergonomie

Il est enfin possible d’éditer et de pré visualiser les commentaires depuis l’interface “Discussion”. Cette fonctionnalité nous avait été demandée par plusieurs personnes, et elle est maintenant pleinement opérationnelle. De même, pas mal de liens d’évitement, de raccourcis de navigation et autres grigris toujours pratiques ont été rajoutés. Il ne nous manque plus qu’un design convenable pour disposer d’une administration agréable.

Internationalisation et localisation

L’effort d’internationalisation se poursuit. Plusieurs personnes m’ont contacté, et la prochaine version de Typo devrait être disponible en :

• Allemand.
• Anglais.
• Espagnol.
• Français.
• Japonais.
• Portugais brésilien.

Correction de bugs

Pas mal de petits et gros bugs corrigés, comme la notification des utilisateurs via Jabber. D’autres sont en cours d’étude et devraient être corrigés pour la version 4.1.1.

Et où peut-on tester tout ça ?

La plate-forme de test a été mise à jour avec les dernières fonctionnalités, n’hésitez pas à passer voir.

Typo 4.1 has been around for 15 days now, and only a few bugs have been reported. Almost all of them have been fixed in the trunk. A bugfix release was planned this week-end, bug I’ve been playing around too much and it will be bigger than expected.

Functionnalities

Text Editors

Users can now choose amongst three text editors for writing / editing articles, pages and comments. Avaliable options are :

• Rich Visual Editor (TinyMCE)
• Simple editor with live preview (by default).
• Simple editor without live preview. Current live preview renders plugins effects but sometimes overloads the servers with constant requests. And it’s as damn slow as it is nice.

The editor configuration is a global option, but it’s soon going to be added to the users profiles. TinyMCE uses the simple theme, but I may add some more functionnalities, and maybe 2 different editors to let users choose between simple and advanced features.

Statistics

Typo now embeds the statistics plugin Sitealizer, which is avaliable through the admin interface. Sitealizer is a young but promising plugin, and we’ve planned to contribute by correcting OS and browsers recognition. I’ve been in contact with its developper, and we’ve decided to work together to improve it.

Ergonomics

You can edit and preview comments through the “Discussion” page. many people have asked for such a functionnality, and it’s now fully operationnal. I’ve also added some navigation shortcuts, and icons here and there. We still lack a correct design to be really happy.

l10n and i18n

I18n effort is still going on. A few people have offered to translate, and Typo next version should be avaliable in :

• German..
• English.
• Spanish.
• French.
• Japanese.
• Brasilian Portuguese.

Bug Fixing

A few bugs fixed here and there. Jabber notification works at least. Some other bugfix will be done for 4.1.1.

Looks promising, any place to test?

The testing platform is now up to date. Just come and have a try, it’s worth it.

Si comme moi vous êtes aussi doué en graphisme qu’un enfant de deux ans, et que vous ne pouvez pas vous permettre de passer des heures sur Photoshop à tenter d’obtenir un résultat décent, Buttonator est fait pour vous.

Buttonator est un site entièrement en AJAX qui vous permet de créer très facilement et gratuitement des boutons de validation pour le web. Vous choisissez un template parmi les 14 proposés, le texte, une icône pour l’agrémenter, la font et la couleur de fond et les options, vous rafraîchissez, et c’est bon, vous pouvez télécharger votre oeuvre. Une version payante à 10 dollars par mois vous permet de choisir parmi une soixantaine de templates, et d’avoir accès à de la génération de masse ainsi qu’à tout un tas d’options bien pratiques. Le paiement se fait par Paypal, et on prendra l’abonnement pour un mois, le temps de générer à moindre coût tous les boutons d’une application web particulièrement riche en formulaires.

On choisit le style.

Les fonts

Les couleurs

Et on regarde la preview

Quelques regrets cependant :

On aurait aimé pouvoir créer ses propres templates, par exemple en choisissant les couleurs de départ et d’arrivée d’un dégradé. Pareillement, tous les boutons ont une taille fixe, ce qui pose des problèmes avec des textes un peu longs, ou l’utilisation d’icônes pour rendre nos créations plus expressives.

De même, on aurait aimé pouvoir choisir de quel côté du bouton placer les icônes, et pouvoir uploader ses propres jeux d’icônes pour créer des boutons véritablement personnalisés.

L’interface est très simple d’utilisation, mais curieusement, on se serait attendu à trouver l’interface de choix des templates à gauche, et la prévisualisation à droite, et non le contraire. Cette petite faute d’ergonomie empêche l’outil d’être intuitif à 100%, tout comme l’absence de numérotation des étapes menant à la création d’un bouton.

On aurait pu s’en douter, mais le site ne propose ni progressive enhancement, ni graceful degradation. Au temps pour l’accessibilité.

Malgré ses défauts, Buttonator est bien pratique pour ceux qui, comme moi, perdent énormément de temps à créer des boutons pas toujours réussis, et préfèrent confier le travail à un tiers.

À l’occasion de la refonte de son blog, David se pose 16 questions sur la manière d’agencer son site afin d’offrir à ses visiteurs une ergonomie optimale. Ses interrogations pouvant s’appliquer à n’importe quel site, j’ai décidé d’y consacrer un billet, plutôt que répondre dans les commentaires comme il invite ses visiteurs à le faire.

Découverte d’un blog

1. Quelle est la porte d’entrée d’un nouveau blog ? Arrivez-vous le plus souvent sur la page d’accueil ou via un lien direct/une recherche ou autre ?

J’arrive généralement sur un nouveau blog via un médium externe : billet sur un blog déjà lu, ou résultat de recherche. J’arrive donc très rarement sur la page d’accueil. Cependant, quel que soit mon point de chute, je m’attends à y voir un certain nombre d’éléments bien précis (que l’on retrouve – oh surprise – sur celui-ci) :

• Un titre.
• Un descriptif de ce dont traite le blog (autrement appelé tagline).
• Un ou plusieurs billets.
• L’endroit où je me trouve (un chemin de fer est parfois un plus, mais pas toujours adapté).
• Une navigation générale simple et concise, comprenant un lien vers le flux RSS visible et standard.
• Une navigation thématique claire, complète et très facilement accessible (typiquement en première position de la sidebar).

2. Quelle est la page suivante, celle que vous visitez juste après avoir lu celle que vous venez de découvrir ? Les liens généralement fournis sont-ils adaptés ?

Je ne lis généralement pas d’autre page que celle sur laquelle je suis tombé, puisque mon arrivée sur ce blog répond à un besoin précis. Je peux cependant faire une entorse à la règle si la page visitée réunit des conditions précises :

• Que tous les titres des billets soient parfaitement pertinents.
• Que les billets disposent de liens “précédent” et “suivant” affichés en haut de page et affichant le titre des articles vers lesquels ils pointent.
• Ou, mieux, que sous chaque billet se trouve un encadré comprenant un ou plusieurs liens pointant vers des billets connexes.

3. Lorsque vous découvrez un blog intéressant, quel est votre type d’exploration ? Via les tags, les favoris, les archives ?

Quand je ne passe pas par les média explicités ci-dessus, j’utilise généralement la navigation thématique large, autrement appelée catégories, à moins que je ne cherche que des billets traitant d’un sujet vraiment particulier pouvant se définir par un simple mot clé.

Souscription à son flux RSS

4. Quel est le facteur déclenchant la souscription ? Quels sont vos critères de sélection ?

Le premier facteur, c’est la visibilité du flux RSS. Le bouton RSS fait partie des premières choses que je m’attends à voir sur un blog, avec le titre et la tagline. Si je dois me demander où chercher la souscription ne serait-ce qu’une seconde, je n’irai pas plus loin.

Il faut ensuite que le contenu soit vraiment intéressant pour que je rajoute un flux aux quelques centaines qui encombrent déjà mon agrégateur, et là aussi, cela implique des critères tout à fait subjectifs :

• Si c’est un blog personnel, il faut impérativement que je connaisse la personne au moins en ligne.
• Il faut qu’il soit en bon français.
• S’il s’agit d’un blog professionnel ou technique, il faut que sa ligne éditoriale aille dans le sens de mes centres d’intérêt (elle doit donc être clairement définie, notamment à travers la navigation thématique simplifiées).
• Les contenus doivent être pertinents, de qualité, et ne pas être de simple relais des billets à la mode sur les autres blogs. J’ai les favoris populaires de Delicious pour ça.

5. Vous abonnez-vous au flux général ou à une sous-partie (lorsque c’est possible) ?

Le flux général, toujours, mais je ne lis que ce qui m’intéresse (d’où l’utilité de donner des titres pertinents à ses billets).

6. Qu’est ce qui vous pousse à supprimer un fil RSS de votre agrégateur ?

Cette question rejoint celle du facteur déclencheur de la souscription, mais dans le sens inverse :

• Perte de la qualité rédactionnelle.
• Perte durable d’intérêt des billets.
• Transformation du blog en relais de Digg.

Recherche d’un billet particulier

7. Passez-vous par une recherche externe ? interne ?

Arrivant le plus souvent sur un blog par un moteur de recherche, je passe assez peu par la recherche interne. Je m’attends cependant à en trouver une accessible immédiatement à un endroit pertinent : à droite de l’en-tête, ou bien placée dans la sidebar. Il faudra d’ailleurs que je la remette ici quand j’aurai refait la CSS des résultats.

8. Utilisez-vous les archives d’un blog ?

Je n’utilise pas les archives temporelles, qui ne valent finalement que dans le cadre du diarisme (journal intime pas intime). J’utilise en revanche beaucoup les catégories, qui sont une méthode d’archivage thématique.

9. Pour vous rappeler d’un billet, le titre est-il primordial ? Faut-il qu’il soit choquant/spécial ?

Pourquoi me rappeler le titre d’un billet si je sais de quoi il parle et que je dispose d’une recherche locale ? En revanche, utilisant un agrégateur RSS particulièrement peuplé, je m’attends à ce que les titres soient pertinents, sinon je ne lis pas le contenu.

Contenu et disposition

10. Préférez-vous le classique deux colonnes ou le nouveau big footer pour tout ce qui est « annexe » (liens, archives, derniers *, etc) ? ou autre (par exemple ici c’est un peu hybride) ?

Je préfère une solution hybride qui me permette de :

• Embrasser d’un seul coup d’oeil navigation thématique et contenu du billet sur lequel j’arrive.
• Affiche le reste des éléments de navigation à part, de manière bien détachée, claire, et surtout sans interférer avec le contenu, donc de préférence en dessous.

11. Un bon billet de blog, c’est le point de départ vers de nombreuses pages intéressantes à lire ou une impasse car vous n’avez bien souvent pas le temps de lire d’autres ressources ?

Un bon billet de blog, c’est généralement un aller simple dans mes bookmarks Delicious, avec très peu de chances pour que je lise autre chose, à moins que les options de navigation décrites plus haut ne me soient offertes.

12. Quelle importance accordez-vous à la régularité de publication d’un blog ?

La généralisation des agrégateurs RSS a profondément changé notre mode de consultation d’un contenu web : d’actifs – nous allions vers l’information – nous sommes devenus passifs – l’information vient à nous. Dès lors, la fréquence de publication n’a plus grand intérêt : nous ne nous lassons plus à force de nous heurter quotidiennement à un mur de non nouveauté tous les matins à l’heure du petit déjeuner.

Commentaires

13. Souhaitez-vous être tenu au courant des réponses à votre commentaire ? Si oui, comment ?

Il existe deux manières de se tenir au courant des réponses à un commentaire :

• Par courrier électronique.
• Par un flux RSS associé à la discussion.

Pour moi, le premier médium n’est pas envisageable. La plupart des gens ne ferment pas leurs commentaires au bout d’une durée déterminée, et recevoir des mails à propos d’une discussion vieille de deux ans, totalement dépassée et sortie de son contexte est relativement fatiguant.

Le flux RSS, au contraire, me semble présenter des avantages indéniables. Il évite de sortir de l’agrégateur (pour rejoindre le client mail), il se fait oublier tant qu’il n’y a plus de réponse, et il ne vient pas polluer ma boite à lettres.

14. Préférez-vous que la réponse soit incluse à votre propre commentaire ou dans un commentaire suivant ?

Un commentaire suivant.

15. Quelle importance accordez-vous à la qualité de vos commentaires ?

Idéalement, tout blog modérerait les commentaires à priori. Bien que plus contraignante pour l’auteur, cette solution présenterait au moins un avantage : prévenus des risques de modération, les commentateurs ne publieraient que des commentaires pertinents, et éviteraient les missives du genre “ouah, j’adore ce que tu fais, kikooolol”.

16. Avez-vous déjà hésité à répondre après avoir identifié les liens sortants en « nofollow » ?

J’ai une double position vis à vis des liens sortants en « nofollow » :

• Dans les commentaires, ils ne posent pas de problèmes, car ils ne risquent pas d’empêcher les moteurs de recherche de perdre le fil de la discussion.
• Dans les pingbacks ou trackbacks, il me semble qu’ils arrêtent la discussion, au moins virtuellement.

Ma réponse à la question sera “non”, car je ne fais pas attention à la politique du blog avant de poster un commentaire, et je ne le fais pas pour profiter du pagerank de l’auteur du billet mais parce que j’ai quelque chose à dire.

Remarque :

En rédigeant ce billet, je me suis rendu compte que de nombreuses réponses aux questions de David étaient redondantes, et je vous prie de m’en excuser.

Cela révèle un premier problème : en rédigeant son questionnaire, David a pensé de manière thématique, en mettant en avant les éléments que l’on s’attend à trouver sur un blog, et non transverse en isolant les problèmes posés. J’ai songé un moment à reformuler mes réponses afin de supprimer l’ensemble des répétitions, mais cela impliquait de ne plus suivre le jeu des questions réponses (un peu comme, en milieu de troisième, le jour où j’ai regroupé les questions posées autour d’un texte en trois thématiques et rédigé mon premier commentaire composé un an trop tôt au lieu de répondre bêtement comme on me l’avait demandé).

Mon conseil à David serait donc : lorsque tu t’occuperas de ta refonte effective, essaie de réfléchir de manière transverse de manière à ne pas imposer d’éléments redondants à ton visiteur afin de lui offrir un parcours agréable sur un blog par ailleurs de qualité.

[edit]

David a mis en ligne l’ensemble des réponses et un résumé de celles-ci sur son blog.

Note : ce billet ne concerne en rien les velléités d’installation d’une base lunaire permanente par les États-Unis, pas plus que la stratégie militaire en milieu désertique par ailleurs.

Entre la croissance de la largeur des écrans et celle des téléphones mobiles et autres PDA proposant un navigateur web, gageons que la maîtrise de l’espace sera la grande problématique de l’année 2007, et probablement de la suivante.

Si la coutume qui veut qu’on développe en 720 pixels de large pour une résolution de 800600 tend maintenant à s’estomper au profit de 950 pixels pour du 1024760, les jeux ne sont pas faits pour autant. Bien que fort séduisants, les layouts dits “liquides” – car ils s’adaptent et adaptent leur contenu à la largeur de l’écran – posent finalement plus de problèmes qu’ils n’en résolvent.

D’une part, les responsables des chartes graphiques travaillant sous Photoshop, ils sont souvent incapables de penser un espace autre que fixe, et la valeur artistique des layouts liquides tend souvent à désirer. En dehors de celui de Wikio que je trouve tout à fait réussi, je ne crois pas avoir jamais vu de layouts liquides véritablement réussis.

Ensuite parce que, les écrans d’une largeur supérieure à 19 pouces devenant particulièrement abordables dans notre monde de riches – on trouve un 22 pouces pour 400 euros, plus rien à voir avec les 1500 euros minimum de mon 19 pouces acheté il y a 4 ans et demi. Nombreux sont les écrans qui affichent maintenant des résolutions supérieures à 1280 pixels, et une ligne d’une largeur supérieure à 800 pixels est particulièrement pénible à lire, surtout sur la longueur.

Il existe toutefois une solution, qui est celle des layouts semi liquide qui s’adaptent à la taille de l’écran jusqu’à un certain point, en faisant un bon usage de min-width et de max-width, ou de solutions de contournement en Javascript quand ces deux propriétés ne sont pas supportées par le navigateur. Là encore, il s’agit d’une solution à moitié satisfaisante sur les supports de grande largeur : on se retrouve soit avec un très grand espace vide, soit avec des lignes trop longues.

Reste une solution : un layout fixe, mais plein écran.

Mon précédent thème avait pour vocation à mettre le contenu en valeur en débarrassant l’écran de toute source de pollution visuelle gênante – le menu latéral, souvent un nid à publicités – tout en cherchant à occuper l’espace sans pour autant forcer le lecteur à supporter des lignes trop longues.

En utilisant un en-tête coloré faisant toute la largeur de l’écran et offrant une navigation centrée de largeur fixe, on parvient à donner l’illusion du plein écran. Le contenu de la sidebar passe en bas de l’écran selon le même schéma. On parvient ainsi à donner l’illusion du plein écran tout en offrant aux éléments de la sidebar une largeur plus confortable qu’ils ne l’auraient eue sur le coté. L’affichage se fait de manière horizontale et non plus verticale, ce qui permet d’embrasser l’ensemble des éléments d’un seul coup d’oeil et donne une impression de “fourre tout” organisé qu’est bien souvent devenu le menu latéral aujourd’hui.

Ce dernier point prête d’ailleurs à une observation intéressante : en passant d’une disposition verticale à une disposition horizontale, le contenu de ce qui était autrefois un fourre tout dans le menu latéral prend une importance beaucoup plus importante, et on est tenté de le réduire aux informations pertinentes tout en l’ordonnant mieux.

Si j’avais parfaitement réussi à me débarrasser de la sidebar, tout en offrant un lien d’évitement bien placé, je n’avais pas résolu le problème de l’affichage du contenu livré à lui-même sur une seule colonne.

Un premier essai en 720 pixels de large laissait trop de place aux blancs latéraux sur les écrans en 1024*768 et supérieur. Un second essai en 920 pixels de large – pour adapter le contenu à la navigation et au contenu du bas – donnait des résultats catastrophiques en termes de lecture, même avec une police de caractère plus grosse que précédemment.

L’idée m’est venue en visitant Web Designs From Scratch l’autre soir, à la recherche d’une solution acceptable : remettre un menu latéral ne donnant accès qu’au contenu, et à lui-seul, c’est à dire aux différentes catégories du site, pour occuper une partie de l’espace (28% en fait), et utiliser une police de caractères confortable pour le reste du contenu.

Dans le même temps m’est revenu une réflexion que je m’étais faite il y a quelques temps quant à la disposition purement verticale des blogs : puisque je reconquérais l’espace horizontal, il me fallait aussi me réapproprier l’espace vertical. Par exemple en n’affichant plus la longue litanie des 10 derniers billets à l’écran, mais seulement le dernier, et le résumé des précédent dans l’espace du bas devenu source de contenu à part entière.

Et voilà, cela me donne un nouveau thème plus propre, plus lisible, certainement perfectible, et il sera perfectionné, mais la disposition et la mise en valeur des éléments sont là. Histoire de commencer 2007 du bon pied (d’ailleurs si il y a un gentil graphiste pour me donner un coup de main sur 2-3 trucs, je suis complètement preneur, mon sens artistique étant proche de zéro).

Grâce à David, je viens de découvrir l’excellent Web Design From Scratch, site tenu par Ben Hunt, un web designer des plus talentueux. Ben partage ses connaissances professionnelles sur le mode du shareware. Si vous aimez ce qu’il écrit, vous pouvez lui faire une donation via le toujours pratique bouton paypal. La qualité du contenu en elle-même vaut déjà largement le coup, même si le site est en anglais.

Ben prépare actuellement un livre dans lequel il détaillera en détails la refonte de 50 sites web. Rien de bien extraordinaire en soi, ce genre de livres existe déjà en pagaille.

Le livre sera publié sous deux formats :

1. Un PDF disponible gratuitement sur le site.
2. Une version papier présentant deux fois plus de contenu, plus de détails, payante, elle

Ben espère un demi million de téléchargements du PDF.

Là où son idée tient du génie, c’est que les sites refondus seront des volontaires à qui il offre, pour la somme relativement modique de 1100 euros :

1. Une refonte graphique complète.
2. Une visibilité sans précédent, entre les téléchargements du PDF et la vente du livre

Quant à lui, il gagne :

1. Les 50 sites dont il a besoin pour sortir son livre.
2. Pas loin de 55.000 euros avant même la sortie du livre.
3. Une visibilité sans précédent avec son ouvrage en libre téléchargement.

Ou comment partager le beurre, l’argent du beurre et se garder le sourire de la crémière.

Je sais bien que je n’écris pas beaucoup ces derniers temps. J’ai un peu de mal à trouver l’inspiration nécessaire pour compléter la vingtaine d’articles de fond en stockés dans mon répertoire “brouillons”, certains en cours de rédaction depuis le mois de mars. Et je code, beaucoup, en fait. Je viens de faire accepter mon premier gros patch à l’équipe de développement de Typo, et j’en ai soumis un second – près de 4Mo tout compris – cet après-midi. J’aimerais bien terminer la refonte de l’administration avant la sortie de la prochaine version stable, et le travail manque moins que le temps pour le réaliser.

Maurice Svay me demandait tout à l’heure quelles étaient mes prédictions en termes de design web pour l’années 2007. Très bonne question qui vaut largement un billet.

Une place prépondérante donnée au contenu

Il est intéressant de voir combien notre rapport au web a changé ces 5 dernières années. L’agrégation, notamment, nous a fait prendre conscience à juste titre que la valeur d’un site web réside dans l’ensemble des contenus publiés. Le web design de 2007 devrait donc encore accentuer cette tendance en mettant tout particulièrement en avant les éléments pertinents.

La taille des polices de caractères a déjà augmenté par rapport à ce qui se faisait il y a 4 ans, et on devrait voir celle-ci évoluer vers une moyenne de 13 ou 14 pixels. Pour rappel, les navigateurs considèrent la taille standard comme étant 16 pixels.

La lisibilité nécessitant un contraste fort entre le texte et le fond, gageons que les dégradés de blancs et de gris clairs ont encore de beaux jours devant eux. La tendance d’un retours à des sites en blanc sur fond noir ou blanc sur gris foncé devrait aussi se confirmer.

Une à deux colonnes maxi

Déjà en perte de vitesse ces dernières années, les layouts sur trois et quatre colonnes continueront à se raréfier au profit quasi exclusif de thèmes en une et deux colonnes.

Pourquoi cela ? Très (trop) marqués “portails” et “web des années 90”, les designs en 3 et 4 colonnes ne conviennent plus à la structure de la majorité des sites en circulation aujourd’hui, et deviennent le plus souvent des nids à publicité.

Le nombre de points d’entrée sur une page donnée et la profondeur des sites tendent à diminuer. La navigation s’en trouve grandement simplifiée, et l’utilisateur s’y retrouve plus facilement.

2007 sera widgets ou ne sera pas

Il est probable que la navigation des sites deviendra fortement personnalisable via l’utilisation adéquate des widgets. La place des différentes sections du menu des sites à deux colonnes changera au gré des envies du visiteur qui verra ses préférences conservées d’une visite à l’autre.

Peu de fluidité

Peu de layouts liquides ou semi-liquides en 2007 (un layout liquide est un layout qui s’adapte à la taille de l’écran). Je vois 3 raisons à cela :

• Les écrans deviennent de plus en plus larges, et des lignes de 1400 pixels de large sont pénibles à lire.
• Les designers ne pensent pas en termes de layouts liquides, plus difficiles à faire que des designs à taille fixe.
• Les propriétés CSS min-width et max-width ne sont pas supportées par la majorité des navigateurs du marché, ce qui rend leur utilisation plus qu’hasardeuse, et les solutions de contournement en javascript ne sont pas une solution satisfaisante en termes d’accessibilité.

Depuis quelques années, la mode est aux sites centrés sur l’écran, et cette tendance ne devrait pas vraiment changer.

Paix, luxe calme et volupté

Les sites à bords ronds resteront la règle en 2007 tant ceux-ci essaient de nous faire oublier que CSS fonctionne selon un modèle de bêtes boites carrées imbriquées les unes dans les autres. Quand il est bien utilisé, le bord rond donne une certaine impression de calme et de sérénité, idéale pour se pencher sur des contenus de qualité.

Une ergonomie incitative

Tout sera fait pour inciter le visiteur à ne pas quitter le site trop vite. Les chemins de fer, tout en donnant une indication géographique incitent à se pencher sur d’autres parties du site. Des cadres proposant des contenus semblables à celui visité seront disposés à des endroits clé afin de pousser le consommateur à acheter des produits semblables ou liés. En un mot, tout sera fait pour prolonger votre visite avant le passage à la caisse, en mettant en valeur des contenus pertinents.

À vous maintenant

Et vous, qu’en pensez-vous ?