Je suis tombé hier sur un document dédié à l’étude de l’expérience utilisateur qui m’a soufflé à l’oreille le sujet de ce billet. Les anglophones, maîtres de la concision, disent d’ailleurs UX pour user experience.

Mais pourquoi faire des tests et étudier vos futurs utilisateurs ? La réponse en une (jolie) image :

Source : Introduction to agileUX

Vous l’aurez compris, l’objectif est ici de comprendre vos utilisateurs finaux et d’adapter votre produit en conséquence plutôt que d’espérer que l’inverse se produise. Attention toutefois à ne pas tomber dans le travers du tout-utilisateur : on peut aussi miser sur la learnability, quand peut se traduire par l’appropriation progressive de l’interface par ses utilisateurs (ils sont forts ces anglais hein).

Mais comment fait-on ? Comme pour toute bonne recette, rien ne remplace les fondamentaux (expérience, expertise), mais voici quelques ingrédients de base pour mieux embrasser le concept d’expérience utilisateur, et in fine, celle de vos futurs clients !

L’expérience utilisateur, c’est quoi ?

On voit bien le sens de ces deux termes mis bout à bout : expérience + utilisateur c’est s’immerger dans les pratiques, les habitudes et les réflexes des utilisateurs finaux face à votre produit (et en ce qui nous concerne, votre interface : site web, application mobile, etc.)

Le but : comprendre le chemin parcouru par l’utilisateur et l’objectif atteint, tout en étudiant les mécanismes émotionnels et techniques.

On distingue souvent l’utilisabilité (usability en anglais) de l’UX car ce dernier dépasse justement la simple observation technique et englobe les sphères du ressenti et de l’affect, puisque c’est bien l’expérience qu’on cherche à améliorer et à rendre agréable.

Mais l’expérience utilisateur ne se limite pas à mener des enquêtes généralistes sur les habitudes de navigation sur internet, ou à réaliser des études sur les besoins des internautes qui préfèreraient une application comme ceci ou comme cela : l’étude de l’expérience utilisateur passe par l’observation IRL (in real life comme on dit), qu’on peut scinder en quatre grandes étapes :

Observer, analyser, restituer, intégrer

L’observation est l’ingrédient essentiel, comme le chocolat dans la mousse au chocolat. Et c’est de la qualité de cette première étape que va découler la pertinence des résultat constatés et analysés.

Pour bien observer, il faudra donc :

• bien choisir ses sujets, qui doivent être représentatifs de votre cible (vos clients) ;
• les plonger dans un environnement confortable, le but étant de les observer en situation réelle, les participants devront oublier très vite l’objet de leur présence ;
• les solliciter le minimum possible pour ne pas les influencer : les questions doivent être posées par les participants et non pas par l’animateur, qui doit rester (dans la mesure du possible) dans son rôle de guide ;
• garder un maximum de traces de cette séance, au travers de notes et idéalement d’enregistrements vidéo.

On scrutera donc les comportements des utilisateurs, mais aussi les outils utilisés (comment, pourquoi, dans quel objectif), leurs processus cognitifs, leur organisation, leurs interactions avec l’interface…

Après cette phase d’observation, on pourra se baser sur toutes les données et informations collectées pour les analyser et ressortir des pratiques et des axes de réflexion communs : problèmes rencontrés, résultats atteints, questions posées, etc.

Dans le document sus-cité (tout en haut donc), ses deux auteurs expliquent avoir recours à des diagrammes et à des post-its it pour structurer les résultats de l’analyse, les hiérarchiser et les regrouper. L’objectif étant ici de souligner les grandes tendances, de les digérer et de les intégrer à votre interface pour la faire évoluer (et dans la bonne direction).

Car, on l’avait vu d’ailleurs dans le cas du cycle de vie d’une application mobile, les évolutions sont constantes dans la webosphère, et d’autant plus lorsqu’elle est mobile…

Lorsqu’on travaille dans le web (mais pas seulement j’imagine), il n’est pas rare d’être confronté à une multitude de fausses idées préconçues sur ce qu’est un bon site web en général et sur nos métiers en particulier. À commencer par ma douce maman, qui croit encore que je travaille dans « l’informatique ».

Dans un registre plus professionnel, il n’est pas rare non plus d’entendre « je sais ce qu’il faut pour mon site web, moi qui vais sur internet à longueur de journée… ». Faux, comme dirait l’ami Norman. Ce n’est pas parce-que je mange du pain trois fois par jour que je sais en faire (et j’ai essayé), ou parce-que je conduis mon automobile chaque jour que je peux aller voir mon garagiste et lui expliquer ce qu’il doit faire et comment. Pour le web, c’est la même chose : il faut avoir des compétences (fini les sites web créés du fond de ma chambre) et connaître et appliquer les règles du métier.

Ceci dit, j’ai moi-même débuté du fond de ma chambre, mais c’était il y a fort longtemps, quand on voyait encore des sites avec des GIF animés et des couleurs qui piquaient les yeux. Aujourd’hui, nous sommes huit à bosser sur des sites web mitonnés aux petits oignons, ergonomiques, accessibles et (notre projet chéri du moment) adaptatifs.

Bref, développer un bon site web n’est pas si aisé que ça, comme faire un bon pain ou changer la tête de delco de sa Fuego. Voici donc quelques exemples tirés de nos vraies vies.

Vous pouvez me mettre ce texte en rouge ?

Il arrive que le rouge, le vert ou le bleu soit notre couleur préférée. Ou qu’on trouverait sympa de voir ce texte en rouge. Et pourtant, dans certains cas, un pro du webdesign s’acharnera à vous expliquer (ô monde cruel) que ce n’est pas une bonne option. L’esthétique c’est bien, mais c’est surtout subjectif (vous aimez, votre voisin déteste) et les couleurs sur un site web sont l’un des ingrédients de base pour que votre site web soit lu.

