Depuis quelques années déjà, le carrousel s’est imposé comme une excellente solution pour mettre en avant les actualités principales d’un site web. Le principe est le suivant : afficher des sujets en grand format qui « tournent » en alternance, l’un après l’autre. Une bonne manière de gérer l’espace limité de l’écran et d’en augmenter l’impact. C’est prouvé : un grand format attire davantage l’attention qu’un puzzle d’informations qui se font concurrence. Cependant, la qualité des carrousels que vous rencontrerez sur le web apparaît très variable. Certaines critiques régulièrement entendues, l’expérience de tests utilisateurs et le bon sens m’amènent à proposer 10 recommandations.

1. Le rythme

C’est la critique la plus fréquemment exprimée. « Le carrousel tourne trop vite ! ». Rarement l’inverse. Très souvent, l’utilisateur n’a même pas le temps de lire le quart du texte affiché que le diaporama l’entraîne ailleurs. Un carrousel qui tourne trop vite gêne également la lecture des autres éléments de la page. Les utilisateurs détestent le mouvement nerveux et les effets d’animation extravagants, qui sonnent trop publicitaires. Veillez à ce que le carrousel tourne calmement. 8 à 10 secondes d’affichage s’avèrent souvent nécessaires. Testez le rythme du carrousel dans plusieurs environnements, afin d’en jauger la fiabilité.

2. La transition

Dans certains cas, l’utilisateur n’aura même pas remarqué que l’affichage a changé. Un effet de transition explicite, sous la forme d’un fondu enchaîné par exemple, marquera plus clairement le mouvement de carrousel. La fluidité de la transition a de l’importance. Pour cette raison, le fondu enchaîné a ma préférence : il permet de quitter un sujet avec douceur et de glisser vers le sujet suivant. Un bref passage au noir peut également convenir. Évitez par contre les effets folkloriques, du genre « spirale » ou « bienvenue à la foire ».

3. Le contrôle utilisateur

Le mouvement imposé à l’utilisateur reste une attitude « offensive » susceptible de générer des frustrations. La seule manière de le compenser est de redonner ce contrôle à l’utilisateur sous la forme d’éléments d’interaction intuitifs et explicites.

L’utilisateur doit pouvoir :

• Stopper l’animation. Y mettre une pause.
• Revenir en arrière.
• Parcourir le diaporama à son rythme et à sa manière.

Plusieurs solutions existent…

Ci-dessous, la barre de contrôle indique clairement le nombre de sujets disponibles et propose un contrôle sur la navigation. Le bouton « pause » est particulièrement précieux.

Les petites flèches latérales restent également un moyen de contrôler le défilement.

Les petits ronds sont devenus presqu’un standard. Je dis « presque », car ils restent moins explicites. Si vous en faites usage, veillez à les rendre suffisamment présents.

Ci-dessous, la barre de contrôle proposée sur Arte.tv présente le désavantage de dépendre de la couleur de fond. Sur fond clair, les petits ronds deviennent quasi invisibles.

Lorsque l’utilisateur fait le choix d’afficher un sujet, le carrousel devrait s’arrêter. De nombreux sites web relancent l’animation après quelques secondes, à la grande frustration des utilisateurs.

Un passage de la souris sur le sujet affiché devrait en stabiliser l’affichage. La plupart du temps, un utilisateur bouge sa souris sur un élément parce qu’il s’y intéresse.

4. Le nombre de sujets en alternance

Si les sujets sont trop nombreux, la navigation devient compliquée. Les sujets en fin de liste se retrouvent très déforcés et le cycle, trop espacé. Ci-dessous, le choix se disperse et les petits ronds en viennent à mordre le contenu du carrousel.

En-dessous de trois sujets, le carrousel perd son sens. Il m’est arrivé de voir des carrousels à un seul sujet, tournant sur eux-mêmes. Absurde.

Derrière un carrousel, il y a donc une ligne éditoriale.

Dans la plupart des cas, optez pour 3 à 5 sujets.

Certaines formules d’affichage des sujets à la verticale, comme ici sur Yahoo! Health, permettent de lister une dizaine de sujets.

5. La position du carrousel dans la page

Le carrousel, comme élément de l’interface, s’est imposé au centre de l’écran, dans la partie haute.

