Je suis séduit par la qualité des infographies sur le site officiel de la FIFA...

Ci-dessous, la fiche d'un joueur. J'aime particulièrement le "heatmap" du terrain. Habituellement, j'ai affaire à ce type de représentation pour comprendre les comportements de lecture des interfaces web. Ici, rien à voir : les zones "chaudes" correspondent aux endroits de la pelouse que le joueur aura le plus piétiné. Efficace pour comprendre les zones couvertes par un joueur, sa tendance à tenir sa place ou à ratisser large.

Chaque but fait l'objet d'une reconstitution en 3D, que l'on peut décider de jouer à plusieurs vitesses et sous différents angles...

Creusez encore un peu et vous aurez accès à des statistiques chirurgicales : pourcentage de réussite des passes courtes, des passes moyennes, des passes longues, des centres, des corners, vitesse de course avec et sans ballon, et bien plus encore.

Et voilà que Monsieur-tout-le-monde se retrouve potentiellement dans la peau d'un coach, avec toutes les données de match imaginables pour éclairer le débat. Les comparaisons de performances sont possibles, entre équipes, entre joueurs individuels.

L'information est proposée sous de nombreux angles : équipe, joueur, match,...

Par exemple, ci-dessous, l'équipe du Brésil dispose de "sa" page d'accueil, avec ses résultats propres, son calendrier, ses analyses, ses commentaires, ses photos, ses vidéos, etc.

Du point de vue technique, la FIFA a fait le choix d'utiliser Flash... démontrant par la même occasion que Flash (en attendant le HTML 5?) est bien plus qu'un outil d'animation. On orchestre ici une véritable base de données de contenus, richement mis en scène sur le plan graphique, reliés les uns aux autres et actualisés en temps réel.

Certains sites d'entreprises pourraient, je trouve, puiser ici quelques bonnes pratiques :

• La production d'un site riche où chaque page est quasiment une page d'accueil, un point d'entrée, une mise en scène propre.
• La mise en valeur visuelle de données chiffrées.
• L'interconnexion des données à travers des passerelles en tous sens.
• Le mélange harmonieux des genres : vidéos, photos, textes, données, commentaires,...

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 ?

J'ai découvert hier un éclat dans mon pare-brise.

Aujourd'hui, le problème est réglé, déjà.

J'ai pris rendez-vous sur le site web de la société Carglass, via une interface limpide (épurée, style "Apple") qui, en quelques clics très intuitifs, m'aura conduit à décrire mon problème et prendre rendez-vous pour une réparation.

La confirmation par email, dans la foulée, est rassurante et irréprochable.

Un coup de téléphone, précis et convivial, fait suite.

Si je devais identifier des points faibles, ce serait plutôt au niveau de la page d'accueil, qui se perd un peu dans un environnement trop "graphique".

Prise d'écran: www.carglass.be.

Je préfère nettement la version française, beaucoup plus "incitative".

Prise d'écran: www.carglass.fr.

Simplement, je comprimerais encore l'accroche texte.

Avec quelque chose du genre : "Le vitrage de votre véhicule est endommagé ?".

Morale de l'histoire: Carglass est une entreprise qui place parfaitement son site web au milieu de sa chaîne de production. Un vrai site web d'entreprise, pas une plaquette de présentation. Un site web au coeur de la relation client, pas une brochure en ligne. Du service, pas de la communication.

P.S. Non, je ne suis pas payé par Carglass pour écrire ce billet et je ne possède aucune action chez eux. Je suis simplement un client satisfait ;-)

En primeur, pour vous, lecteurs du blog, j'annonce ici que mon site 60questions.net vient de faire peau neuve.

Objectifs de la manoeuvre :

• Mieux communiquer sur mes services aux professionnels.
• Simplifier, simplifier, simplifier.
• Respecter les standards d'accessibilité.
• Changer de chemise, ça fait parfois du bien.

Alors, mieux habillé le cordonnier ?

Votre avis m'intéresse.

De nombreuses études nous le confirment: les aspects graphiques n'ont que peu d'influence sur le succès d'un site web à long terme. La qualité du contenu et la facilité de navigation au sein de ce contenu restent, en revanche, primordiales pour encourager les visiteurs à revenir.

Jetez donc un coup d'oeil sur les sites à stature mondiale, ces monstres de popularité que sont Google, Wikipedia, Amazon, Ebay,... Sont-ils des oeuvres d'art ? Sont-il obsédés d'élégance et de raffinement ? Certainement pas.