Mais pourquoi s’acharner ? Pour trois raisons ma bonne dame :

• La lisibilité : un site web est fait pour être lu. Mettre du texte en jaune sur fond blanc est totalement illisible, même si vous aimez le jaune ou que cette couleur fait partie de votre identité visuelle. D’accord, cet exemple est un peu extrême, mais il vaut aussi pour toutes ces couleurs qui « bavent », comme le vert sur du bleu.
• L’accessibilité : un site web est fait pour être lu par tous, que j’ai 10 à chaque oeil ou pas. J’avais évoqué le sujet dans un précédent billet sur le web accessible.
• Le sens : un site web est fait pour être lu et compris par tous. Pour illustrer mes propos, rien de mieux qu’une petite capture d’écran du site d’un titre de la presse quotidienne régionale :

Cliquez sur moi pour me voir en grand

Le rouge est utilisé à deux endroits : sur un bouton à droite pour attirer mon regard sur « je crée un compte », et au-dessus du formulaire d’inscription. Pour le bouton, ça marche : on comprend bien que Le Parisien a très envie que je créé un compte. Pour le texte, c’est loupé. Je viens d’entrer mes identifiants et on me dit que tout s’est bien passé (« identification réussie avec l’adresse e-mail »)… en rouge !

Mon premier réflexe est de me dire que je me suis trompé (je vois la couleur rouge, red alert, avant de lire le texte). Et je vous avoue que c’est encore le cas aujourd’hui, même si je sais que ce texte en rouge va apparaitre chaque fois que je me loggue.

Et puis, soit dit en passant, j’aurais mis cette ligne en-dessous des deux champs d’authentification et pas au-dessus, mais c’est une autre histoire…

Trop d’infos tue l’info

Sous ce titre accrocheur se cache une dure réalité : un site étant fait pour être lu, il faut donc qu’il y ait… du contenu dedans. Et il n’est pas rare qu’on veuille y mettre des tas de choses, et justement trop.

La solution ? Prévoir des parcours utilisateurs entre les visiteurs de votre site web qui souhaiteront s’informer, ceux qui voudront acheter et ceux qui chercheront où vous trouver. Il faudra d’ailleurs prévoir ces différents parcours à la fois dans le menu de votre site et dans l’organisation de vos pages elles-mêmes en surface (ce qu’on voit) et en profondeur (les différents liens internes).

Si on reprend l’exemple du Parisien, un site où il y a par définition énormément d’infos, la première page écran (c’est-à-dire ce qu’on voit lorsqu’on arrive sur le site) s’en tire plutôt pas mal. Par contre, si on commence à descendre sur cette même page, on attrape le tournis : des menus en veux-tu en voilà, des animations, des pubs, des espaces pour les partenaires… Bref, on en oublierait presque ce pour quoi on est venu.

Ce site n’est pas le seul dans ce cas, et il est souvent compliqué de trouver un compromis entre ce qu’on veut et ce qu’on peut ajouter comme contenu, et comment.

Ces parcours utilisateurs peuvent d’ailleurs être tout bien prévus pour attirer le regard de vos visiteurs là où vous souhaiteriez qu’ils se rendent. Parmi ces options, on peut évoquer le call to action, comme sur le site du Parisien dans l’exemple ci-dessus : le journal nous incite forcément à nous inscrire, et nous déblaye le terrain pour qu’on n’ait pas à chercher trop longtemps.

Le webdesign c’est aussi et surtout ça : concevoir «  l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web « , comme le dit si bien Wikipédia. On pourra aussi se baser sur des études utilisant l’eye-tracking et le mouse-tracking, qui permettent d’étudier les comportements des internautes sur votre site web : où regardent-ils, où vont-ils cliquer, etc. etc.

Bref, je n’ai pas traité ici de tout ce qui fait du webdesign un vrai métier, mais on voit bien ici qu’il y a un écart (que dis-je, un abîme) entre les deux faces d’un même site : entre ceux qui le conçoivent et ceux qui le visitent.

Le responsive webdesign est la solution clé pour résoudre les problèmes d’adaptabilité de votre site web… mais pas uniquement : la question se pose aussi, voire surtout, pour les campagnes d’e-mailing.

Pourquoi ? Parce-que les Français s’équipent de plus en plus en smartphones et en tablettes, et sont de plus en plus connectés en situation de mobilité. À ce sujet, les derniers chiffres sont tombés hier dans Les Échos : les ménages français ont acheté plus de tablettes que de bons vieux PC.

Sachant que les deux premiers usages mobiles sont 1) s’informer et 2) lire ses mails, on voit bien ici tout l’intérêt de repenser sa campagne d’e-mailing pour qu’elle soit lue par ceux que l’on vise, plutôt que d’être jetée à la corbeille en un glissement de doigt.

Flash (back) sur l’adaptatif

Le web adaptatif, c’est quoi ? Grosso modo, le responsive webdesign (en anglais, vous l’aurez compris) désigne une interface web conçue pour s’adapter à l’utilisateur, et donc au matériel qu’il utilise pour se connecter.

Depuis quelques années, la logique du web s’inverse doucement : on commence à pouvoir penser le web comme un outil à la disposition des internautes et non l’inverse. Je dis bien « pouvoir penser » car l’ergonomie web ne date pas d’hier, seul le contexte technique, et le contexte tout court (le grand Internet et le fourmillement d’internautes connectés), permettent au webdesign(er) d’évoluer et d’être plus responsive.

D’ailleurs, si vous souhaitez en savoir plus ce qu’est le responsive webdesign, je vous recommande chaudement de lire Quand le web design vous répond au doigt et à l’oeil.

