L’année dernière je constatais un regain d’intérêt des éditeurs de site pour proposer de nouvelles expériences d’achat et de consultation. Pourquoi chercher à réinventer la roue alors que le commerce en ligne tourne à plein régime ? Justement parce qu’il tourne à plein d-régime et que la compétition n’a jamais été aussi forte (marges ridiculement basse, livraison gratuite, satisfait ou remboursé pendant un an…). Pour se démarquer, il ne reste plus beaucoup de leviers à activer : les prix sont déjà au plus bas, les performances au plus haut et les interfaces simplifiées à l’extrême. La seule solution pour sortir du lot consiste alors à proposer une expérience différenciante.

Prenez par exemple le secteur du tourisme :

• Google préempte le bas du marché avec deux interfaces de recherche verticales ultra-optimisées (Flights et Hotel Finder) ;

  

• Hipmunk s’est imposé comme La référence en matière d’interface de recherche sur le web et sur terminaux mobiles (Hipmunk, la nouvelle référence de la recherche de vol et Hipmunk Launches Hotel Search For iOS And Android) ;

  

• Kayak a même récemment lancé une application marchandesur le Mac App Store.

  

Face à une telle débauche de créativité, plusieurs chaines hôtelières (Hilton, Hyatt, InterContinental, Marriott et Wyndham) se sont fédérées pour proposer leur propre moteur de recherche : Big Chains Launch “Hulu For Hotels”. Pourquoi cette comparaison avec Hulu ? Car Hulu est LA référence en matière d’expérience utilisateur, surtout face à des concurrents très puissants (Vidéo en ligne, Hulu vainqueur par K.O.).

Bref, ces chaines hôtelières ne pouvant pas se battre sur l’argument du prix ou de la simplicité d’usage ont tout misé sur la qualité de l’expérience utilisateur avec Roomkey. Le moins que l’on puisse dire, c’est que le résultat est à la hauteur de la concurrence avec une interface de recherche tout simplement splendide.

La magie commence dès la page d’accueil avec des couleurs et visuels très chaleureux :

Une fois les critères saisis, le bandeau de recherche remonte en douceur et la liste de résultat s’affiche dans une parfaite transition :

Tout a été soigné dans le moindre détail sur cette liste : le choix des typos, l’arrondi des cartouches, les pictos et éléments d’interface… Le résultat est un mélange de simplicité, de sobriété et de raffinement, un modèle du genre !

Le basculement d’un mode d’affichage à un autre se fait avec une très belle transition. Cerise sur le gâteau : lorsque vous descendez vers le base de la page,  la carte reste verrouillée en haut de l’écran pour que vous puissiez localiser les hôtels du bas de la liste.

De mémoire, j’ai rarement vu une aussi belle interface. Autant vous dire que je suis plus qu’enthousiaste à l’idée d’une lutte entre les concurrents sur le terrain de l’expérience utilisateur. J’ai vraiment hâte que ce type de compétition se déporte sur d’autres secteurs comme la distribution ou la banque. Quoi que… ça a déjà commencé avec des nouveaux entrants comme SimpleBank et Yoyo.

Connaissez-vous Qwiki ? Il s’agit d’un moteur de recherche de nouvelle génération. Non pas qu’il soit plus « intelligent » que les nouveaux entrants (Le marché de la recherche relancé avec Bing et Wolfram ?) mais qu’il propose une expérience unique de restitution des résultats : Qwiki wants to be the multimedia search engine of the future. À l’origine de ce projet, il y a le fondateur d’AltaVista (le français Louis Monier, Cocorico !).

Qwiki se différencie des autres moteurs sur deux points :

• Il n’y a pas de page de résultats de recherche (grâce à un système de recherche assistée)
• Les résultats sont consultés directement dans l’interface sous forme d’un diaporama animé qui résume différentes sources et dicte le texte grâce à une synthèse vocale

Autant le dire tout de suite : l’expérience est bluffante, car le résumé est de très bonne qualité (malheureusement en anglais) et car la synthèse vocale est très agréable (diction fluide). Ici une petite vidéo de démonstration :

