Le pied de page st un emplacement de votre site web, c’est le dernier élément visualisé lorsque l’on parcoure la page de haut en bas et c’est aussi le filet de sauvetage pour les utilisateurs perdus qui ne savent plus où cliquer (cf. Soignez vos extrémités - menu et pied de page et Un plan du site dans votre pied de page).
Bref, le footer est un élément essentiel de la construction de votre site à ne négliger sous aucun prétexte. Je vous propose donc de découvrir deux articles qui en parlent. Tout d’abord 10 Techniques for a Fantastic Footer où l’auteur énumère ses règles de construction pour un pied de page : Inclure un plan du site, un retour en haut de page ainsi que des liens vers les plateformes sociales. De ce point de vue là le site Sushi & Robots est un bel exemple :
Le pied de page du site Sushi & Robots
Il préconise également de le truffer de liens pour faciliter le rebond sur une page intérieure, comme sur le site RailsTrip (vous noterez au passage l’histogramme du nombre de billets publiés par jour) :
Le pied de page du site RailsTrip
Il est également précisé que l’on peut y mettre du contenu (encore une fois pour les visiteurs perdus qui n’ont pas trouvé ce qu’ils cherchaient en parcourant rapidement la page de haut en bas) comme sur WPBeginner :
Le pied de page de WPBeginner
Autre article très bine documenté : Informative And Usable Footers In Web Design. Les conseils prodigués y sont à peut près les mêmes, ils citent en prime le très bel exemple d’Apple qui fournit à la fois un fil d’Ariane et un plan du site :
Le pied de page du site d'Apple
Si vous cherchez d’autres sources d’inspiration, je vous recommanderais également cet article avec des exemples plus “exotiques” : 25 Creative Website Footers. Bon… je sais ce qu’il me reste à faire…
J’avais constaté il y a quelque temps la prolifération de menus de navigation au format XL (cf. Est-ce la mode des menus déroulants surdimensionnés ?) mais c’est un article de Jakob Nielsen qui me pousse à aborder à nouveau le sujet : Mega Drop-Down Navigation Menus Work Well.
L’auteur nous explique ainsi que les menus de navigation surdimensionnés peuvent mieux fonctionner qu’un menu traditionnel :
- Ils proposent une meilleur lisibilité avec un espace mieux exploiter et un guidage renforcé à l’aide de séparateurs et de pictos ;
- Ils permettent d’afficher la totalité de l’arborescence d’une section.
Ces menus doivent par contre respecter quelques règles d’utilisabilité :
- Pas trop de choix à la fois ;
- Un temps de latence d’1/2 seconde à l’ouverture et à la fermeture du panneau ;
- Pas de contrôle trop complexes ;
- Une navigation au clavier pour assurer une meilleure utilisabilité.
Sur ce dernier point je suis ravi de la position adoptée par le Dr Nielsen : même si les menus de navigation surdimensionnés ne sont pas accessibles (ou peuvent difficilement l’être), il suffit d’assurer l’accès au rubrique de premier niveau.
Deux très bon exemples sont cités dans l’article : Food Network (avec une excellente hiérarchisation de l’information) et Action Envelopes (avec une utilisation astucieuse des pictos).
Le menu de Food Network
Le menu d'Action Envelopes
Dans le même esprit mais à l’autre bout de la page, j’avais également abordé il y a deux ans cette pratique élégante qui consistait à mettre le plan du site dans le pied de page (cf. Un plan du site dans votre pied de page). Et c’est un article publié sur Web Designer Wall qui me fait aborder le sujet à nouveau : Modern Sitemap and Footer.
L’auteur liste ainsi les avantages de mettre le plan du site dans le footer :
- Cela permet d’économiser un clic pour les utilisateurs et d’autoriser les sauts de section ;
- Cela donne plus d’espace à la promotion interne (pour mettre en valeur des fonctions ou contenus clés) ;
- Cela réchauffe le pied de page.
Un certain nombre d’exemples sont cités dont celui de Mozilla :
Le pied de page de Mozilla.com
Mention spéciale au “site à Barak” (WhiteHouse.gov) qui cumule à la fois un menu de navigation surdimensionné et un plan du site en pied de page.
Voici une initiative audacieuse et remarquable (du moins aux yeux d’un concepteur de sites web) : placer le plan du site ainsi que l’ensemble des informations de contact dans le pied de page.
Nous devons cette initiative à une communauté religieuse de Seattle : The City Church.
Quand je dis communauté religieuse
, n’allez pas vous imaginer des moines en soutane, mais plutôt une paroisse avec de très gros moyens et surtout un dispositif de communication très au point. Vous remarquerez ainsi la façon très élégante avec laquelle ils vulgarisent les podcasts du pasteur (deux boutons : Listen
et Download
).
Tout ça pour dire que cette astuce de conception est loin d’être dénuée de sens et que je suis surpris par l’ingéniosité et l’efficacité de ce dispositif : les utilisateurs ayant l’habitude de parcourir la page vers le bas pour trouver l’information qu’ils cherchent, c’est généralement dans le pied de page que l’on retrouve des liens vers le plan du site et la page contact (plus d’infos dans un précédent billet). Y inclure directement les informations, c’est gagné un clic quelque part.
/!\ Article initialement publié sur FredCavazza.net.
Les pieds de page (footer en anglais) sont en règle général très austères. Mais quand on y réfléchi bien, le pied de page c’est le dernier élément à être lu par vos visiteurs, c’est potentiellement le dernier élément de navigation où les utilisateurs vont chercher leur salut avant de quitter votre site.
Alors regardez bien votre pied de page dans les yeux et posez-vous cette question : Est-ce le dernier souvenir que je souhaite laisser à mes visiteurs ?
Si oui, tant mieux. Si non, je vous recommande les articles suivants :
/!\ Article initialement publié sur FredCavazza.net.