Amazon et Ebay changent ENFIN de sites web

Le web est constitué d’une infinité de sites, plus ou moins jeunes. Certains sites changent régulièrement, d’autres sont tellement connus qu’ils se contentent d’une refonte tous les 10 ans (W3C, IMDB, MSDN… quand les dinosaures se font une jeunesse), d’autres doivent se faire forcer la main (Propositions de refonte pour Wikipedia et Craigslist). Même s’il n’existe pas réellement de règle sur la fréquence idéale de mise à jour ni sur l’obligation de coller aux « tendances » graphiques, il y a toujours des irréductibles pour traîner des pieds. De façon surprenante, les dernières refontes majeures d’Amazon et Ebay datent d’il y a 4 ans, à moins d’un mois d’intervalle (Une nouvelle version pour eBay et Une nouvelle version pour Amazon). Ils se sont visiblement donnés le mot, car les deux ancêtres de l’internet se en train de déployer quasi simultanément une nouvelle version.

Commençons par Ebay qui semble avoir lancé son chantier légèrement en avance avec une mise en page à étages :

La nouvelle page d'accueil de Ebay

Cette nouvelle page d’accueil privilégie visiblement la sobriété, car elle suprime la couleur jaune historiquement utilisée dans le menu de navigation. Pour cette nouvelle version, nous avons donc droit à une hiérarchisation très formelle des unités d’information : la recherche, la navigation, la réassurance (Welcome, Shop safely) et la communauté (Popular). Une large place est encore réservée à la publicité et à l’auto-promotion (le gigantesque carrousel au centre de la page).

Concernant la page intérieure, un gros effort a été fait pour simplifier la compréhension des différentes versions d’un même produit (New, Refurbished, Used, Bundles…) et une présentation beaucoup plus proche de ce que l’on trouve sur des sites marchands traditionnels :

La page intérieure de Ebay

Avec cette refonte, Ebay souhaite donc développer la performance marchande de sa plateforme, au détriment peut-être de ses contenus ou de la communauté.

Pour Amazon la refonte est plus radicale avec un objectif d’interopérabilité : Amazon is testing a slick new site design, built with tablets in mind. Le haut de page est donc réduit au minimum avec un menu de navigation replié par défaut et un gigantesque moteur de recherche :

La future nouvelle page d'accueil d'Amazon

Visiblement cette refonte n’est que partielle, car elle ne concerne que le header. Vous constatez de plus que sur la version ci-dessus ce dernier est utilisé à des fins d’auto-promo, mais que dans sa version standard, le traitement graphique du header est d’une sobriété à toute épreuve :

La future nouvelle page produit d'Amazon

Nous avons donc confirmation que le coeur de page ne change pas et que la refonte se concentre sur une réorchestration du header et principalement du menu de navigation. La raison de cette refonte est très simple : Le menu de navigation actuel fonctionne très bien sur un ordinateur, mais est très problématique sur une tablette où il n’est pas possible de survoler un item avec la souris.

Outre une plus grande sobriété pour donner plus d’importance aux produits, la motivation première d’Amazon semble donc être d’anticiper la montée en puissance des tablettes avec une conception orientée multi-écran. Pour le moment cette nouvelle version n’est pas encore déployée en Europe, et j’attends avec impatiente de pouvoir la tester sur différents terminaux mobiles.

MàJ (21/09/2011) : Visiblement l’approche d’Amazon fiat des émules car la BBC s’y met également : The BBC debuts new touchscreen-inspired homepage design.

Et on reparle de la conception multi-écran

Rétrospectivement, les questions que nous nous posions il y a 5 ans quand il était question de concevoir une interface étaient plutôt triviales : « Quelle largeur d’écran ?« , « Faut-il souligner les liens ou non ?« … Il faut dire qu’à l’époque, le web se consommait quasiment exclusivement au travers d’un ordinateur. Nous sommes maintenant en 2011 et la situation s’est nettement complexifiée avec la montée en puissance des smartphones et des touchbooks. Et comme si ça n’était pas assez, certains commencent déjà à anticiper l’arrivée des TV connectées.

