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 ?

Les boutons ont toujours été source de débats sans fin dans le petit monde du web design. Ces débats sont amplement justifiés dans la mesure où les boutons sont (schématiquement) l’élément d’interface qui favorise ou pénalise une vente en ligne. Un simple ajustement sur un bouton peut ainsi avoir d’énormes répercussions sur votre C.A. (The $300 Million Button).

J’ai dernièrement lu deux articles très intéressants publiés sur UX Movement à propos des boutons et de la manière d’optimiser leur emplacement :

• Why Users Click Right Call to Actions More Than Left Ones, où l’auteur explique que les boutons positionnés à droite sont plus cliqués car ils sont situés dans la zone terminale du parcours de lecture de l’oeil (ci-dessus, une capture d’écran provenant du site AgileWords) :

  

• Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right, où l’auteur explique que le bouton de validation doit être positionné à droite de celui d’annulation car cela évite à l’oeil de faire des aller-retour :

  

Ces deux articles sont suffisamment bien argumentés pour mettre fin au débat. Mais rassurez-vous, les débats continuent en ce qui concerne les boutons utilisés dans le commerce en ligne. Dans ce domaine-là, tout est question d’expérimentation et d’audace, notamment en jouant sur la taille, la forme et la mise en scène du taux de promotion :

• Call To Action Buttons: Does Size Matter?
• Can Unusual Shaped Buttons Increase Conversion?
• Showing Percent Discount on Cart Buttons

Mais en règle générale, il est tout de même possible d’isoler des bonnes pratiques :

• Localisez le bouton de passage à l’action dans une zone chaude (généralement en bas à droite) ;
• Utilisez des couleurs attrayantes (jaune, orange ou vert) ;
• Employez les bons termes pour convaincre et rassurer (pas de « Valider« ) ;
• Jouez sur les contrastes et l’espace blanc pour faire ressortir le bouton du reste de la page ;
• N’hésitez pas à utiliser un gros bouton et une grosse police de caractère (n’ayez pas peur de vendre) ;
• Aider l’utilisateur à anticiper les étapes suivantes pour le mettre en confiance.

Ces 6 conseils peuvent vous sembler relever du bon sens, mais ils sont très moins d’être appliqués partout. Pour avoir les arguments et les exemples qui vont avec, je vous recommande les articles suivants : Killer Buttons That Increased Conversion Rates, Call to Action Buttons: Examples and Best Practices, How to Design Buttons to Help Improve Usability, Web Design Trends: Call To Action Buttons et Good Call to Action Buttons.

Personnellement, je milite pour des boutons de bonne taille avec une forme classique, mais qui ne soient pas trop raffinés dans leur typo ou traitement graphique (simple et efficace). Mais encore une fois, tout est question de contexte (en fonction de l’univers graphique de la marque) et d’expérimentation (à vous de faire des tests A/B ou multivariables pour trouver la bonne combinaison).

Pour illustrer l’éventail des possibles et vous inspirer dans votre recherche, je vous recommande enfin cette très complète collection de boutons (qui date de 2007, mais reste d’actualité) : 107 Add to Cart Buttons of the Top Online Retailers.

Au final, existe-t-il une règle ultime en matière de conception de bouton ? Non pas réellement de règle ultime, plutôt un ensemble de bonnes pratiques de conception en fonction du contexte : fenêtre nodale, formulaire, commerce en ligne, application en ligne…

J’ai déjà plusieurs occasions de vous parler des design pattern library (Vive les librairies de modèles de conception d’interfaces et Et on reparle des bibliothèques de modèles de conception), par contre je n’avais jamais abordé les librairies qui concernent les interfaces mobiles. Un manquement impardonnable tant le sujet est chaud (Pourquoi iOS est plus disruptif que vous ne le pensez) et le besoin est pressant (2011, l’année du point de bascule).

Je vous propose donc ce matin de découvrir plusieurs sources d’inspiration pour concevoir vos interfaces mobiles, principalement des interfaces d’applications pour smartphones. Commençons avec Mobile Patterns, une collection d’interfaces mobiles réparties dans une quinzaine de catégories :

Il y a ensuite Pttrns qui propose un équivalent, mais avec une trentaine de catégories :

Il y a enfin LovelyUI qui propose moins de catégories, mais un système de tags bien pratique :

Il existe d’autres sources, mais ces trois bibliothèques devraient vous fournir tout ce dont vous avez besoin pour avoir une vue synthétique des meilleurs pratiques de conception d’interfaces mobiles. Ces bibliothèques présentent l’avantage de classer les interfaces dans des catégories, par contre elles sont très loin d’être exhaustives. C’est pourquoi je vous recommande également Cocoa Controls, une base de référence de l’ensemble des éléments d’interfaces des interfaces Mac (avec une section pour les contrôles iOS). Dans le même style, je peux également vous recommander Android Patterns qui propose une sélection d’éléments d’interface propres au système d’exploitation mobile de Google.

Si vous ne cherchez pas particulièrement des exemples de composants d’interface, simplement l’inspiration, je peux enfin vous proposer quelques collections d’interfaces : CSS iPhone, Make Better Apps, Tap Fency, Refined Mobile Design, Dribbble ou Ember.

Pour finir, si vous avez encore un peu de temps, faites donc un détour par Landing Pad (collection d’interfaces d’applications iPad) et AppSites (collection de sites web d’applications mobiles).

