De nombreux sites web accordent beaucoup de soin à leur page d'accueil, et beaucoup moins d'attention aux pages intérieures.

La page d'accueil du site de l'Assemblée nationale française, par exemple, revêt une allure professionnelle...

Mais, une fois passé ce vernis, le visiteur pénètre dans un site web aride, imparfait sur le plan typographique.

Rappelons tout de même que, bien que la page d'accueil soit la page la plus exposée, la majorité du trafic circule dans les pages intérieures.

Sur de nombreux sites web, la qualité des pages de second niveau (celles juste derrière la page d'accueil) laisse souvent à désirer.

Dans un site commercial, je veux parler des pages de "familles de produits". Ces pages qui jouent un peu le rôle du "chef de rayon".

Dans un site d'information, je veux parler des pages d'accueil "thématiques". La page "culture", la page "sports", d'une institution publique ou d'un média.

Dans un site intranet, ce pourrait être les pages d'accueil de certains départements (informatique, formation, ressources humaines,...).

Ces pages de second niveau méritent d'être traitées avec la même attention qu'une page d'accueil. Ce sont des pages d'accueil, en quelque sorte, mais d'un niveau plus ciblé. Elles doivent pouvoir offrir un environnement éditorial riche, avec un équilibre entre l'accueil du visiteur, la mise en avant des actualités et contenus clés, ainsi que le guidage vers les pages plus profondes.

Typiquement, dans les pages de second niveau, on rencontre les problèmes suivants :

• Rupture de l'environnement visuel (dans le sens d'un appauvrissement)
• Pages désertiques (du genre trois liens textes perdus dans le vide ; un aiguillage aride vers l'information proprement dite)
• Introductions littéraires généralistes (trop de blabla, à faible valeur ajoutée)

Ne vous contentez plus d'une approche binaire : page d'accueil / pages intérieures... Un site web, c'est plus complexe que ça !

En pratique, je recommande d'agir à deux niveaux :

1. L'outil de gestion de contenu (CMS) : Créer des gabarits éditoriaux adaptés aux pages de second niveau. Et donc, ne pas se contenter d'une approche éditoriale binaire : la page d'accueil VERSUS les pages intérieures... sous-entendu : toutes les pages intérieures subissent le même traitement, pauvre.

2. Le workflow : Désigner des chefs de rayon, au sens éditorial du terme !

Il est temps de hausser la barre de la qualité de votre site web... descendez voir ce qui se passe au -1 !

A lire aussi : La homepage : en déclin ?

Le site web Bed & Brussels propose la location de chambres d'hôtes à Bruxelles. Son environnement graphique est professionnel et le concept, totalement intéressant à exploiter par le canal Internet.

Cependant, nous savons avec quelle vitesse les utilisateurs découvrent et écartent un site web, sur base de toute une série de détails. De nombreux sites web, aujourd'hui, ont atteint une qualité minimale, mais nécessitent quelques optimisations pour atteindre leur rendement maximal.

La version actuelle du site Bed & Brussels comporte quelques faiblesses, sur le plan des accroches textes et de la simplicité des formulaires :

Apportons quelques améliorations...

AVANT

APRES

Liste des améliorations apportées :

• Beaucoup plus compact - tout en un coup d'oeil
• Un slogan plus concret (sous le nom du site, à côté du logo)
• Moins de texte, moins de blabla d'introduction que les gens ne lisent pas
• Des informations concrètes mises en exergue (350 chambres)
• Un formulaire simplifié et mieux aligné
• Des libellés plus engageants
• Des critères de recherche plus concis
• Une action principale plus évidente (le bouton)

Ce cas est fictif et démonstratif.

Reste, le cas échéant, à mesurer les effets des modifications apportées. J'aurais tendance à me focaliser sur l'évolution du taux de rebond en page d'accueil (donc la proportion de gens qui quittent la page d'accueil sans s'engager dans le contenu).

J'aime beaucoup, en tout cas, l'idée de travailler sur l'écriture aux frontières du design et de l'ergonomie. C'est cela, écrire pour le web, à mes yeux.

J'ai travaillé conjointement avec mon associé, Hugues Henry, chef de rédaction. Nous réitérerons l'exercice.

Notre offre commerciale se trouve ici :

• Rédaction web
• Amélioration des maquettes de page web

La plupart des sites web professionnels connaissent ces bosses de chameau, causées par la baisse de trafic du week-end.

Ci-dessous, chose amusante, on détecte un long week-end ;-)

