Le Rayon UX

La radiographie du Web en temps presque réel / thème en chantier (je m'appelle Teuse)

Un design pattern pour le big footer

UI Patterns a sorti hier une intéressante proposition de design pattern pour le big footer, ce pied de page dans lequel l’auteur d’un site va concentrer un ensemble d’informations d’informations et de navigation fondamentales communes à l’ensemble du site. Fan du big footer depuis des années, j’ai eu l’occasion de l’implémenter à plusieurs reprises sur ce site avant finalement de le retirer dans la version actuelle… pour l’instant.

UI Patterns Fat footer

Le big footer permet de répondre à la problématique suivante : comment offrir un accès rapide à des sections du site fréquemment utilisées qui ne relèvent pas de son architecture hiérarchique. Tout un programme ; encore faut-il l’utiliser à bon escient.

Quand utiliser le big footer ?

UI Patterns recommande d’utiliser le big footer dans les cas suivants :

Utilisez le big footer comme navigation secondaire dans un site Web, surtout si vous voulez lui attribuer toute la largeur de la page.

Ne l’utilisez en revanche jamais comme navigation primaire. Évident, mais ça va toujours mieux en le disant. Le choix de Darren Rowse, par exemple, d’utiliser le pied de page afin d’afficher ses catégories est plus que discutable.

Big footer pro blogger

Cela implique donc qu’il ne doit pas servir à naviguer vers les sections décrivant la hiérarchie de votre site. Si vous tenez un blog, dégagez-en donc la navigation chronologique ou thématique, elles n’ont rien à faire là.

Utilisez le big footer afin d’afficher des informations que l’utilisateur aura intérêt à avoir à sa disposition sur toutes les pages de votre site, sans exception. Préférez des éléments auxquels vos utilisateurs accèderont souvent.

Implémentation :

Toujours selon UI Patterns :

Utilisez le même pied de page sur toutes les pages de votre site – avec la même disposition partout.

Utilisez-le afin de proposer des liens vers des sections fréquemment utilisées de votre site : dernières brèves, inscription à une newsletter, liens vers votre flux RSS etc…

Utilisez-le afin de proposer des liens vers des éléments vitaux de votre site web.

Analyse

En commençant la lecture de Fat Footer Design Pattern, je me suis posé la question du bien fondé d’un tel motif. J’avais peur de voir les propositions prises au pied de la lettre, éradiquant toute créativité dans la mise en place d’un big footer, en gros un effet Smashing Magazine. Finalement, en dehors du second point de l’implémentation, ce design pattern fait plutôt bien son boulot : il donne des directives d’implémentation suffisamment détachées de l’usage éditorial pour ne pas créer une uniformisation de mauvais aloi.

Je ne suis en revanche pas d’accord à divers degrés sur les trois points d’implémentation.

Le premier est sur le fait d’afficher le même pied de page partout. Affichez les mêmes blocs sur toutes les pages de votre site, mais variez-en au besoin le contenu, notamment en fonction du contexte. Vous pouvez ainsi vous en servir en référencement afin de travailler le maillage interne de votre site de manière intelligente pour vos utilisateurs. Ne l’utilisez en revanche pas pour d’afficher des liens en rapport direct avec le contenu visité. Les liens connexes, par exemple, n’ont rien à y faire et doivent rester dans la partie contenu, cohérence oblige.

Le second concerne l’affichage d’informations vitales pour votre site. Si les informations sont vitales, elles n’ont rien à faire sur le pied de page. Le pied de page de Last.fm en est l’exemple parfait : véritable boite à outils, il affiche un ensemble de liens utiles dont on pourrait facilement se passer, mais qui s’avèrent fort pratique pour les différents types d’utilisateurs du service.

Biig footer Last FM

C’est d’ailleurs le problème des éléments mis en avant dans l’article d’UI Patterns. Un flux RSS, ou une inscription à une newsletter sont des éléments de transformation importants qui n’ont rien à faire dans le pied de page.

J’y ajouterai enfin un conseil personnel : utilisez le big footer sur des sites dont les pages sont raisonnablement longues. Un site corporate, un portfolio ou un service web sont de très bonnes destinations. En revanche, sur un blog sur les pages duquel s’affichent la totalité des 10 ou 20 derniers articles, il ne sert – en dehors des pages d’articles – qu’à alourdir inutilement des pages déjà imposantes.

  • Par tetue 13/04/2010 at 04h09

    J’aime beaucoup le big footer également, car je trouve que c’est un élément de navigation très intéressant. Par contre je ne suis pas d’accord avec toi sur le dernier point que tu évoques : je l’ai souvent apprécié sur les pages longues, en particulier lorsqu’il présentait un plan du site, carrément, et/ou les derniers articles publiés, ce qui permet de rebondir et poursuivre sa navigation sans avoir à scroller comme une folle pour remonter en haut de page, surtout sur les sites, hélas nombreux, qui ne sont pas équipés d’ancres de retour.


  • Par Shnalla 13/04/2010 at 15h26

    Ah les gros footers! C’est un bonne occasion pour y ajouter de petites touches de créativité! Par contre je trouve que le fait d’en varier le contenu peut parfois perturber certains internautes. En effet, le footer peut servir de point de repère et si le contenu change, que d’une page à l’autre on perds des éléments ça peut être gênant. Ca c’est sur le plan “ergonomique” car je comprends aussi ton point de vue, donc je terminerai mon commentaire en disant que c’est à adapter au public visé!


  • Par Frederic de Villamil 15/04/2010 at 15h37

    @tetue : effectivement, maintenant question performances et confort de navigation, il y a mieux….

    @Shnalla : quand je parle de varier les contenus, c est bien de laisser les mêmes blocs, mais en varier le contenu. Il ne faut surtout pas dérouter l’utilisateur.


  • Par Anto 20/02/2011 at 00h05

    Tetue : L’ascenseur à droite de chaque page, ça sert à quelque chose ;-)


Commentaire Un design pattern pour le big footer