(via UX Movement et Mobile GUI)

Ça fait plus de 10 ans que je fais ce métier, et 10 ans que je m’amuse à effrayer mes clients avec le spectre du phénomène de banner blindness. Pour vous la faire courte, le banner blindness est un processus cognitif qui pourrie la vie des annonceurs : à force de surfer, les internautes développent un mécanisme inconscient de protection aux agressions visuelles des bannières publicitaires. Concrètement : les utilisateurs ne voient plus les bannières et n’ont même pas conscience de ne plus les voir (car elles sont masquées par la partie inconsciente du cerveau).

Ce phénomène n’est pas nouveau, car il a été observé pour la première fois en 1998 (Banner Blindness: Web Searchers Often Miss Obvious Links). Souvent décrié, ce phénomène a été largement confirmé (Banner Blindness: Old and New Findings) et décrié (OPA Unveils Biometric and Eye Tracking Research To Assess the Effectiveness of New OPA Ad Units). Je pense ne pas me tromper en disant que les études et statistiques importent peu, il faut simplement faire preuve de bon sens : après quelques années de pratique, les internautes apprennent à ne plus se laisser distraire par les bannières, que ce soit en lecture rapide, partielle ou complète :

Nous sommes maintenant en 2011, et le phénomène de banner blindness est toujours d’actualité, pourquoi ne le serait-il plus ?. Dans l’inconscient collectif, une page web est composée de contenus intéressants en son centre et de publicité en périphérie. Malgré tous les efforts déployés par les annonceurs pour rendre leurs bannières toujours plus spectaculaires (animations, vidéos, sons, évènement sur le reste de la page…), les internautes continuent toujours de les ignorer : Ad blindness remains challenge for marketers. Pire : même sur les nouveaux supports comme les réseaux sociaux, les internautes commencent à s’habituer à l’interface et à repérer les zones où il ne faut pas cliquer : Facebook Ads Perform Half as Well as Regular Banner Ads.

À partir de ce constat (ça clique plus), plusieurs solutions s’offrent à vous :

• Attirer toujours plus l’attention. Certains pensent qu’il faut passer en force avec des bannières toujours plus visibles (en jouant sur la couleur, la forme, l’animation…) et des offres toujours plus attirantes (en jouant sur le taux de promotion) : The 3 obstacles you must overcome to create an effective banner ad. Autant vous le dire tout de suite : je n’adhère pas du tout.
• Se fondre dans la page. L’idée est simple : plus vos bannières utiliseront des codes graphiques / ergonomiques proches de ceux de la page hôte, et plus elles auront de chance d’être confondues avec du vrai contenu (Banner Blindness: Optimize your online display advertising to stick out or blend in). Pour mémoire, c’est ce qui a fait la fortune de Google avec ces AdWords. Une approche louable, mais qui n’est pas répliquable à grande échelle (notamment pour des campagnes diffusées sur des milliers de sites).
• Ne pas se soucier du taux de clic. Partant du principe que les prospects ne peuvent pas cliquer sur une pub TV ou radio, certains pensent que l’important n’est pas de faire cliquer les internautes, mais de délivrer le message. Il est ainsi tout à fait possible de mener une campagne d’affichage classique avec bannières (pour une diffusion passive du message) combinée à une campagne alternative (pour une diffusion plus subtile). Les bannières seraient alors à considérer comme des outils de diffusion plutôt que comme des outils de captation de trafic : How to combat banner blindness. Un point de vue qui se défend, sinon vous devez remettre en cause la publicité sur les supports traditionnels (TV, radio, affiches, magazine…).
• Être plus pertinent. Il existe aujourd’hui des innovations technologiques qui permettent de faire des choses remarquables, comme par exemple le retargeting (Chango Discovers Seven Types Of Effective Retargeting) ou la personnalisation des campagnes en fonction du profil des internautes (Une campagne Facebook originale pour promouvoir le tourisme en Suisse). L’idée ici est d’investir pour améliorer le ciblage donc le taux de clic, les résultats sont généralement encourageants.
• Privilégier la qualité du contenu. Du contenu de qualité permet en effet d’attirer les internautes mais également d’améliorer votre référencement naturel.

Oui je sais, la dernière solution peut vous sembler hors sujet, mais elle est à mon sens la seule et unique solution viable sur le moyen et long terme. Tout le problème des campagnes d’affichage (et de mots-clés), est que le jour où vous arrêtez, il ne reste plus rien. Nous parlons donc bien de dépenses publicitaires. Par contre, le contenu de qualité permet de se positionner de façon durable sur un sujet donné, il s’agit bien d’un investissement.

Je n’ai pas l’ambition de rédiger un article complet sur l’intérêt de privilégier le contenu aux bannières. Par contre, j’aimerais attirer vote attention sur deux tendances qui vont certainement vous convaincre :

• Les parts de marché toujours plus importantes des navigateurs alternatifs (Firefox, Chrome, Safari…) qui permettent d’installer des extensions comme AdBlock Plus (plus de la moitié des utilisateurs).
• La montée en puissance des terminaux alternatifs (2011, l’année du point de bascule) dont les contraintes d’affichage limitent fortement l’impact des bannières.

À vous de choisir votre religion…

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

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 :

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 !