Avec ce mode d’interaction nous pouvons tout à fait affirmer que c’est un nouveau paradigme de la recherche d’information en ligne, Qwiki s’apparente ainsi plus à une meta-encyclopédie à la volée qu’à un moteur de recherche classique. Est-ce la fin de Google ou de Wikipedia ? Non absolument pas car l’information remontée est beaucoup plus pauvre… mais bien plus facile à consommer.

C’est donc là que réside le secret de Qwiki : offrir une expérience plus proche du divertissement que de la recherche documentaire. Donc non, Qwiki n’est absolument pas un concurrent de Google sur votre ordinateur, mais trouvera tout à fait sa place et son utilité sur des terminaux alternatifs comme les touchbooks ou les TV connectés. Nous sommes donc dans une optique assez proche de celle proposée par Youtube Leanback.

Ce moteur de recherche préfigure à mon avis une nouvelle vague de services en ligne (nouveautés ou adaptation de services existants) proposant une expérience d’utilisation radicalement différente et parfaitement adaptée aux nouveaux terminaux (Faut-il réinventer le web pour les touchbooks ?).

Voilà un petit bout de temps que trotte dans ma tête une idée folle : et si le jeu était un des ingrédients essentiels pour une expérience utilisateur réussie ? Ou plutôt : Et si la prise en compte du gameplay dans la conception d’une interface permettait d’améliorer l’expérience utilisateur ? Cette théorie est ainsi bien expliquée dans cette intervention : Nicole Lazzaro’s « The Future of UX is Play: The 4 Keys to Fun, Emotion and User Engagement ».

Il existe un certain nombre de définitions autour de la notion de gameplay mais pour simplifier nous pouvons dire qu’il s’agit à la fois de la jouabilité et du plaisir de jouer. Transposé au monde du web, le gameplay d’un site web ou d’une application en ligne serait donc maximisé par l’utilisabilité de l’interface (un pré-requis) mais également par le plaisir d’usage, lui-même conditionné par le modèle d’interaction de vos interfaces. En d’autres termes : Transformer des actions rébarbatives en mini-jeux pour augmenter le plaisir d’usage et la satisfaction.

Illustration de cette théorie avec ces deux applications iPhone qui mélange jeux vidéo et application professionnelle. Tout d’abord Epic Win, un gestionnaire de tâche façon jeux de rôles :

L’idée derrière cette application est de mettre en scène les listes de tâches avec des points d’expérience, des récompenses, des classes de personnages… Plus d’infos ici : iPhone app turns your to-do list into a game.

Deuxième exemple avec Super Twario, un client Twitter (également pour iPhone) qui reprend le gameplay da Mario :

Cette application est parfaitement fonctionnelle et permet de parcourir les flux, de publier et répondre à des tweets… Plus d’infos ici : The $2 iPhone App That Lets You Read Twitter Like You’re Playing a Mario Game.

Dans ces deux exemples, la référence au monde du jeu vidéo est explicite, mais on retrouve un procédé similaire sur des sites web qui introduisent du gameplay dans leur modèle d’interaction de façon beaucoup plus subtile comme The Sixty One. Ce site d’écoute musicale en ligne propose une expérience radicalement différente des autres services d’écoute dans la mesure où l’utilisateur ne consomme pas de la musique à la demande, mais poursuit plutôt différentes quêtes musicales qui lui permettent de gagner des points d’expérience (qu’il peut utiliser pour promouvoir des chansons / artistes) et progresser dans les niveaux (qui permettent de débloquer plus de fonctionnalités).

Oui, c’est un choix radical, mais cette approche permet à ce site de se démarquer de la concurrence avec une expérience unique où l’utilisateur n’est jamais livré à lui-même face à une interface qui ne l’inspire pas. Je vous invite vivement à vous inscrire et à tester ce service pour comprendre la puissance du dispositif et surtout le potentiel que cela représente en matière de rétention.

Le mot de la fin : Partant du principe que l’industrie du jeu vidéo est deux fois plus vieille et mature que celle du web, nous (les concepteurs de sites et services en ligne) avons tout à apprendre des pratiques de gameplay de cette industrie là.