La conception multi-écran est donc de nouveau sur le devant de la scène avec la dernière Alertbox : Transmedia Design for the 3 Screens. Le Dr Nielsen nous y explique que si les smartphones sont en train de dominer les usages, les tâches à valeur ajoutée seront toujours réalisées sur un ordinateur (achat en ligne, déclaration d’impôts, choix d’une voiture…). Il convient donc de ne négliger aucun de ces deux formats (ordinateur et smartphone), voir de commencer à réfléchir aux prochains formats (touchbooks, TV connectées…). La recommandation du Dr est comme toujours très consensuelle : Développer des interfaces distinctes, mais conserver la même expérience utilisateur (mêmes codes visuels, fonctionnalités et contenus similaires…). Précisions que cette Alertbox fait écho à un précédent article publié dans UX Magazine : UX Concerns Across Mobile Platforms.

Dans la pratique, vous vous doutez bien que la mise en oeuvre est plus complexe. Je vous propose pour celà d’étudier deux approches. Il y a tout d’abord celle d’Amazon qui fait le pari d’une nouvelle version de son site web qui soit adaptée au format touchbooks : Amazon is testing a slick new site design, built with tablets in mind.

La nouvelle interface (probable) d'Amazon

Un choix de conception plutôt audacieux, même si le risque est minimisé par l’ancienneté des clients qui de toute façon retrouveront leurs marques. Il n’empêche que c’est à ma connaissance la première initiative de ce genre pour un site à très large audience. Précisons qu’Amazon édite également d’autres interfaces comme Windowshop, une version mobile ainsi que des applications mobiles.

Deuxième exemple avec Google qui propose des versions mobiles « universelles » de ses sites, mais également une toute nouvelle application iPad marchande : Google Catalogs.

De même, ils avaient lancé l’année dernière une version minimaliste de YouTube (Leanback) pour rendre la consultation plus agréable sur touchbook (ou sur TV) : YouTube Leanback offers effortless viewing.

En étudiant ces différents exemples, il apparait donc comme évident que l’interface universelle est une arlésienne, surtout avec la multiplication des formats (cf. Panorama des terminaux alternatifs). Ceci étant dit, il faut tout de même trouver une solution. Je préconise donc un compromis avec une interface web adaptable (cf. 4 feuilles de styles pour 4 expériences de lecture) et des interfaces spécifiques à chaque format / terminal pour une meilleure expérience (des applications payantes ou avec un accès par abonnement).

Dans tous les cas de figure, le plus important n’est pas de se focaliser sur les interfaces (car les formats vont se multiplier et évoluer), mais sur ce qu’il y a derrière : Le middle-office permettant de délivrer le contenu et les fonctionnalités. À partir du moment où vous avez une architecture « propre » qui dissocie le fond de la forme, vous pouvez petit à petit déployer des interfaces en fonction de l’évolution du marché.

Plusieurs études sur l’utilisabilité et les usages des touchbooks

Le Dr Nielsen et son équipe viennent de publier la nouvelle édition de leur étude sur l’utilisabilité de l’iPad : iPad Usability, Year One. Non seulement cette étude est exhaustive et rigoureuse, mais en plus elle est gratuite ! Pour rédiger cette seconde édition, ils ont recueilli les impressions de 16 utilisateurs sur 26 applications et 6 sites web : Usability of iPad Apps and Websites, 2 Reports With Research Findings.

Au travers de cette étude, ce n’est pas tant l’iPad que les touchbooks qui sont le sujet d’étude. Les conclusions de l’étude sont assez proches de celle publiée l’année dernière, mais de nombreuses petites améliorations ont pu être constatées du fait de l’année d’expérience accumulée par les concepteurs d’applications.

Les principales difficultés rencontrées par les utilisateurs sont les suivantes :

  • Les liens affichés à l’écran sont suffisamment gros pour être lus, mais pas assez pour être cliqués avec précision ;
  • Les zones cliquables sont en règle générale trop petites et pas suffisamment faciles à identifier ;
  • La saisie reste très laborieuse (surtout les formulaires) ;
  • Les sites web peuvent être consultés dans de très bonne conditions mais les interactions sont limitées (du fait de l’impossibilité de faire des clics avec le bouton droit de la souris ou d’afficher des infos au survol d’un élément) ;
  • Les écrans d’accueil (splash screen) génèrent de l’impatience et devraient pouvoir être sautés ;
  • Il y a par fois trop de zones à balayer à l’écran (ex : un cadre à défilement vertical et un carrousel à défilement horizontal dans une page qui peut être tournée) ;
  • La densité des éléments de navigation est trop forte (chaque clic sur un élément mène à une nouvelle page) ;
  • Les concepteurs ne tiennent pas compte du fait que les touchbooks sont généralement partagés entre plusieurs membres de la famille.

