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

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

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

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

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

• Responsive Web Design: What It Is and How To Use It
• Understanding the Elements of Responsive Web Design
• Les Media Queries CSS3
• The best responsive web design examples and resources

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

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

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

Si vous me lisez régulièrement alors vous savez à quel point j’affectionne le minimalisme : Vive les sites web à page unique ! et Simplicité = Perfection. Je suis récemment tombé sur deux exemples d’applications en ligne tellement simple et épurée, qu’elles ne proposent pas réellement d’interface.

Le premier exemple est une application de facturation en ligne. Il existe quantité d’application dans ce secteur qui sont à la fois très simples à utiliser et très performantes (comme BlinkSale, FreshBooks ou encore Zoho Invoice), mais Billable.me pousse la logique encore plus loin puisque l’application n’est composée que d’un seul écran (une facture électronique) avec des champs éditables :

Une fois que vous avez saisi vos informations, vous pouvez imprimer la page ou générer un PDF. C’est tout. Certes, il n’est pas possible de suivre l’historique des factures éditées / réglées, mais le parti-pris de cette application en ligne est plus que radical.

Deuxième exemple avec Scri.ch, une application en ligne de dessin :

L’écran est entièrement blanc et le choix de couleur ou de brosse est très limité (il n’y en a pas). Une fois votre dessin terminé, vous l’enregistrez en récupérant l’URL courte dans la barre d’adresse de votre navigateur. Là encore, le parti-pris est extrême car il n’y a qu’une seule couleur, mais la réalisation est d’un minimalisme irréprochable.

Ces deux exemples sont pour moi l’illustration d’applications en ligne sans interface. Le principe est de n’afficher que le contenu (facture ou dessin) en réduisant les options au strict minimum. Encore une fois, ces choix de conception sont extrêmes, mais ils nous font réfléchir sur la démarche de simplification et jusqu’où il est possible de retirer des fonctionnalités. À méditer…

Je suis dernièrement tombé sur cet article publié sur R/WW : Eye-Tracking & User-Testing Made Easy with YouEye. Il y est question de la start-up YouEye qui propose des tests de eye-tracing à distance reposant sur la webcam des participants. En fait l’offre est un peu plus sophistiquée, car il propose de créer / gérer des sessions de tests à distance dont le format de sortie est un mélange de eye-tracking, capture vidéo (écran + participant) et heat map (en fonction des mouvements de la souris).

Ils ne sont pas les seuls à proposer ce genre de prestation puisque GazeHawk ou UserLytics ont des offres équivalentes. À priori ça ressemble à une arnaque, à postériori, le recours à des solutions pilotées à distance mérite réflexion. Nous sommes ainsi tous d’accord pour dire qu’une session de tests regroupant physiquement les participants et les observateurs dans une même pièce est bien plus enrichissante qu’une session à distance. Il n’empêche que les solutions de tests à distance peuvent s’avérer très utiles d’un point de vue quantitatif.

C’est en tout cas ce que je retiens de différents articles publiés sur le sujet : Unmoderated, Remote Usability Testing: Good or Evil? et Pros and Cons of Remote Usability Testing. En fait le débat ne se limite pas au eye-tracking et concerne tous les tests en rapport avec l’ergonomie informatique. Ceux qui en ont déjà organisé savent à quel point les sessions de test sont complexes à mettre en oeuvre. En théorie, les outils de communication avec partage d’écran comme Skype, WebEx, GoToMeeting… pourraient suffire à faire du test à distance de premier niveau, mais il existe des services en ligne avec une approche plus industrielle comme  UserZoom, Loop11, UserTesting, EyeUsability, Usabilla… (voir une liste exhaustive sur Remote Usability Tools). Ce type de services pourrait par exemple être utile pour vérifier des hypothèses et remonter des données quantitatives (délais et taux de complétion d’une tâche en particulier).

Par contre, dans le contexte bien particulier du eye-tracking, j’ai un peu plus de doutes. L’oculométrie en effet une discipline qui demande de la rigueur et de l’expertise. De la rigueur dans l’échantillonnage du panel ainsi que dans la configuration de la salle de test et le calibrage de la machine. De l’expertise dans l’interprétation des données. Je ne suis pas un expert en oculométrie, mais le peu que je connais de cette discipline est que les observations peuvent être trompeuses.

J’ai ainsi souvent recours aux analyses de sociétés spécialisées comme Miratech dans mes articles, leurs interprétations prouvent à chaque fois qu’il faut savoir lire entre les lignes. Mais ça ne veut pas dire que les tests à distance ne valent rien, simplement qu’ils doivent être exploités en fonction de la valeur qu’ils apportent à la réflexion. Comprenez par là qu’il est possible de collecter une grosse quantité de données à valeur ajoutée (commentaires oraux, déplacements de la souris, langage corporel, expressions faciales…) mais qui ne sont pas suffisamment rigoureuses pour justifier une décision impactante.

