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

Après la sortie la semaine dernière de la version stable de Ruby on Rails 2.0, La toute nouvelle version de Typo se profile doucement à l’horizon. À l’occasion de ce changement de version majeure, nous avons décidé de changer le thème de base, pour un design rajeuni. Et dans notre grande mansuétude, nous avons décidé que ce serait TOI, oui TOI lecteur qui choisirait à quoi allait ressembler ton blogware préféré (si, si, tu vois, non seulement on va te faire décider à ta place, mais en plus décide à ta place que tu aimes Typo et que tu vas l’installer sur ta machine… ha les joies du crowdsourcing…)

Après cet intermède d’un cynisme particulièrement marqué, il est temps pour moi de vous présenter les heureux lauréats, parce qu’ils le valent bien :

Comme je le faisais remarquer il y a presque un an, tout ce qui se trouve sur internet n’est pas libre de droits, bien au contraire. Chez Airbag Industries, ils aiment les choses bien faites, et le vol en fait évidemment partie. C’est la raison pour laquelle ils nous ont concocté cet excellent Guide du vol de design web en 5 leçons, dont je ne peux m’empêcher de vous donner les perles.

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).

Afin de fêter dignement la rentrée, Typo, le blogware open source développé en Ruby on Rails fait peau neuve et se dote d’une nouvelle interface d’administration beaucoup plus claire et au goût du jour. Ce design devrait équiper la version 5.0 qui devrait sortir d’ici quelques semaines et apporter de nombreuses nouveautés ainsi qu’un très grand nombre de correctifs.

L’interface de configuration.

Liste des billets en cours.

Zone de saisie d’un billet.

Cette nouvelle admin est d’ors et déjà disponible dans la version de développement de Typo, et vous pouvez la tester sur notre plate-forme de démonstration.

J’ai rejoint l’équipe de développement afin de m’occuper de l’utilisabilité de l’application, et beaucoup de progrès ont été faits malgré le chemin encore à parcourir. Nous devrions revenir très rapidement avec deux nouveaux design prévus pour remplacer les deux thèmes actuels un peu démodés. Stay tuned! comme ils disent.

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 :

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…