Lorsque le carrousel est positionné sous la ligne de flottaison, ou encore dans une zone latérale, il perd énormément de son impact et provoquera une expérience utilisateur déroutante.

Le but du carrousel est de focaliser le centre de l’attention.

6. La quantité de texte

En dix secondes, vos visiteurs liront 20 à 30 mots.

Ci-dessous, la quantité de texte moyenne affichée sur le carrousel d’Arte TV, pendant environ 10 secondes. Le texte peut être lu de bout en bout par un utilisateur attentif. Mais il ne faudrait pas faire plus long.

Ci-dessous, quel est le carrousel le plus lisible ?

« Wrath of Heroes » n’accroche pas aussi bien que « Truth About Beer ».
Car trop de texte induit aussi une police de caractère trop petite.
Notez aussi la redondance : « Wrath of Heroes » apparaît deux fois, dans le texte et dans la partie graphique. Une telle redondance ne devrait pas être permise dans l’espace limité du carrousel.

7. Le visuel

Mieux vaut un seul visuel impactant qu’un effet de montage.

Privilégiez les visuels concrets qui représentent le contenu plutôt que les effets de style.

Ci-dessous, sur le site officiel de la présidence française, le choix d’un visuel unique nous semble plus porteur que la tentation de réaliser un patchwork. Une mise en page en puzzle va à contre-sens de l’intérêt du carrousel qui consiste précisément à exploiter un large format.

8. La clarté de l’interaction proposée

En dehors de la possibilité d’interagir avec la navigation au sein du carrousel (voir point 3 ci-dessus), l’utilisateur peut généralement cliquer dans la zone de contenu pour accéder au détail de l’information.

Nous recommandons :

• Une seule zone de clic de préférence
• Visuellement présente (suffisamment grande et contrastée)
• Offrant une interaction explicite (par exemple un bouton, une flèche,…)
• Positionnée de préférence en bas à droite

Ci-dessous, le bouton « Play video » répond aux bonnes pratiques : contrasté, bien positionné dans le flux de lecture, libellé explicitement, invitant au clic.

Ci-dessous, le carrousel d’Umicore ne laisse pas apparaître la possibilité d’une interaction. Peu d’utilisateurs seront enclins à cliquer. Ce type de présentation avec du texte fondu dans le visuel et aucune zone de clic explicite sera reçu comme un placard publicitaire, même si le contenu mène en réalité vers de l’information.

9. La cohérence

D’un sujet à l’autre, mais aussi d’un jour ou d’une semaine à l’autre, il importe de respecter une cohérence pour créer des repères et la sensation d’un environnement éditorial maîtrisé.

La cohérence se vérifie à différents niveaux :

• Cohérence graphique (typographie, coloris, traitement des photos,…)
• Cohérence fonctionnelle (zones d’interaction, zones de clic,…)
• Cohérence éditoriale (nature des contenus abordés, ton utilisé,…)

Ci-dessous, dans son carrousel, Arte TV fait varier la position de son descriptif texte, mais la typographie ainsi que le volume de texte restent cohérents. Une bonne manière de créer un fil rouge tout en s’accordant des variations visuelles qui relancent l’attention.

10. L’accessibilité de la technologie adoptée

Plusieurs moyens existent de créer un carrousel : Flash, CSS, Javascript,… Le choix de la technologie influencera plusieurs facteurs :

• Accessibilité du contenu par les environnements les plus variés (mon iPad ne supporte pas Flash, par exemple)
• Indexation par les moteurs de recherche (de nombreux carrousels présentent le désavantage d’intégrer du texte non reconnu comme tel, non indexable)
• Facilité d’édition par le client (un carrousel en Flash avec des transitions méga fluides, c’est très bien, mais si les contributeurs de contenu sont incapables de l’alimenter, on perd en réactivité)

Pour l’entreprise qui ne dispose pas d’un graphiste sous la main, certaines solutions plus sobres ou plus formatées peuvent s’avérer intéressantes. Ci-dessous, Google Analytics propose un carrousel quasi full text.

Tenez, par rapport à ce dernier point (les solutions techniques), je suis preneur de vos avis et réactions !

Pour en savoir plus (en Anglais) :