À partir de ces enseignements, nous pouvons donc formuler un certain nombre de recommandations :

  • Si la lisibilité des contenus est bonne, ne négligez pas la simplicité d’utilisation en prévoyant de larges zones d’interactions (avec suffisamment d’espace neutre autour pour éviter le parasitage), en aérant les écrans (avec une distribution verticale plutôt que de tout condenser en un seul écran) et en rendant plus explicite le repérage des items de navigation ou les éléments interactifs.
  • Facilitez la découverte et la compréhension de l’interface (tutoriels, indices visuels…) sans néanmoins l’imposer aux utilisateurs réguliers ;
  • Adaptez vos sites web aux contraintes et contextes d’usage des tablettes (mise en page, densité d’information…).

Cette étude nous révèle également que les tablettes sont principalement utilisées dans un contexte de divertissement pour consommer des contenus (infos, magazines…) et des jeux.

Hasard du calendrier, l’institut Nielsen vient également de publier une étude sur les contextes d’usage des terminaux connectés : In the U.S., Tablets are TV Buddies while eReaders Make Great Bedfellows. Cette étude menée auprès de 12.000 participants nous donne ainsi des statistiques précises sur l’endroit ou le contexte dans lequel les utilisateurs exploitent leurs terminaux :

  • Les 2/3 des possesseurs de tablettes l’utilisent en regardant la TV, la moitié au lit et 40% avec des amis ou en attendant quelque chose ;
  • 61% des possesseurs de ereader l’utilisent au lit, seulement 1/3 en regardant la TV ou en situation d’attente ;
  • Les propriétaires de smartphone en font un usage très diversifié (devant la TV, au lit, dans les transports, en faisant du shopping, avec des amis, en situation d’attente).
Les usages comparés des touchbooks, smartphones et ereaders

Ces données illustrent bien le fait que les smartphones sont de loin les terminaux les plus versatiles, alors que les ereaders, conçus pour la lecture de ebooks, ne sont pas exploités pour grand-chose d’autre (logique). Les tablettes semblent être par contre le compagnon idéal des téléspectateurs qui doivent y trouver un parfait complément pour trouver de l’info ou faire des interactions sociales.

Tout ceci est confirmé par une seconde série de chiffres sur la répartition du temps d’utilisation :

Répartition du temps d'utilisation des touchbooks, smartphones et ereaders

De cette seconde étude, nous pouvons tirer deux enseignements :

  • Les chaines de TV ont du souci à se faire car l’attention des téléspectateurs est partagée ente l’écran et leur terminal, d’où un impact certainement plus faible des spots publicitaires (cf. iPads Are Mingling With TVs, While Kindles Get Busy In The Bedroom) ;
  • 1/5 du temps d’utilisation des tablettes se fait au lit donc en position allongée, les concepteurs d’applications devront donc en tenir compte et proposer des modalités d’interaction à une seule main (l’autre servant à tenir le terminal).

Deux études fortement intéressantes et gratuites en quelques jours, c’est définitivement un très bon mois !

Pourquoi iOS est plus disruptif que vous ne le pensez

Voilà maintenant 4 ans qu’Apple a lancé son iPhone sur le marché. Quatre années intenses qui ont complètement bouleversé le secteur de la téléphonie mobile, mais pas seulement ! Avec le lancement de l’iPad l’année dernière, Apple à initié un mouvement plus profond de transformation des usages qui vont modeler notre façon de consommer les contenus et services en ligne.

Salué pour sa stabilité et sa simplicité de prise en main, le système d’exploitation D’apple est en fait bien plus disruptif qu’il n’y parait, car iOS rend obsolète les éléments d’interface et modalités d’interaction que nous avons côtoyés ces dernières décennies (lire à ce sujet : Quelle interface pour le système d’exploitation de demain ?).

La fin de la souris

Avec iOs, Apple a su populariser les interfaces tactiles signant ainsi la fin de la souris. Inventée dans les années 70 au PARC, la souris a rendu de fièrs services à l’humanité (si si !), mais montre maintenant ses limites face à ce que l’iPhone et surtout l’iPad nous permet de faire avec nos doigts. L’air de rien, la charte graphique et ergonomique d’iOS a permis d’assurer la cohérence des applications et d’éduquer ainsi les utilisateurs à une interface sans souris. Certes, nous y perdons le clic droit et le survol, mais nous gagnons les gestuelles à plusieurs doigts (cf. Vers une standardisation des interfaces tactiles).

