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 !

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 ?

Cette page est géniale.

Pourquoi ?

Parce qu’elle aurait pu être hyper compliquée, mais au lieu de cela, Google l’a voulue tranchante.

1. La concision
En 250 caractères, Google vend son service de messagerie. Pour le même prix, le rédacteur aurait pu pondre 2000 caractères. Notez que dans ma prise d’écran, j’ai volontairement rogné un morceau du texte d’introduction, à mon sens inutile. On peut donc toujours aller plus loin.

2. Les arguments
Trois arguments majeurs ont été mis en avant : l’espace de stockage, la lutte contre le SPAM et l’accès mobile. Il est évident que d’autres caractéristiques auraient pu être communiquées. On aurait pu étaler la liste complète des fonctionnalités. Mais l’exhaustivité est un piège et Google a choisi de limiter son argumentaire aux aspects les plus concurrentiels. Il y a fort à parier que certains chefs de projet chez Google ont dû être frustrés de ne pas voir apparaître « leur » fonctionnalité. Mais un bon management de l’information oblige à effectuer des choix cruels pour préserver la force de frappe et l’utilisabilité d’une communication.

3. Les pictogrammes
Chaque argument a été incarné par un pictogramme. Ces visuels produits sur mesure rendent la page agréable, sympathique et originale. Ils en renforcent surtout la structure et permettent au visiteur de balayer le contenu très efficacement. Une communication concise, structurée et illustrée gagne en immédiateté. Le taux de décrochage doit être très faible. Dès l’atterrissage sur la page, le message passe instantanément, comme une piqûre qu’on ne sent pas venir. L’énergie-lecteur est minimale. Notez qu’il est judicieux de contrôler la quantité de texte associée à chaque élément visuel. Dans ce cas-ci : un argument apparaît en gras, et une ligne supplémentaire, dégraissée, vient nourrir cet argument avec des détails factuels. De manière systématique.

4. Le contenu dynamique
Petit détail très « web » : le chiffre communiqué à propos de l’espace serveur est mis à jour dynamiquement, en temps réel. Cet effet de compteur, suffisamment sobre heureusement pour ne pas détricoter l’ensemble, accentue encore l’accroche lecteur, démontre le savoir-faire de Google et transmet, en ligne de fond, l’idée que le service reste en croissance permanente, signe de succès.

5. La possibilité d’en savoir plus
Le corollaire d’une page concise, c’est la nécessité de proposer un lien pour en savoir plus. Sur ce point, j’ai une critique à formuler : un lien est associé au troisième argument uniquement. Je préférerais, soit un lien en regard de chaque argument, soit un lien général, détaché de tout argument spécifique. Le lecteur risque d’être gêné par une certaine asymétrie dans le prolongement hypertexte de cet argumentaire.

Morale de l’histoire ?

Une page simple n’est pas le fruit du hasard.

Une page simple résulte d’un véritable management de l’information, d’une réflexion sur mesure, graphique, marketing, rédactionnelle, ainsi que d’une épuration douloureuse mais bénéfique.

Derrière une page simple, il y a beaucoup de travail.

D'ailleurs, certains semblent avoir été inspirés...

A moins que je ne confonde moi-même entre l'oeuf et la poule ;-)

A lire aussi :

• Arrêtez de facturer vos textes au kilo ! (sur redaction.be)
• Désapprendre la littérature
• Le nouveau Google : ergonomie enrichie

La page web est amenée à marier le texte et la vidéo.

Ce mariage est nouveau. Tantôt harmonieux, tantôt bancal.

Ci-dessous, ARTE positionne une vidéo fort bas dans la page (sous la ligne de flottaison, en réalité). Le texte domine.

Source : ARTE

Ci-dessous, la BBC fait l'inverse. La vidéo vient en amont. Le texte apparaît plus bas. Un espace entre les deux provoque une sorte de divorce.

Source : BBC

RTL-TVI a choisi d'intégrer le texte à la vidéo. Un mariage plus étroit, qui implique un descriptif texte concis.

Source : RTL-TVI

TF1, également, opte pour un court descriptif texte, sous la vidéo.

Source : TF1

TV LUX place le texte à droite de la vidéo. Avec le risque que les lecteurs/auditeurs perçoivent ces éléments comme dissociés. Le titre échoue à chapeauter l'ensemble. La présence d'une photo fixe ajoute à la confusion.

Source : TVLux

Le webzine Interstices positionne également le texte à droite de la vidéo. Mais ici, cela fonctionne mieux. Grâce à certains codes graphiques (petite flèche, effet de pli), l'encadré texte est clairement rattaché à la vidéo.

Source : Interstices, site de vulgarisation scientifique.

En conclusion : le mariage texte-vidéo ne fait l'objet d'aucune standardisation pour le moment.