Exemple d'un e-mailing en responsive design : version desktop (à gauche) et mobile (à droite)

Et l’e-mailing dans tout ça ?

Justement, l’e-mailing et l’adaptatif devraient être aujourd’hui conçus main dans la main, together forever, bref ils sont aujourd’hui indissociables. On l’avait vu dans un précédent billet sur la petite histoire du mail : consulter ses mails en situation de mobilité devient monnaie courante, voire notre principal mode d’accès à notre boîte aux lettre électronique.

C’est en tout cas ce qui ressort d’une étude que nous avions relayé début janvier, dont on ne sait précisément quels sont les pays visés, je vous l’accorde. Ceci dit, je pense ne pas trop me risquer en disant que les détenteurs de smartphones en France consultent tous les jours leurs mails sur leur mobile, et même parfois uniquement selon le jour ou l’heure de la semaine.

Vous voyez où je veux en venir : le webdesign adaptatif prend tout son sens car il est presque impossible de prévoir sur quel modèle de smartphone, avec quelle taille d’écran, ou même sur quelle tablette ou sur quel ordinateur votre campagne d’e-mailing sera lue.

C’est donc à ce moment-là qu’apparait super-media query, ces requêtes qui permettent à votre interface de s’adapter à l’utilisateur et de lui apparaître lisible et attractive.

Exemple de test de compatibilité : e-mailing et responsive webdesign

Chez LunaWeb, nous avons tranché (chérie) pour une solution maison qui permet à nos clients d’écrire le contenu de leurs newsletters sans s’occuper du contenant, qui est prévu en responsive webdesign. Et hop, leurs newsletters, landing pages et liens internes à la newsletter sont tous adaptatifs ! En amont, nous avons bien sûr longuement bossé sur la compatibilité de ces e-mailings sur n’importe quel outil de messagerie, webmail, navigateur ou matériel utilisé en situation de mobilité… ou pas !

Alors bien sûr, ce travail de fond technique (ergonomie, webdesign, adaptabilité) est lui aussi indissociable du travail de fond en amont sur la forme à savoir le contenu, les destinataires, le meilleur moment pour l’envoyer et bien sûr le fameux call to action. Mais c’est une autre histoire, et n’ayez crainte, nous y reviendront…

Vous pourrez aussi lire à ce sujet Usabilité : l’iPad sous l’œil du microscope

Allez, 2011 est finie, l’occasion de vous souhaiter rapidement nos vœux pour 2012, nous aurons d’ailleurs l’occasion d’en reparler ici tout prochainement.

Voilà plus de cinq ans que ce blog est animé par la LunaTeam, évoluant en teneur et en longueur, au fil du temps et des envies. On se souvient notamment du billet (synthétique… enfin presque) de Gaël-Ian sur l’ergonomie de Mac OS X ou encore du petit journal de tranches de vie que nous concoctait Antoine, puis Guillaume chaque semaine.

Bref, depuis cinq ans, nous essayons d’expliquer notre métier, ce qui se fait de « bien », pourquoi c’est souvent utile et pourquoi c’est un vrai métier.
En 2011, nous avons mis sérieusement la main à la pâte. Voici un petit flash back de nos billets préférés, à découvrir ou redécouvrir.

Du web… en barre

Cette année, nous vous avons conté l’histoire des moteurs de recherche (comment ça marche, comment ils évoluent), des flux RSS (quelle est donc cette bête étrange que nous utilisons au quotidien) ou encore de l’eye-tracking, qui permet de comprendre les parcours de lecture des internautes (qui ne sont pas si évidents que ça en réalité !)

On vous a aussi expliqué ce qu’est l’HTML5 et les QRcodes, ces codes qui font fureur depuis longtemps dans d’autres contrées, et qui sont apparus il y a peu dans l’hexagone.

Côté cuisine, nous vous avons révélé les recettes de mère-grand pour mitonner des formulaires d’inscriptions qui remplissent leur objectif (qu’on y réponde !), ou encore comment réussir sa campagne AdWords.

Qui dit web, dit aussi web accessible, thématique chère à notre coeur, et qui commence à percer dans le monde du web (mon petit doigt me dit que l’engouement pour le référencement n’y est pas pour rien, parce-que les contenus accessibles sont aussi SEO friendly).

On vous a aussi plus récemment parlé du webdesign adaptatif, c’est-à-dire la possibilité de développer des interfaces web qui comprennent toutes seules (ou presque) sur quel support vous naviguez, et surtout sur quel écran.

Ce qui m’amène au prochain sujet : la mobilité.

Du web… mobile et social

Le cheval de bataille actuel des webdesigners férus d’ergonomie et de d’usabilité ? Les interfaces mobiles ! Les internautes de France et de Navarre s’équipent de plus en plus de smartphones et autres tablettes, mais les sites web (ou même les applications) qu’ils visitent restent encore difficilement accessibles, ou tant tout cas n’ont pas été conçues pour ces écrans et pour la navigation tactile.

Bref, nous vous avons décortiqué l’usabilité sur iPad et le cycle de vie d’une application iPhone, car le monde du web et a fortiori le monde mobile, sont en constante ébullition.

Côté étude, nous avons tiré le portrait des mobinautes français et des utilisateurs de tablette en général. On vous a expliqué pourquoi les sites web ne vont pas disparaitre de si tôt, même si on s’enthousiasme des plateformes et des outils du web social.

D’ailleurs, à ce sujet, nous sommes revenus sur ce qu’est le web social. J’ai même expliqué à ma chère maman ce qu’est l’e-réputation, et en trois volets s’il vous plait !
Madame Michu, boulangère de « A la bonne mie » (fictive malheureusement) nous a d’ailleurs apporté son aide grâce à son témoignage.