Avec les interfaces tactiles, vos doigts remplacent la souris

Là où ça devient intéressant, c’est qu’en nous passant de la souris, nous pouvons également nous passer des barres de défilement horizontales ou verticales : iOS, OS X and The Death of the Scrollbar.

La question que l’on se pose maintenant est la suivante : comment bénéficier des apports des interfaces tactiles avec les ordinateurs traditionnels ? Facile, vous pouvez soit utiliser le Magic Trackpad, soit utiliser les ordinateurs de bureau avec écran tactile. Finalement peut-être est-ce là le secret : utiliser une combinaison de souris, écran tactile et pourquoi pas trackpad géant (10/GUI réinvente le pavé tactile pour remplacer la souris).

La fin du clavier

Apple a également introduit pas mal d’innovations pour son clavier virtuel. Il y a tout d’abord le système de correction avec son principe d’auto-apprentissage, mais il y a surtout l‘adaptation du clavier au contenu que vous devez saisir :

Les différentes configurations de clavier sur iPhone

Une innovation bien pratique qui compense la perte de rendement (vitesse de frappe) et qui trouve par ailleurs un écho auprès des fabricants de claviers comme l’Optimus Maximus. Certes, le clavier virtuel n’est pas une solution envisageable pour ceux qui doivent saisir une grande quantité de texte, mais pour les autres…

La fin des logiciels

Autre approche disruptive d’Apple : remplacer les logiciels par des mini-applications. Un coup de génie pour Apple qui a ainsi pu verrouiller son système de distribution, mais également une nouvelle approche de la consommation des services en ligne.

Des centaines de milliers d'applications disponibles pour iOS

En adoptant une approche fragmentée de l’outil informatique (une multitude d’applications monotâches par opposition aux suites logicielles), Apple a mis en place un système lui permettant de nourrir tout un écosystème par le biais de micro-transactions, mais également un moyen de contourner les limitations du navigateur embarqué. Les sites web sont ainsi remplacés par des applications connectées qui permettent de mieux tracker et encadrer les utilisateurs.

Autre conséquence d’une approche fondée sur les mini-applications : la disparition du navigateur de fichiers (cf. Observed, The Death of the File System). Là encore, on se dit qu’un système d’exploitation comme Mac OS pourrait bénéficier de cette approche avec une gestion semi-automatisée des fichiers : tout comme iTunes se charge d’organiser vos fichiers musicaux, nous pouvons tout à fait envisager des applications qui se chargent elles-mêmes de ranger et d’accéder à vos fichiers de travail. Une aberration ? Pas tant que ça si l’on envisage un système automatique débrayable.

Notez que ça fonctionne aussi pour les photos avec iPhoto ou Picasa qui propose un navigateur intégré.

La fin de l’ordinateur ?

Plus de souris, plus de clavier, plus de logiciels ou de navigateur de fichiers, ça en fait des changements ! Pour autant peut-on dire qu’iOS est le système d’exploitation qui va remplacer ceux des ordinateurs traditionnels ? Non absolument pas, ça serait faire un raccourci abusif. Par contre je pense ne pas me tromper en disant qu’iOS couplé à l’iPad a su montrer au grand public qu’une partie de ses besoins quotidiens ne nécessitaient pas forcément un ordinateur traditionnel.

L’adoption par le grand public de l’iPad a eu ainsi un impact immédiat sur les ventes de netbooks. Nous pouvons également constater une modification plus profonde des habitudes de consommation : Tablets Starting to Replace Other Traditional Devices. iOS et l’iPad ont donc initié un mouvement de transformation des habitudes des utilisateurs de l’outil informatique, Apple a réussi là où les constructeurs de netbooks ont échoués. Mais la partie n’est pas pour autant terminée car Google mise beaucoup sur son système d’exploitation Android et surtout sur son Chrome OS et le principe du cloudbook.