Ces tests à distance sont donc les compléments idéaux de tests « grandeur nature ». En combinant ces deux types de tests, vous aurez des retours terrain encore plus riches (cf. 6 Ways Eye Tracking Is Changing the Web).

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

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

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

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

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

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

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

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

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

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

-

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

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

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

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

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

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

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

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

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

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

Les wireframes sont un sujet sans fin dans la profession. Vous pouvez leur donner différents noms (storyboard, maquette fonctionnelle, zoning…), LA grande question de savoir quel est l’outil le plus approprié revient régulièrement (un peu comme le salaire des cadres ou le prix de l’immobilier). C’est un peu notre sujet « marronnier » à nous !

Bref, tout ça pour dire que ça fait longtemps que je ne me suis pas exprimé sur le sujet. Je pense ne pas me tromper en disant que la profession semble avoir unanimement adopté l’idée de faire de prototypage rapide. Le débat porte plutôt sur le niveau de détail, à savoir : quel est le bon niveau de détail d’un prototype ? J’ai complètement abandonné l’idée d’apporter une réponse à cette question existentielle, aussi je vous conseille plutôt la lecture de ces différents articles pour vous faire une idée :

• Wireframes are dead, long live rapid prototyping
• Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience
• Design Better And Faster With Rapid Prototyping
• Ultimate Guide to Website Wireframing

Il existe ainsi différentes écoles correspondant à différentes techniques et catégorie d’outils :

• L’utilisation du papier / crayons pour faire du sketching (je recommande l’utilisation d’un masque comme celui proposé par UI Stencils ainsi que d’un bloc note qui vous aidera à tracer des traits droits comme le Dot Grid Book) ;
• L’utilisation de bibliothèque de composants avec un outil de présentation comme PowerPoint ou Keynote (j’ai récemment découvert les Wireframe Tollkits de KeynoteKungFu) ;
• L’utilisation d’outils de prototypage rapide comme Balsamiq ;
• L’utilisation de solutions beaucoup plus puissantes comme Axure RP.

Pendant 10 ans j’ai utilisé ma propre bibliothèque de composants sur PowerPoint mais je pense avoir définitivement tourné la page sur cette méthode (trop laborieux et pas forcément adapté à un processus de création collaboratif). Après plusieurs tentatives j’ai également abandonné Axure qui est un outil très puissant, mais beaucoup trop lourd (à n’utiliser que pour les équipes de plus de 10 personnes et les projets de plus d’1 an).

J’ai récemment trouvé un bon compromis avec l’utilisation conjointe du papier et d’un outil de prototypage rapide. L’idée est d’utiliser le papier/crayon directement en réunion pour poser les grandes lignes des interfaces et interagir en séance, puis de formaliser ça dans un outil de prototypage apportant un peu plus de structure et permettant de pérenniser le travail (les feuilles de papier ne sont définitivement pas assez stables).

Concernant les outils de prototypage rapide, il existe plus d’une dizaine de solutions que nous pouvons classer en deux catégories :

• Les outils en ligne comme Mockingbird ou MockFlow qui sont très légers et parfaits pour faire de la collaboration (mais du coup un peu « légers ») ;
• Des outils à installer mais qui intègre une couche de collaboration (les deux produits les plus avancés sont FlairBuilder et Balsamiq).

Là où ces deux dernières solutions font la différence, c’est dans leur capacité à gérer les templates, à savoir les différentes couches qui composent votre interface et qui ne changent pas forcément à tous les écrans. FlairBuilder propose ainsi un principe de Master Pages assez intuitif :

Balsamiq va un peu plus loin avec le principe de Symbol qui sont à la fois plus souple et plus puissant (vous pouvez vous servir des symbols pour créer des composants réutilisables ou des masters). Cerise sur le gâteau, les symbols peuvent être instanciés et  contextualisés :

Au final j’ai donc une légère préférence pour Balsamiq qui est à la fois plus simple à prendre en main, mais également plus puissant. Le produit évolue vite et propose en plus un environnement collaboratif (MyBalsamiq). La question à laquelle je ne trouve pas de réponse est la suivante : puisque les maquettes créées sont en XML (plus précisément en BBML), pourquoi ne peuvent-elles pas être récupérées dans des outils de création graphique ? Dans mes rêves les plus fous, je verrais bien Adobe racheter Balsmaiq et l’intégrer à la Creative Suite… Dans tous les cas de figure, Balsamiq est une valeur sûre.

Impossible pour moi de conclure cet article sans mentionner deux formidables blogs qui listent des exemples de wireframes : Mockups To Go et Wireframe Showcase.

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

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

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

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

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

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

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

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