Nous avons aussi pris notre plume pour expliquer pourquoi la curation nous agace un peu, et nous avons expliqué les applications pratiques du web social (qui ne sont pas limitées à avoir des amis sur Facebook et à raconter ce qu’on mange sur Twitter), comme le social CRM, ou la gestion de la relation client grâce aux médias sociaux.

Bref, 2011 a été une année bien remplie pour le blog de Luna, en plus de l’être également pour la LunaTeam. En 2012, quelques surprises vous attendent… pour de nouvelles aventures ! D’ici là, nous vous souhaitons une excellente nouvelle année!

Fin d’année oblige, de nombreux professionnels s’emparent de leur plume bloguèsque pour faire le point sur ce qu’a été le web en 2011 et sur ce qu’il sera en 2012.

Deux billets, ou plus précisément deux recueils de points de vue, m’ont tout particulièrement intéressés cette semaine, à savoir What I Learned About the Web in 2011 du très bon A List Apart et Les douze tendances de consommation incontournables pour 2012 de Trendwatching.

La combinaison des deux est plutôt intéressante car le premier est plutôt orienté webdesigner / pros du web, alors que le second se concentre davantage sur les consommateurs. L’un n’allant pas sans l’autre, je vous propose, ladies and gentlemen, de vous en extraire quelques morceaux choisis.

Des webdesigners enthousiastes…

Sur A List Apart, les professionnels du web l’affirment : le web ne doit plus être considéré comme une plateforme, mais comme un service aux internautes, aux formes multiples. Un designer ajoute :

Wired Magazine called it the “death” of the web. I call it an evolution.

Pour d’autres, la clé réside dans l’adaptabilité des interfaces web : dans la même mouvance que les usages du web social, le web et ses interfaces doivent s’adapter aux utilisateurs, plutôt que l’inverse.
En 2011, le webdesign a pris son envol. Souvent oublié et considéré comme superflu, il est aujourd’hui de plus en plus intégré dans la réflexion en amont :

Most websites and apps launching today all are beautifully designed with care. People realize design isn’t just something you slap on your product right before it ships, but is something you take into account from day one.

On pourrait d’ailleurs constater que ce problème se déplace en partie sur les interfaces mobiles, qui sont aujourd’hui le cheval de bataille des webdesigners :

Mobile apps and websites have to be more than lite version of their desktop counterparts; they should have the conceptually same content and features as other platforms. Our job isn’t to remove complexity but to make complex information accessible—a challenge for the small screen, but an important one.

Je n’oublie pas bien sûr le responsive webdesign, qui est aujourd’hui l’une des composantes essentielles du webdesign, même si elle reste perfectible :

Unlike many design trends, (…) responsive design has an immediate positive impact on users. This really sets it apart as something more than a simple trend or technique. It’s now a fundamental tenet of web design.

… et des consommateurs chouchoutés

Parmi la dizaine de tendances évoquées par Trendwatching, une bonne partie touche à la mobilité et ses usages. J’en ai retenu trois, que nous avions déjà évoqué (au moins un peu) sur ce blog.

La première est « la culture de l’écran » : les écrans, déjà bien présents dans notre vie, vont nous suivre partout. Ceux des ordinateurs au travail, celui du smartphone entre deux trains, et celui des tablettes pendant nos temps « off » et de de loisirs.
Les écrans, quelle que soit leur taille, ne sont plus réservés aux geeks ou aux férus de technologie : l’offre de produits mobiles est de plus en plus variée et les prix de plus en plus accessibles. Et c’est sans compter sur le développement du web social (qu’on souhaite échanger des infos ou acheter des produits) ou de technologies comme le cloud computing, qui permet d’utiliser des applications sur n’importe quel ordinateur ou écran tactile. D’ailleurs, d’après Les Echos du jour : Près d’un tiers des internautes sont désormais « nomades ».

La deuxième tendance est le paiement sans contact, c’est-à-dire sans monnaie sonnante et trébuchante. Fini les poches pleines de pièces jaunes !
J’en avais parlé sur ce blog il ya peu : les banques et les différents acteurs du paiement en ligne comme Paypal s’intéressent de très près à la technologie NFC (Near Field Communication), qui permet de payer dans les magasins ou dans les transports en commun par exemple, tout simplement en passant son mobile à proximité d’un terminal. Il faudra quand même entrer un code (ou le compte bancaire risque de faire la tronche) et le tour est joué !

La troisième tendance est celle de l’accès instantané à des informations et à des connaissances, grâce à son smartphone. Trendwatching site l’exemple de Google Goggles, une application de reconnaissance d’images qui permet aux utilisateurs d’accéder à des infos complémentaires sur l’objet ou l’image devant eux. Si je me trouve face à une peinture de Frida Kahlo, et que je souhaite en savoir plus à ce sujet, il me suffit de la prendre en photo via cette application qui affichera ensuite des tas d’infos et des résultats complémentaires dans le moteur de recherche.

D’autres applications, comme celle d’Amazon, permettent de comparer les prix des produits vus en magasin à ceux du site marchand, en scannant tout simplement le code barre du produit. Je pense que vous avez aussi testé Shazam, application qui en a époustouflé plus d’un : vous n’arrivez pas à reconnaître le titre ou le chanteur de la mélodie qui passe à la radio ? Pas de problème, il suffit d’approcher votre iPhone près du haut parleur !

