Afficher une grande quantité d’information à l’écran est un sacré challenge, mais ce n’est pas une raison pour faire n’importe quoi ! Illustration avec la version française du HuffingtonPost qui a été lancée hier matin à grand coup de ramdam médiatique. Il n’y a pourtant pas de quoi être fier tant le site est… (je préfère m’abstenir de le qualifier pour ne pas verser dans la vulgarité et je me range derrière l’avis de Geoffrey : Y’a-t-il un designer pour sauver le Huffington Post ?).

Même si je ne souhaite pas prendre la défense des personnes responsables de cette infamie, je constate qu’en règle générale le secteur ne brille pas par son originalité. En témoignent des sites d’actualité français qui se ressemblent tous : Le Monde, Libération, Le Parisien et Le Figaro… Mais ce ne sont pas les pires, car d’autres s’illustrent par leur mise en page complètement déstructurée (20 Minutes) ou très tassée (L’équipe).

Ceci étant dit, les grands titres US souffrent également d’une très forte densité d’information. Ils sont, certes, très sobres (une qualité que j’apprécie), mais pas non plus très inspirés comme le NY Times, Washington Post, le LA Times ou le Boston Globe.

Vous noterez que certains titres ont fait des efforts comme USA Today ou NPR. Les concurrents outre-Atlantique proposent, eux, une mise en page plus aérée et surtout plus de couleurs comme le site du Guardian ou celui de la BBC.

Dans la même lancée, les sites de magazines américains comme Newsweek, Salon ou encore The New Yorker proposent plus d’espace et d’originalité (une typographie spécifique et même un petit papillon qui virevolte au-dessus du logo).

Bref, tout ça pour dire que la solution miracle n’existe pas… ou qu’ils ne l’ont pas trouvé ! Un constat affligeant également partagé par d’autres : Designing a big news site is about more than beauty. Le designer Andy Rutledge propose d’ailleurs un nettoyage très réussi du site du NY Times :

Vous pourriez me dire qu’une mise en page aussi épurée relève du fantasme tant les contraintes que l’éditeur doit prendre sont nombreuses (bannières, offres de partenaires, confits éditoriaux…), mais pourtant d’autres ont fait ce choix de clarté et de minimalisme avec brio comme le très bon site de Inc.

Je ne peux pas terminer ce passage en revue des sites d’information sans mentionner la très réussie maquette du site d’Owni qui tranche avec tout ce que l’on connait :

La page d’accueil est ainsi coupée en deux par la frise de photos et propose une imbrication de bloc-articles dans sa moitié basse :

Au final, nous sommes bien d’accord pour dire que l’important est la qualité du contenu et non la présentation. Ceci étant dit, je ne me risquerais pas à dire que le site d’Owni est mieux que celui du Huffington Post dans la mesure où tout est affaire de goût. Mais bon… j’ai quand même une forte préférence !

Normalement une nouvelle version du site de L’Express (auquel j’avais contribué il y a quelques années) devrait sortir la semaine prochaine, peut-être apporteront-ils des solutions en terme de lisibilité / densité…

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.

Il est amusant de constater qu’en matière de conception web, certains mythes ont la peau sacrément dure. Autant nous n’abordons plus les mythes de la règle des trois clics ou de la page d’accueil de moins de 60 Ko, autant celui de la limite de visibilité revient régulièrement. Le dernier article que j’avais rédigé à ce sujet remonte à deux ans (En finir avec le mythe de la limite de visibilité), mais je pense devoir m’y coller à nouveau pour définitivement clore le sujet.

Malgré les nombreux articles déjà parus sur le sujet, les discussions persistent, de même que les publications : Life below 600px, Designing ‘Above the Fold’ Necessary?, Is there life below the fold?. Le point de départ de ce mythe est pourtant bien fondé : les contenus au-dessus de la limite de visibilité sont plus lus, de même que les boutons qui sont plus cliqués. Ceci étant dit, les contre-arguments sont également toujours les mêmes :