Il y a deux ans je m’interrogeais sur la nécessité d’adapter les sites web aux spécificités des netbooks. L’année dernière, j’avais une réflexion similaire pour les touchbooks : Faut-il réinventer le web pour les touchbooks ?. Au vu du succès de l’iPad et des ambitions de ses concurrents, il me semble évident que les éditeurs de contenus, services en ligne et même logiciels doivent dès maintenant tirer les leçons du succès d’iOS et commencer à faire évoluer leur offre pour mieux correspondre aux nouvelles habitudes des utilisateurs.

Conclusion : avec iOS, Apple a-t-il réinventé l’outil informatique ? Non, il l’a fait évoluer durablement, il ne tient qu’à vous d’en profiter plutôt que de la subir. La bonne nouvelle est que vous avez encore un peu de temps devant vous pour anticiper les changements qui vont en découler, mais ne tardez pas trop !

Le responsive design à l’assaut des terminaux mobiles

Ces derniers temps je parle de plus en plus des terminaux mobiles, et pour cause : ils prennent une place de plus en plus importante dans notre quotidien et surtout dans notre consommation de l’internet (services et contenus). Avec la multiplication des plateformes mobiles et même des formats de terminaux alternatifs, les concepteurs de sites et services en ligne s’arrachent les cheveux pour trouver des solutions à cette fragmentation.

Présentée à la communauté l’année dernière, la technique du Responsive Web Design semble apporter une réponse concrète à la prolifération des formats d’écran. Jusqu’à présent, lorsqu’un internaute visitait un site ayant plusieurs interfaces, il était redirigé vers la version du site qui correspondait le mieux à son mode d’affichage (ex : IMDB.com qui renvoie vers m.IMDB.com si vous le consultez avec un smartphone). Le principe du Responsive Web Design est de ne proposer qu’une seule URL avec une interface qui s’adapte en fonction de votre écran en exploitant différentes feuilles de styles CSS (et les media queries qui peuvent maintenant s’exprimer en largeur de page).

Illustration du responsive design

L’exemple ci-dessus vous permet de tester ce principe en redimensionnant la fenêtre de votre navigateur. Ce n’est donc pas qu’une question de largeur de page, mais une nouvelle façon de penser les interfaces web. L’approche de l’auteur (traduction française disponible ici : Le Web Design Réactif) est donc de prévoir à la fois une mise en page qui s’adapte (nombre et largeur des colonnes), mais également des images qui se redimensionnent et même des éléments qui sont repositionnés voir supprimés.

Ce type d’interface demande un minimum d’expertise et surtout un gros travail de préparation en amont pour « penser » une interface en plusieurs largeurs. Il existe heureusement un certain ombre d’article traitant de ce sujet :

Avec la récente sortie de nouvelles versions de navigateurs (IE9, Firefox 4, Chrome 11, Opera 11…), l’utilisation de ce type de technique va devenir une réalité et évitera de devoir passer par du code javascript et des acrobaties pour assurer une t-rétro-compatibilité.

Encore une fois, c’est un sujet assez technique, mais qui concerne une approche radicalement novatrice dans la distribution de contenus et services en ligne. La plupart des réalisations déjà disponibles concernent des sites de designeurs (visibles sur MediaQueri.es), mais nous commençons à voir des sites de beaucoup plus grosse importance adopter cette technique comme la rubrique Election du Chicago Tribune :

Le site du Chicago Tribune en 3 versions

Les exemples listés sur MediaQueri.es sont illustrés en 3 largeurs (smartphones, netbooks/tablettes et ordinateurs) mais peuvent potentiellement s’adapter à n’importe quelle interface (téléphones mobiles, TV connectées, consoles portables…). Je suis particulièrement enthousiaste quant à cette approche de la mise en page d’un site ou service en ligne. D’ailleurs une réécriture du gabarit de ce blog est en cours pour justement exploiter les medias queries. Des explications détaillées seront publiées quand ce nouveau thème sera en ligne.

Plusieurs études sur l’utilisabilité de l’iPad

Faisant suite aux premières études publiées sur l’utilisabilité de l’iPad, nous commençons à voir un certain nombre d’études complémentaires après une année de commercialisation. Ces études sont plus ou moins rigoureuses, mais apportent toutes des enseignements précieux.

Commençons avec l’étude de eye-tracking réalisée par les équipes de Miratech : On parcourt le journal sur l’iPad, on le lit sur le papier. Cette étude porte principalement sur les différences de lecture entre un journal papier et sa version numérique sur un iPad, elle vient compléter une précédente étude qui nous apprenait que la lecture sur un iPad est plus superficielle que sur un journal.

