Troisième et dernière partie des billets Footers ou Pied de page – partie 1 et partie 2.

Bien sûr que le footer est sans doute une dès partie les moins consultées d’un site web. Mais ne soyons pas réticent aux nouvelles évolutions de cet espace qui n’est qu’à  ses balbutiements. Les pieds de page intéressent les internautes ou professionnels curieux et souhaitant en savoir plus sur les propriétaires d’un site. D’o๠l’importance de ne pas négliger cette partie que ce soit dans sa structure, design ou contenu.

Footer de Studio Graphique ou Créatif

Pour finir ce thème, je vous propose une liste, non-exhausive, de plusieurs pieds de page à  usage et design variés d’agence ou de graphiste indépendant.

SamRayner.com

Sam Rayner, jeune développer anglais de 18 ans, utilise son footer de blog pour présenter ses derniers travaux mais aussi ses préférences littéraires ou musicales avec un widget d’Amazon.

arrivaldesign.co.uk

Ce studio de création a su, joliment et sobrement, investir son footer en 2 parties bien distinctes : une liste sur les compétences du studio juxtaposé à  leurs coordonnées localisées à  l’aide d’une carte de la Grand-Bretagne.

Boagworld

A la différence du studio ArrivalDesign, Boagworld a mis en avant leur humour et leur compétence avec un footer illustré.

Les footers offrent aux créatifs un nouvel espace d’expression tout en réalisant une rupture visuelle entre le contenu et les informations du pied de page. L’internaute découvre un nouvel environnement ornementé contenant des liens contextuels ou des informations personnelles.

Drawn2pixels.co.uk

FarFromFearless.com

A lire aussi :

• Footer ou pied de page (partie 1)
• Footer ou pied de page (partie 2)
• 10 visionneuses et plus encore

Deuxième partie du billet Footer ou Pied de page (partie 1) : « Le pied de page est devenue depuis 3 à  4 ans une brique essentielle d’un site et de plus en plus esthétique. Longtemps snobé, le pied de page était seulement utilisé pour des liens utilitaires : plan du site, contact, à  propos de, presse, choix de la langue, mentions légale, etc. Aujourd’hui, il se manifeste sous différentes formes et regroupe de nombreuses données permettant de compléter le contenu d’un site avec une navigation transversale ou alternative. »

FnacLive.com, AuFeminin.com, AlloCine.fr

A première vue, je ne sais pas si l’on peut qualifier ces exemples entant que pied de page, mais l’idée de La Fnac, AuFéminin ou Allociné est commune et mérite réflexion.

Chacun possède un footer de type traditionnel constitué de liens utilitaires récapitulant les mentions légales, contact, plan du site, logo… Mais ils ont en plus un ou plusieurs modules récapitulant les dernières activités du site : podcasts, billets, topics d’un forum, pages les plus consultées de la journée…

Ces modules permettent aux utilisateurs de découvrir les différentes activités du site avec des informations plus temporelles avant de consulter des informations plus institutionnelles.

Dans le même esprit, le blog Baiseenville.com ou la nouvelle refonte du site LesInrocks.com.

Le footer de Baise-en-ville a une démarche plus promotionnelle : les modules sont positionnés en-dessous des mentions légales et promeuvent du contenu relatif à  différents blogs liés à  l’agence Heaven qui est à  l’origine de Baise-en-ville.

A lire aussi :

• Footer ou pied de page (partie 1)
• Footer ou pied de page (partie 3 & fin)
• 10 visionneuses et plus encore

Le pied de page est devenue depuis 3 à  4 ans une brique essentielle d’un site et de plus en plus esthétique. Longtemps snobé, le pied de page était seulement utilisé pour des liens utilitaires : plan du site, contact, à  propos de, presse, choix de la langue, mentions légale, etc. Aujourd’hui, il se manifeste sous différentes formes et regroupe de nombreuses données permettant de compléter le contenu d’un site avec une navigation transversale ou alternative.

• Footer ou pied de page (partie 2) / Footer ou pied de page (partie 3 & fin)

VIRB.COM

Le pied de page de virb.com est sobre, simple et surtout compréhensible avec 3 niveaux d’organisation.