• Carousels: 83 examples

• Carousel Usability

• 5 Big Usability Mistakes Designers Make on Carousels

Et si vous désirez établir une ligne éditoriale pour alimenter votre carrousel en contenus efficaces, contactez-moi !

A vrai dire, quand je regarde dans le rétroviseur du web, je vois ceci...

Première génération : le nombril

Développer la "notoriété" de l'entreprise. Montrer ses plus beaux bureaux, son passé glorieux. Avoir une belle "carte de visite". Regarder son nombril. Telle était souvent la caractéristique des premiers sites web.

Un site web qui commence par "historique" ou "organigramme" trahit, de facto, une forme d'égocentrisme. Ces rubriques n'intéresseront que le Président d'honneur, et encore.

La question qui occupe le centre d'un site de première génération est le "Qui sommes-nous ?".

Voici à quoi ressemble une architecture de première génération :

• Qui sommes-nous ?
• Organigramme
• Historique
• Fonctionnement
• Structure
• Présidence
• Valeurs

Exemple d'architecture de première génération :

Source : www.electrochrome.fr

Deuxième génération : l'étagère

Mettre l'offre en valeur, les produits, les services,... telle est l'ambition du site web de deuxième génération.

On dépasse le stade de la carte de visite, on accepte de mettre l'entreprise en retrait derrière ce qu'elle vend. Le site web est déjà plus centré sur les besoins de l'utilisateur, mais il n'est pas à l'abri du jargon commercial (pour les produits) ou administratif (pour les services).

La question qui occupe le centre d'un site web de deuxième génération est : "Que faisons-nous ?".

• Que faisons-nous ?
• Nos produits
• Nos services
• Notre catalogue
• Notre portfolio
• Nos points de vente
• Nos formulaires

Voici des rubriques typiques d'une architecture de deuxième génération :

www.sapagroup.com/...

Troisième génération : l'action

Le site web de troisième génération est entièrement tourné vers les utilisateurs. Il utilise des verbes d'action qui collent aux motivations pour lesquelles les gens sont venus ou pourraient décider de venir.

La question au centre d'un site web de troisième génération est : "Ce que vous pouvez faire ici".

• Que pouvez-vous faire ici ?
• Envoyer un fax en 2 clics
• Réserver un hôtel
• Publier, éditer et partager des photos
• Remplir sa déclaration d'impôt en ligne
• Crée une version raccourcie d'une URL
• Commander le catalogue papier
• Et des milliards d'autres choses utiles

Voici un exemple d'architecture de troisième génération (telle que je la définis ici... car ça nous ramène quelque part au web "2.0") :

Source : feedburner.com

Ci-dessous, le site LinkedIn exprime son offre dans la partie centrale de l'écran, exclusivement sous la forme d'arguments et d'actions.

Source : linkedin.com