Points de fixation sur un journal classique et sa version numérique

Dans la mesure où la mise en page est fidèlement reproduite, le comportement de lecture n’est pas altéré de façon notable. Bonne nouvelle pour les éditeurs, les publicités sont indifféremment lues sur papier et sur iPad :

Concentration de l'attention sur un journal papier et sa version digitale

Les conclusions de l’étude sont les suivantes : l’iPad est un terminal de lecture efficace, mais superficiel, car les utilisateurs parcourent plus d’articles mais en retiennent moins bien le contenu (preuve d’une lecture rapide).

Deuxième étude publiée sur le blog Design Language qui s’est plus intéressée aux traces de doigts laissées sur l’écran en fonction de l’application utilisée : Remnants of a Disappearing UI. L’approche peut vous paraître moins scientifique, mais montre néanmoins des différences notables :

Les différentes traces de doigts laissés en fonction des applications

Les différentes traces de doigts laissées témoignent d’usages complètement différents en fonction du contenu et des modalités d’interactions :

  • la navigation sur le web avec Safari se résume à des défilements de l’écran par pichenettes de l’index (l’iPad est tenu à une seule main) ;
  • les emails requièrent par contre plus d’attention, l’iPad est tenu à deux mains et les messages sont parcourus et répondus à l’aide des deux pouces ;
  • les jeux se manipulent essentiellement avec un doigt (ex : FieldRunners qui concentre les interactions sur un point particulier de l’interface situé en bas).

Dernière étude réalisée par l’Institute of Mobile Technologie qui portait sur les e-readers et la façon des les utilisateurs les perçoivent : Kindle, Kobo, IBook, An Emperical Analysis. Trois lecteurs différents ont ainsi été testés par les participants auxquels il a été demandé de les dessiner :

La façon dont les utilisateurs perçoivent les tablettes

Sur l’ensemble des croquis, plusieurs choses ont été révélées :

  • l’iPad est représenté en mode paysage avec un écran beaucoup plus grand que dans la réalité (c’est donc l’impression qu’il laisse aux utilisateurs) ;
  • les doubles boutons latéraux du Kindle sont ignorés (les utilisateurs cliquent à droite pour la page suivante et à gauche pour la page précédente) ;
  • L’écran du Kindle est perçu comme beaucoup plus grand que celui de son concurrent (le Kobo).

-

Voici donc trois études différentes apportant des enseignements très intéressants sur les usages et la perception de ces nouveaux terminaux. Je suis fermement convaincu que les usages autour des tablettes (touchbooks ou e-readers) sont très loin d’être définis. Il reste encore d’innombrables innovations technologiques (aussi bien sur la technologie, le format ainsi que les capacités des machines) qui vont profondément modifier la façon d’appréhender et de manipuler ces engins. En d’autres termes : ce que nous savons sur l’utilisabilité des ordinateurs ne s’applique pas aux tablettes. Tout reste à faire, et les ordinateurs ne sont pas forcément les meilleures sources d’inspiration : cherchez plutôt du côté des consoles de jeux portables ou des bornes tactiles.

Vers une standardisation des interfaces tactiles

Depuis sont lancement en début d’année dernière, l’iPad n’a beaucoup souffert de la concurrence (il représente aujourd’hui plus de 90% du marché des touchbooks). Une position dominante bien pratique pour imposer la « touche Apple » aux interfaces et à leur fonctionnement (cf. iOS Human Interface Guidelines). Oui, mais la situation est en train de changer, car la concurrence est maintenant en ordre de marche pour inonder le marché avec des concurrents (clones ?) de l’iPad.

Qui dit « concurrence », dit « diversité », et donc « disparités ». Les futurs concurrents de l’iPad seront ainsi propulsés par différents systèmes d’exploitation qui vont compliquer la tâche des concepteurs d’interfaces tactiles. La raison en est toute simple : les utilisateurs ne lisent pas les instructions sur un ordinateur, ils les liront encore moins sur un touchbook.

Heureusement certains se sont portés volontaires pour essayer de rationaliser tout ça et de définir un référentiel de gestuels. Luke Wroblewski, grand gourou de l’utilisabilité, a ainsi publié l’année dernière son Touch Gesture Refence Guide où sont listés les principales interactions tactiles avec un ou deux doigts :