• Le premier module est destiné à  un emplacement publicitaire. Ici, Virb alterne GoogleAds et méga-bannière. Notons le respect envers l’utilisateur : ces liens contextuelles ne sont pas mêlés aux liens utilitaires. Le fait de scinder les emplacements permet de séparer le contenu publicitaire au contenu principale sans gêner l’usage.
• Une structure en 4 colonnes permet une hiérarchisation du contenu : les atouts du service en quelques lignes, les fonctionnalités principales, les catégories, et une dernière colonne pour les liens utilitaires tels que le FAQ, contact, conditions d’utilisations…
• Le Copyright © et la mention « tous droits réservés » signalent une démarcation par son positionnement en retrait. L’utilisateur perçoit cette mention légale (le droit de la propriété intellectuelle) comme une signature ou un paraphe qui clos le site.

LEMONDE.FR

A la différence de Virb, LeMonde.fr possède 2 pied de page : un dédié à  la page d’accueil du site et le second pour toutes les autres pages. Tous deux condensent les principales rubriques et informations légales présentés sous un design à  l’état brut ne se souciant pas de la notion de lisibilité.

Ces 2 footers, structuré de deux manières différentes, conservent l’idée de séparé l’offre promotionnelle des liens utilitaires. Sur celui destiné à  la page d’accueil, les liens s’enchainent sous forme de liste horizontale. En revanche pour le second, apparition aléatoire d’une bannière publicitaire 728x90px, l’offre promotionnelle est disposée à  l’inverse du premier pied de page et les liens sont structurés dans 7 colonnes de petit format.

Le fait de changer la disposition des éléments, et le sens de lecture, peut entrainer une perte de repère de l’utilisateur surtout lorsque les deux footers sont bien distinct avec un design mis de cà´té.

A lire aussi :

• Footer ou pied de page (partie 2)
• Footer ou pied de page (partie 3 & fin)
• 10 visionneuses et plus encore !

En attendant mes prochains billets consacrés aux différentes utilisations des footers (pied de page), tests logiciels ou sites web, je vous invite à  découvrir un nouveau blog qui vient d’apparaitre en ce début d’année 2009 : Wireframes Magazine.

D’origine canadienne, ce blog, créé et enrichi par Jakub Linowski, se consacre à  l’architecture de l’information, le design d’interaction et bien sûr l’expérience utilisateur. Jakub propose à  chaque professionnel de témoigner de ses méthodes de travail, expériences et difficultés rencontré lors de conception d’interface. Et comme son nom l’indique, de partager à  tous ses différents storyboard, prototypes, maquettes ou zoning.

A suivre de près et à  rajouter à  son agrégateur de flux 🙂

Découvert sur Graphism.fr de Geoffrey Dorne et sur le blog de Eric Di Pol, Superfiction.net

Début novembre, je reçois par la poste la 5° version du “Petit Livre Rouge du Marketing Interactif“ de Martin Tissier. Qui d’ailleurs pour l’année 2009, il n’est plus petit (dommage), ni rouge mais reste toujours aussi consistant et intéressant en contenu. Ce livre est très diversifié dans ses exemples et ses illustrations qui égayent chaque chapitre du livre.

La partie principale du livre permet d’appréhender les tendances du marketing 2009 avec des explications et des arguments de professionnels qui abordent en détails le ciblage comportemental, les applications sur mobiles, les Interfaces riches, le Web sémantique… Les nouveaux usages et l’évolution d’Internet sont présentés avec des campagnes virales mais aussi de nombreux exemples sur les RIA et sur l’usage des mobiles qui devient de plus en plus important dans notre quotidien.

12 thèmes + 60 campagnes analysées

• # 01 : Créer son site Web – conseils sur l’ergonomie, taux de conversation, Netchandising…
• # 02 : Moderniser son site Internet – utilité des widgets, RIA, utilisation de Flash…
• # 03 : Apprivoiser les moteurs de recherches – référencement naturel, optimisation, liens sponsorisés…
• # 04 : Dompter les bannières de publicité – pub vidéo, CPM, CPC, CPA…
• # 05 : Optimiser la relation avec l’internaute – fidélisation, ciblage comportemental…
• # 06 : Gérer des campagnes d’e-mailing – création et optimisation de campagne, analyse des résultats…
• # 07 : Générer du bouche à  oreille – buzz marketing, advergame, street marketing…
• # 08 : Intégrer l’univers des bloggeurs – communication, microblogging…
• # 09 : Infiltrer les communautés – réseaux sociaux, univers virtuel, web TV…
• # 10 : Développer un site/service mobile – géolocalisation, site mobile, flow marketing…
• # 11 : Diversifier les usages du mobile – pub, mobileTag, RFID…
• # 12 : Se préparer à  demain – Interfaces tactiles, innovations technologique…