A ce propos... bon week-end à vous, chers lecteurs !

L’année dernière, je m'étonnais déjà… et que dois-je dire à présent ?!?

« MON » chiffre 60 à moi tout seul est pillé, dupliqué, recyclé … Faut-il me taire ? Faut-il hurler ? Faut-il être fier ou scandalisé ? Pillage, clin d’œil ou coïncidence ?

Rassurez-vous, jeunes gens, tout ceci n’est qu’un coup de gueule simulé et léger… je vous conseille vivement la lecture du dernier bouquin de la brillante Amélie Boucher : « Ergonomie web illustrée : 60 sites web à la loupe ».

Amélie Boucher s'appuie sur les tests utilisateurs qu'elle pratique. Ce qui donne à la matière un goût de réalité. Pas de présupposés, mais de l'observation. Même si l'observation régulière de l'expérience utilisateur affine, à la longue, nos intuitions. D'où l'intérêt du livre.

Fiche du livre :

Ergonomie web illustrée - 60 sites à la loupe
Amélie Boucher (préface de Benoît Drouillat)
Editions Eyrolle
Disponible sur Amazon

Je ne vais pas vous retenir très longtemps. Juste un détail d'ergonomie, très concret, que je voulais saisir, après un détour sur le site officiel de l'Assemblée Nationale de France.

Lorsque, dans votre menu déroulant, un troisième niveau est prévu, pas partout mais à certains endroits seulement, il convient de créer un code graphique qui rend évidente la possibilité d'explorer certains contenus davantage en profondeur.

Ci-dessous, de petites flèches pointent vers la droite, lorsque les contenus contiennent des entrées de troisième niveau. Simple et efficace. Bonne pratique à généraliser.

Source : www.assemblee-nationale.fr

Notez que ce menu fonctionne plutôt bien pour plusieurs raisons :

• Les entrées de premier niveau sont limitées (4 thèmes)
• Les libellés sont parlants
• Le graphisme et la taille des boutons est confortable
• Le menu déroulant réagit immédiatement au passage de la souris
• Il fonctionne aussi bien dans Firefox que dans Internet Explorer

A lire aussi :

• Menus déroulants enrichis, sur ARTE TV
• N'abusez pas des menus déroulants !
• Menus ciblés et navigation rétractile

Le tri alphabétique a ceci de magique : il crée de l'ordre là où aucune autre logique ne s'impose.

Cherchez le mot "Saxophone" dans une encyclopédie contenant des millions de définitions, et vous le trouverez en 12 secondes (ou 8, si vous êtes très doués).

Tel est le miracle d'efficacité de l'ordre alphabétique.

Au milieu d'une page web, l'ordre alphabétique donne une impression de structure et de contrôle.

A l'inverse, les menus non triés provoquent une sensation de désordre...

Source : belgium.be (version 2002)

Dans l'exemple ci-dessus, on aurait pu laisser la préséance au premier ministre, mais ensuite, adopter une logique alphabétique.

Les politologues vous diront qu'il existe un ordre "protocolaire"... mais les usagers du Web se moquent des protocoles... les organisations qui acceptent d'évoluer vers une logique utilisateur seront perçues plus favorablement et diffuseront leurs messages plus efficacement.

Mais l'ordre alphabétique ne nous aide que par défaut. Si une autre logique prime, plus naturellement, il nous faut alors l'utiliser.

Un des plus croustillants exemples qu'il m'ait été donné de rencontrer récemment est celui-ci :

Source : Black Diamond

Quelle idée de trier les tailles par ordre alphabétique... et non par taille !

Je n'ose pas imaginer que les éditeurs de ce site web n'y aient pas songé. En fait, ici, nous nous heurtons vraisemblablement à une autre difficulté : la rigidité du CMS (outil de gestion du contenu).

Certains CMS imposent strictement la même séquence de contenu d'une langue à l'autre. Ce qui peut venir chahuter l'ordre alphabétique.

Ou bien, ce qui est sans doute le cas ici, le CMS impose tout simplement l'ordre alphabétique.

Peu importe les obstacles, ce qui compte, c'est le résultat final et son effet sur les utilisateurs, non ?