Bien sûr, une rubrique "Qui sommes-nous" reste nécessaire (et même obligatoire dans le cas de l'e-commerce), mais les sites actuels (du moins les bons) laissent la part belle aux utilisateurs.

Y aura-t-il une quatrième génération d'architecture ? Celle que l'utilisateur dessine lui-même ? Notez que les expériences en la matière n'ont pas toujours été concluantes. La BBC, par exemple, après avoir tenté l'affaire pendant un an, est revenue vers une page d'accueil statique, non modulable.

Depuis plusieurs années, je collectionne, en particulier pour mes formations web, des exemples croustillants d'erreurs à ne pas commettre en termes d'écriture, de design, d'architecture de contenu. Mais plus d'une fois, les participants m'ont demandé (très légitimement) à quoi ressemble une bonne page ou un bon site web.

Dans mon billet précédent, j'ai épinglé l'écriture web tranchante, factuelle, concise, structurée, telle que l'applique Google pour "vendre" ses services.

Ci-dessous, un autre exemple à suivre, en termes d'épuration de la page d'accueil. Celui de l'ambassade de Grande-Bretagne, en France et en Belgique.

Comme pour Google et son écriture épurée, cela n'a l'air de rien.
Et pourtant, parvenir à une architecture aussi simple exige de la réflexion et du courage (le courage de dire non à plein d'autres possibles).

Source : site web officiel de l'Ambassade de Grande-Bretagne en France.

A souligner en positif :

• Une mise en page aérée, avec des zones de respiration.
• Un nombre d'entrées de navigation très limitées.
• Un accent sur les scénarios d'usage essentiels (l'obtention d'un VISA, par exemple).
• Le recours à des pictogrammes pour renforcer la navigation.
• La hiérarchisation des news (un focus principal, et des news secondaires).
• Au final, une grille de lecture intuitive et confortable.

Points qui restent à améliorer :

• Les liens connexes ("related news") interfèrent de manière peu élégante. L'espace reste présent, mais vide, lorsqu'il n'existe aucun lien connexe.
• Les pictogrammes, pas toujours bien sentis (Pourquoi un avion pour les FAQ? Pourquoi des flèches pour les publications?)

L'ambassade en France et l'ambassade en Belgique utilisent la même maquette, mais avec une approche éditoriale qui peut varier. C'est le signe d'une gestion intelligente de l'investissement en communication. Trop de sociétés éclatent leur investissement de manière inconsidérée.

Source : site web officiel de l'Ambassade de Grande-Bretagne en Belgique.

D'autres choses à dire autour de cet exemple ?

Il est des moments où une actualité spécifique prend une ampleur telle qu'elle mérite d'apparaître en tête de rayon.

Les médias commencent à bien le comprendre et se mettent à intégrer des menus contextuels.

Ci-dessous, Le Monde en ligne place le Japon et la Lybie en avant, en raison d'une actualité évidente.

Source : lemonde.fr

Ci-dessous, le journal Le Soir fait la même chose, mais de manière un peu moins ergonomique. A la différence du Monde, aucun changement de couleur ne permet de distinguer le menu contextuel du menu générique. La proximité des intitulés "crise politique" et "Belgique", par exemple, me semble un peu gênante, étant donné qu'il s'agit de la crise politique belge.

Source : lesoir.be

Notez que la solution du menu contextuel peut intéresser également les sites commerciaux, comme la Fnac, ci-dessous, pendant les fêtes de Noël.

Source : fnac.com

Cette solution exige un minimum de souplesse de la part de votre CMS (outil de gestion du site web).

Si vous repérez d'autres exemples intéressants de menus contextuels, ce serait sympa de nous en faire profiter en commentaires.

Je viens de lire le bouquin de Muriel. Et je vous le conseille. Ne serait-ce que parce que vous n'en trouverez pas d'autre sur le sujet. Il existait déjà des livres sur l'écrit web, comme celui de Joël ou celui d'Isabelle, le plus complet et le plus récent à ce jour en Français. Mais Muriel nous propose ici un grand angulaire sur l'éditorial, incluant, au-delà des aspects d'écriture, résumés, une réflexion et des conseils sur la stratégie de contenu web.

Ce livre est à distribuer de toute urgence dans les universités (l'approche de Muriel a quelque chose d'académique, tout en reflétant l'expérience de terrain) ainsi que dans les entreprises (je ciblerais le management, pas toujours suffisamment conscientisé des enjeux liés à la gestion de contenu web). L'expert en communication web n'y découvrira pas forcément de grands scoops, mais un livre qui résume, avec justesse et sans se perdre, les différentes notions clés nécessaires à la gestion de contenu : audit, production, entretien.

Quelques passages choisis...

A propos de l'architecture d'information :

Pourquoi l'architecture de l'information est-elle si importante ? Parce qu'elle doit compenser la désorientation et la surcharge cognitive qu'impose le mode de lecture non linéaire sur le Web.

A propos de la charte éditoriale :

Elle rassemble les choix et décisions visant à assurer la cohérence des textes. Elle traduit la philosophie du projet de communication et établit un fil rouge dans la manière de communiquer et d'informer le lecteur. Elle incarne un champ de pensée, un point de vue, une manière de s'exprimer.

J'aime la clarté de cette définition.

Vous pouvez vous procurer le livre "Stratégie de contenu web" sur Amazon.

P.S. Juste par goût du débat : J'ai été fort surpris, dans les recommandations de contrôle qualité, par l'instruction suivante : "S'assurer qu'il y ait moins de 2 erreurs d'orthographe lexicale et grammaticale". Me concernant, même s'il m'arrive comme tout le monde de pécher, en matière d'orthographe, je recommande la tolérance zéro, à la New-Yorkaise ;-)

Dans mon boulot de conception d'interfaces, je suis régulièrement amené à réaliser des maquettes.

Maquettes, prototypes, ergolayouts, mockups, wireframes,... de nombreux vocables existent pour désigner ce qu'on peut considérer comme du design fonctionnel (qui s'intéresse au découpage des contenus, à la taille et à la position des fonctionnalités,...) par opposition au design graphique (qui s'intéresse aux couleurs, aux formes,...).

Microsoft Visio reste un des outils les plus connus pour réaliser ce genre de tâches. Personnellement, il me déçoit. Je le trouve faible dans son rendu graphique, et incomplet en termes d'éléments d'interface.

Jusqu'ici, je trouvais sympathique des outils tels que Gliffy ou Mockingbird.

Mais là, j'ai testé Mockflow, et je l'ai tout de suite adopté !

Tout y est ! Glissez et déposez les objets suivants :

• Menus verticaux, horizontaux, en onglet, en liens textes, fil d'Ariane,...
• Cartes géographiques et calendriers interactifs
• Boutons, barres de défilement, cases à cocher, en-veux-tu-en-voilà
• Icônes fonctionnelles les plus variées (imprimante, enveloppe, loupe,...)
• Fonctions sociales et participatives
• Texte "lorem ipsum" à la demande
• Et bien d'autres possibilités

J'aime le résultat, car on produit des maquettes propres et professionnelles, sans prendre le risque de dériver sur les questions graphiques, beaucoup plus subjectives en termes de gestion de projet ("Les goûts et les couleurs", comme on dit!). Je vous conseille de passer par ce stade de prototype fonctionnel, avant de vous lancer dans la finition graphique. Même s'il reste souvent intéressant, ensuite, si vous avez la chance de travailler avec un bon créatif, de lui laisser du champ et la possibilité de remettre en question certains choix.

Bon, il reste tout de même les risques liés à un outil en ligne, comme la nécessité de posséder une connexion Internet performante et fiable. Je me rappelle avoir amèrement regretté, en Algérie, mon choix de travailler avec des outils en ligne.

Vous pouvez tester Mockflow gratuitement. Pour une utilisation intensive, il vous en coûtera 59 euros par an. Microsoft Visio coûte 999 $, à titre de comparaison.

A lire aussi :

• Du (faux) latin au kilo
• Wireframes, Mindmaps, Cardsorting,... rien ne vaut le crayon !
• Mon offre de service en maquettage de site web

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 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 site web skitalia.be de la société Solmar présente une navigation linguistique pour le moins étonnante :

• Un drapeau français conduit à la version en Français
• Un drapeau belge conduit à la version en Flamand

Dans le contexte que l'on connaît (*), avouez que cela a de quoi surprendre.

Si le choix est fait du drapeau français pour identifier la langue francophone, le drapeau des Pays-Bas devrait représenter la langue néerlandophone ; le drapeau belge, quant à lui, ne pouvant être réduit à aucune langue, puisque notre pays en compte trois (l'Allemand étant la troisième langue officielle).

Dans un premier temps, j'ai naïvement attribué ce raccourci à une simple méconnaissance de notre improbable pays, pensant me trouver sur un site italien.

Mais un coup d'oeil plus attentif m'amène à réaliser que Solmar est une société belge, implantée à Maasmechelen, en territoire flamand.

Il semblerait qu'on ait affaire ici à un système de navigation très politique ;-)

Personnellement, cela me fait simplement sourire (je ne suis pas un francophone "militant", j'aime le contact avec la culture flamande). C'est plutôt avec une casquette d'observateur du Web que j'interviens ici, en soulignant la manière dont un point de vue politique peut affecter l'architecture de contenu.

De manière générale, en matière de versions linguistiques, je conseille d'indiquer la langue en clair : "Français", "Nederlands" (ou "Vlaams", si ça peut faire plaisir), "English". Ou bien des abréviations, comme à la Commission européenne, rôdée au mélange culturel : EN, FR, NL, DE,...

Autre observation, tant qu'on y est, sur le site Skitalia : la quantité de texte en page d'accueil me semble beaucoup trop imposante. Je la diminuerais drastiquement. Peu de visiteurs lisent les préambules de cette taille.

Enfin, pour terminer sur une note positive, je trouve le slogan efficace : "Le spécialiste de la neige italienne". Court, concret, mémorisable.

(*) Pour nos amis éloignés : nous connaissons actuellement une crise politique majeure, en Belgique, causée par les divergences entre francophones et flamands du pays. Des questions qui nous auraient paru surréalistes il y a peu, telles que le rattachement à la France, en viennent à être fréquemment évoquées.

P.S. Veuillez éviter, je vous prie, les commentaires politiques polémiques en commentaire de ce billet. Ce qui nous intéresse, ici, c'est la gestion des sites web.

Préambule important : Je n'ai pas voulu publier cet article à chaud. La gravité intrinsèque du sujet étant bien plus importante, à mes yeux, que mes réflexions en matière de stratégie de communication. Après coup, je me permets d'y revenir.

Le 15 février 2010, deux trains rentrent en collision aux abords de Bruxelles. L'accident fait des victimes.

La radio est souvent le premier média à annoncer la nouvelle, dans un tel cas.

Ensuite, les gens se ruent vers les sites web pour en savoir plus. Les sites web des médias, mais également les sites web à la source de l'information... la SNCB, dans ce cas-ci (la société qui gère les services aux voyageurs sur le réseau ferroviaire belge), mais aussi Infrabel (la société qui gère l'infrastructure).

Les deux sociétés ont vite réagi et publié des communiqués sur leurs sites web respectifs. Chose plutôt appréciable. On ne pourra pas leur reprocher de ne pas avoir communiqué.

En revanche, la forme des communications m'apparaît imparfaite.

Ci-dessous, Infrabel annonce une "Collision entre deux trains à Buizingen". Mais la taille du communiqué reste extrêmement discrète en regard de la gravité de l'événement. Le format ne convient pas à une telle situation. L'utilisateur pourrait avoir l'impression que l'accident est minimisé, traité comme une simple actualité, au même titre que le "montage d'une nouvelle chaîne de forage".

Prise d'écran effectuée le 15.02.10 sur www.infrabel.be

Ce n'est pas la qualité du communiqué qui est en cause, dans un cas pareil, mais plutôt la rigidité du site web, qui n'offre qu'un espace limité et invariable aux communications, indépendamment de leur ampleur. Je conseille la création d'une homepage "bis" pour les cas exceptionnels.

A l'intérieur du communiqué, l'information est traitée de manière concrète et factuelle, sans minimisation ni excès. Le ton me paraît pertinent. Difficile de faire autrement dans un cas aussi dramatique.

Un détail cependant : le numéro du centre d'appel téléphonique, pour les familles des victimes, reste perdu à l'intérieur du texte. Je conseillerais de le mettre bien davantage en évidence. Au minimum en gras, mais de préférence encore plus saillant, sous la forme d'un encadré ou d'un bouton, avec une icône "téléphone", par exemple.

Encore une fois, la solution réside dans le fait d'anticiper l'accident (malheureusement probable, statistiquement, sur le long terme) et de prévoir un gabarit de communication de crise.

Prise d'écran effectuée le 15.02.10 sur www.infrabel.be

Ci-dessous, le même jour, sur le site de la SNCB, l'annonce figure au deuxième rang, derrière un communiqué intitulé "La SNCB innove". Ce qui pourrait être perçu comme totalement hors propos, dans le contexte de l'accident.

Prise d'écran effectuée le 15.02.10 sur www.sncb.be

Sur le site web du journal Le Soir, c'est la collusion entre la publicité et l'information qui apparaît choquante (et certains l'expriment d'ailleurs en commentaires). "Grand concours", "Jouez maintenant!", "Gagnez des cadeaux!",... Tout cela a-t-il sa place à proximité d'un article dramatique ?

Prise d'écran effectuée le 16.02.10 sur www.lesoir.be

Entendez-moi bien : Je suis loin de me moquer des réflexes de la SNCB et d'Infrabel, dans cette situation. La plupart des entreprises n'auraient pas fait mieux. La communication de crise est, par définition, une des choses les plus difficiles à gérer. La solution : anticiper.