• L’équipement des internautes évolue et la limite des 600px est repoussée vers le bas avec des écrans toujours plus grands ;
• Depuis 15 ans que le web existe, les internautes ont appris à se servir de la barre de défilement et de la molette de leur souris ;
• L’important n’est pas de faire rentrer tout le contenu au dessus de la limite, mais de faire comprendre aux internautes qu’il y a du contenu supplémentaire en dessous ;
• Même s’il est largement en dessous de la limite de visibilité, un contenu associé à un point d’intérêt (photo, vidéo, illustration…) sera lu.

J’imagine que vous devez en avoir raz-le-bol que l’on vous sorte toujours les mêmes exemples (page produit d’Amazon et page d’accueil de Basecamp), alors pour illustrer mon propos je choisit un autre exemple (la page d’accueil de Backpack) qui démontre bien l’intérêt d’utiliser toute la hauteur de page pour bien valoriser le contenu.

Nous sommes maintenant (presque) en 2012, il faut savoir vivre avec son époque et prendre en compte plusieurs facteurs qui rendent cette limite des 600px encore plus caduque :

• Le volume de contenu disponible a considérablement augmenté ces dernières années avec les médias sociaux et les contenus multimédia, de ce fait, vous aurez besoin de plus de contenus pour attirer l’attention et convaincre les internautes, donc de plus de place ;
• La montée en puissance des terminaux alternatifs (smartphones, tablettes, TV connectées, netbooks/cloudbooks…) brouille complètement les statistiques de taille d’écran.

Ces deux facteurs, dont nous commençons réellement à prendre la mesure à l’aube de cette nouvelle année, remettent en question les règles de conception des sites web (Vers des sites adaptés aux netbooks ?, Faut-il réinventer le web pour les touchbooks ? et Quel va être l’impact de la fin de l’ordinateur individuel ?). De ce fait, de nouvelles pratiques émergent et apportent une solution à ce phénomène de diversification des modes de consultation et d’achat en ligne : 4 feuilles de styles pour 4 expériences de lecture, Le responsive design à l’assaut des terminaux mobiles et Et on reparle de la conception multi-écran.

Donc au final, la limite de visibilité a-t-elle encore une importance ? Non, plus réellement. Certes, les contenus en haut de page bénéficieront toujours d’une meilleure exposition, mais la notion de haut de page devient de plus en plus floue : non seulement les formats d’écrans se diversifient, mais les applications prennent de plus en plus de place dans les modes de consultation (Le choix se complique entre application mobile et application HTML5).

Moralité : les concepteurs sont aujourd’hui confrontés à des défis bien plus complexes que l’identification d’une surface d’affichage optimale. Le débat ne porte plus réellement sur l’emplacement de la limite de visibilité, mais sur les priorités à attribuer aux interfaces web, mobiles, tactiles, aux applications… Mobile First ! (et Content First !) (et Touch is the New Click!) (et Web is Dead!) (et HTML5 Rules!) (bref, il n’y a plus de règles).

Les médias sociaux ont beau accaparer l’audience de l’internet, il n’existe que peu d’études sur l’ergonomie des interfaces de ces plateformes. Il faut dire que les interfaces changent souvent (Thoughts on the New Facebook Timeline Design), et que de toute façon, les utilisateurs sont avant motivés par la possibilité de développer des interactions sociales avec leurs amis.

Un récent article publié sur Mashable nous donne néanmoins des informations intéressantes sur la façon dont les internautes décryptent les interfaces des principaux médias sociaux : Here’s How People Look at Your Facebook Profile, Literally. L’étude est intéressante car exhaustive, mais elle vient surtout corroborer les observations d’oculométrie précédemment observées, notamment en 2009 par OneUpWeb (Une étude de Eye Tracking pour Facebook, Twitter et Youtube) : l’attention est concentrée sur le haut de page et le regard suit la mise en page en deux colonnes.

Cette étude de eye-tracking avait été complétée en 2010 par le Catalyst Group avec un examen plus approfondi de la page de liste de contacts : Eye Tracking: Facebook and LinkedIn Usability.

Plus intéressant, le EyeTrackShop avait publié en milieu d’année les résultats d’une étude portant sur Facebook et Google+ : Eye-Tracking Study Shows Users Perceive Google+ and Facebook Virtually Identically. Cette étude démontrait que l’oeil suivait le même parcours critique sur les deux interfaces.