Cette standardisation est-elle souhaitable ?

Pas obligatoirement, mais la situation actuelle présente le risque, à mon avis, de compliquer la grille de lecture. Vidéo et web se concurrencent, à certains endroits, plutôt que de s'épouser.

J'encourage, en tout cas, les télévisions à tester objectivement l'efficacité de différentes variantes d'intégration du texte et de la vidéo.

A cette problématique ergonomique, s'ajoute la problématique sectorielle et juridique. Les télévisions produisent du texte. La presse écrite produit des vidéos. Des activités qui, autrefois, étaient clairement dissociées, en termes d'entreprise, mais aussi en termes de subsides et de cadre juridique. Le mariage de la vidéo et du web se produit sur un terrain miné, en tout cas en Belgique.

Sans oublier la dimension référencement. Car, sur Internet, le texte reste nécessaire à la vidéo, non seulement pour la mettre en scène, mais aussi pour l'indexer.

A lire aussi :

• Nouveau site de la RTBF : 20 arrêts sur image
• Menus déroulants enrichis sur ARTE
• Comment valoriser une vidéo en ligne : poster gratuit

NDLR: Notez que, dans ce billet, je me suis permis d'épingler des pratiques éditoriales qui ne sont pas forcément représentatives d'une stratégie globale de la part des médias en question. Les chaînes de télévision varient souvent leurs mises en page. Ce qui ne fait qu'augmenter, d'ailleurs, la variabilité des situations de lecture.

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.

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 !

J'aime les petites améliorations qui font un grand bien. Et Google Traduction vient d'en produire une.

Auparavant, la traduction apparaissait au bas du texte original. Ce qui nous obligeait à effectuer des aller-retours permanents, dès que le texte à traduire était un peu consistant.

Prise d'écran : Google Traduction - ancienne interface

Dorénavant, la traduction apparaît en parallèle : à gauche, le texte original, à droite, la traduction, générée en temps réel. Joli !

Prise d'écran : Google Traduction - nouvelle interface

Par contre, les traducteurs humains ne seront pas au chômage de si tôt : regardez donc comment l'outil me traduit une "disposition en miroir" ;-)

Autre fonctionnalité intéressante : la possibilité d'écouter la traduction dans la langue cible.

A ce propos, si vous avez 30 secondes à perdre, faites donc cet exercice très comique, mais totalement puéril j'en conviens, d'écrire n'importe quoi et de vous faire lire votre charabia par la machine ;-)

Mon billet précédent, basé sur peu d'éléments, m'a donné envie d'aller un cran plus loin.

J'ai eu le plaisir de collaborer quelques fois avec les équipes du site web ARTE TV, je reste attentif à l'évolution des sites de CNN et de la BBC, et je donnerai prochainement une formation écrire pour le web auprès des Télés Locales de Belgique et Luxembourg. A l'heure de l'annonce de Google TV, j'étais donc curieux de voir comment se portait le site web de notre radio-télévision publique nationale francophone, la RTBF.

>> Lire la suite

Rien n'est plus rebutant qu'un gros pavé de texte lorsqu'on découvre le contenu d'une page web.

En 1997 déjà, Jakob Nielsen recommandait d'éviter les longs blocs de texte.

"Don't require users to read long continuous blocks of text!" - Jakob Nielsen, 1997.

En 2002, le même Jakob Nielsen reprenait ce principe dans son "Top Ten Web-Design Mistakes".

Source : www.useit.com

Pendant mes formations "écrire pour le web", lorsque je présente des exemples de pages chargées de blocs de texte, la réaction est toujours immédiate et unanime. Même ma fille de 11 ans m'exprime...

"Cela ne donne vraiment pas envie de lire" - Ma fille, 11 ans.

Pourtant, la RTBF continue de proposer des articles en ligne qui s'apparentent (pas tous) à des murs de texte peu digestes...

Source : rtbf.be

Quelques paragraphes seraient bienvenus, non ?

Un peu de respiration, je vous prie.

Bon, ceci dit, la RTBF fait de mieux en mieux pas mal de choses...

Les formats d'accroche, par exemple, sont souvent réussis. Comme ici, un compteur des jours sans gouvernement, qui mène vers un dossier sur la question, à la fois actualisé et mis en perspective. Bravo!

Ou bien un accès à une vidéo sous forme de question interpellant la curiosité, avec un bouton "play" qui donne envie.

Alors, pour conclure en termes scolaires :

"Gros progrès, chère RTBF, depuis vos débuts laborieux. Vous considérez enfin le Web dans tout son potentiel. Mais ne vous arrêtez pas en si bon chemin. Affinez. Continuez sur votre lancée !".

P.S. J'ai rajouté quelques bémols et compléments de réflexion, ci-dessous, en commentaire, après publication initiale de ce billet.