Loin de devenir des feignasses incultes et impatientes, ces innovations mobiles nous permettront d’en savoir toujours plus sur l’environnement qui nous entoure et d’interagir avec lui. D’ailleurs, une des dernières initiatives en date a été lancée par La Poste, qui combine à la fois l’utilisation du QR code, de la puce NFC et de la géolocation pour donner des informations pratiques aux personnes qui souhaitent poster une lettre (bureau le plus proche, levée du courrier, code postal, offres promotionnelles de commerces aux alentours, etc.)

En bref, beaucoup d’applications restent possibles… en route pour 2012 !

Dans le jargon du design et des ergonomes en herbe, « UX » n’est pas une bête étrange (qui se dirait « huxe ») mais qui signifie chez nos amis anglo-saxons, rois de la concision, user experience. Ou en d’autres termes l’expérience centrée utilisateur.

Je m’étais gardé sous le coude 7 Ingredients of a Successful UX Strategy publié sur le très bon UX matters pour vous en parler sur ce blog un de ces quatre… et bien nous y sommes !

Mettre l’utilisateur au centre des réflexions, débats, questionnements sur une interface est aujourd’hui es-sen-tiel. Il faut donc, comme dans tout projet bien ficelé (ou plans sans accrocs, comme diraient certains) mettre en place une stratégie qui soit réfléchie, posée, pertinente. C’est ce que nous propose de voir Paul Bryan, consultant américain en stratégie UX, dans le billet sus-cité.

Penser, échanger, s’informer

La première des étapes (et des difficultés) est de faire le point sur ses objectifs stratégiques. Une entreprise qui investit dans une interface, quelle qu’elle soit, et qui évalue l’importance de l’expérience utilisateur est un bon point de départ. Mais à quoi cela va-t-il servir pour son développement ?
On en revient aux basics : on veut y aller, oui ok, mais quel sont les bénéfices attendus ?

Heureusement, il n’est pas rare qu’on pense à passer par cette étape (on investit de l’argent, on veut savoir à quoi il sert). Le problème numéro deux, qui est beaucoup plus fréquent, est celui des échanges entre les équipes stratégiques (marketing par exemple) et celle dédiée au design : souvent, les infomations circulent mal, et souvent aussi, les deux métiers ne se comprennent pas. Et pourtant :

Detailed market-share data tells you what customers are currently buying from your organization versus what they’re buying from competitors—that is, your strong and weak product categories. Your UX strategy documentation should explain how, through design, the company can exploit its strengths and capture share in areas where performance has been lagging.

Mais ce n’est pas fini ! Pour tout bien comprendre les tenants et les aboutissants de son projet (et de sa stratégie), il faut aussi :

• effectuer un benchmark concurrentiel : regarder ce qu’il se fait autour de vous et ce régulièrement car le web (et donc ses interfaces) évoluent sans cesse,
• garder un oeil sur vos statistiques web pour mesurer la performance et l’efficience de votre interface.

Se projeter, comprendre, modéliser

L’une des pratiques les plus connues dans la phase de préparation et de développement d’une interface est celle des personas.

Les personas sont des utilisateurs étalons fictifs qui permettent aux UX designers de comprendre leur cible et de s’y adapter. Ces personas ne sont pas seulement décrites au travers de leurs habitudes de consommation (achète x fois sur internet) ou de leur catégorie socio-professionnelle : on leur donne un nom, des caractéristiques physiques, etc… à tel point que les personas prennent une forme humaine.

Dans son billet sur UX matters, Paul Bryan nous explique que les personas sont indispensables mais qu’elles doivent :

• se baser sur des données et des études pertinentes, pour définir un utilisateur étalon fiable sur le long terme,
• être « prescriptive versus descriptive », ou en d’autres mots de dépasser la description pure  et simple de cet utilisateur fictif pour définir une stratégie et un positionnement précis,
• être perfectionnées au fil du temps, plutôt que d’être abandonnées pour en créer d’autres.

Vient ensuite la modélisation des processus décisionnels de votre personas (hé oué) : en d’autres mots comment et pourquoi vos utilisateurs vont-ils utiliser votre interface.

A model is a construct for understanding a set of observed phenomena. An interaction model is a representation of the interactive behavior of key user segments—often in the form of a diagram or set of diagrams that summarize their behavior.

L’objectif : élaborer différents scénarios, combler les lacunes et souligner les points forts de votre interface pour qu’elle se moule le plus possible au(x) comportement(s) et aux motivations de votre cible.

Et après ?

Et bien après, ma bonne dame, on va penser aux nouvelles fonctionnalités à greffer sur cette chouette interface centrée utilisateur que vous nous avez concocté. Car qui dit stratégie dit prospective. Il faut donc se projeter sur les années à venir et proposer une feuille de route de ses évolutions.

Pour autant, ces fonctionnalités doivent être pensées en cohérence avec votre interface et non pas indépendamment :

Working on a bucket of independent features will not help a business reach its goals. Features should support a larger vision of what a design is becoming, with the goals of increasing customer conversions and engagement over time.

Et c’est sans compter sur les fonctionnalités qui suivent les usages en constant mouvement, liés à la mobilité et aux interactions sociales sur la toile…

Les applications mobiles, comme n’importe quel produit ou service, a son propre cycle de vie. Le connaître s’est avant tout identifier ses failles et l’adapter au mieux aux attentes des mobinautes.

D’après Josh Clark, auteur du livre Tapworthy: Designing Great iPhone Apps, ces mobinautes n’ouvrent en moyenne que vingt petites fois une application, et seulement un tiers des apps installées sont utilisées après 30 jours. A l’exception peut-être des applications d’utilité quotidienne comme la météo ou les lecteurs de flux RSS (encore que…). D’ailleurs, à ce sujet, nous avions publié quelques chiffres sur les mobinautes français en général, et les utilisateurs de tablettes en particulier.

Bref, la vie d’une application est globalement courte…

