Petit tour sur le site de Barack Obama: « action! »

1Gaetano • 23rd sept 2008 • Usability & Ergonomie

Un petit tour sur le site de Barack Obama et – hop! – on en retire quelques idées en matière d’efficacité. Les incitants à l’action dans une campagne électorale sont essentiels. Alors le site web de soutien se doit de suivre…

Dès la page d’accueil

Première visite (détectée grâce à l’absence de cookie) et la page d’accueil donne déjà le ton. Laissez votre adresse email et vote code postal et faites un don. Astuce: ce ne sont que les 2 premiers champs d’un formulaire plus long. La technique peut être efficace: le nombre réduit de champs incite à les remplir, la suite parie sur le fait qu’un premier effort a été fait et vous motivera  à terminer la procédure:

Remarquez le faible contraste du « Skip Signup ». Eviter de s’inscrire est possible, mais il est relégué en seconde position, diminué par un bouton rouge contrasté qui le surplombe.

Un mise en page qui sert le verbe

La recommendation est connue: commencez vos liens par des verbes actifs. Ici on va plus loin en adaptant même la mise en page pour soutenir visuellement le verbe:

On remarquera la faiblesse visuelle du titre « Take Action »: ils ont raison. Le titre en soi n’est pas important. Comparé aux verbes qui sont eux essentiels.

L’essentiel dans la partie supérieure

La première page de contenu réel du site centralise l’essentiel dans la partie supérieure:

• L’inspiration: une photo qui grandit le personnage, le fait regarder vers la droite de l’écran et donne un aspect visionnaire et souriant.
• L’émotion: avec une phrase qui en dit long. Comme les américains savent les écrire.
• L’accès au contenu: avec une barre de navigation horizontale très claire. On peut regretter l’usage de lettres capitales.
• Un contenu avec un système de tabs qui donne accès à 4 message principaux
• Trois incitants à l’action: « Faire un don », « En apprendre plus », « Visiter le site » (on peut critiquer ce dernier bouton dont le label peut rendre les choses confuses)

Des boutons et des liens que ne peut que cliquer

Comme le souligne Amélie Boucher, il est essentiel de rendre l’entièreté d’un bouton et de la zone qui l’entoure cliquable. Sur ce site, le principe est respecté à la lettre. Les boutons et bannières sont grands et la zone entière est cliquable. Sans oublier la variation visuelle dès que la souris se pose sur l’élément cliquable:

On remarquera aussi l’incroyable aération dont bénéficie les liens. L’interligne ne laisse que peu de place à l’erreur.

Sans oublier la règle de base: tous ce qui est bleu est cliquable.

Obama sur tous les fronts

Les réseaux en ligne ne sont pas oubliés et c’est dit en titre: « Obama everywhere ». Les dernières photos de la campagne? Il suffit de cliquer sur l’icône Flickr:

Bref une remarquable leçon de clarté et d’efficacité.