Ces résultats ne sont pas très surprenants dans la mesure où les deux interfaces sont très proches.

Nous en revenons donc à l’article que je mentionnais en haut de page et la comparaison des zones de fixation entre les différents médias sociaux. Premier constat : le parcours de l’oeil est avant tout guidé par les photos. Ceci est particulièrement flagrant avec Facebook, Twitter, Google+ et surtout YouTube :

Autres enseignements : les photos des amis sont particulièrement appréciées, de même que les titres des contenus en haut de page. Rien de très surprenant, ceci est conforme à ce que l’on peut constater sur d’autres sites.

Il y a donc une uniformisation dans la façon dont les internautes décryptent les interfaces des réseaux sociaux, sauf pour LinkedIn où le comportement de l’oeil est très différent :

Certes, l’interface ne propose pas la même mise en page ni le même nombre de photos, mais l’on constate que le regard est avant tout attiré par l’intitulé du poste et les expériences (du moins la première).

Tout ceci est donc très intéressant, car il n’existait que peu de publications dans ce domaine. Par contre, quel dommage que nous ne disposions pas de plus de données sur la future Timeline de Facebook, sur le nouveau YouTube ou sur la façon dont les utilisateurs lisent les tweets sur l’écran d’un smartphone… Si vous avez des infos, je suis preneur.

L’acte d’achat en ligne n’est pas une démarche naturelle, il requiert une contextualisation particulière de l’offre et une mise en scène très soignée chez les e-commerçants. Au cours du processus d’achat, le panier est une des étapes/pages les plus importantes, car il est la charnière entre le parcours client et le tunnel de commande. Je vous propose ainsi d’étudier un certain nombre de trucs et astuces publiées chez mes confrères.

Commençons avec cette très belle infographie de Monetate qui résume un certain nombre de bonnes pratiques : Shopping Cart Abandonment and Tips To Avoid It.

Nous avons ensuite cette check-list de GetElastic sur les leviers de création de confiance (9 Ways to Build Trust in Checkout) :

• Acquérir un certificat SSL ;
• Affichier des badges de sécurité (comme celui de FIA-Net ou le tout récent Google Trusted Stores) ;
• Utiliser la bonne terminologie dans vos boutons (« Paiement sécurisé« ) ;
• Afficher un lien vers la politique de confidentialité ;
• Fournir des explications sur le code de sécurité (de préférence avec une illustration du dos d’une carte bancaire) ;
• Proposer un tchat ou un rappel immédiat du service client ;
• Fournir des explications complètes, ou un lien vers les conditions d’expédition à l’étranger ;
• Proposer des systèmes de paiement alternatifs ;
• Afficher une adresse physique.

Chez ClickZ ils proposent également une série de bonnes pratiques (3 Shopping Cart Promotional Tactics for the Holiday Season) :

• Ajuster les frais de livraison en fonction du montant du panier (notamment pour les « petits » paniers dont le montant est inférieur aux frais de livraison) ;
• Offrir la livraison au-delà du seuil psychologique des 100$ (ou 100€) ;

  

• Aligner les promotions individuelles sur le taux d’abandon des produits.

Les rédacteurs de GetElastic ont également publié un article fort intéressant sur le moyen de créer un sentiment d’urgence : Creating Urgency on the Shopping Cart Page.

Dernier conseil chez Monetate qui insistent sur l’affichage d’éléments de réassurance au plus près du bouton de passage à l’acte : Cart Messaging Matters, We Guarantee It.

Avec ça, vous pouvez donc faire le plein de bons conseils et astuces pour améliorer l’efficacité de votre panier. Sachez qu’il existe d’autres astuces, comme par exemple les techniques de récupération de paniers abandonnés (8 Tips for Recovering Abandoned Shopping Carts).

Même si je suis convaincu de l’importance « stratégique » du panier dans l’acte d’achat, il y a également de nombreux points à surveiller / améliorer au niveau du tunnel de commande, mais ça fera l’objet d’un autre article. Pour patienter, je vous propose cette vidéo satyrique publiée par les équipes de Google Analytics :

La suite en seconde partie de mois…

