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.

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

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…

Ç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 !

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

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 :

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.

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 !