D’après cette infographie réalisée par UXmatters, le cycle de vie d’une application mobile se déroule en cinq étapes :

• La mise en vitrine de l’application sur l’App Store;
• L’ouverture de l’application pour la (toute) première fois (tou-toute première fois);
• La découverte et l’utilisation des fonctionnalités de base;
• L’approfondissement et l’utilisation de fonctionnalités plus avancées;
• La mise à jour.

À chacune de ces étapes, l’application concernée peut être supprimée sans pitié par son utilisateur si celle-ci ne remplit pas les conditions (représenté ici par des petits rond rouges où est inscrit « delete app »- oui, j’ai de bons yeux, merci).

Mais quelles sont ces conditions ? Pouf, pouf, voici donc un condensé des bons conseils prodigués par UXmatters.

La mise en vitrine

Qu’une application soit acceptée sur l’App Store ne vous assurera pas qu’elle soit 1) facilement trouvée par les mobinautes et 2) qu’ils aient envie de l’installer.

L’App Store est un magasin d’un format assez particulier puisqu’il ne permet pas aux mobinautes de toucher et d’expérimenter le produit, comme on le ferait dans les points de vente physiques (bon ok, peut-être pas à la boulangerie).

Pour faire son choix, l’utilisateur se base donc sur quatre types d’infos : le prix de l’application, sa description, les captures d’écran et les notes des autres utilisateurs.

Notre bon conseil : mettre en valeur et décrire précisément de quoi il retourne pour susciter l’intérêt du mobinaute et répondre à ses questions.

L’ouverture et la découverte

Ouvrir une application qu’on vient tout juste d’installer, c’est un peu comme quand on déchire le papier cadeau d’un paquet dont on sait à peu près ce qu’il y a dedans : si on est déçu, on passe à autre chose.

C’est donc LE moment où le mobinaute fait connaissance avec votre application et son interface, qu’il jaugera très rapidement.

L’utilisateur essaiera ensuite de tester les fonctionnalités de base de votre application. Par exemple, si je souhaite avoir toutes mes recettes de cuisine sur mon iPhone, je vais très vite chercher comment ajouter des ingrédients et comment rédiger une recette. Si je met plus de deux minutes (et encore) à trouver comment atteindre mon objectif, ou pire, si je me rend compte que cette application est seulement un recueil de recettes publiées par d’autres, je passerai mon chemin et j’essaierai une autre application.

Notre bon conseil : anticiper les fonctionnalités que vont rechercher les mobinautes en premier lieu et les rendre facilement accessibles, au risque d’être jeté à la corbeille vite fait bien fait.

L’approfondissement et la mise à jour

Si votre application passe le cap de la troisième étape, vous êtes près du but ! Car si j’ai trouvé, téléchargé, ouvert et testé (et approuvé) l’application, il y a fort à parier que j’essaierai d’autres fonctionnalités pour voir ce qu’elle a dans le ventre.

Si je reprend l’exemple du livre de cuisine, après avoir testé les fonctionnalités de base, je vais chercher comment partager mes recettes (par mail, sur les réseaux sociaux, etc.), comment les imprimer, comment ajouter des photos pour qu’elles soient toutes jolies, comment ajouter des tags personnalisés pour les retrouver facilement, etc. etc.

Et si je suis convaincu, je vais garder cette application sur mon iPhone et même (roulement de tambour) la mettre à jour. Cette dernière étape est essentielle puisque, même si votre application a passé les quatre précédentes sans encombre, il faut continuer à l’adapter (aux nouveaux OS par exemple) et à la perfectionner pour enrichir l’expérience utilisateur (par exemple, suivre l’évolution des usages sur le web social et proposer des fonctionnalités de partage).

Ensuite, la boucle n’est pas bouclée, ô monde cruel des applications mobiles : vous devrez continuer à faire vos preuves car vous retournez à la case départ pour les nouveaux utilisateurs, sans oublier de susciter encore et toujours l’intérêt de ceux qui l’ont déjà installée sur leur mobile.

Notre bon conseil : miser sur une interface ergonomique, sur l’étude de l’expérience utilisateur, et bien sûr sur le webdesign… que vous retrouvez d’ailleurs en fil rouge de chacune de ces différentes phases, de la mise en vitrine à la mise à jour.

Ce billet est fortement inspiré d’un article récemment publié sur UXmatters intitulé The Lifecycle of a Mobile App, a User’s Perspective.

Les salons sur le monde du numérique se succèdent et se ressemblent, en tout cas en ce qui concerne nos chères tablettes (pas de chocolat, ni de muscles d’ailleurs) car elles y tiennent une place de choix.

Presque tous les jours depuis quelques semaines, on voit apparaitre de nouvelles tablettes tactiles (retirées ou pas du marché) toutes plus « révolutionnaires » les unes que les autres.

Alors bon, si vous hésitiez encore sur le futur de la navigation avec les doigts, voici quelques chiffres qui devraient vous mettre en appétit.

Un petit aparté tout d’abord. D’accord, il s’agit d’une étude américaine. Pour autant, la France n’est pas en reste car l’iPad fait des émules à chacune de ses sorties, et puis nos deux cultures ne sont pas si éloignées que ça (sans parler d’influence). Je ne me risque donc pas trop en me disant qu’on peut regarder de près cette étude et nous projeter sur les usages à venir dans notre bel hexagone.

Cette étude nous apprend donc que :