Vous ne l’aviez sûrement pas remarqué, mais le thème de ce blog a été entièrement réécrit en HTML5. Le but de cette refonte n’était pas de revoir la charte graphique (qui me convient bien), mais de se livrer à un exercice de remise à niveau du code. J’ai donc demandé à mes anciens collègues de Mahi-Mahi (et notamment Alex) de se pencher sur la question et vous avez le résultat sous les yeux : un thème graphique identique au précédent, mais avec un temps de chargement divisé par deux (on passe d’une page d’accueil de 2 Mo à 880 Ko) et une mise en page en responsive design qui s’adapte automatiquement à l’écran du terminal que vous utilisez (cf. Le responsive design à l’assaut des terminaux mobiles).

Donc concrètement ce blog est beaucoup plus rapide à charger (moins de 7 secondes au lieu de 14), et sa mise en page s’adapte à la largeur de la fenêtre ou du terminal utilisé. Ici vous avez les deux versions smartphone et tablette :

Nous avons également travaillé sur une version « grand large » (notamment avec un test sur deux colonnes, mais qui n’était pas concluant) :

L’adaptation de la mise en page à la taille de la fenêtre est très ludique, mais je peux vous assurer que c’est un véritable casse-tête à faire fonctionner correctement.

Pour rentrer dans les détails, voici les tâches réalisées sur la structure HTML :