Savez-vous combien pèse la page d’accueil de Yahoo ? Cette question n’est pas anodine car cette valeur a été pendant longtemps une unité de référence pour la vitesse de chargement des pages d’un site web. En presque 10 ans passés en agence, je ne compte plus le nombre de cahiers des charges et brief où il étai stipulé que le poids des pages du futur site du client ne devait EN AUCUN CAS dépasser la limite de 30 Ko (le poids théorique de la page d’accueil de Yahoo! dans l’inconscient collectif).

Puis il a été question de 60 Ko…

Puis ça a été l’avènement de l’ADSL, les années YouTube et maintenant plus personne ne se soucie du poids des pages. Il faut dire que les foyers français sont équipés en haut-débit à plus de 95% (ADSL + câble + fibre, si mes sources sont exactes), donc plus la peine de se soucier du temps de chargement.

Oui mais voilà : Il fut un temps où la page d’accueil de Yahoo! pesait 30 Ko, mais cette époque est loin derrière nous et je constate une inflation alarmante (euphémisme) dans le poids des pages d’accueil qui dépassent fréquemment le Mo. Ce fameux « poids » correspond à l’espace disque occupé par l’ensemble des fichiers qui composent une page d’accueil (HTML, javascript, css, flash, images…).

Je me suis amusé à comparer les pages d’accueil de certaines boutiques en ligne française, et le résultat n’est pas brillant :

• Cdiscount = 2,8 Mo
• Pixmania = 1,4 Mo
• RueDuCommerce = 1,3 Mo
• Amazon = 845 Ko
• MisterGoodDeal = 840 Ko
• PriceMinister = 570 Ko

Non vous ne rêvez pas, pour avoir le privilège d’admirer la page d’accueil de Cdiscount il vous faudra télécharger près de 220 fichiers pour un total avoisinant les 3 Mo. Hallucinant ? Oui, surtout dans un marché aussi concurrentiel. PriceMinister s’en sort très bien avec une page bien plus légère que les autres dû à une utilisation très limitée des images (contrairement à Cdiscount).

Concernant les sites d’information, c’est encore pire :

• L’Express = 3,5 Mo
• Liberation = 3,4 Mo
• 20Minutes = 2,7 Mo
• LeMonde = 2,2 Mo

Même si les mega-bannières et autres publicités au format vidéo plombent la page, n’est-il pas aberrant de ne pas trouver un site d’information sous la barre des 2 Mo ? Et ce n’est pas forcément mieux de l’autre côté de l’Atlantique :

• LA Times = 2,9 Mo
• WashingtonPost = 1,8 Mo
• Newsweek = 1,8 Mo
• NY Times = 1,55 Mo

Concernant les grands portails, la moyenne est moins élevée :

• Facebook = 2 Mo
• Free = 1,8 Mo
• MSN = 1,2 Mo
• Yahoo = 890 Ko
• Bing = 125 Ko
• Google = 125 Ko

De façon surprenante, les grands portails sont plutôt raisonnables dans leur utilisation de la bande passante. Mention spéciale à Facebook qui dépasse la barre des 2 Mo avec une ribambelle de fichiers javascript. Vous noterez au passage que les deux moteurs de recherche pèsent rigoureusement la même poids (je ne sais pas trop quoi en penser…).

Bref, cette rapide étude concurrentielle nous révèle une vérité bien dérangeante : Les pages d’accueil de sites de news sont plus lourdes que certains plug-ins dont le temps de téléchargement est soit-disant rédhibitoire. Même si nos liaisons ADSL sont très performantes, les tuyaux ont des limites et le nombre de fichiers à télécharger nous éloigne toujours plus de la limite symbolique des 2 secondes pour charger une page d’accueil (le temps d’attente est directement lié à l’expérience utilisateur).

Tout ceci est très dérangeant, surtout à partir du moment où Google annonce qu’il va prendre en compte le temps de chargement des pages dans son algorithme. Oups, c’est justement ceux qui ont le plus besoin d’un bon référencement (commerce en linge, news…) qui vont se faire dégrader. Je ne peux que me réjouir de cette annonce car cette escalade dans le poids des pages d’accueil n’augure rien de bon et surtout rend les éditeurs fainéants.

Pourtant il existe de nombreuses façons d’optimiser le poids des pages en limitant le nombre d’images, en optimisant les fichiers HTML et javascript… J’imagine que l’arrivée à maturation des terminaux de consultation alternatifs (smartphones, touchbooks…) va inciter les éditeurs à se remettre en question.