• 89% des utilisateurs de tablettes se disent satisfaits ou très satisfaits;
• À tel point d’ailleurs que certains usages ont maintenant basculés sur ce support, plutôt que sur ordinateur. Parmi les utilisations citées, 72% des répondants préfèrent regarder la météo sur leur tablette, et 52% l’utiliser pour faire leurs achats en ligne;
• Ce support est majoritairement utilisé chez soi (58%), puis au travail ou à l’école (21%), et enfin dans les transports (16%);
• S’informer est le premier usage, puis consulter ses mails, jouer à des jeux, écouter de la musique ou encore guincher sur les réseaux sociaux;
• Les contenus les plus consultés sont les vidéos, la météo, les infos locales et des divertissements;
• Ce qui explique pourquoi la toute première application téléchargée (en nombre) est celle de la météo !
• Enfin les utilisateurs de tablettes préfèrent choisir des applications gratuites (21%). Les répondants affirment d’ailleurs avoir téléchargé en moyenne 26% d’applications payantes, pour un budget annuel de 53 dollars.

Ok, donc si je récapitule, le tablette-mobinaute aime bien se caler peinard chez lui avec son iPad (suggestion de présentation bien sûr) pour mater la météo et regarder des vidéos. Ce même utilisateur n’est pas encore prêt à payer, ou en tout cas pas trop cher, des applications pour se distraire et s’informer.

On peut expliquer ce « phénomène » non pas seulement par une radinerie ambiente, mais plus par – petitin - le modèle globalement gratuit du web (on a mal éduqué nos internautes) et – petideux – par des applications qui ne méritent pas encore qu’on débourse de l’argent pour les utiliser.

On en avait d’ailleurs parlé sur ce blog : les mobinautes sont globalement mécontents des sites et applications mobiles. Alors que paradoxalement, comme on vient de le voir, ils sont très majoritairement satisfaits de leur tablette tactile.

La solution, ladies and gentlemen, me paraît limpide : on peut tout d’abord se pencher sur ces usages mobiles et mettre le doigt sur ce qui pose problème. On peut aussi envisager des solutions techniques comme le responsive webdesign dont on a parlé sur ce blog en long, en large et en travers, ou presque…

Et vous, quels sont vos usages ?

Férus de tablettes et autres objets mobiles, chez LunaWeb on s’équipe, on teste, on expérimente. On développe aussi (passke s’amuser c’est bien mais bon, des fois on bosse). Nos dernières réalisations en date sont des applications iPhone totalement indispensables, comme celle de Radiance, qui vous fera un sourire joli tout plein.

Je vous propose de revenir aujourd’hui sur une série d’infos parues sur Pinch/Zoom au sujet de la mobilité et du responsive webdesign.
D’ailleurs, vous pourrez lire ou relire sur ce blog Quand le web design vous répond au doigt et à l’oeil, mais aussi le retour de Fabrice sur le bouquin de A Book Apart (qui est très très bien) à ce sujet.

Pourquoi que le web mobile on y croit

Vous l’aurez donc remarqué, in web mobile we trust, mais aussi in responsive webdesign. D’ailleurs ces deux concepts vont de pair : si on veut un web mobile qui soit tout bien comme il faut, léger rapide, ergonomique, intuitif… m’est avis que le web dans son ensemble se devra d’être adaptatif.

Les usages numériques en situation de mobilité sont loin d’être une tendance passagère peuplée de geeks : ils sont installés. Mieux encore, ils répondent à un besoin des internautes, et des gens tout court, de créer du lien et des interactions, de s’informer, d’échanger, de partager.

Même si les plateformes en ligne (comme Facebook) ou les supports (comme l’iPad) peuvent disparaître, les usages eux resteront. J’en mettrai même ma main à couper qu’ils continueront à évoluer en ce sens.

Pas encore convaincu ? Voici quelques arguments complémentaires :

• Les internautes utiliseront leurs smartphones ou tablettes pour visiter votre site web, que vous l’ayez prévu ou non,
• Dans le cas contraire, ceux-ci risquent fort de garder un mauvais souvenir de leur visite sur votre site, et par conséquent de votre marque/produit,
• Votre site « fait pour PC » va irrémédiablement devenir de plus en plus incompatibles avec les autres terminaux (téléphones, tablettes, TV connectées…), sans retour en arrière possible.

Un exemple ? Le terminal numérique le plus utilisé pour accéder au site de la marque Nike est la PSP (console portable de Sony).
N’oubliez pas que la France compte désormais 18 millions de mobinautes (= des gens civilisés qui ont un téléphone connecté à Internet, Source Médiamétrie avril 2011).

Vers le monde fabuleux du web adaptatif

Le web est adaptatif ou responsive, qu’il soit mobile ou pas. Le principe est simple : où qu’on soit et quel que soit le support qu’on utilise, le site qu’on souhaite visiter doit être navigable sans sortir les rames.

Par conséquent, l’essentiel réside dans les fonctionnalités à mettre à disposition, plutôt que de tout miser sur le support utilisé. Je le disais un peu plus haut : nous ne savons pas vraiment quels seront les terminaux de demain. On peut cependant tenter d’anticiper ces évolutions en misant sur une technologie (le responsive webdesign par exemple) qui soit tout terrain et, ça tombe bien, adaptative.
Le positionnement inverse serait de s’adapter au coup par coup, souvent après tout le monde, et de dépenser des fortunes dans de multiples versions compatibles.

Bref, ce sont les usages mobiles qui posent aujourd’hui problème. Avant, on pouvait plus ou moins faire en sorte que la page affichée s’adapte à la taille de l’écran des principaux ordinateurs. Aujourd’hui, ces écrans eux-mêmes ont des tailles multiples, sans parler des mini-ordi portables, des téléphones, des tablettes, mais aussi des consoles de jeux.

Et puis au-delà de la taille disponible pour afficher des informations, c’est aussi celle laissée à la navigation qui est d’autant plus réduite (sans compter qu’on navigue avec nos mains pleines de doigts). D’où l’importance du responsive webdesign, qui n’est pas parfait loin de là, mais qui est aujourd’hui la solution la plus pertinente.

