Ce livre est LA bible pour tout ce qui touche au tri par cartes, il détaille les grands principes, la préparation et le déroulement des séances l’analyse des résultats et leur interprétation pour aboutir à des solutions. Simple à lire et didactique, le livre vous accompagnera dans votre démarche de conception centrée sur les utilisateurs et apporte notamment des retours d’expérience très enrichissants.
Rédigé à plusieurs mains, ce livre passe en revue l’ensemble du référentiel de bonnes pratiques réparties en différentes catégories en fonction des éléments constitutifs d’un site (formulaires, contenus, contacts, hyperliens, identification, navigation, tableaux…), du type (commerce en ligne, sites publics…), ou du support (terminaux mobiles, newsletter, Open Data…). Le livre aborde également des sujets de fond comme les modèles de qualité web, dont le VPTCS (Visibilité, Perception, Technique, Contenu, Services), l’intégration des référentiels de qualité à vos cahiers des charges, les outils pour vous simplifier la tâche (extensions de navigateurs).
Une lecture également très enrichissante que je compléterais avec les réflexions suivantes (fournies par Élie Sloïm lors d’une discussion récente) :
Et comme à chaque fois, je salue le formidable travail effectué sur le référentiel Oquast. Rappelons à ce sujet que le référentiel est un projet collaboratif qui évolue régulièrement. Si vous êtes motivés, je lance donc un appel à contribution pour ouvrir deux nouvelles listes représentatives de ce qu’est l’internet en 2013 :
La mobilité, avec les meilleures pratiques pour les smartphones, tablettes et feature phones ;
Les médias sociaux avec les meilleures pratiques pour vos profils et publications ainsi que leur intégration sur votre site.
L’idée de cet appel à contribution est de faire grossir les rangs des contributeurs au référentiel et d’aider la communauté à progresser sur ces thématiques qui méritent une approche structurée. Mais j’aurais l’occasion de vous en reparler.
Voilà un petit moment que je parle de conception d’interfaces mobiles. S’il existe largement assez de documentation sur l’utilisabilité des smartphones (Pour bien démarrer dans la conception d’interfaces mobiles), le cas des tablettes commence à devenir problématique. Si Apple a révolutionné le monde de la mobilité avec l’iPhone et son interface tactile, force est de constater qu’ils se sont contentés du minimum avec la sortie de l’iPad (puisque c’est le même système d’exploitation). Du côté de Google, c’est le même son de cloche avec un Android proposé pour smartphones et tablettes. Le problème est que les smartphones sont maintenant de plus en plus grands (>4,5 pouces) et des tablettes de plus en plus petites (7 pouces pour le Nexus et le Kindle Fire). Il en résulte des interfaces pas forcément adaptées à la taille de l’écran. Jusqu’à présent ceci était géré par l’intermédiaire de versions HD des applications (généralement vendues plus cher, allez savoir pourquoi…), mais cette rustine a des limites.
J’ai déjà abordé le sujet de la conception multi-écran en 2010 et 2011, mais le débat risque de prendre une autre tournure avec l’arrivée de l’iPad Mini. S’il n’est pour le moment pas du tout prévu de scinder iOS en fonction du support (l’interface reste parfaitement homogène sur iPhone ou iPad), des différences commencent à émerger sur Android où les équipes de Google ont la bonne idée d’encourager les développeurs à concevoir des interfaces spécifiques pour tablettes : Google Wants Developers To Build Better Tablet Apps.
Ils viennent ainsi de publier une liste des points à surveiller pour exploiter les points forts des tablettes : Tablet App Quality Checklist. Plusieurs points de vigilance sont ainsi passés en revue avant de lancer une application dédiée aux tablettes :
Tester la conformité de l’application avec les Core App Quality Guidelines (une sorte de charte de qualité) ;
Optimiser la mise en page pour éviter l’étirement disgracieux de l’interface ;
Mise en page optimisée pour les tablettes
Retravailler l’agencement des blocs pour bien exploiter la surface d’affichage ;
Exemples de réagencement d’interfaces
Utilisation d’icônes, de polices de caractères et de widgets adaptés aux grands écrans des tablettes ;
Ne pas rendre obligatoire l’utilisation de matériel non disponible sur certaines tablettes (ex : puce GPS ou APN dorsal) ;
Déclarer la compatibilité de l’application avec tel ou tel format (ex : 7″, 9″, 11″…).
Je ne peux qu’approuver cette démarche : les tablettes proposent en effet une surface d’affichage, des modalités d’interaction et des capacités matérielles bien différentes des smartphones. Pire : il existe des différences importantes au sein même du créneau des tablettes avec des produits haut de gamme comme l’iPad 3 et des tablettes chinoises à 100$.
La question que cette initiative soulève est maintenant la suivante : puisqu’ils sont si prompts à donner des conseils aux autres, pourquoi ne montrent-ils pas l’exemple ? La place de marché Google Play n’est ainsi pas très explicite quant à la destination des applications. Autant sur l’App Store il y a un distinguo entre iPhone et iPad, autant sur Google Play ils pourraient appliquer un filtre en fonction de la machine associée à l’utilisateur. Certes, il y a bien une mention “cette application est compatible avec votre xxx”, mais c’est un peu léger.
Attendons de voir ce qu’Apple va annoncer ce soir, notamment une nouvelle version majeure d’iTunes, mais selon moi il est indispensable d’envisager une scission plus marquée au niveau du système d’exploitation : un même Os, mais des interfaces et applications adaptées aux machines : 4″, 5″, 7″, 9″…
Il y a quelque temps, je vous parlais de ces sites où le haut et le pied de page vous suivent. Si je croise de plus en plus de pieds de page flottants, par exemple sur le site de American Eagle, les header flottants sont beaucoup plus rares à trouver. Pourtant l’idée est bonne, car cela permet de conserver le contexte quand l’utilisateur descend vers le bas de la page. Cette technique est particulièrement intéressante si le site affiche de pages très longues : lorsque l’internaute arrive en bas de page, il a été exposé à tellement d’unités d’information différentes qu’il a oublié le sujet principal de la page, c’est ce que j’appelle le “contexte”.
Premier exemple avec l’édition suisse de 20Minutes où une version miniaturisée du menu de navigation vient s’ancrer en haut de page dès que vous avez descendu l’équivalent de deux écrans :
Le header flottant de 20Minutes.ch
Ce menu intègre également un moteur de recherche, un bouton de retour en haut de page, ainsi qu’un bouton pour le faire disparaitre. Si ce header flottant est parfaitement bien exécuté sur le plan technique, je me demande s’il apporte vraiment quelque chose d’un point de vue purement ergonomique, à savoir s’il permet de resituer le contexte. Idéalement, le titre de l’article devrait être rappelé dans ce header flottant.
Deuxième exemple avec Tripadvisor où un header flottant est affiché sur les pages des hôtels pour vérifier la disponibilité :
Le header flottant de TripAdvisor
Le fait de n’afficher que le moteur de réservation est ici bien plus intéressant, car il correspond à la façon dont les internautes utilisent le site : ils sélectionnent un hôtel en fonction de son score, regardent quelques photos et vont parcourir les avis avant de prendre leur décision et de passer à l’acte. C’est pour faciliter cette dernière étape et transformer les clients au moment où ils prennent leur décision (juste après avoir lu quelques avis) que ce header flottant prend tout son intérêt. Idéalement, j’y aurais ajouté un bouton pour revenir en haut de page ainsi que pour lancer une nouvelle recherche.
Voici donc deux exemples particulièrement instructifs, car ils illustrent bien l’intérêt des headers flottants, surtout lorsqu’ils respectent les modalités d’utilisation. Bon par contre, l’utilisation combinée d’un header ET d’un footer flottant réduit la surface d’affichage, ce qui ne pose pas de problème sur un ordinateur de bureau, mais peut être très pénalisant sur une tablette. Sauf en mode portrait, mais cela fera sûrement l’objet d’un prochain article…
En ce moment, je lis énormément de choses sur la “révolution du HTML5″ et la façon dont le HTML4 est supplanté par cette nouvelle itération pensée pour les applications en ligne. Je ne sais pas trop d’où sort cet adage que l’HTML5 est LE langage des applications en ligne, toujours est-il que je ressens comme une ambigüité persistante à ce niveau.
Pour schématiser, un site est un ensemble de pages qui forme un tout cohérent (comme un magazine). Une application est un outil offrant de fonctionnalités. Selon cette définition, dire que HTML5 est le langage des applications en ligne et qu’à l’avenir tout sera application est un non-sens. Je vois plutôt HTML comme un langage versatile permettant de faire tout un tas de choses, plutôt que de réduire ça à la notion d’application. Pour mémoire, le W3C a essayé pendant des années d’imposer XHTML2 et de faire accepter l’idée que toutes les pages sont des applications, nous savons tous comment cela s’est terminé. Pour être certain qu’il n’y ai pas d’ambigüité, je précise que HTML5 n’est pas remplaçant de XHTML2.
Mais revenons à nos moutons : les applications en ligne sont donc des outils offrant des fonctionnalités aux internautes. Dans la cadre d’une application de gestion de projet ou d’édition de document, tout est limpide. Mais si cette fameuse fonctionnalité est d’afficher du contenu, tout se complique. Pourquoi donc un éditeur de sites voudrait utiliser une application pour afficher du contenu ? Tout simplement pour améliorer l’expérience utilisateur. Deux des sites les plus populaires au monde sont ainsi des applications en ligne permettant d’accéder à des contenus : Facebook et Twitter.
L’interface de Twitter
En fait, tout a commencé avec Gmail qui a été le premier site avec une très large audience à utiliser Ajax pour faire des rafraichissements silencieux des pages. Cette technologie n’est plus toute jeune (elle existait déjà au siècle dernier), mais très peu de sites l’utilisent dans le cadre de contenus textuels. Cette réflexion est initialement venue d’une discussion très intéressante que j’ai eue avec Alexandre Malsch, le fondateur de Melty.fr. Pour celles et ceux qui ne connaissent pas, il s’agit d’un des portails les plus populaires auprès des jeunes.
L’interface de Melty
Si vous visiter Melty.fr, vous aurez une expérience de visite assez similaire à n’importe quel portail, pourtant lorsque que vous arriverez sur le site pour la première fois, c’est le moteur d’affichage qui sera téléchargé en premier, car c’est lui qui gère l’affichage des contenus ainsi que les interactions. Ce moteur, développé en javascript, se positionne ainsi entre le navigateur et l’utilisateur et va intercepter les clics et défilements de la souris pour les interpréter à sa façon et proposer une navigation avec des rafraichissements silencieux qui évitent de recharger à chaque clic des éléments qui ne changent pas.
Les bénéfices de ce moteur d’affichage sont les suivants :
des temps de chargement plus courts ;
plus de faciliter dans les fonctions de partage ;
un meilleur contrôle de l’expérience de lecture ;
une analyse beaucoup plus fine des parcours et interactions des utilisateurs.
Dans l’absolu, maintenant qu’ils disposent d’une application de lecture pour les ordinateurs, ils peuvent proposer une expérience de lecture très cohérente sur les autres terminaux en proposant des moteurs optimisés pour les tablettes, les smartphones, les TV connectées… Une hypothèse tout à fait intéressante au vu du phénomène de fragmentation des terminaux mobiles, et surtout une réponse tout à fait viable aux problèmes de connexion et de stockage des contenus hors-ligne.
Les premiers utilisateurs de PDAs seraient alors tentés de me faire remarquer que ce n’est ni plus ni moins qu’une reformulation des lecteurs de news du siècle dernier comme AvantGo. Certes, il y a un peu de ça, mais je préfère plutôt saluer la volonté des équipes de Melty de proposer une expérience de lecture maitrisée de bout en bout sans avoir à se reposer sur des applications comme Instapaper ou Pocket.
Je vous rassure : moi aussi j’ai été très perturbé à l’idée d’utiliser un moteur d’affichage pour remplacer celui du navigateur, car c’est toute ça raison d’être ! Toujours est-il que ce site apporte des solutions là où d’autres sont dans une impasse (expérience de lecture maitrisée quel que soit le terminal, gestion des contenus hors ligne, analyse détaillée…). Je serais bien incapable de vous dire si au final cette solution est mieux que de se reposer sur le moteur de rendu natif des navigateurs, car “mieux” est une notion subjective. La discussion reste donc entièrement ouverte…
Concevoir un site web n’est pas une tâche facile, c’est un chantier complexe qui mobilise de nombreuses ressources dans des domaines d’expertise très variés. Traditionnellement associée à l’utilisabilité, l’expérience utilisateur a toujours été considérée comme une notion vague, du genre : “Il faut améliorer l’expérience utilisateur“. Soit, mais à partir de quand l’expérience est-elle bonne ? Quels sont les leviers permettant de l’améliorer ? Autant de questions que la communauté se posait déjà au siècle dernier (littéralement). Pourtant, nous arrivons à décrire de façon précise la différence entre utilisabilité et expérience utilisateur.
Toujours est-il que la responsabilité de l’expérience utilisateur n’est toujours pas clairement définie. N’était pas clairement définie, car la Usability Professionals Association prend les choses en main et change de nom : Hello UXPA, Bye bye UPA. L’UPA a donc été rebaptisée en UXPA, pour User Experience Professionals Association. Le but de la manoeuvre est de redéfinir les contours de l’association et plus généralement d’élargir le périmètre d’intervention de ses membres.
Ne vous y trompez pas, il n’est pas ici question de l’association des diplômés en ergonomie (une discipline scientifique enseignée dans les universités françaises), mais de l’association internationale des professionnels de l’expérience utilisateur. Ce changement de nom reflète bien l’évolution des missions et des responsabilités qui sont confiées aux concepteurs (dans le sens large du terme) : Why Change Name to UXPA?.
Cette annonce tombe à pic, car cela fait un petit bout de temps que je souhaitais m’exprimer sur l’importance de l’expérience utilisateur et de la façon dont elle peut être améliorée et formalisée. Il existe ainsi des méthodes et modèles pour auditer et représenter l’expérience utilisateur d’un service ou d’une marque : The Anatomy of an Experience Map. Le but de la manoeuvre est de modéliser de façon précise les différentes interactions entre un client et une marque au travers des différents stades qu’il va traverser avant, pendant et après sont achat.
Exemple de cartographie de l’expérience utilisateur
Cette cartographie permet d’avoir une vision d’ensemble de l’expérience des utilisateurs et d’identifier des points d’achoppement, des recoupements, des zones d’amélioration… Cette cartographie peut avoir différents noms : Experience Map, UX Map, Customer Journey Map, UX Journey Map… mais nous parlons bien toujours du même livrable, qui concerne un produit, une marque ou un secteur.
Exemple de cartographie de l’expérience utilisateur d’un acheteur de voiture
Se lancer directement dans la refonte ergonomique d’un site est une tactique intéressante à court terme, surtout pour identifier et implémenter des quick wins. Mais si vous souhaitez voir les choses en grand, il faut initier une réflexion plus globale qui prend en compte l’ADN de la marque dans un contexte d’achat élargi. Cette vision holistique va vous permettre de prendre du recul et d’améliorer l’expérience d’achat et de possession, pas uniquement les interfaces (boutique, site web, application mobile…).
La conception de l’expérience utilisateur intervient donc à un niveau stratégique, alors que l’interface d’un site et/ou son amélioration ergonomique intervient à un niveau tactique, voir opérationnel : Méthodologie du design d’expérience… on récapitule et on comprend tout. Cela ne veut pas dire que l’une est meilleure que l’autre, simplement que de nombreux choix de conception pourraient être facilités / harmonisés avec un travail rigoureux de modélisation de l’expérience utilisateur.
Tout ceci peut vous paraître un peu vaporeux, mais je peux vous assurer que, pour l’avoir testé chez mes clients, la Customer Journey Map est un outil de travail très puissant. Charge à vous de trouver la méthode et le format avec lequel vous vous sentez le plus à l’aise.
Le domaine de l’automobile est une authentique mine d’or en matière de web design. Et pour cause : des budgets colossaux, des cycles de vente très longs et une pression concurrentielle terrifiante. Bref, tous les ingrédients sont réunis pour stimuler la créativité et la performance des sites. Si vous me lisez depuis plusieurs années, vous avez déjà dû lire d’autres articles parlant des sites des constructeurs automobiles.
Bref, tout ça pour dire que je ne suis pas très fier de la production nationale. Ayant travaillé pour les trois grands constructeurs français, je me sens parfaitement libre de critiquer leurs sites. Et force est de constater qu’il y a encore beaucoup de progrès à faire. Certes, l’automobile est le fleuron de l’industrie française. Certes, les constructeurs français brillent dans les plus grandes compétitions (F1, rally…), mais est-ce une raison pour maltraiter les internautes ?
Je ne me lancerais pas dans une analyse détaillée de l’ensemble des trois sites des constructeurs, car vous êtes assez grands pour vous faire une idée par vous-même. Par contre, je souhaiterais attirer votre attention sur un point en particulier : le référencement. Je ne connais pas grand-chose en ce domaine, mais je constate néanmoins que même si les premières places sont effectivement occupées par les sites et pages officiels, ça reste tout de même très brouillon.
Commençons avec Citroën où une requête sur un modèle nous remonte trois résultats :
La page de résultats pour Citroën DS3
Trois pages avec trois URL différentes. Le site officiel est en première position, mais j’imagine que les internautes sont beaucoup plus intéressés par les tarifs de ce modèle, un lien en troisième position qui mène… aux promotions ! Vous noterez également le texte incompréhensible et en majuscule qui remonte sous le deuxième lien.
Ça n’est pas forcément mieux chez Renault où une recherche sur la Clio nous remonte quatre résultats :
La page de résultats de recherche pour Renault Clio
J’imagine que les équipes web de Renault ont toutes les excuses du monde pour justifier ce cafouillage (les quatre liens mènent à quatre pages différentes correspondant à quatre versions du modèle). Il n’empêche qu’à vouloir saturer la première page de résultats de liens officiels, il n’y a plus de place pour les photos.
Pourtant les bons exemples ne manquent pas. Une recherche la Volvo C60 ne remonte qu’un seul résultat :
La page de résultat pour Vovlo c60
Vous apprécierez le fait que les référenceurs de Volvo ont avant tout privilégié la clarté : Une seule page en tête de liste avec un descriptif court, mais précis, et des liens d’accès direct parfaitement compréhensibles (“5 choses à savoir“, “Offres du moment“, “Liste des prix“…). Du coup, il reste de la place pour les images, pour présenter un modèle alternatif, ainsi que la page institutionnelle du constructeur. Simple et efficace.
Moralité : l’utilisabilité n’est pas qu’une question de taille de boutons ou de contraste. L’expérience des utilisateurs commence en amont de votre site, dès la page de résultats de Google.
…
…
…
Et puisque l’on parle des constructeurs automobiles français, j’aimerais pointer du doigt (une fois n’est pas coutume), des choix de conception sur le site de Renault qui me font hurler. À commencer par la page d’orientation qui s’affiche en amont de la page d’accueil (ils appellent ça la “Jump page“) :
La jump page de Renault.fr
Très honnêtement je n’ai jamais vraiment compris l’intérêt de cette page. Pourquoi accueillir les visiteurs avec un slogan en anglais alors que c’est une marque française et que l’on a saisi une URL qui se termine par un .fr ? Pourquoi couper le véhicule en deux ? Pourquoi mettre les liens à deux endroits opposés dans la page (à gauche et en haut à droite) ?
Vient ensuite la page d’accueil qui me laisse perplexe :
La page d’accueil de Renault.fr
Là encore, je ne vois pas l’intérêt de faire du teasing pour un modèle sans préciser lequel (“Découvrez-la“… la quoi ?), d’autant plus que le carrousel est bloqué à la première étape. Je ne comprends pas non plus pourquoi il y a un retour à la ligne du slogan alors qu’il y a un immense espace vide à droite (“Changeons de vise, changeons l’automobile“). Enfin je ne vois pas l’intérêt de tasser la page sur une petite surface, au risque de nuire à la lisibilité et d’augmenter de façon très dangereuse la densité de liens. Vous pourriez éventuellement vous dire que c’est une page optimisée pour les tablettes… mais en fait, non.
C’est peut-être sur la page du modèle en lui-même que l’on retrouve les choix les plus intéressants :
La page d’un modèle sur Renault.fr
J’apprécie particulièrement le fait qu’ils ont masqué la navigation principale (cela faisait partie de mes recommandations quand j’avais travaillé pour Renault en 2007) et qu’ils ont laissé un maximum d’espace vierge pour concentrer l’attention sur le modèle.
Ceci étant dit, il n’y a quand même pas grand-chose sur cette page qui ressemble plus au portfolio d’un designeur qu’à un constructeur automobile luttant pour sa survie. De ce point de vue là, les sites US sont beaucoup plus… entreprenants, à l’image de celui de Ford :
La page de la Fusion sur le site de Ford
Certes, l’information y est plus dense et les liens de navigation interne ne sont pas très visibles (coincés entre la barre de navigation principale et le titre), mais il y a beaucoup plus d’éléments incitatifs sur cette page. En clair : elle donne envie de cliquer.
Je referme cette parenthèse, car je n’ai pas le courage de me lancer dans une analyse complète, mais souvenez-vous de l’importance de la page de résultats de Google et de la première impression que vous donnez à vos prospects ou clients.
Vous ne vous en êtes sans doute pas rendu compte, mais une terrible bataille se livre en ce moment dans votre poche. Je fais référence à l’implacable compétition entre les éditeurs d’applications météo pour smartphone. Ça n’a l’air de rien, après tout il existe une application qui le fait gratuitement et qui est pré-installée, mais les gros et petits éditeurs rivalisent d’ingéniosité pour faire ressortir leur application du lot. Je vous propose donc une petite sélection, très instructive, des tendances en la matière.
Commençons tout d’abord avec les acteurs légitimes du secteur comme Météo France ou The Weather Channel qui tentent de faire des efforts, mais ont bien du mal à proposer quelque chose de convaincant :
Les applications météo mobiles des acteurs légitimes
Comme vous pouvez le constater, ces applications ne sont pas très belles, mais elles essayent de compenser cette faiblesse par des données plus complètes. Le problème est que ces données sont moins complètes que d’autres applications “pro” ou “semi-pro” comme My-Cast ou Weather Underground :
Exemples d’applications météo semi-pro
Là encore, ces applications sont très riches en données météorologiques, mais ne sont pas très agréables à regarder et utiliser. Pourtant, il existe des références en la matière comme la très belle application de l’institut météorologique finlandais (The Finnish Meteorological Institute’s Weather) :
Très belle application mobile de l’Institut de météorologie de Finlande
Dans un style encore plus minimaliste, mais haut en couleur, la marque de fringues japonaise Uniqlo propose une application surprenante qui vous réveille avec une musique adaptée au temps :
L’application mobile de Uniqlo
Pour chercher des choses plus intéressantes, il faut définitivement aller du côté des éditeurs indépendants. Et puisque nous sommes dans le registre du minimalisme, admirez le travail de l’application WTHR qui propose une interface d’une simplicité et d’une élégance remarquable :
L’interface de l’application WTHR pour iPhone
Il y a également des applications remarquables qui jouent sur les animations et les effets de transition comme le superbe eWeather HD avec ces incroyables interfaces de prévisions (forecast en anglais) :
La palme revient très certainement à Weatherwise qui propose une sublime application avec de magnifiques visuels animés en fonction des conditions (soleil, pluie…), de l’heure (jour, nuit) ou du vent (les éléments suspendus se balancent) :
L’application mobile Weatherwise
Au final, que faut-il retenir de ces différentes applications ? Que ceux qui disposent des données les plus complètes / précises ne sont pas forcément capables de proposer des applications utiles et agréables. Par contre, je constate que les applications proposant la meilleure expérience sont proposées par des éditeurs de jeux mobiles. Comme quoi, les dimensions ludiques et artistiques ne peuvent être maitrisées que par ceux qui les pratiquent de longue date.
Pour celles et ceux qui ne le savent pas, l’ergonomie est une discipline sérieuse, elle ne peut (en théorie) être pratiquée que par des professionnels diplômés et aptes à perpétuer la tradition de rigueur scientifique. Mieux : l’ergonomie est une science, elle se fonde sur des publications de référence, par exemple les critères ergonomiques de Scapin et Bastien (guidage, charge de travail, contrôle explicite, adaptabilité, gestion des erreurs, homogénéité et cohérence, signifiance des codes et dénominations…).
OK très bien… mais cette rigueur scientifique ne doit pas vous faire oublier que les sujets de test sont des êtres humains : imprévisibles, faillibles et dont le comportement est dicté par des émotions. Il serait donc fort dommage de ne pas prendre en compte cette dimension émotionnelle et de ne pas essayer de séduire les utilisateurs avec des petites attentions. D’ailleurs, le proverbe dit : “Le diable est dans les détails“.
Ainsi, lorsque vous videz votre boite de réception dans Gmail, l’interface affiche le message suivant : “Si vous cherchez des choses à lire, allez donc sur Google News“. Non seulement cela permet de briser la monotonie d’une liste vide, mais c’est également une petite attention envers les utilisateurs, une sorte de clin d’oeil qui ne mange pas de pain.
Dans cette optique, l’excellent blog Little Big Details nous propose une sélection de petits détails que l’on ne trouve pas dans les manuels d’ergonomie, mais qui font le bonheur des utilisateurs qui les remarquent :
Le panier d’Amazon n’affiche le lien “Remove” que quand la quantité est fixée à 0 ;
Le panier d’Amazon
Le bouton d’achat de Coda est animé pour indiquer la progression du traitement de la commande ;
Le bouton de commande de Coda
Etsy vous demande “Talking to yourself again” si vous essayez de vous envoyer un message ;
Le rappel de Etsy
L’heure locale est affichée sur la page de contact de Harvest ;
Les horaires de Harvest
Il est possible de mettre un 11/10 au film Spinal Tap sur IMDB ;
La notation de Spinal Tap sur IMDB
Des touches “fantômes” sont accessibles sur le clavier virtuel de l’iPad ;
Les touches fantômes du clavier virtuel de l’iPad
La planisphère de l’horloge de Mac OS X suit la saison ;
Les saisons représentées sur la planisphère de Mac OS X
L’émoticône par défaut de Skype fait la tronche si vous choisissez d’écrire en Comic Sans ;
Les émoticônes de Skype
Le message change de “29 years old” à “30 years young” dans le formulaire de création de compte de Tumblr ;
Le formulaire de création de Tumblr
L’intitulé du bouton par refuser la nouvelle version de Vimeo est “I hate change“.
Le message de basculement à l’ancienne version de Vimeo
Nous sommes bien d’accord que ces petits détails ne sont visibles que par une minuscule minorité d’utilisateurs, ils n’ont quasiment aucun impact sur le C.A. ou la rentabilité de ces sociétés, mais ils participent activement à construire l’identité d’une marque. C’est ce genre de petits détails qui prouvent que derrière un service en ligne, il y a des êtres humains qui ont également une sensibilité.
Pendant ses dix premières années, le web a su séduire le grand public avec uniquement du texte et des images. Puis vint l’avènement de la vidéo avec YouTube. Puis vient la révolution des terminaux mobiles avec l’iPhone et l’iPad. Nous sommes maintenant en 2012 et plus personne ne veut lire à l’écran : trop fatigant, trop long, trop… ringard. Les articles et contenus sont maintenant mis de côté pour être lus sur un smartphone ou une tablette, ils sont synthétisés sous forme d’infographie ou sont tout simplement ignorés (on se contente de les tweeter si le titre est accrocheur ou des les épingler s’ils contiennent une photo sympa). Une réalité bien triste… Face à cette bien triste réalité, les navigateurs s’organisent en proposant un mode de lecture comme Safari ou des extensions comme Clearly ou Readability, mais je ne peux m’empêcher de penser que ce ne sont que des caches-misère.
Heureusement, certains éditeurs de site relèvent le défi en proposant une expérience de lecture à l’écran beaucoup plus agréable. Cette expérience est conditionnée par plusieurs choses :
La mise en page (lignes pas trop larges, photos et vidéos bien intégrées, pas d’éléments parasitant l’attention) ;
La densité d’information (avec un interlignage optimisé et des paragraphes pas trop longs) ;
La typographie utilisée pour le texte, les titres et intertitres…
Je précise au passage que tout ceci est maintenant grandement facilité avec les navigateurs récents qui savent correctement afficher les CSS3 qui autorisent des choses tout à fait intéressantes : Vers une scénarisation des contenus textuels.
De mémoire, le premier éditeur à avoir fait volontairement un gros effort est Google avec son Think Quaterly :
La mise en page impeccable du Think Quarterly de Google
Vous pourriez me dire que dans ce contexte précis les choses sont plus simples, car c’est un site dédié. Soit, mais laissez-moi alors vous parler de l’admiration que j’ai pour The Verge, un blog de gadgets qui propose les plus belles pages d’article que j’ai pu voir en 12 ans de carrière :
Les superbes pages article de The Verge
Le travail de composition et de mise en page sur ce site (pourtant à très gros tirage) est tout simplement splendide.
Toujours dans cette lignée, je vous engage vivement à explorer le très impressionnant Ridebook de Harley-Davidson :
Le carnet de route de Harley Davidson
Là encore, la mise en page a été particulièrement soignée pour intégrer de façon élégante les différentes photos et la vidéo. Un travail pas si compliqué si l’on utilise le bon outil (le tout étant d’exploiter un outil de gestion de contenu avec un mécanisme de gabarits de page suffisamment souple).
Sans partir dans des expérimentations techniques trop proches de ce que l’on trouve sur les tablettes (à l’image du Experimental Page Layout de Tympanus), je suis convaincu qu’il serait tout à fait possible d’appliquer les mêmes formules pour un site institutionnel ou même pour des pages produit.
Bon par contre tous les exemples cités utilisent du texte aligné à gauche, alors que je suis un grand défenseur du texte justifié. Mais ce n’est qu’une question de goût (et sûrement parce que j’ai un côté psychorigide). Et vous, quel alignement préférez-vous ?
Souvenez-vous, il y quelques années je me réjouissais de la simplification de la procédure d’identification avec Open ID : La création de compte simplifiée avec OpenID. Depuis, les choses ont bien changé avec l’avènement des réseaux sociaux et leurs mécanismes de social login. Je veux bien croire que le fait de s’appuyer sur les profils des internautes permet de gagner du temps et d’augmenter le taux de conversion, mais de là à ne proposer que cette option comme Klout, c’est extrêmement gênant.
L'écran d'identification de Klout
Ce type de mécanisme d’identification fonctionne bien pour ceux qui ont un compte Facebook ou un profil Twitter, mais pour ceux qui en ont plusieurs, cela engendre des conflits insolubles (j’ai dû avoir recours au support technique pour me dépatouiller de ce bazar). Il n’est pourtant pas très compliqué de proposer deux systèmes d’identification : délégué (avec Facebook ou Twitter) et internalisé. C’est ce que proposent des services comme Spotify ou Storenvy, et ça fonctionne très bien. De plus, ce double système permet de rendre l’éditeur du service moins dépendant des réseaux sociaux qui fournissent le profil (Astuce : Utiliser Facebook Connect pour de la pré-inscription).
L'écran d'identification de Storenvy
Sinon dans le même genre il y a aussi Asana qui restreint le choix à Google Account et le met en première position :
L'écran d'identification d'Asana
On trouve aussi la même chose chez Pinterest avec un formulaire minimaliste, mais soigné :
L'écran d'identification de Pinterest
Vous remarquerez que dans les deux cas, une fine ligne de séparation permet de faire comprendre que le bouton “Login” n’est à utiliser que si l’on rentre un nom d’utilisateur et un mot de passe.
De tous les écrans d’identification que j’ai pu croiser, je pense que la palme revient à 500px avec un formulaire très bien proportionné, explicite (“No account yet?“, “Can’t access your account?“) et surtout qui lève toute ambiguïté concernant l’utilisation de l’une ou l’autre technique (“or login using your username or email“) :
L'écran d'identification de 500px
Une authentique référence en matière de simplicité, de guidage et de pédagogie. Dans un registre plus formel, nous avons aussi le formulaire de Forbes, propulsé par le widget de social login de Gigya :
L'écran d'identification de Forbes
Ce formulaire est d’une efficacité redoutable, propose une panoplie complète de mode d’identification, mais véhicule une sensation glaciale (froid et rigide). Bref, comme vous avez pu le voir au travers de ces différents exemples, il y a des choses à faire et des choses à éviter. Notez que je ne me suis concentré que sur les intitulés et la mise en page, mais il existe d’autres leviers d’améliorations : Innovative Techniques To Simplify Sign-Ups and Log-Ins.
Comme toujours, si vous avez de bons exemples, merci de les mentionner dans les commentaires.