Une des règles de base de l’utilisabilité est de toujours veiller à ne pas surcharger un écran, ou plutôt de s’efforcer de supprimer tout ce qui n’est pas indispensable et qui peut distraire l’attention. Noble cause, mais qui peut parfois se révéler être une vrai profession de foie.

Illustration avec cette page d’accueil expérimentale pour Google :

Donc comme vous pouvez le constater, sur cette page il n’y a plus rien si ce n’est le logo et le champ de saisie, même pas un bouton pour lancer la recherche : Google’s Experimental Homepage Fades To A Single Word. L’astuce est de ne faire apparaitre le reste qu’après quelques secondes pour être sûr de bien concentrer l’attention sur l’élément le plus important : le champ.

Plutôt extrême comme expérimentation, d’autant plus que la page d’accueil de Google n’était pas la plus chargée. L’expérimentation se poursuit visiblement avec des variantes comme par exemple une version où est mentionnée la phrase « This space intentionally left blank » : Google Tests a Clutter-Free Homepage.

Dans le même genre il y a aussi Goosh, une interface textuelle façon Unix :

Un bel exemple d’épuration graphique qui va plus loin que YubNub mais qui aurait gagné à être encore plus épuré.

Toujours dans la série interfaces façon lignes de commande, je vous propose WriteRoom, un traitement de texte au look & fell très « roots«  :

La particularité de ce logiciel est de proposer un mode plein écran qui isole complètement l’utilisateur du système et donc de ses distractions potentielles. Bon par contre c’est un peu austère…

Terminons avec le remarquable Ommwriter, un traitement de texte qui propose la même approche mais nettement plus raffinée avec un fond d’écran très reposant et différentes ambiances sonores :

Le sentiment d’immersion est tout à fait remarquable et les fonctions ne sont jamais très loin puisqu’en bougeant la souris vous faite apparaitre une série d’icônes :

Autant je suis très sceptique vis à vis de WriteRoom, autant l’expérience utilisateur de ce Ommwriter est tout à fait convaincante car extrêmement aboutie : Ommwriter, écrire en toute sérénité. Notez qu’il existe des applications spécialement dédiées pour isoler l’application ouverte comme Think ou Backdrop.

Plein de bonnes idées / intentions… mais qu’il n’est pas forcément bon d’utiliser pour un site web. Je fais notamment référence à ces insupportables sites qui s’ouvrent dans une pop-up qui force l’affichage en plein écran, une horreur pour ceux qui utilisent des écrans à grandes résolution (HD ou Full HD). Bref, jusqu’où peut-on aller dans la recherche de l’épuration ? (d’où le titre du billet)

MàJ (30/11/2009) > Voici une méthode pour tester une autre version de la page de recherche de Google : Check the Redesigned Google (With Always-Visible Sidebar) Yourself.

Vous noterez le travail fait sur les boutons et les liens en bas de page.

Aviez-vous remarqué à quel point les choses ont changé aux États-Unis ? Oui c’est bien au président Obama que je fais référence, ou plutôt aux nouvelles versions que son administration a mises en ligne. Non seulement ils arborent une très belle charte graphique avec un choix judicieux de couleurs (blanc, bleu et rouge – comme sur le drapeau US) et de beaux volumes, mais ils sont en plus un modèle de lisibilité et d’organisation.

Vaisseau amiral de cette nouvelle charte, le site WhiteHouse.gov :

Les spécialistes ne s’y trompent pas, c’est du très beau boulot (Whitehouse.gov Redesign: The Change Has Come) et le changement est spectaculaire (Whitehouse.gov: Looking Back at 12 Years of the US President’s Web Presence). Que se soit le choix des typos, la mise en page sur 3 colonnes, le menu de navigation ou le plan du site dans le pied-de-page, ce site est une flamboyante réussite.

Il y a aussi le site Change.gov (qui n’est maintenant plus en ligne) :

On retrouve sur ce site les mêmes couleurs et typos mais une mise en page un peu plus « raide » avec une grille de lecture plus marquée.

Dernier site en date : Serve.gov.

