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…