Charte Ergonomique Site Publics FR

Logo Gouv FR
Découvert cette semaine, la charte ergonomique des sites publics français est disponible depuis décembre 2008. Ce document de 115 pages établit les spécifications ergonomiques des sites et peut être une solution pour instaurer des bases afin d’harmoniser un ensemble de site déclinable. Mais de là  à  dire qu’une charte rendra des sites ergonomiques… j’en reste perplexe et je n’y crois pas trop. Et vous, qu’en pensez vous ?

« La mise en Å“uvre d’une charte ergonomique commune vise à  harmoniser la navigation sur les sites Internet publics, à  créer une « marque commune » aux administrations afin de renforcer la confiance des usagers dans les services en ligne et d’accroître leur utilisation. Les aspects graphiques des sites publics restent à  l’entière initiative des services publics. La charte définit 118 règles d’ordre général : organisation, principes de navigation, lisibilité, aspects techniques ; 127 règles sur les objets : -liens hypertextes, tableaux, formulaires, images, objets multimédia et 100 règles sur les contenus : page d’accueil, démarches en ligne, assistance, contenus web 2.0, etc. » Gazette de service-public.fr

La charte ergonomique à  consulter ici : charte_ergonomique_servicepublic_fr.pdf

Sources : Charte ergonomique, Guide d’auto-évaluation, Une charte ergonomique unique pour les sites Internet publics

Charte Ergonomique Site Publics FR

Enquête « Ergonomie des sites Web, verdict des internautes »

Découvert cette semaine sur le blog : utilisabilité.info, une enquête réalisée par le Pà´le Conseil En Ergonomie de BenchMark Group. Ce sondage mis en ligne en novembre 2008, « Verdict des Internautes », n’est pas exhaustif car il a été réalisé auprès de 824 lecteurs du Journal du Net, l’internaute Magazine et lecteurs des sites du Benchmark Group. Soit 96% de ces internautes sont habitués à  surfer tous les jours sur le web.

Toutefois, nous pouvons relevé quelques chiffres intéressants :

  • 81 % n’aiment pas les sites o๠il y a trop d’animations qui gêne la lecture
  • 1 internautes sur 2 décide de quitter un site en moins d’1 minute si ce dernier ne leur convient pas
  • 75 % des internautes rencontrent des difficultés pour trouver ce qu’ils cherchent
  • 58 % sont confrontés à  des problèmes de navigation
  • 66 % trouvent les contenus des sites souvent mal présentés
  • 47 % trouvent l’allure des pages d’accueil peu engageante

A lire aussi :

Enquête « Ergonomie des sites Web, verdict des internautes »

Footers ou Pied de page (partie 3 & fin)

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

Suite à  2 commentaires dans mon billet précédent, je souhaitais rebondir dessus :

« C’est surtout généralement une saloperie de liens proposés par le référenceur … qui est donc loin d’être ergonome. »

« Cette partie de la page est la moins regardée en temps normal. Le fait d’y ajouter du contenu qui pourrait être pertinent pour un internaute perdu demande d’abord que: cette page n’est pas beaucoup de contenu (pour qu’il puisse voir ce footer), mais aussi qu’il prenne le temps d’aller lire jusqu’en bas… Cela étant dit, il n’est pas impossible qu’on change notre regard sur cet partie des pages puisque chaque pixel du net cherche aujourd’hui à  être exploité et à  augmenter le ROI.. »

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

SamRayner

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

ArrivalDesign

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

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

Drawn2pixel.com

FarFromFearless.com

FarFromFearless

A lire aussi :

Footers ou Pied de page (partie 3 & fin)

Footer ou Pied de page (partie 2)

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

FnacLive

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.

Aufeminin

Allocine

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

baiseenville

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.

lesinrocks

A lire aussi :

Footer ou Pied de page (partie 2)

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.

Pour le référencement : il est conseillé d’organiser et de hiérarchiser des liens internes dans le footer : les liens principaux (rubriques) du site doivent aussi y apparaitre. [si vous avez plus d’infos sur le référencement, je suis preneuse 😉 ]

VIRB.COM

virb

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

Le monde

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 1)

Wireframes Magazine

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.

wireframes logo

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

Wireframes Magazine

Mes meilleurs vœux avec Monsieur Cok

L’année dernière, je vous souhaitais mes bons vÅ“ux avec Sketchtravel. Cette année, je partage avec vous mon coup de cÅ“ur et vous souhaite de bonnes fêtes de fin d’années avec Monsieur Cok. J’ai découvert Monsieur Cok en 2006, et régulièrement je suis le flux de son blog pour voir l’évolution et maintenant le succès de ce court métrage.

Monsieur Cok

Ce court métrage raconte l’histoire de Monsieur Cok, propriétaire d’une grande usine de fabrication d’obus. Sa passion pour le rendement et son goût du profit le conduisent à  remplacer ses employés par des automates très perfectionnés. Résignés les anciens ouvriers assistent impuissants au labeur de leurs remplaçants mécaniques. Mais cela ne va pas sans susciter la colère de l’un d’entre eux…


Les animations du film ont été réalisé à  Lille au studio Train train. Au préalable, la conception de Monsieur Cok a duré un an o๠son réalisateur Franck Dion a conçu les illustrations, les décors et les sculptures. Monsieur Cok utilise le principe du papier découpé, la 2d numérique et des marionnettes. Le compositing et les animations complémentaires ont été effectués à  Paris. Monsieur Cok est le premier film produit par Papy3D une jeune maison de production. Plus de détails sur le dossier de presse.

Vous pouvez suivre l’actualité de Monsieur Cok sur son blog avec toutes ses récompenses et son tour du monde dans les différents festivals.

Bonnes fêtes de fin d’années et à  bientà´t en 2009 😉

Mes meilleurs vœux avec Monsieur Cok