Et comme pour toutes les règles, il faut pouvoir parfois y faire exception, en connaissance de cause :

Source : aufeminin.com

Voyez comme le "mariage" s'est joliment incrusté à côté des "voyages". Voyages de noces, par association. Je pense qu'il s'agit là d'une exception maîtrisée.

Pour en savoir plus :

Lisez cet article en Anglais : Alphabetical Sorting Must (Mostly) Die (Jakob Nielsen, October 4, 2010)

Ou mieux encore : inscrivez-vous (mais vite) à ma formation "écrire pour le web" des 18 et 19 novembre prochains! J'ai réorganisé la formation sur deux jours, afin de passer véritablement en revue VOS SITES WEB, et pas seulement des concepts théoriques. Vous ressortirez de cette formation avec une vision très critique (mais aussi très constructive) de vos propres sites web.

Le dernier article de Jakob Nielsen alimente, de manière fort intéressante, la réflexion sur l'impact des photos sur le Web.

En gros, me voilà rassuré de ne pas dire de bêtises lors de mes formations "écrire pour le web" (plus que quelques jours pour vous inscrire à la session des 18 et 19 novembre!).

Sous réserve de l'analyse au cas par cas, les vérités suivantes sont confirmées :

• Le texte comptabilise, en moyenne, beaucoup plus de fixations que les photos
• Les photos de visages humains attirent l'attention
• Mais pas lorsque ces visages sont génériques (issues de banques d'images*)
• Les photos informatives sont infiniment plus puissantes que les photos décoratives
• Les photos intégrées au texte captent mieux l'attention que les photos trop latérales
• La taille des photos compte (plus c'est grand, plus c'est vu)

Depuis le temps que je le dis ;-)

Ci-dessous, l'exemple le plus criant (mais allez lire le reste!): une photo complètement snobée du regard, tellement elle sent le papier peint ! Les utilisateurs plongent, sans perdre de temps, sur la zone fonctionnelle de la page.

Source : Jakob Nielsen

Alors ne me faites pas dire ce que je n'ai pas dit... L'image, dans cet exemple, reste utile, à mon sens pour équilibrer la page et lui donner un environnement agréable. La même page sans photo aurait quelque chose d'aride et de repoussant par le côté "full text". Le texte, étalé sur toute la largeur de l'écran, perdrait en lisibilité. Mais il n'empêche que la photo telle qu'elle est là, très latérale et portant uniquement sur l'ambiance, n'attire pas le coeur de l'attention. Il serait une erreur d'y placer un lien important, par exemple, ou un message.

L'article de Jakob Nielsen à lire absolument : Photos as Web Content.

(*) Vous savez, ces photos avec trois personnes au très large sourire, remplies de bonheur dans une salle de réunion ou devant un ordinateur, avec ce savant mélange ethnique extrait des banques d'images américaines : un black, un blanc, un asiatique, unis dans leur passion de l'entreprise.

On ne présente plus Elie Sloïm et son groupe de collaborateurs Opquast, qui, depuis près de 10 ans, s'acharnent à élaborer des listes de bonnes pratiques web.

Je dis "des" listes, au pluriel, car ces bonnes pratiques sont différenciées en fonction d'approches sectorielles (sites commerciaux, espaces publics, formulaires, contenus multimédias,...) et, chose nouvelle, en fonction d'approches métiers (préparer le référencement, évaluer rapidement un design,...).

217 bonnes pratiques sont ainsi répertoriées, issues du projet Opquast, construit à force de patience et d'intelligence collective.

Peu de littérature. Tout dans un dépliant.

Certes, vous n'élaborerez pas votre stratégie éditoriale sur base d'une telle liste, qui contient la partie la plus "automatisable" de l'évaluation de la qualité d'un site web. Mais cela n'enlève strictement rien à l'utilité du dépliant. L'immense intérêt d'un tel document est de faire le tour, très rapidement et très concrètement, de points d'ergonomie bien identifiés.

• Utile pour une première approche.
• Utile pour une auto-évaluation
• Utile comme check-list qualité, dans le flux d'un projet web amateur comme professionnel, où l'on oublie toujours quelque chose (ah non, pas vous ?!?)

Ce condensé d'information pratique coûte la modeste somme de 6 euros...
Alors rendez-vous sur Amazon !