Le référentiel de gestuelles à deux doigts de Luke Wroblewski

Dans le même ordre d’idée, Open Exhibits a également proposé une bibliothèque encore plus large d’interactions tactiles pour interfaces mulittouch (la Open Source Gesture Library) :

La bibliothèque d'interactions tactiles de Open Exhibits

Vous pensiez être tiré d’affaire ? Détrompez-vous, car Apple vient déposer une série de brevets pour des interactions tactiles encore plus complexes : Complex Gestures On and Over Your Next iPad.

La nouvelle génération d'interactions tactiles chez Apple

Les interactions décrites dans le brevet vont beaucoup plus loin, car elles prennent en compte l’intégralité des deux mains (paumes, tranches…) mais également les figures sans contact (« hover sensitive device« ). Les schémas sont suffisamment explicites pour vous rendre compte du degré de sophistication…

Je suis d’un côté fortement impressionné par tant d’innovation (ces nouveaux brevets pourraient peut-être intégrer la troisième ou la quatrième génération d’iPad), mais plutôt inquiet d’un autre côté, car l’intuitivité des touchbooks risque d’en prendre un coup ! Ces nouvelles gestuelles posent également de nombreux problèmes :

  • Les utilisateurs parviendront-ils à mémoriser et reproduire ces figures ?
  • Comment peut-on tenir le touchbook s’il faut réaliser des figures à deux mains ?
  • La détection de gestuelles à proximité de la dalle tactile ne va-t-elle pas parasiter le fonctionnement de l’appareil ?

Et le pire dans tout ça c’est que nous n’en sommes qu’au début : la prochaine console portable PSP va ainsi intégrer une surface tactile au dos de la machine, cette innovation devrait très bientôt être récupérée par d’autres constructeurs….

4 feuilles de styles pour 4 expériences de lecture

La lecture à l’écran est un débat récurent dans le monde de l’utilisabilité. Je n’ai pas l’intention de relancer ce débat ni d’y apporter une contribution significative. Par contre, je rapprocherais les problématiques liées à la lisibilité des contenus web à la montée en puissance des terminaux alternatifs : Vers des sites adaptés aux netbooks ? et De la difficulté de concevoir une interface multi-terminaux.

Le problème que nous essayons de résoudre ici est celui de la lisibilité, ou plutôt de l’adaptation de l’interface au différents contextes de lecture. Il est ainsi difficilement envisageable de concevoir une interface qui convienne à la fois aux utilisateurs d’ordinateurs traditionnels (avec des écrans toujours plus grands), de smartphones, de touchbooks… Il existe pourtant une solution toute simple pour pallier à ces situations : les feuilles de style.

Les CSS sont ainsi parfaitement adaptées à gérer cette problématique. Il serait ainsi tout à fait pertinent de fournir 4 feuilles de styles différentes :

  • pour la mise en page du site en mode « web » (donc avec un affichage standard) ;
  • pour pouvoir imprimer la page sans tous les éléments parasites (en supprimant les menus et colonnes) ;
  • pour pouvoir lire le contenu à l’écran (en proposant uniquement le texte avec une plus grosse police de caractères) ;
  • pour pouvoir consulter la page sur un smartphone.

Concernant la version imprimable, il existe quantité d’écrits sur le sujet donc je ne m’attarde pas (CSS Design: Going to Print et How To Create A Simple Print CSS For Your Site). De même pour ce qui concerne la version pour smartphones, il existe des plug-ins et des outils pour faire basculer l’affichage en mode « mobile » (j’utilise par exemple l’extension WPtouch pour WordPress).

Le mode « lecture à l’écran » me semble par contre tout à fiat intéressant à étudier. Il existe déjà des initiatives intéressantes en ce sens (comme le Skimmer du NY Times) mais elles restent marginales. Au mieux, ce que nous proposent les éditeurs pour améliorer le confort de lecture à l’écran est d’augmenter la taille de la police de caractère. Personnellement, je préfère de loin cliquer sur le bouton « Imprimer » et de lire la page d’aperçu avant impression.

Il ne serait pourtant pas très compliqué de proposer un bouton pour basculer en mode « Lecture« . Cette fonction existe ainsi sur le navigateur Safari :

L’avantage des feuilles de styles est de pouvoir exploiter un code HTML unique tout en proposant des expériences de lecture adaptées au contexte. Je suis en train de travailler sur une refonte de ce blog et je vous fournirais des explications détaillées sur les multiples feuilles de styles mises en place dès que ça sera prêt.