Un site laid comme un dindon déplumé peut parvenir à s'imposer comme une référence mondiale, en dépit du bon sens, par la simple force de son contenu, exclusif, pertinent et régulièrement actualisé.

Cela veut-il dire que l'esthétique n'a aucune importance ?

Non. Car la qualité de votre environnement graphique, lors du premier contact avec le visiteur, influence fortement la crédibilité de vos propos en ligne. Une étude menée par des chercheurs de l'Université d'Ottawa démontre que les internautes jugent un site web en 50 millisecondes. Dans ce laps de temps, ils n'ont évidemment pas l'occasion de lire quoi que ce soit... C'est l'environnement visuel qui détermine leur première impression. Le graphisme contribue également à la lisibilité de vos contenus.

Dans certains secteurs, comme l'automobile, la mode ou les produits de luxe, l'image de marque graphique garde énormément d'importance.

Un site trop faible sur le plan graphique peut nuire à l'image de marque de son producteur. Ségolène Royale, récemment chahutée dans les médias pour la piètre qualité de son nouveau site web, ne nous contredira pas. Vous lirez notamment l'article de l'Express : Nouvelle version du site de Désirs d'avenir : un fiasco à 41 000 euros.

Prise d'écran : www.desirsdavenir.org - 15 septembre 2009.

Parmi les signes d'amateurisme :

• Une typographie avec grossier effet de relief
• Un paysage extrait d'une banale collection de fonds d'écran
• Des boutons translucides, disposés en vrac à gauche et à droite
• Une palette de couleurs aléatoire
• Des dissonances entre la page de garde et les pages intérieures
• De nombreux liens cassés

Conclusion : Soignez votre contenu avant tout, mais ne l'emballez pas avec du papier ménage. Dans le doute, la sobriété paye.

France - Serbie... en direct sur Yahoo! Sport...

Mais ce n'est pas des remplacements opérés par le sélectionneur Domenech dont je veux vous parler... ni de l'exclusion contestée de Lloris...

Non, sur ce blog, on parle typographie, ergonomie, architecture de contenu,... Et la petite idée qui m'a séduite, dans un flux de brèves, est d'utiliser une typographie décroissante : de gros caractères pour le dernier "post", de moyens caractères pour l'avant-dernier, et des caractères plus petits pour le reste de l'historique du flux d'information.

C'était tout bête. Comme toutes les grandes idées.

La question posée par Marina à la suite de mon billet précédent m'est régulièrement adressée en formation :

Est-ce que l'expérience utilisateur varie d'une langue à l'autre, d'une culture à l'autre ?

J'ai déjà lu un ou deux mémoires sur le sujet, mais n'y ai jamais vraiment puisé de données consistantes.

Certes, on peut trouver, ci et là, des recommandations sur la conception des sites web dans un environnement international. Mais ces recommandations portent davantage sur des conventions métriques et typographiques que sur des questions de mise en page.

Un coup d'oeil rapide sur les sites arabes, par exemple, permet de constater qu'ils affichent des standards d'ergonomie très semblables aux nôtres. Simplement, le site se construit en miroir, avec un sens de lecture de droite à gauche, et non de gauche à droite.

Source : http://www.aljazeera.net/Portal

J'ai découvert récemment (merci Katsoura) une collection de 30 systèmes de navigation attractifs.

Une tendance marquante et positive, selon moi, est que les interfaces se simplifient. Les portails, les puzzles à cent pièces, tendent à disparaître, au profit de mise en page plus contrastées, qui mettent beaucoup plus rapidement en avant les contenus clés.

Parmi ces 30 exemples, il y en a un qui a particulièrement attiré mon attention. C'est le CV de Sarah Longnecker, passionnée de production vidéo.

Source : http://sarahlongnecker.com.

Ce CV en ligne présente plusieurs qualités rares :

• Un copywriting tranchant, simple et puissant
• Une typographie esthétique, efficace, contrastée, aérée
• Des appels à l'action bien choisis ("Check out my portfolio", "Contact me", "Download resume")
• Une architecture de navigation épurée au maximum ("work", "blog", "about", "contact"... quoique ces deux dernières rubriques pourraient encore être fusionnées)

Pour dire les choses autrement, il n'est pas si fréquent de voir une telle bonne alchimie entre l'écriture, la structure, le graphisme et le fonctionnel. Cette demoiselle montre l'exemple dans un domaine où je peinais à identifier de bonnes pratiques.