Je terminerai sur un joli proverbe chinois (déniché dans cette présentation très intéressante), nostalgie de fin d’été oblige : « the wise adapt themselves to circumstances as the water moulds itself to the pitcher« … A méditer !

… ou presque ! Dans le jargon du métier on parle de responsive web design, ou en bon françois de web design adaptatif. Et vous allez voir que le titre de ce billet n’est pas si tiré par les cheveux qu’on ne pourrait le croire !

Mais avant de vous expliquer ce que voudrait dire ce « responsive », voyons voir de quoi il retourne quand on parle de web design. On voit bien qu’il s’agit de design pour le web (oui, je sens que vous me remerciez pour cet éclairage), mais pour être plus précis le web design dépasse la seule conception graphique et englobe plus généralement celle de l’interface (ce qui n’est pas tout à fait la même chose, vous en conviendrez).

Le web design repose sur quatre grands piliers (merci à Wikipédia pour nous avoir soufflé sa définition) :

• l’architecture interactionnelle,
• l’organisation des pages,
• l’arborescence du site,
• la navigation dans le site web.

Maintenant que nous nous sommes chauffés les mandibules avec ce premier élément de réponse, rentrons dans le vif du sujet…

Le pourquoi du comment

Si on devait résumer le responsive web design à deux mots, ce serait sans doute ceux-ci : réactivité et flexibilité. Ce « nouveau » concept n’est d’ailleurs pas uniquement réservé au monde du web : on parle aujourd’hui d’art interactif et de responsive architecture (pas pour le net mais pour les bâtiments cette fois-ci). L’idée sous-jacente de toutes ces nouvelles tendances est la même : l’utilisateur est au centre des préoccupations, et son environnement s’adapte à lui plutôt que l’inverse.

Et dire qu’il y a quelques années encore, on devait se lever pour changer de chaîne sur notre bonne vieille télé (et il fallait tomber pile poil sur la bonne fréquence) ! D’ailleurs, on pourrait très bien imaginer un système où le spectateur aura juste à penser à ce qu’il souhaite regarder pour que le programme voulu s’affiche tout seul. Je vous vois vous marrer doucement, mais nous n’en sommes pas si loin que ça…

Bref, au-delà du fait que nous devenons progressivement de grosses feignasses, le responsive web design répond à un besoin réel : internet est un univers mouvant, dont les usages, les supports et les habitudes de consommation évoluent et se transforment à toute vitesse. Qui aurait imaginé l’explosion des smartphones il y a quelques années ? Et c’est sans parler des tablettes…

Aujourd’hui, on navigue avec nos doigts, on joue vraiment dans un jeu (avec la Kinect), on peut tester des meubles ou essayer des habits chez soi avec la réalité augmentée… Bref, les films de sciences fictions n’étaient finalement pas si farfelus qu’on le croyait…

Prendre le train en marche

Je crois que nous sommes tous d’accord sur ce point : que le web du futur soit « web 3.0″ ou « web au carré » (web squared), la mobilité en sera l’une des composantes majeures. Pour autant, on continuera à cumuler tous les supports possibles et imaginables pour se connecter sur le net, en fonction du contexte. On utilisera son iPhone en attendant le métro pour aller au boulot, son ordi au travail, et son iPad en rentrant chez soi.

Mais voilà, tout ceci est très problématique pour ceux qui veulent communiquer sur la toile : comment faire pour que son site web soit visible de tous, sur n’importe quel support et quelle que soit la taille de l’écran (hé oui ! Tous les smartphones n’ont pas la même taille, ni les tablettes ou les écrans d’ordinateurs).

L’une des solution est de créer une déclinaison propre à chaque support (un pour l’ordi, un pour la tablette, un pour l’iphone), ce qui est coûteux et chronophage (hop, une modification effectuée sur l’une des versions devra l’être sur les autres). L’autre possibilité, c’est, je vous le donne en mille… le responsive web design mesdames et messieurs !

Cette solution repose essentiellement sur :

• des grilles fluides : pour faire simple, plutôt qu’une organisation figée des pages du site (telle taille et pis c’est tout), celles-ci s’adapteront automatiquement à l’espace qui leur sera accordé;
• des images flexibles : même chose pour les images dont la taille, mais aussi la disposition, s’ajusteront à l’écran utilisé;
• les requêtes de média qui permettent de vérifier quel est le support utilisé (ou plutôt la taille de son écran) et de s’adapter en conséquence.

Le responsive web design, c’est donc des contenus qui s’adaptent à leur environnement, au grand plaisir des inter-mobinautes. C’est n’est d’ailleurs pas seulement une question de taille de page flexible ou de texte qui s’agrandit ou non selon l’écran utilisé, c’est aussi une nouvelle manière de miser sur des interfaces ergonomiques : le responsive web design permet au contenant d’être réactif en faisant disparaitre ou apparaitre des éléments pour adapter la navigation au support (on pourra laisser plus d’éléments sur un site web « classique » et se concentrer sur l’essentiel pour sa version mobile).

Un petit exemple ? Jetez un œil à ce site, qui est non seulement très chouette mais aussi « responsive ».

Mais pas d’emballement, car rien n’est parfait dans ce bas monde ! Les possibilités techniques offertes par le responsive web design restent à parfaire… Et puis il faut aussi (et surtout) que nos chers navigateurs, qui ont toujours mis du temps à suivre les innovations, nous permettent d’utiliser pleinement le potentiel du responsive web design. Sachant que tout reste à faire en termes de mobilité (seulement un site web sur deux est accessible sur smartphone), nous risquons d’avoir du pain sur la planche… et tant mieux !