Qwiki inaugure l’avenir de la recherche sur terminaux alternatifs

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 !).

La page d'accueil de Qwiki

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
La page de résultat de Qwiki

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 ?).

Une nouvelle expérience de consommation des médias avec les webdocumentaires

J’ai déjà eu l’occasion de vous parler des webdocumentaires, un format à mi-chemin entre site web et DVD-Rom : France5 et CuriosphereTV expérimentent les web-documentaires. Je souhaiterais aujourd’hui rattraper une grande injustice et vous faire l’apologie de Prison Valley, un superbe web documentaire sorti il y a quelques mois et coproduit par Arte, Upian et le CNC qui vous plonge dans l’univers incroyable d’une ville-prison du fin fond de l’Amérique.

La page d'accueil de Prison Valley

Ce n’est pas le premier webdocumentaire réalisé (il me semble que le premier date de 2007 : Thanatorama) mais c’est à ce jour le plus abouti avec près de 250 K€ de budget et un certain nombre de récompenses (cf. Les webdocumentaires d’Upian). Ce qu’il y a de particulièrement intéressant avec ce « site » c’est qu’il intègre de façon parfaitement harmonieuse la narration vidéo interactive et la dimension sociale. Pour accéder au documentaire, il faut ainsi se créer un compte ou se connecter avec un profil Facebook ou Twitter. Pourquoi ? Tout simplement pour faire vivre le site de nombreux mois après sa publication, ou plus précisément pour faire vivre les discussions en rapport avec le sujet traité.

Le site est ainsi étendu sur différents médias sociaux avec un blog, un forum, une page Facebook et un compte Twitter. Le « produit » est également disponible en VOD, en application iPhone et en livre.

Mais ce qui nous intéresse particulièrement c’est le site web et son incroyable modèle d’interaction où la trame narrative est enrichie par de nombreux d’éléments interactifs. Le fil rouge est bien entendu le documentaire en lui-même qui est découpé en plusieurs chapitres :

Le lecteur vidéo de PRison Valley

L’interface est très épurée avec une timeline et un bouton unique qui permet de rentrer au motel où séjournaient les journalistes. La chambre du motel sert ainsi d’écran d’orientation entre les différents chapitres de la vidéo et les contenus additionnels :

La chambre du motel qui sert d'écran d'orientation

Au fur et à mesure du visionnage des séquences vidéo, vous amassez des indices qui vous apportent un complément d’information sur l’enquête en cours. La référence au monde des jeux vidéo est ici évidente, mais elle fonctionne particulièrement bien dans ce contexte :

Les compléments d'information sous forme d'indices

Les différents personnages qui sont mentionnés dans le reportage viennent compléter une galerie à laquelle il est possible d’accéder, toujours pour avoir des compléments d’infos :

Les fiches détaillées des personnages

L’expérience d’utilisation de ce site est réellement unique : l’immersion est totale et le documentaire est ponctué de nombreux embranchements pour maintenir l’attention de l’internaute et lui donner envie de consulter les bonus. Le basculement d’un écran à un autre est parfaitement intuitif et les boutons sont suffisamment larges pour pouvoir manipuler cette interface à l’aide d’un touchbook.

Un touchbook comme l’iPad ? Non car l’iPad souffre de limitations qui ne permettent pas de consulter ce site (en Flash), mais de nombreux modèles concurrents vont voir le jour d’ici la fin de l’année et permettront de pleinement profiter de ce format. Pleinement ? Oui car c’est en position de repos (assis ou allongé) que ce documentaire se consomme, les manipulations étant réduites au strict minimum.

Là où je suis particulièrement conquis par ce format c’est qu’il fonctionne à la fois sur les touchbooks (pour un premier visionnage) mais également sur un ordinateur (pour l’accès au bonus et la participation aux discussions). La formule magique semble donc avoir été trouvée : un document vidéo chapitré + des contenus additionnels + une interface minimaliste + des espaces d’interactions sociales.

Ce documentaire préfigure-t-il l’avenir du web ? Non car les sites traditionnels continueront de dominer le web pour de nombreuses années. Par contre, attendez-vous à voir fleurir de nombreux autres formats novateurs de ce type qui parviennent à repousser les limites du web.