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 ?

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 ?

Dans le monde réel, c'est bien connu : le monde attire le monde.

A tel point qu'il m'arrive de prendre en pitié une terrasse injustement vide, face à une autre, qui déborde de clients.

Sur Internet, média virtuel, il est tout aussi important, voire plus, de témoigner de l'affluence.

L'affluence donne confiance.

Si d'autres l'ont fait, pourquoi pas moi ?

Si d'autres s'arrêtent, c'est que ça vaut la peine.

J'aime la façon dont le site monguidesante.com témoigne du mouvement qu'il génère.

Bien sûr, de nombreux sites affichent déjà un compteur, du genre "6 visiteurs en ce moment".

Mais, ici, le rendu est plus visuel et plus qualitatif.

Les derniers produits achetés, consultés ou évalués apparaissent en flux tendu, à un rythme qui témoigne du succès du site (c'est une condition, sans laquelle l'effet peut s'avérer très contre-productif).

Ces témoignages de confiance me paraissent particulièrement cruciaux dans le cas présent, puisque nous avons affaire à un domaine potentiellement très délicat (et très légiféré) : la santé.

Plus bas dans la page, une jauge de trafic apparaît.

L'effet visuel est sympathique, mais la signification me semble ici bien trop floue.

A partir de combien de visiteurs le témoin passe-t-il au rouge ?

Peu utile, à mon sens, en comparaison et en surplus de l'autre module.

Vous connaissez d'autres sites qui témoignent joliment de leur interactivité ?

Les grands formats visuels tendent à se multiplier sur les pages d'accueil. Souvent, ils sont accompagnés d'un effet d'alternance, soit par des transitions en fondu enchaîné automatique au rythme lent, soit par une navigation horizontale (numéros ou flèches).

La taille de l'image est susceptible d'attirer l'attention. Les études eye-tracking confirment cette évidence que plus une image est grande, plus elle attire l'attention des visiteurs.

Les premières générations de sites web, pour des raisons très légitimes (temps de téléchargement), nous ont habitués à de petites images. Certains médias continuent de se limiter à de telles petites images. Cependant, ils perdent énormément d'impact. C'est le cas du site de la Fédération des Entreprises de Belgique (la FEB), dont la page d'accueil mérite un fameux rafraîchissement.

Source : feb.be

Ici, sur le site web de la société Umicore, on utilise un grand format visuel, avec un effet de carrousel tel que je l'évoquais plus haut. Cependant, l'esthétique est très "publicitaire". Le texte se trouve complètement fondu dans l'image. Ce qui offre un rendu esthétique, mais pas du tout fonctionnel. Le texte apparaît ici comme un slogan. Rien ne pousse à cliquer. Ce type d'image se heurte à un phénomène que nous appelons "banner blindness". Littéralement : aveuglement, face à un format qui ressemble trop à de la publicité, que les visiteurs ont tendance à fuir comme la peste.

Source : umicore.com

Ci-dessous, le site ARTE télévision utilise également de grands formats en page d'accueil. Le texte est plus contrasté, par rapport à l'image, et l'ambiance est plus télévisée ou cinématographique que publicitaire. En revanche, l'hyperlien contenu dans la bannière reste fort discret, et donc, moyennement incitatif. Disons qu'on aurait plutôt tendance à regarder le diaporama des émissions à la une de manière passive qu'interactive. Mais les statistiques nous contrediront peut-être.

Source : ARTE.tv

Dans ce dernier exemple, Google Earth a pris la peine de détacher complètement le bouton de la bannière. Ce qui le rend très incitatif. L'appel à l'action (de cliquer) semble ici beaucoup plus évident.

Source : Google Earth

En conclusion, je dirais que tout dépend du contexte. Mais si vous désirez incitez à l'action, vous avez tout intérêt à suivre l'exemple de Google Earth et détacher visuellement le bouton de la bannière.

En pratique, rien ne vaut de vérifier l'impact de ce type de changement à travers vos statistiques de fréquentation.

Bon, je suis bien d'accord, un site web ne doit pas nécessairement être beau pour plaire, et les problèmes d'architecture ne se résolvent pas par de la chirurgie esthétique.

Cependant, dans certains contextes, l'esthétique pure reste séduisante. Par exemple, j'aime ce blog d'une amatrice de cuisine, qui accorde énormément d'attention à la qualité des photos et de l'interface.

Et j'aime particulièrement l'idée d'une navigation par la couleur, dans un contexte où :

• les critères logiques ne sont pas forcément déterminants lorsqu'on cherche des idées de cuisine ;
• on mange tellement avec les yeux.

Alors pourquoi pas la couleur comme fil rouge, c'est vrai.

Lorsque je cherche une illustration pour mes présentations, il m'arrive régulièrement d'utiliser la fonction de recherche d'image avec le filtre sur la couleur dominante proposé par Google. Cela me permet de rester dans une esthétique générale.

Si vous cherchez des "pommes vertes" sans plus, il vous en restera quelques rouges...

Alors qu'en activant le filtre "vert" de Google qui analyse la véritable teinte de l'image, vous recueillez dans votre panier des pommes vraiment vertes...

Cette fonction pourrait nous permettre d'analyser le design d'interfaces web, et produire des articles de ce genre: 20 Yellow-Color-Based Website Design.

Vous cherchez l'icône d'un caddie (en demandant tous les droits d'utilisation, bien entendu) ? Vous la voulez verte ou bleue ?

Ma couleur préférée ?

Ben, vous êtes bien curieux.

Le jaune.

Oui, je sais, c'est pas du goût de tout le monde.

Mais moi, j'aime l'été, le citron, le soleil et les (a)nanas.

Je suis séduit par la qualité des infographies sur le site officiel de la FIFA...

Ci-dessous, la fiche d'un joueur. J'aime particulièrement le "heatmap" du terrain. Habituellement, j'ai affaire à ce type de représentation pour comprendre les comportements de lecture des interfaces web. Ici, rien à voir : les zones "chaudes" correspondent aux endroits de la pelouse que le joueur aura le plus piétiné. Efficace pour comprendre les zones couvertes par un joueur, sa tendance à tenir sa place ou à ratisser large.

Chaque but fait l'objet d'une reconstitution en 3D, que l'on peut décider de jouer à plusieurs vitesses et sous différents angles...

Creusez encore un peu et vous aurez accès à des statistiques chirurgicales : pourcentage de réussite des passes courtes, des passes moyennes, des passes longues, des centres, des corners, vitesse de course avec et sans ballon, et bien plus encore.

Et voilà que Monsieur-tout-le-monde se retrouve potentiellement dans la peau d'un coach, avec toutes les données de match imaginables pour éclairer le débat. Les comparaisons de performances sont possibles, entre équipes, entre joueurs individuels.

L'information est proposée sous de nombreux angles : équipe, joueur, match,...

Par exemple, ci-dessous, l'équipe du Brésil dispose de "sa" page d'accueil, avec ses résultats propres, son calendrier, ses analyses, ses commentaires, ses photos, ses vidéos, etc.

Du point de vue technique, la FIFA a fait le choix d'utiliser Flash... démontrant par la même occasion que Flash (en attendant le HTML 5?) est bien plus qu'un outil d'animation. On orchestre ici une véritable base de données de contenus, richement mis en scène sur le plan graphique, reliés les uns aux autres et actualisés en temps réel.

Certains sites d'entreprises pourraient, je trouve, puiser ici quelques bonnes pratiques :

• La production d'un site riche où chaque page est quasiment une page d'accueil, un point d'entrée, une mise en scène propre.
• La mise en valeur visuelle de données chiffrées.
• L'interconnexion des données à travers des passerelles en tous sens.
• Le mélange harmonieux des genres : vidéos, photos, textes, données, commentaires,...

Dans la foulée du poster "Comment plaire à Google", téléchargé par près de 4000 personnes, j'ai le grand plaisir de vous annoncer un tout nouveau poster sur le thème de la lisibilité des pages web.

Venez le télécharger gratuitement ici :

http://www.60questions.net/fichesdepros/posters-web.htm

(au format A3 ou A4)

Vos commentaires seront appréciés comme toujours.

Je vous ai déjà parlé de boutons ici et là, de même que là-bas et là-bas aussi.

Ce que j'aime dans ce design de boutons :

• On y combine créativité ET ergonomie
• On y dose les effets (un bouton principal, un bouton secondaire)
• La métaphore graphique fonctionne (balle, gazon)
• Le texte est aussi incisif que l'image
• Le contraste de couleurs est maximal
• L'impact visuel déchire, sans empiéter le moins du monde sur la fonctionnalité

Source : http://tigerwoodsonline.ea.com/ via Elements of Design (excellente collection de variété d'options de design pour différents cas de figure : boutons, pieds de page, navigation, formulaires, et bien plus!) via Usaddict (excellent blog d'ergonomie web très pragmatique, alimenté par Thierry Bouillot, Jean-François Nogier, Loïc Nunez et Céline Uguen).

Comme vous le savez sans doute déjà, Google vient de modifier en partie ses interfaces.

Il s'agit plus d'une évolution que d'une révolution. La page d'accueil reste plus ou moins identique. Les pages de résultats s'enrichissent de fonctionnalités (présentes dans une colonne à gauche) qui existaient déjà pour la plupart, mais dont l'accès était moins direct.

Comme le montre le Journal du Net, cet enrichissement fonctionnel ne se fait pas aux dépens de la quantité de résultats affichée dans l'écran. C'est même l'inverse qui se produit.

Icône + texte
Les résultats, globaux par défaut, peuvent être filtrés en un clic sur base de différents formats (images, vidéos, discussions,...). Google a créé une palette d'icônes, soutenues par des libellés textes. Des études d'ergonomie qui ne datent pas d'hier, mais remontent aux débuts de l'informatique, démontrent que les interfaces qui associent un libellé texte et une icône visuelle obtiennent les meilleurs résultats (comparativement au recours au texte seul ou à l'image seule).

Affinement progressif
Plus les utilisateurs activent les critères, plus il en apparaît. L'interface s'étoffe à mesure que la recherche se précise, selon le principe du WYSIWYN ("What You See Is What You Need").

Exploration chronologique
Le nouveau Google combine le chaud et le froid : les résultats en temps réel et l'histoire ancienne. D'un côté, le bouillonnement constant de l'information et de la rumeur, à travers des extraits de Twitter, notamment. A l'autre bout, la possibilité d'explorer des documents anciens, jusque dans le profond Moyen-âge.

Roue magique
Certaines représentations alternatives permettront de parcourir les résultats d'une autre manière. Le système de la "roue magique" me rappelle l'ancien moteur de recherche visuel Kartoo, aujourd'hui disparu de la toile. Il offre la possibilité d'explorer les principales branches sémantiques liées à l'expression recherchée.

Pied de page
En bas de page, l'utilisateur peut désormais réintroduire une recherche, rechercher "dans les résultats", obtenir des conseils de recherche ou envoyer des commentaires.

Consistantes améliorations, donc, même si rien n'est jamais très spectaculaire avec Google (continuité et utilisabilité obligent).

J'attends avec curiosité les premières données sur l'évolution des comportements utilisateurs face à ces changements. Par exemple le taux d'utilisation des paramètres de filtre avancés.

Et vous, vous avez l'impression que votre utilisation du moteur va être affectée par ces nouvelles options à portée de souris ?

J'ai découvert hier un éclat dans mon pare-brise.

Aujourd'hui, le problème est réglé, déjà.

J'ai pris rendez-vous sur le site web de la société Carglass, via une interface limpide (épurée, style "Apple") qui, en quelques clics très intuitifs, m'aura conduit à décrire mon problème et prendre rendez-vous pour une réparation.

La confirmation par email, dans la foulée, est rassurante et irréprochable.

Un coup de téléphone, précis et convivial, fait suite.

Si je devais identifier des points faibles, ce serait plutôt au niveau de la page d'accueil, qui se perd un peu dans un environnement trop "graphique".

Prise d'écran: www.carglass.be.

Je préfère nettement la version française, beaucoup plus "incitative".

Prise d'écran: www.carglass.fr.

Simplement, je comprimerais encore l'accroche texte.

Avec quelque chose du genre : "Le vitrage de votre véhicule est endommagé ?".

Morale de l'histoire: Carglass est une entreprise qui place parfaitement son site web au milieu de sa chaîne de production. Un vrai site web d'entreprise, pas une plaquette de présentation. Un site web au coeur de la relation client, pas une brochure en ligne. Du service, pas de la communication.

P.S. Non, je ne suis pas payé par Carglass pour écrire ce billet et je ne possède aucune action chez eux. Je suis simplement un client satisfait ;-)