La seconde partie est consacrée au décryptage de plusieurs campagnes de marketing qui sont analysées en détails afin de comprendre la mise en place d’OP telle que la WebTV Escape TV de Wolkswagen, Dolce Gusto de Nescafé, Fight For Kisses de Wilkinson, d’exemples de bannières de pub Rich Média, refonte du site et blog d’Altaà¯de, campagne d’advertainment de Wofty de Freedent, Wikipédia sur Mobile, application embarquée sur iPhone…

Cadeau de Noà«l

Le livre vaut 58€, si vous comptez l’offrir à  Noà«l vous pouvez profitez d’une remise en utilisant le code Ergophile sur cette page. Vous pourrez avoir le livre à  48€, c’est toujours çà  🙂

A lire aussi :

• TechTrends.eu – Internet Marketing 2009 dans les bacs
• ConseilsMarketing.fr – Critique du livre Internet Marketing 2009 de Martin Tissier

Petite Nouvelle du Jour, le site d’ergonomie d’Amélie Boucher vient d’arriver avec un tout nouveau look : Ergolab.net

A lire aussi :

• Ergophile : Mémento d’Egonomie Web – Amélie Boucher
• Ergophile : Ergonomie web pour des sites web efficaces
• Ergophile : Paris Web 2007 : Atelier d’ergonomie avec Amélie Boucher
• Designers Interactifs : 3 questions à  Amélie Boucher

A l’occasion de la Journée Mondiale de l’Utilisabilité, une conférence gratuite aura lieu le 12 novembre 2008 à  partir de 18h30 chez Microsoft. Cette conférence sera sur le thème de « L’utilisabilité et Interfaces Riches« .

Inscription & Programme

Inscription pour assister à  la conférence

Retrouvez ce programme (non-définitif) sur le blog de Fred Cavazza : SimpleWeb.fr

• 18 H 30 – Accueil et introduction
• 19 H 00 – Utilisabilité et interfaces riches par Frédéric Cavazza – Genèse des RIAs, panorama des différents interfaces et terminaux, enjeux et perspectives.
• 19 H 20 – RIA et systèmes de navigation par Patricia Gallot-Lavallée – Définition, exemples de systèmes de navigation riches, apports, impacts et meilleures pratiques, quel héritage à  retenir des interfaces de jeux vidéo.
• 19 H 40 – RIA et applications métiers par Mathieu Isaia – Avantages / inconvénients des applications en ligne, particularité des applications métiers, exemples et retour d’expérience, méthodes et outils de conception.
• 20 H 00 – Pause
• 20 H 10 – RIA et sites grand public par Toufik Lerari – Les contraintes des sites grand public, bénéfices et inconvénients des technologies riches, retour d’expérience et études de cas.
• 20 H 30 – RIA et expérience utilisateur par Sam Woodman, Michael Chaize et Thibault Imbert (Adobe) – Comment les RIAs transforment l’expérience utilisateur – étude de cas, quels impacts sur la structuration des sites web, quelle démarche pour concevoir des interfaces performantes ?
• 20 H 50 – Une approche holistique des interfaces riches par Christophe Lauer et David Talaga (Microsoft) – Comment les RIAs transforment l’expérience utilisateur – étude de cas, quels impacts sur la structuration des sites web, quelle démarche pour concevoir des interfaces performantes ?
• 21 H 10 – Cocktail et remerciements
• 21 H 30 – Fin

Lieu : Microsoft Business Center, 148 rue de l’Université, 75007 PARIS

View Larger Map

A lire aussi :

• Paris Web 2008
• Netlife research et son calendrier de l’inutilisabilité
• World Usability Day.org