Une page d’accueil exemplaire

Publié le par
facebooktwittergoogle_pluslinkedinmail

Depuis plusieurs années, je collectionne, en particulier pour nos 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 ?

3 réflexions au sujet de « Une page d’accueil exemplaire »

  1. Hugues

    Je ne partage pas le même enthousiasme que toi pour cette page d’accueil Jean-Marc. Si il est vrai que son écriture est très concise, cette page reste néanmoins vraiment perfectible.

    Sa plus grande faiblesse (qui aurait pu être sa plus grande force) est la colonne Quick Links/Liens utiles. Le principe des quick links est intéressant, mais il est ici très mal organisé. Cette colonne combine sans les distinguer des liens vers des sites externes et des liens à l’intérieur du site, elle répète des entrées qui sont déjà présentes dans la navigation principale (‘Visas’ dans la navigation primaire, ‘English’ dans la header fonctionnel; cette dernière entrée devient d’ailleurs incompréhensible dans le contexte des Liens utiles). Et l’entrée ‘Passeport’, elle, pointe vers la version anglaise du site.

    Le bloc central, quand à lui, répète la plupart du temps les entrées qui se trouvent déjà à la droite (Facebook, Twitter, FAQ, Visas, …) mais accompagnées d’un autre visuel. Sans compter que les effets de ‘gradient’ sur les entrées secondaires des news rendent la lecture difficile.

    La répétition n’est pas toujours une mauvaise chose. Mais ici, elle est semble le signe d’une démarche de bricolage qui tente de corriger des problèmes de visibilité dans un lay-out inadapté.

    Répondre
  2. jmh

    @ Hugues : Un grand merci pour ta réaction consistante. Ici, j’étais avant tout séduit par l’épuration de l’environnement à l’atterrissage sur la page, en comparaison avec un grand nombre d’autres sites web d’ambassades. Mais c’est vrai qu’un second coup d’oeil permet de poser d’autres critiques.

    C’est marrant, chaque fois qu’en formation, ou ici sur le blog, je présente un exemple à suivre, nous avons du mal à être tous d’accord. Le site web idéal, c’est évident, n’existe pas. Le projet web, c’est comme la démocratie, on essaie de le faire tendre vers le moins mauvais des systèmes.

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>