Je vous parlais encore hier de la finesse avec laquelle Google innove, en permanence, en toute discrétion.

Même si, sur certains détails, je prédis un retour en arrière.

Par exemple, cet effet d'apparition de l'interface en deux temps...

Ce que vous voyez dans un premier temps...

Ce que vous voyez en passant la souris sur l'écran...

Au tout début, j'ai apprécié le clin d'oeil, l'idée d'une interface hyper épurée, jusqu'au moment où on l'active.

Mais cet effet au passage de la souris, en mode "fondu enchaîné", provoque vite un micro-agacement. Sensation personnelle, mais que j'ai entendu exprimer par d'autres.

C'est pourquoi je prédis un retour, à terme, vers une interface statique.

On parie ?

En revanche, la possibilité (récente) de personnaliser le fond d'écran pourrait tenir la distance, à mon humble avis. Car, bien que très facultative, elle ne gêne en rien l'interface, présentée comme une option discrète et décentrée (en bas à gauche).

Source : Jean-Marc Hardy, trip en VTT, récemment, en Forêt Noire.

Dans la foulée du poster "Comment plaire à Google", téléchargé par près de 4000 personnes, j'ai le grand plaisir de vous annoncer un tout nouveau poster sur le thème de la lisibilité des pages web.

Venez le télécharger gratuitement ici :

http://www.60questions.net/fichesdepros/posters-web.htm

(au format A3 ou A4)

Vos commentaires seront appréciés comme toujours.

Je vous ai déjà parlé de boutons ici et là, de même que là-bas et là-bas aussi.

Ce que j'aime dans ce design de boutons :

• On y combine créativité ET ergonomie
• On y dose les effets (un bouton principal, un bouton secondaire)
• La métaphore graphique fonctionne (balle, gazon)
• Le texte est aussi incisif que l'image
• Le contraste de couleurs est maximal
• L'impact visuel déchire, sans empiéter le moins du monde sur la fonctionnalité

Source : http://tigerwoodsonline.ea.com/ via Elements of Design (excellente collection de variété d'options de design pour différents cas de figure : boutons, pieds de page, navigation, formulaires, et bien plus!) via Usaddict (excellent blog d'ergonomie web très pragmatique, alimenté par Thierry Bouillot, Jean-François Nogier, Loïc Nunez et Céline Uguen).

Comme vous le savez sans doute déjà, Google vient de modifier en partie ses interfaces.

Il s'agit plus d'une évolution que d'une révolution. La page d'accueil reste plus ou moins identique. Les pages de résultats s'enrichissent de fonctionnalités (présentes dans une colonne à gauche) qui existaient déjà pour la plupart, mais dont l'accès était moins direct.

Comme le montre le Journal du Net, cet enrichissement fonctionnel ne se fait pas aux dépens de la quantité de résultats affichée dans l'écran. C'est même l'inverse qui se produit.

Icône + texte
Les résultats, globaux par défaut, peuvent être filtrés en un clic sur base de différents formats (images, vidéos, discussions,...). Google a créé une palette d'icônes, soutenues par des libellés textes. Des études d'ergonomie qui ne datent pas d'hier, mais remontent aux débuts de l'informatique, démontrent que les interfaces qui associent un libellé texte et une icône visuelle obtiennent les meilleurs résultats (comparativement au recours au texte seul ou à l'image seule).

Affinement progressif
Plus les utilisateurs activent les critères, plus il en apparaît. L'interface s'étoffe à mesure que la recherche se précise, selon le principe du WYSIWYN ("What You See Is What You Need").

Exploration chronologique
Le nouveau Google combine le chaud et le froid : les résultats en temps réel et l'histoire ancienne. D'un côté, le bouillonnement constant de l'information et de la rumeur, à travers des extraits de Twitter, notamment. A l'autre bout, la possibilité d'explorer des documents anciens, jusque dans le profond Moyen-âge.

Roue magique
Certaines représentations alternatives permettront de parcourir les résultats d'une autre manière. Le système de la "roue magique" me rappelle l'ancien moteur de recherche visuel Kartoo, aujourd'hui disparu de la toile. Il offre la possibilité d'explorer les principales branches sémantiques liées à l'expression recherchée.

Pied de page
En bas de page, l'utilisateur peut désormais réintroduire une recherche, rechercher "dans les résultats", obtenir des conseils de recherche ou envoyer des commentaires.

Consistantes améliorations, donc, même si rien n'est jamais très spectaculaire avec Google (continuité et utilisabilité obligent).

J'attends avec curiosité les premières données sur l'évolution des comportements utilisateurs face à ces changements. Par exemple le taux d'utilisation des paramètres de filtre avancés.

Et vous, vous avez l'impression que votre utilisation du moteur va être affectée par ces nouvelles options à portée de souris ?

Un client, dans le domaine bancaire, me pose la question suivante...

Vaut-il mieux placer les boutons "Next" et "Previous" comme ceci...

Version #1

... ou comme cela ?

Version #2

Je vous invite à voter #1 ou #2 en commentaire. Ou bien développer toute forme d'argumentation en la matière.

P.S. Moi, j'ai ma petite préférence et mes petites réflexions, mais il me plait de recueillir d'abord vos opinions.

Un plan des rues sans indication "Vous êtes ici !", c'est comme un voilier sans voile.

Sur un site web, le "Vous êtes ici" passe par l'éclairage des menus actifs (en jaune sur le site de la ville d'Arlon) :

Source : www.arlon.be

Ou bien le sentier de navigation (appelé souvent "fil d'Ariane"), qui permet aussi de se situer dans la géographie du site :