• Utilisation de HTML5 et des rôles ARIA (Passer son blog WordPress à la sémantique HTML5 et ARIA) ;
• Ajout de la microdata Article ;
• Utilisation des media queries pour adaptation aux différentes tailles d’écrans (avec une adaptation des déclarations du Less Framework) ;
• Adaptation des tailles de vidéo à la taille du contenu parent (la largeur des vidéos s’adapte en fonction de l’espace disponible dans la colonne de gauche du site grâce à FitVidsJS) ;
• Pour la gestion des images, il y a une détection des plateformes mobile (Android, iPhone, Windows 7 mobile…) pour retailler les images à 320 pixels de large (utilisation de Sencha IO, mais qui pouvait aussi être faite avec le plugin jQuery Doubletake) ;
• Création d’un media print pour l’impression de l’article ;
• Les dégradés et autres effets graphiques sont réalisés en CSS3 (Fading au chargement du logo et de la baseline sur la page d’accueil, légère animation sur les liens au survol de la souris ;
• Une seule image est utilisée (le logo), ce dernier est appelé en data-uri dans la feuille de style (aucun appel d’image du thème pour les navigateurs modernes) ;
• Création d’une webapp pour distribuer le blog sur le webstore de Chrome.

Voici également les travaux effectués sur la version mobile :

• La page d’accueil « version mobile » ne présente que l’excerpt des 10 derniers articles et non l’intégralité des 10 derniers articles (la page « normale » pèse 1,6 Mo alors que la page « mobile » pèse 158 Ko) ;
• Les liens vers les autres blogs en haut de page sont remplacés par un menu déroulant (Convert a Menu to a Dropdown for Small Screens) ;
• Utilisation du appcache permettant de consulter le blog en mode hors-ligne ;
• Gestion de l’orientation pour les tablettes (en mode portrait, le barre latérale passe sous la zone centrale) ;
• Masquage par défaut du moteur de recherche sur les smartphones ;

Concernant Internet Explorer, voici les astuces utilisées :

• Pour IE 10, utilisation basique des dégradés et media query ;
• Pour IE 9, reprise des linear brackground en filter et utilisation de Pinned Site ;
• Pour IE 8 et inférieur, Utilisation du respond.js pour assurer l’adaptation de la mise en page.

Vous remarquerez que la mise en page se dégrade de très belle manière dans IE 6 :

Comme vous pouvez le constater, le résultat est donc à la fois performant et robuste. Je tire donc mon chapeau à Alexandre qui s’est réellement arraché les cheveux pour me proposer les solutions les plus élégantes. Si vous souhaitez plus d’explications, vous pouvez directement lui poser des questions sur @BrettSinclair, sinon vous pouvez également consulter des ressources en ligne sur Mobile Boilerplate ou Stuff and Nonsense. Si vous avez des remarques sur les choix retenus pour cette refonte du code, n’hésitez pas à vous exprimer dans les commentaires, par contre soyez constructifs.

Encore bravo à l’équipe de Mahi-Mahi qui devrait dans les prochaines semaines s’attaquer également à la ré-écriture en HTML5 de RichCommerce.fr, un thème graphique plus complexe…

Cette semaine se tient à Los Angeles la grand-messe annuelle d’Adobe où l’éditeur nous présente ses nouveautés et sa stratégie. L’évènement n’étant pas encore terminé, je me garde de vous faire un récapitulatif (qui sera publié en fin de semaine sur InterfacesRiches.fr). Je souhaite néanmoins vous présenter la gamme de produits destinés aux tablettes (les Adobe Touch Apps) qui sont intégrées dans la Creative Suite. L’ambition d’Adobe avec cette nouvelle gamme est de stimuler la créativité au travers d’interfaces tactiles inspirationelles : Adobe Touch Apps Redefine Creative Software.

L’un de ces produits a particulièrement retenu mon attention : Adobe Proto, une application de prototypage rapide pour tablettes Android et iPad. Cela fait de nombreuses années que je milite pour que les grands éditeurs rajoutent à leur catalogue un outil de prototypage rapide digne de ce nom (Wireframes : 4 styles pour 4 types d’outils). Jusqu’à présent, il fallait composer chez Adobe avec des produits bâtards comme les extensions pour Fireworks (trop lourdes à manier) ou Flash Catalyst (plutôt orienté design des interactions). Avec ce Proto, Adobe comble le vide dans sa gamme avec une application tout à fait innovante :

Adobe Proto se présente donc comme une application de prototypage rapide avec une interface tactile particulièrement intuitive :

Pas de menus compliqués, tout se fait avec le doigt : soit vous sélectionnez un composant dans la barre de gauche, soit vous dessinez directement une forme et l’interface l’interprète (cartouche, image, menu…) et la reformate pour vous (alignement sur la grille).

Visiblement l’orientation donnée à cette application est de privilégier la rapidité d’exécution tout en offrant de la rigueur. Il vous suffit de gribouiller dans une cartouche pour que l’interface transforme ça en texte (petit gribouillis) ou titre (gros gribouillis), ce nouvel élément est alors repositionnable et redimensionnable à l’aide de l’inspecteur. Plutôt que de vous faire un long discours, je vous propose de regarder la démo (sautez directement à 2″00′ et 3″30′) :

Comme vous pouvez le constater, l’interface est assez réactive (quoique le temps de latence est encore un peu élevé) et réagit très bien. Vous pourriez me dire que ce Proto n’est pas aussi sophistiqué que les autres applications (iMockups, OmniGraffle, SketchyPad, MoodBoard ou encore AppCooker), mais n’oubliez pas qu’il s’insère dans une gamme, qui elle-même fait partie d’une suite.

Il ne faut donc pas considérer Proto comme un logiciel isolé, mais comme une façon d’exprimer votre créativité parmi d’autres (Ideas permet de dessiner de façon plus libre, Collage permet de faire des montages, Debut permet de présenter ça à vos collègues…). De plus, cette collection d’applications pour tablettes est assortie d’un environnement de collaboration (Adobe Creative Cloud), forcément, puisque’il n’y a pas de système de fichier sur l’iPad (donc impossible d’exporter vos maquettes, sauf dans les nuages).

Pour avoir une idée plus précise du positionnement de cette offre, voici une mise en situation :

Au final, est-ce que je suis emballé par cette application ? Oui, car elle propose une approche tout à novatrice du prototypage. Est-ce que cette application va balayer la concurrence ? Non aucune chance, car pour le moment, Proto n’est à mon sens pas un produit fini. Le prototypage rapide est une méthode de conception très puissante si elle est:

• Itérative / collaborative (nous ne savons pas grand-chose de ce que va proposer le Creative Cloud) ;
• Simple d’accès, mais complète (comment faire pour récupérer une maquette Proto et l’enrichir sur votre ordinateur ?) ;
• Intégrée dans une chaine de création (sera-t-il possible d’exporter les maquettes dans Fireworks ou Photoshop ?).

Je suis donc plutôt réservé quant à l’utilité réelle de cette application qui ne soutient pas la comparaison face à Balsamiq ou FlairBuilder. Certes, ce ne sont pas les mêmes produits, mais si Adobe veut séduire et convaincre les concepteurs, il va falloir faire mieux. Ceci étant dit, je pense ne pas me tromper en disant que cette application a été compilée avec AIR pour faciliter la compatibilité Android / iOS et devrait donc être très facilement portable sur PC/Mac. J’anticipe donc une version desktop de Proto proposant beaucoup plus de fonctionnalités. À partir de là, la chaine de création sera complète et cette application pour tablette aura du sens.

Mais chaque chose en son temps, car Proto vient tout juste d’être annoncée. Cette application sera disponible dès le mois prochain pour les tablettes Android à 9,99$. J’attends avec impatience de pouvoir mettre mes doigts dessus…

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 :

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 :

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 :

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 :

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.

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.

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é.

Apple a lancé en fin de semaine dernière la dernière version de son système d’exploitation Mac OS. Beaucoup de nouveautés dans ce Lion (mode plein écran, Mission Control, Lauchpad…) et surtout des choix de conception audacieux (natural scrolling sur le pavé tactile).

Mais le changement le plus important concerne la gestion des fichiers avec les fonctions Auto-Save et Versions : Les changements sont automatiquement enregistrés (très pratique si vous fermez l’application sans faire de sauvegarde) et sont accessibles au travers d’une interface directement héritée de Time Machine :

Déjà implémentée sur les logiciels natifs comme Finder, cette gestion des versions est également disponible dans iWork (avec une petite mise à jour). L’air de rien, les équipes de Apple viennent tout simplement d’imposer un gestionnaire de versions dans une suite bureautique et de signer l’arrêt de mort du « Enregistrer sous…« .

Pour créer une copie d’un document, vous ne pouvez plus l’enregistrer sous…, il faut maintenant le dupliquer. De même, la sauvegarde est automatique (toutes les 5 minutes il me semble) mais vous pouvez forcer l’enregistrement d’une nouvelle version.

Je ne vous cache pas que ma première réaction a été de me dire : « Pourquoi vouloir changer un système qui fonctionne bien ?« . Mais en réfléchissant plus profondément, je me suis rendu compte que ce système ne fonctionnait pas si bien que ça et qu’il m’a fait perdre de précieuses heures de travail par le passé. Vous noterez que ce principe de gestion des versions remplaçant celui des fichiers a déjà été abordé par Alan Cooper il y a quelques années dans son livre About Face.

Autre conséquence de ce nouveau système : Tous les fichiers déjà créés sont verrouillés, pour les modifier il faudra donc les déverrouiller. Là encore ma première réaction a été de me dire : « Non mais de quoi j’me mêle, d’où il me verrouille mes fichiers l’autre ?« . Pourtant il s’avère que cette protection est très précieuse : Vous pouvez maintenant consulter à loisir de nombreux fichiers pour en créer / modifier un nouveau sans craindre la fausse manipulation.

Ce nouveau système de gestion des fichiers (en fait des versions) est donc une approche déroutante au début, contraignante, mais terriblement plus efficace, surtout combinée avec l’historique des versions. En y réfléchissant bien, on se rend vite compte que ce système n’est pas neuf, il est déjà en vigueur dans les suites bureautiques en ligne (Google Docs, Zoho…).

Précision importante : Les versions sont stockées sur votre disque dur, donc si vous envoyez le fichier à quelqu’un d’autre, l’historique des versions est perdu. Dommage, il aurait été intéressant d’avoir une option pour « attacher » les versions à un document et pouvoir ainsi parcourir l’historique si besoins ur un autre ordinateur.

Avec cette nouvelle gestion des versions imposée dans iWork, Apple est donc en train d’éduquer le marché de force au mode de fonctionnement des logiciels en ligne et des documents hébergés dans les nuages. Je ne suis pas devin, mais je parierais bien ma souris que la prochaine version d’iWork intégrera de façon bien plus profonde le service de collaboration iWork.com. Nous pourrions même anticiper une plateforme de collaboration en ligne plus poussée comme peut en proposer Acrobat.com (tout ceci ne risque pas de calmer les esprits entre Apple et Adobe !).

Et vous, est-ce que vous appréciez ce nouveau système ?