Toujours les mêmes couleurs sur ce site mais plus de liberté dans le choix des typos. Vous apprécierez les larges visuels et la très bonne utilisation des ombrage qui procure une expérience utilisateur tout à fait convaincante.

Il est certain qu’à côté de ces 3 sites, le USA.gov fait pâle figure :

Espérons que les sites de l’administration US vont tous progressivement basculer vers cette nouvelle charte et que cela donne envie à notre président (ou nos ministres). Quel dommage que l’on ne trouve pas trace de cette charte sur les guidelines officiels du Usability.gov !

Voilà un petit moment que les sites de vidéo en ligne trustent l’audience du web mondial. Extrêmement appréciés des internautes, ces sites n’en sont pas moins d’une pauvreté affligeante au niveau de leur interface. Vous pourriez me dire que l’important c’est le contenu et que si YouTube et Dailymotion sont si dépouillés, c’est pour mieux mettre en valeur les vidéos. Certes, il n’empêche que d’autres sites proposent une expérience bien plus plaisante avec plus de sophistication dans l’interface sans toutefois « éclipser » l’intérêt pour les vidéos. Je pense notamment à Hulu, un site de contenus vidéo « officiels », qui propose une expérience utilisateur en rupture radicale avec les autres hypermarchés de la vidéo.

Dès la page d’accueil le ton est donné avec un remarquable travail au niveau de la grille de lecture, de l’harmonie des couleurs et des typos :

Rien à voir avec la page très déséquilibrée de YouTube (minuscules vignettes et colonne de droite trop courte) :

Pour Dailymotion c’est un peu mieux même si la densité d’information est trop forte :

Au niveau des chaînes thématiques c’est encore plus flagrant avec un très large bandeau identitaire pour Hulu et toujours ces zones de respiration très agréables (les espaces blanc entre les différents éléments) qui reposent l’oeil et concentre l’attention :

Chez YouTube il y a un peu plus de place pour respirer, peut-être trop car les 6 lignes de texte sous les vignettes sont difficiles à lire et force l’oeil à faire des sauts :

Chez Daillymotion la page est plus équilibrée mais la surabondance de vignettes (« Best of« ), n’est pas très intuitive (est-ce la timeline d’un même film ?) :

Bref, je suis admiratif du travail réalisé sur Hulu, qui même sur les pages de vidéo conserve cette remarquable lisibilité et toujours beaucoup de « rondeur » dans les formes et couleurs. Hulu réussi le tour de force de nous reposer l’oeil là où YouTube à plus des airs de prospectus publicitaire.

Oui la critique est sévère mais je pense que les sites de vidéo en ligne, de part leur audience et la place qu’ils ont pris dans notre société de l’infirmation méritent un meilleur traitement et surtout plus d’attention de la part des concepteurs.

Je vois encore bien trop souvent des articles ou des billets qui mélangent l’utilisabilité et l’expérience utilisateur. Je vous propose donc de régler cette ambiguïté une bonne fois pour toute avec cet article : The Battle Between Usability and User-Experience. L’auteur y explique clairement les deux concepts et utilise cette très bonne métaphore : les routes.

Utilisabilité = simplicité d’usage

Une autoroute est un très bon exemple des principes d’utilisabilité appliqués aux routes :

• elle demande moins d’efforts mentaux (car elle est large et rectiligne)
• elle occasionne moins d’erreurs (car toutes les voitures y roulent dans le même sens)
• elle est plus productive (on y roule plus vite et toutes les aires de repos se ressemblent)…

Expérience utilisateur = plaisir d’usage

Une petite route de campagne illustre très bien l’expérience utilisateur :

• elle est visuellement agréable (paysages)
• elle procure de belles sensations (visuelles, olfactives…)
• elle suscite l’intérêt (par la diversité des villes traversées)…

Moralité

Dans certains cas de figure, l’expérience utilisateur peut aller à l’encontre de l’utilisabilité (mais c’est quand même rare). En fait tout dépend du contexte d’usage : s’il s’agit d’une application d’entreprise, on privilégiera l’utilisabilité, s’il s’agit d’un service grand public, on… fera en fonction ! Je suis désolé mais je ne pense pas que l’on puisse appliquer de règle. Encore une fois, c’est selon.

/!\ Article initialement publié sur FredCavazza.net.