Source : www.belgium.be

Il y a un peu plus de 4 ans, je vantais les qualités de dvdpost.be sur le plan de l'ergonomie incitative. J'entends par là la capacité à créer une interface simple et tranchante qui conduit tout droit le visiteur à se transformer en client.

Prise d'écran: dvdpost.be - septembre 2006

Cette première version restait pourtant imparfaite:

• Trois boutons "call-to-action" qui se font concurrence
• Des arguments de vente, certes concis, mais encore dispersés

La nouvelle version a résolu ces problèmes:

• Un seul gros bouton, renforcé par une flèche incitative
• Des arguments de vente rassemblés
• Un graphisme confortable, avec une présence maximale

Notez que dans les tests que j'ai opérés avec mes étudiants, d'aucuns restent gênés par le champ d'insertion du "Code Promo", trop proche de l'action principale et libellé d'une manière obscure pour les personnes qui ne sont pas concernées par cette opération.

Prise d'écran: dvdpost.be - février 2010

Les concurrents, comme netfilm.be, adoptent une structure de service et des interfaces assez similaires.

J'aime assez bien ici, l'effet de rayonnage créé dans la partie inférieure de la page.

En revanche, les arguments de vente ("en 24 heures par la poste", "pas d'amende de retard", etc.) ne ressortent pas très bien, en gris sur fond noir, sans indentation.

Prise d'écran: Netfilm.be - février 2010

Ce type d'interface (un call-to-action majeur, trois arguments de vente et un effet de rayonnage) pourrait s'exporter à d'autres entreprises et secteurs, à mon avis.

Voyez, par exemple, comme l'offre de Be tv, dans un domaine connexe, semble extrêmement compliquée et peu équipée de "call-to-action" tranchants.

Source: betv.be - février 2010

La dernière version de Firefox intègre la possibilité contextuelle d'ajouter un onglet.

Le petit "+" semble très intuitif. J'adore ce genre d'amélioration, peu spectaculaire, tellement elle semble naturelle. Mais il fallait y penser.

En réalité -une fois n'est pas coutume-, c'est Internet Explorer qui avait innové. Seule différence: le petit "+" n'apparaît pas avec Internet Explorer. Une icône moins évidente apparaît uniquement au survol de la souris. Firefox s'est donc inspiré de son concurrent, en rendant les choses encore un cran plus claires.

L'ergonomie, c'est ce sens du détail. Ces mini raccourcis qui facilitent la vie.

Les professionnels du Web ont très vite intégré la nécessité de fournir des mécanismes de navigation à travers un site.

Cependant, le besoin de navigation a souvent été hypertrophié. Les utilisateurs ne demandent pas à se retrouver devant un cockpit de Boeing. Autant les fonctions clés seront appréciées (fil d'Ariane, retour à la page d'accueil, moteur de recherche, têtes de chapitres,...), autant il n'est pas forcément indispensable de tout étaler en permanence dans l'interface.

Ci-dessous, sur le site officiel de la Région de Bruxelles-Capitale, le contenu est cerné, de toutes parts, par une quantité impressionnante de liens de navigation. Ce qui augmente les distractions, diminue le confort de lecture et complique l'expérience utilisateur.

Source : http://www.bruxelles.irisnet.be/....

Ci-dessous, dans une version récente du site de la BBC, la navigation est complètement ciblée. L'utilisateur a choisi "Sports", puis "Tennis"... et le menu de navigation est complètement centré sur le tennis. Le contenu est parfaitement mis en situation. La navigation ne crée pas de digression.

Source : http://news.bbc.co.uk/....

Un bouton, bien visible mais peu envahissant, donne accès aux autres contenus de la chaîne.

Certains sites, moins connus que la BBC, c'est vrai, auront intérêt à présenter l'étendue de leur offre aux visiteurs. Mais le problème est toujours le même, à force de tout vouloir montrer, on assomme l'utilisateur, qui ne regarde plus rien.

Les utilisateurs d'Internet ont totalement acquis le réflexe d'utiliser l'ascenseur (barre de défilement vertical) pour explorer les pages web. Depuis 8 ans, je diffuse ce message, à travers mes formations "écrire pour le web", sur le site redaction.be ou via ce blog.

Et voilà la chose encore confirmée dans un excellent article d'une agence d'ergonomie basée à Bristol (UK) : The myth of the page fold: evidence from user testing.

Source : CX Partners.

Leur opinion se base sur une expérience de quelque 800 tests utilisateurs.

Le point intéressant de l'article est qu'il identifie quelques paramètres qui, dans certains cas, peuvent malgré tout décourager le scrolling. Il s'agit de :

• L'utilisation de lignes horizontales, qui brisent la page.
• La surcharge du premier écran, qui assomme tellement qu'elle décourage toute exploration supplémentaire.
• L'utilisation de zones de défilement intérieures, qui s'ajoutent à l'ascenseur principal et en compliquent l'utilisation.

Une erreur classique de conception reviendrait à surcharger le premier écran, soit toute la zone "above the fold", sous prétexte de la rendre immédiatement visible. Mieux vaut souvent aérer l'information, quitte à la placer plus bas.

Tout cela étant dit, je pense que la zone directement visible à l'arrivée sur une page (la zone au-dessus du pli) reste primordiale pour mettre les visiteurs en situation. Les titres et les chapôs qui apparaissent dans cette zone demeurent décisifs. Le taux d'attention s'avère tout de même supérieur dans la partie haute de la page.

Mais descendre sous le premier écran ("below the fold"), ce n'est pas descendre en enfer.