Beau & Utile, le web design

comment et En quoi l’ergonomie et le design émotionnel favorisent-ils le taux de conversion d’un site ? emilien rosson

étudiant - master 2 communication digitale

ANToine lefeuvre

tuteur - Directeur R&D Novius

beau et utile, le web design.

SOM-

partie 03

partie 02

partie 01

REMerciements 07 INTRoduction 08 Le design numérique 10 l’internaute, ses usages Évolution des besoins numériques Le rôle du (web)-designer

Le design créateur de valeur 22 principes universels Engager les internautes suivre la tendance ?

23 30 35

Menaces et Récompenses 42 l’internaute, ses usages Évolution des besoins numériques Le rôle du (web)-designer

11 16 18

43 45 51

pRéconisations 52 conclusion 54 bibliographie

58

REMER-

Si vous avez ce mémoire entre les mains, c’est tout d’abord grâce à Antoine Lefeuvre. Il a pleinement rempli son rôle de tuteur, en m’accordant le temps dont j’avais besoin. Ces conseils étaient précis et avisés et m’ont incité à approfondir mes réflexions. J’ai découvert de nouvelles facettes de mon métier grâce à lui.

Je tiens ensuite à remercier l’agence Adaka et plus particulièrement sa fondatrice, Adeline Bouilloux, qui m’a accordé une interview très complète sur l’ergonomie et l’accessibilité du web.

Je remercie aussi Géraldine qui m’a supporté au quotidien, dans mes phases de stress et de démotivation. Je crois que je n’ai pas été très drôle tous les jours mais elle a su m’encourager.

Enfin, je remercie toute l’équipe de l’ISCPA et particulièrement Didier Lavanant pour son suivi, ses conseils et sa disponibilité.

Je fais enfin une dernière dédicace à mes amis de l’ISCPA, qui ont à leur manière contribué à ce beau projet.

7 Remerciements

J’ai une pensée particulière pour ma Maman qui a relu ce mémoire pour y chasser les moindres fautes. Elle a comme d’habitude été très efficace et réactive.

Welcome to the jungle Parce que je ne peux pas aller sur un site sans redimensionner ma fenêtre pour voir s’il est « responsive ». Parce que je sais que la typographie de Facebook est un Klavika Bold et que le Bleu de Twitter est un #3AAAE1. Parce que je suis connecté 8 heures par jour et que je ne cesse d’être émerveillé par de nouvelles interfaces, de nouveaux designs, de nouveaux principes de navigation... et que tout simplement : j’aime le Web.

Introduction

8

Le web est fun, il bouge, il s’anime, il réagit au moindre clic de souris, au moindre effleurement de doigt ! Sur le web, la créativité n’a de limite que la technologie. Même si cette dernière évolue incroyablement vite, offrant toujours plus de possibilités.

Les appareils, leurs connexions et les langages de programmation évoluent et se perfectionnent continuellement élargissant le champ d’action des créatifs qui ne cesse de s’étendre.

Autant de raison qui m’ont poussé à choisir le mode RVB plutôt que le CMJN, le 72dpi plutôt que le 300, les écrans plutôt que le papier !

Le web c’est avant tout des écrans de plus en plus nombreux, à la fois plus petits mais aussi plus grands. Cette démultiplication des supports résonne avec l’augmentation exponentielle du nombre de sites, d’interfaces et d’applications en tout genre. En quelques années, l’internaute est devenu un véritable aventurier, perdu au beau milieu d’une jungle luxuriante

de liens. Et comme dans la nature, il a appris à se méfier, à identifier les éléments fiables et à flairer les arnaques.

Dans cette jungle, la concurrence entre les sites fait rage et le taux de conversion est devenu l’indicateur de performance incontournable. Pour un site marchand, il correspond au ratio entre le nombre d’acheteurs et de visiteurs. Mais la conversion n’est pas forcément liée à un achat puisqu’elle prend aussi en compte un formulaire rempli, le téléchargement d’une brochure, l’inscription à une newsletter ou tout autre comportement possible lors d’une visite sur un site.

Le rêve de tout e-commerçant est de sortir du lot, de se démarquer de ses voisins sur Google. Contrairement à une boutique physique, sur le web, le consommateur peut facilement accéder à de nombreuses marques. Il n’aura donc aucun scrupule à changer plusieurs fois d’enseignes pour trouver ce dont il a vraiment besoin.

Je vous avais prévenu, nous entrons peu à peu dans une jungle hostile où les e-commerçants usent de tous les stratagèmes pour capter de nouveaux clients.

Je suis convaincu que le design et l’ergonomie sont des atouts puissants qui peuvent faire d’un simple site, une expérience agréable voire inoubliable pour son visiteur. Ils auront aussi l’effet de «booster» le taux de conversion.

Attention, je n’ai pas l’intention de faire une liste exhaustive des «trucs

Je me propose donc d’essayer de comprendre le fonctionnement de l’internaute, notre raisonnement, pour apprendre à créer des interfaces qui répondent précisément à nos attentes.

Je décide dès à présent de limiter ma réflexion et mes recherches à l’ergonomie et au design émotionnel.

Ce choix me permettra de traiter les deux facettes du design : le rationnel, l’organisationnel et l’utilisable d’une part, l’affectif le sentimental et le créatif d’autre part. Ces deux catégories correspondent finalement à celles que nous pouvons retrouver dans le cerveau humain.

Par ce cheminement, J’en arrive à me poser la question suivante : Comment et en quoi l’ergonomie et le design émotionnel favorisent-ils le taux de conversion d’un site ?

J’émets d’ores et déjà l’hypothèse qu’une structure parfaitement organisée à laquelle s’ajoute une interface agréable et émotionnellement engageante produira un site des plus efficace. J’estime aussi qu’en cherchant à apporter du plaisir à l’internaute, la popularité d’un site grimpera en flèche et que le taux de conversion

suivra cette tendance. Je crois enfin, qu’en engageant émotionnellement l’internaute, il est possible d’établir une relation dans la durée et donc une fidélisation.

Afin d’illustrer et appuyer mes propos, j’aborderai dans un premier temps le design digital d’une manière globale, en partant du cœur du sujet : l’internaute, pour arriver au web designer et son rôle.

Je détaillerai dans un second temps ce que le design émotionnel et l’ergonomie peuvent apporter à un site.

Je finirai par les récompenses mais aussi les risques liés à l’application de ces méthodes.

Maintenant, accrochez-vous à votre ordinateur, smartphone ou tout autre appareil vous permettant d’accéder à internet, je vous embarque dans mon monde.

En avant !

9 Introduction

et astuces» pour mieux vendre sur internet. Ce qui m’intéresse et me questionne ce sont nos réactions face aux interfaces web. Pourquoi sommes nous tant attirés par certains sites et insensibles face à d’autres ? Il y a forcément une part d’émotionnel là dedans !

LE DESIGN numérique

Le design numé10

1. L’internaute, ses usages

La chaîne américaine NBC News pointe d’ailleurs avec humour cette digitalisation de notre vie quotidienne dans un parallèle entre l’élection du Pape Benoit XVI en 2005 et celle du Pape François en 2013. (fig 1.1)

Il suffit de prendre le métro aux heures de pointes ou de croiser un groupe d’étudiants à la sortie de la fac pour se rendre compte que l’interface mobile

L’arrivée des téléviseurs et autres objets connectés contribue aussi à multiplier nos points d’entrée sur internet.

Pour Ethan Marcotte5: “ le Web a quitté le bureau et n’est pas près d’y retourner”. Nous allons devoir composer avec toujours plus d’appareils, de navigateurs, d’OS...

Cette multiplication des écrans, à la fois plus petits et plus grands, entraîne de profonds changements dans la conception des interfaces numériques.

Pendant des années, les web designers ont conçu des sites destinés aux ordinateurs de bureau. Ils utilisaient des dimensions fixes, le 800x600 puis le fameux 1024x768, visibles sur tous les écrans.

fig 1.1 Place Saint-Pierre le 4 avril 2005 (Luca Bruno/AP/SIPA)

Place Saint-Pierre le 3 mars 2013 (Michael Sohn/AP/SIPA)

Des supports toujours plus variés Notre vie numérique ne se résume évidemment plus à un ordinateur posé sur un bureau. C’est d’ailleurs un usage en stagnation comparé au nombre grandissant de mobinautes (+24% en 20122) et de tablonautes (+138% d’utilisateurs d’iPad en 20123).

1. 2. & 3. Source : Mediamétrie 02/2013 4. Source : International Data Corporation (IDC) 5. Web Designer à l’origine de la notions de Responsive Web Design.

11 LE DESIGN numérique

Il devient alors indispensable d’identifier les motivations, mais aussi les usages et les situations d’utilisation du web pour comprendre ces quelques 41,2 millions de Français.1

est partout ! Il se vend d’ailleurs plus de smartphones et de tablettes que d’ordinateurs dans le monde et ce depuis le dernier trimestre 2010.4

L’internaute, ses usages

On estime aujourd’hui que plus d’un tiers de la population mondiale est connectée à internet. Dans le monde occidental et en France, cette proportion est nettement plus impressionnante. Selon Mediametrie, près de 72% de Français de 11 ans et plus ont un accès au haut débit.

L’enjeu aujourd’hui est d’être vu sur un iPhone et sur une TV HD de 52” en offrant dans les deux cas une expérience d’utilisation optimale.

LE DESIGN numérique

L’internaute, ses usages

12

De nombreux web designers se sont penchés sur cette question. Leurs premières solutions furent de créer différentes versions d’un même site qui seraient affichées en fonction de l’appareil.

On a ainsi vu apparaître de nombreux site mobile (m.site.com ou site.mobi).

Mais peut-on réellement créer une expérience unique pour chaque navigateur, ou chaque appareil mobile ? Ce serait un travail démesuré et toujours incomplet puisque de nouveaux supports apparaissent chaque jour !

Outre cet aspect fastidieux, rappelons nous que le Web dans lequel nous évoluons est un Web social, un Web de partage.

Les sites circulent de mobiles à ordinateurs via Twitter, Facebook... les contenus sont “repinés” sur Pinterest, Tumblr... puis affichés sur des TV ou des tablettes...

Une version mobile d’un site conçue avec une largeur fixe de 320 pixels sera donc « incompatible » avec bon nombre d’appareils une fois partagée sur les réseaux sociaux.

On m’a d’ailleurs récemment Tweeté un lien vers un article depuis un smartphone : m.laredoute.fr/achat-Homme-Tshirt Lorsque j’ai ouvert ce lien sur mon ordinateur, je suis arrivé sur une page totalement inadaptée à mon écran, puisque le site avait été créé spécialement pour mobile (l’URL commençant par “m.” aurait du m’alerter !)

Je pense donc sincèrement que cette technique n’est pas une réponse viable au problème des différents écrans (et je n’aborde même pas la problématique du référencement qui devient ultracomplexe quand on démultiplie les redirections).

Mais d’autres méthodes et techniques de travail apportent de vraies solutions : Le mobile First Dans une ère post-PC, il semble presque aberrant de concevoir un design pour des terminaux en baisse d’utilisation, alors que d’autres sont en pleine croissance.

L’idée du Mobile First est de concevoir un site en commençant par la version mobile et en l’adaptant progressivement pour les écrans plus large. Luke Wroblewski, auteur du livre Mobile First est le premier designer à proposer cette nouvelle méthode de travail. Cette dernière va à l’encontre de la manière ordinaire, qui consiste à dégrader l’interface originale pour l’adapter à un affichage sur petit écran.

Techniquement, cela se traduit par la mise en place de deux feuilles de style.

La première feuille, basique, sera visible sur tous les supports : <link rel="stylesheet" href="styles.css">

La seconde ne sera accessible que pour les écrans plus grands (dont la largeur est supérieur à 1024 pixels) : <link rel="stylesheet" href="styles_big.css" media="screen and (min-device-width:1024px)">

Ce terme sur-employé est véritable phénomène de mode dans le monde du web design. Et pour cause : c’est une approche de conception qui tente d’offrir la meilleure expérience possible à l’internaute, quelque soit sa plateforme.

Un site conçu de manière « responsive » sera aussi efficace sur un smartphone qu’un écran 27" !

Pour le designer Ethan Marcotte : « nous pouvons nous approprier la flexibilité inhérente du web sans abandonner le contrôle dont nous avons besoin sur nos créations ».

Je vous invite à visiter le site foodsense.is et à réduire la taille de votre fenêtre.

Vous voyez comme le design s’adapte et se réorganise. Réduisez votre fenêtre jusqu’à la largeur de votre smartphone... Ce site, en plus d’être alléchant, est un bel exemple de responsive web design. Il dispose de 5 designs différents qui s’affichent en fonction de la taille de l’écran.

Tout ceci se fait sans changer de site, seulement grâce à trois ingrédients : • Une grille flexible.

• Des images aux largeurs flexibles.

• 5 feuilles de styles qui s’adaptent selon les écrans.

Cette multiplication des supports résonne avec l’évolution de notre usage d’internet.

Alors qu’il est relativement facile d’appréhender le comportement d’un internaute assis à son bureau et connecté en haut débit, il est nettement plus délicat d’imaginer les situations d’usage d’un mobinaute.

La problématique est donc de savoir dans quelle situation se trouve notre internaute et de quoi il a besoin au moment précis de sa démarche.

Il est important de préciser qu’avec la multiplication des accès à internet, l’internaute est aussi devenu de moins en moins tolérant. Temps de chargement, formulaire trop long, informations confuses... sont autant d’éléments qui feront exploser le taux de rebond1 d’un site.

Le taux de conversion est donc directement influencé par l’utilisabilité de l’interface et la facilité avec laquelle la navigation se fera.

Trois situations d’usage sont d’ailleurs identifiables lors de l’utilisation d’une interface en mobilité : Voici comment Chob les définit sur son blog/labo dédié au web : choblab.com La récurrence : Je cherche de l’information en temps réel (scores de foot, cours de la bourse, ventes aux enchères...)

L’ennui : Je veux du ludique, du réseautage (Facebook, Twitter), de la distraction

1. taux de rebond : Pourcentage de visites au cours desquelles l’internaute quitte le site dès la page d’entrée. Ce taux constitue un indicateur de la qualité des visites.

13 LE DESIGN numérique

Le responsive Web design

Le web, dans n’importe quelle situation

L’internaute, ses usages

Vu le manque d’espace disponible sur mobile, toutes les informations doivent être courtes et pertinentes. Cette méthode permet de créer des interfaces qui vont à l’essentiel. Elle permet aussi d’exploiter au maximum les ressources des plateformes mobiles : GPS, appareil photo...

L’urgence : J’attends une information immédiate liée à ma localisation (parking, horaires de métro, pharmacies...)

Même si votre interface ne rentre pas forcément précisément dans l’une de ces trois situations, il est important de hiérarchiser les fonctionnalités selon les situations d’usage.

Selon moi, le désormais célèbre service de musique à la demande Deezer est un bel exemple d’interface qui a su identifier les attentes des ses utilisateurs et leurs situations d’usage.

LE DESIGN numérique

L’internaute, ses usages

14

Créé en 2007, ce site de streaming s’est vite adapté : création de compte personnels, possibilité de créer ses propres playlists...

Dès 2009, le site s’exporte sur mobile et propose rapidement une version “offline” qui rend la musique de l’internaute accessible n’importe où. C’est en 2011 que Deezer signe un accord pour être intégré à Facebook et rend la musique toujours plus sociale.

Même si son modèle économique est souvent remis en question, Deezer a une très bonne connaissance des ses utilisateurs et de leur façon de se servir de son service.

La preuve avec cette campagne focalisée sur un usage bien particulier : l’écoute de la musique dans le métro. (fig 1.2) Deezer a su identifier les situations d’usage, les prioriser pour proposer un service le plus efficace possible.

Vous l’aurez compris, la connaissance de l’utilisateur est un enjeu crucial.

C’est d’ailleurs un des piliers du design d’expérience utilisateur (UX Design).

Une bonne maîtrise des attentes de l’internaute passe généralement par la création de personas.

Un persona est un archétype d’utilisateur. Il s’agit d’une personne fictive, représentative d’un ensemble d’individu, avec ses attentes, ses besoins, sa maîtrise de l’outil informatique...

On établi des personas à partir de la synthèse d’études sur les utilisateurs actuels et futurs. Les personas seront ensuite utilisés pour prioriser les fonctionnalités lors de la conception de l’interface.

L’internaute, ses usages

LE DESIGN numérique

15

fig 1.2 Affichages métro Deezer Agence Being (groupe TBWA)

2. Évolution des besoins numériques Mais qu’est ce qui a changé ?

Pour comprendre l’évolution de nos besoins numériques, remontons en l’an 2003. En 10 ans, nous sommes passés d’un internet 56k que nous utilisions en moyenne 6 heures par mois, au haut débit pour plus de 60 heures par mois.1

Évolution des besoins numériques

LE DESIGN numérique

16

Au cours de cette décennie nous avons vu naître près de 552 millions de sites internet.2 Les interfaces n’ont cessées de se complexifier, la navigation s’est codifiée et des notions comme l’utilisabitié ou l’expérience utilisateur sont devenues quasi incontournables pour prospérer sur la toile.

Nous évoluons sur un Web mature où internet est désormais en troisième phase d’adoption. Sur ce point le web est comparable au marché de l’automobile.

Je m’explique : aujourd’hui, plus personne ne se soucie de la fonction principale d’une voiture qui est de rouler.

Nous voulons tous des voitures confortables, esthétiques, qui vont nous aider à nous construire notre propre image de nous même... La situation est similaire sur internet ! Plus personne ne s’émerveille devant les fonctionnalités premières du web.

Le métier de web designer évolue et se complexifie en même temps que le web.

De nombreux termes viennent d’ailleurs compléter le champs lexical associé à ce métier. On parle depuis quelques décennies d’interaction homme / ordinateur (IHO).

Le terme « d’utilisabilité » fait aussi partie de toutes les discussions de web designers depuis quelques années.

C’est tout simplement le degré d’efficacité avec lequel des utilisateurs vont effectuer une tâche sur une interface.

Plus récemment les notions de design d’interaction, d’architecture de l’information ont fait leur apparition.

L’UX Design (User eXperience Design) est la notion la plus récente. C’est une discipline qui se base sur le bénéfice et le ressenti de l’utilisateur lors d’une visite sur un site ou une application.

Contrairement à l’utilisabilité qui est purement rationnel, l’expérience utilisateur se compose aussi d’une part d’émotions. L’UX Design à pour objectif de « faciliter le bonheur. » Décathlon et sa marque Quechua ne produisent pas d’interfaces web mais sont un bon exemple d’expériences utilisateurs réussies. La tente 2" offre un vrai plaisir et une excellente expérience du camping. (fig 1.3)

fig 1.3 tente 2" Quechua - Objectif : faciliter et optimiser l’expérience du camping.

1. source : http://dofollow.bz/?post/2012/01/10/Chiffres-cles-Internet-France-10-ans 2. source : http://www.accessoweb.com/Internet-en-2002-vs-2012

Le design centré sur l’utilisateur est une méthode qui permet de concevoir des produits interactifs basés sur l’expérience qu’ils proposeront et leur impact sur les visiteurs. Les résultats sont probants : meilleure acceptabilité de l’interface, meilleure mémorisation et surtout excellente fidélisation ! Pas étonnant que ce design soit si plébiscité par les designers actuels.

Pourtant, il semble difficile d’écouter à la fois les besoins de l’utilisateur, et nos propres envies, en tant que créatif. C’est la limite de « l’user centric design ».

Se limiter à l’écoute des internautes, c’est arrêter d’entreprendre, d’essayer,

Nous ne sommes pas des exécutants. Il faut savoir rester à l’écoute, mais aussi savoir dire non : l’utilisateur n’a pas toujours raison. L’expérience de l’UX Designer peut aussi lui permettre de décider de surprendre les internautes ciblés, en empruntant une voie à laquelle ils n’avaient pas pensé.

Le métier de designer web est passionnant, mais il faut savoir s’établir des règles, et s’imposer des limites. Chaque designer à sa propre créativité et son propre style. Ces derniers doivent servir le client, sans l’écraser ni être effacés.

17 LE DESIGN numérique

de faire des erreurs et de réussir brillamment !

Le Web-Entrepreneur Laurent Assouad cite d’ailleurs les propos d’un créatif qui à bien compris qu’il ne fallait pas se limiter aux attentes des utilisateurs : Steve Jobs.

Je vais le citer à mon tour : « Vous ne pouvez pas toujours demander aux clients ce qu’ils veulent, et essayer de le leur fournir, car au moment où vous leur proposerez ce produit ils en voudront déjà autre chose.

Vous pensez peut-être que Graham Bell a fait des études de marché avant d’inventer le téléphone ? »

Évolution des besoins numériques

Se focaliser sur l’utilisateur, une solution ?

Sur internet, l’internaute à l’embarras du choix. Vous l’aurez compris, avec l’exemple de Deezer, l’importance de bien connaitre son utilisateur permettra de se différencier de la concurrence en lui apportant LE service dont il a besoin.

L’UX Design, dont nous parlions à l’instant, apporte justement une approche de la conception des interfaces résolument tournée vers les internautes. Les designers d’expériences utilisateurs sont unanimes sur un point : bien que primordiale, l’utilisabilité seule, n’est pas suffisante pour garantir le succès d’une interface sur le web. Il est nécessaire d’identifier les utilisateurs que le site souhaite atteindre, leurs besoins et leurs caractéristiques spécifiques (âge, sexe, milieu socioprofessionnel, capacités et expérience numérique...)

3. Le rôle du web designer Le Web est un support récent, pourtant bon nombre de termes que nous employons quotidiennement sont issus de l’industrie graphique et de l’imprimerie vieille de plusieurs siècles. Le designer Ethan Marcotte m’a d’ailleurs permis de remarquer qu’en tant que web designer, nous nous imposons comme tout autre artiste, un support et des limites : la toile !

LE DESIGN numérique

Le rôle du web designer

18

Ethan explique ceci : « Un artiste commence avant tout par choisir un support.

Un peintre choisit une feuille de papier ou une toile ; un sculpteur choisira un bloc de pierre. Quel qu’il soit, le support est un acte créatif puissant : avant le premier coup de pinceau ou du burin, le support donne une dimension, une forme, une hauteur et une largeur, établissant les limites de l’œuvre naissante. » 1 Mais le web est instable, flexible et à la merci des internautes. Comme nous l’avons observé précédemment, la multiplicité des écrans empêche le designer de fixer des contraintes et va donc à l’encontre de ce concept de support.

Le web n’a pas de support ! Du moins, son support est si variable que le designer doit accepter que sa création puisse prendre différents aspects, que les couleurs qu’il a choisies soient réinterprétées par l’écran mal calibré d’un internaute, que ses typographies ne s’affichent pas correctement...

défi en matière de comportement pour un créatif.

Le web design, bien plus que de l’esthétique J’essaye petit à petit de démontrer que le web designer se situe à la frontière entre l’artistique et le rationnel. Si j’insiste sur cet aspect c’est que la notion de web design, en France est souvent utilisé pour le seul aspect de la création graphique.

Le mythe répandu du “créatif” nonchalant qui passe ses journées à surfer pour trouver l’inspiration perpétue d’ailleurs cette image réduisant ainsi le web design à un choix de couleurs et de typographies...

Le rôle du web designer est certes de faire “du beau”, des interfaces visuellement agréables et harmonieuses, mais sa fonction est avant tout organisationnelle et fonctionnelle.

La conception d’un site web ne peut se faire sans considérer son ergonomie, son accessibilité et son utilisabilité.

Nous sommes des designers. « Nous employons des méthodes artistiques pour visualiser une réflexion et un processus, mais à la différence des artistes, nous travaillons pour résoudre le problème d’un client, pas pour présenter notre vision du monde » explique le typographe allemand Erik Spiekermann.

Un des aspects importants du web est le fait de ne pas posséder les interfaces.

L’important est de profiter. Mettre de côté le mythe de la possession est un

1. source : Responsive Web Design - Ethan Marcotte - Editions Eyrolles

Il semble évident que le packaging designer qui dessine une nouvelle bouteille d’eau devra faire en sorte que cette dernière tienne dans la porte du frigo. Le designer mobilier se penchera lui sur le confort de la chaise qu’il crée.

Ces contraintes sont admises pour de nombreux domaines du design, celui du web ne déroge pas à cette règle !

Je pense enfin que tout designer doit être conscient que ce qu’il élabore aura un impact et perdurera dans le temps.

Je ne dis pas qu’il faut réinventer la poudre à chaque fois que l’on débute un projet, mais un créatif se doit d’explorer

perrier

LE DESIGN numérique

19 Le rôle du web designer

Cette citation me permet de réaliser un parallèle entre le design global et le web-design.

Un designer quel qu’il soit apporte une solution à un problème en tenant compte d’un certain nombre de contraintes. Il se pose des questions fondamentales sur les objectifs à atteindre et les transforme en solutions techniques, visuelles, structurelles...

get 27

Design = Dessin + Dessein

Jugez par vous même la « puissance » du design et l’empreinte que celui-ci peut laisser sur nous. Je suis sûr que vous identifierez aisément les marques de boissons représentées en ombres chinoises ci-dessous :

coca cola

« Pour la plupart des gens, design signifie vernis. C’est de la décoration d’intérieur, la housse des coussins du canapé.

Mais pour moi, rien ne pourrait être plus éloigné du sens de design. Le design est la raison d’être d’une création humaine qui finit par s’exprimer dans toutes les couches successives d’un produit ou service. »

les frontières de l’esthétique, d’expérimenter sans cesse, pour laisser un projet efficace dont il pourra être fier.

J’aime la vision idéaliste et ultra-positive que développe le designer Mike Monteiro dans son livre Design is a Job : « Vous avez plus de pouvoir que vous ne l’imaginez [...] Non seulement un designer peut changer le monde, mais il doit le faire.

C’est le meilleur métier du monde ! Alors faisons le bien. »

orangina

Je citerai également ces mots de Steve Jobs qui englobent parfaitement cette vision à la fois rationnelle et artistique de l’univers du design :

Concevoir des interfaces plus qu’utilisables

Le rôle du web designer

LE DESIGN numérique

20

Nous l’avons vu dans la première partie, l’aspect technologique d’une interface ne nous concerne plus. Nous ne nous émerveillons pas de pouvoir envoyer un mail, de communiquer avec un ami à Shanghai ou de trouver la recette du biryani de poulet en 2 clics.

L’utilisabilité de l’interface est donc le critère le plus basique.

Si l’internaute ne parvient pas à ses fins avec une interface, il la laissera tout simplement “tomber” pour en trouver une autre plus complète, plus fonctionnelle.

Aaron Walter est un designer qui a vraiment influencé ma façon de travailler.

Il a adapté la fameuse pyramide des besoins de Maslow en fonction des besoins des internautes. (fig1.4) Les aspects de fiabilité et d’utilisabilité sont donc des besoins primaires et indispensables pour que l’internaute reste sur un site. Pourtant ce qui fera la différence avec un site concurrent ne réside pas dans ces 2 points ! En effet, pour se démarquer il doit offrir une expérience singulière à l’internaute.

Un styliste cherche à sublimer la beauté et pas seulement à habiller ; un restaurateur veut régaler ses convives plus

que de les nourrir... Le web designer doit, lui aussi, s’inscrire dans cette logique. Il s’agit de distraire l’internaute, de l’amuser ou de l’émouvoir. Ces points entraîneront un impact émotionnel positif sur celui-ci, ce qui influencera son acte d’achat et/ou son retour sur le site.

Vous l’aurez compris, l’intérêt d’une telle démarche n’est pas le simple plaisir du graphiste puisque son action se fera sentir sur l’engagement des internautes et donc sur le taux de conversion du site.

Nous sommes donc prêts à aborder en détail les éléments qui permettent d’offrir une expérience unique aux internautes.

agréable

point de différenciation

Nos interfaces sont destinées à être utilisées par des internautes, ces êtres humains dotés d’émotions ne vont évidemment pas se comporter comme des machines sur internet. Ils vont agir suivant leurs sentiments et c’est probablement là que se trouve le cœur de l’enjeu de la création d’une interface homme / ordinateur.

Le designer doit créer avant tout pour l’Homme !

UTILISABLE fiable fig 1.4 Pyramide des besoins de Maslow, adaptée aux interfaces web par Aaron Walter, dans son livre Designing for Emotions.

Le design crĂŠateur

1. Principes universels

Nous le savons, les internautes naviguent très rapidement, leur attention est limitée et le moindre écueil se solde par un clic, sur la tant redoutée croix rouge.

Marc Van Rymenant, spécialiste en neurosciences, compare lors d’une conférence pour Paris-Web 2012, l’internaute à un enfant. Son concept est très simple : « We want more enjoy & less work. » Par exemple, si on demande à un enfant de choisir entre deux cookies, il prendra quasi systématiquement le plus gros.

En revanche il choisira la plus petite pile de vêtements à ranger ! (fig 2.1)

fig 2.1 « We want more enjoy & less work »

Ainsi, dès que notre design implique une prise de décision avec plusieurs choix possible, il faut prendre en considération cette loi et minimiser au maximum le nombre d’options pour éviter erreurs et hésitations.

23 Principes universels

Simplifier pour mieux capter !

L’objectif du designer est de faire réagir l’internaute le plus simplement et le plus rapidement possible au stimuli qui se présente à lui. Le site doit lui fournir un maximum de plaisir avec un minimum d’ennuis pour arriver à ses objectifs.

Tout est une question de simplicité de page. Plus elle est simple, moins elle comporte d’éléments et plus le temps de réactivité de l’internaute sera court.

Il existe d’ailleurs la loi de Hick, célèbre dans le milieu du design d’expérience utilisateur, qui dit : « le temps requis pour prendre une décision est une fonction du nombre d’alternatives possibles ».

LE DESIGN créateur de valeur

Chaque internaute est unique. Son bagage émotionnel et sa maîtrise de l’outil informatique lui sont propres. Les réactions face à une même interface peuvent ainsi être très variables selon l’utilisateur.

Pourtant le designer peut se fier à un ensemble de principes universels qui guideront sa création.

Je tiens toutefois à préciser qu’elle ne s’applique pas dans toutes les situations. Il existe aussi sur le web, des décisions complexes qui nécessitent une réflexion plus profonde qu’un simple choix dans un menu.

Par exemple, une tâche administrative , un formulaire, ou une opération nécessitant de la lecture et réflexion, sollicitera toute l’attention de l’internaute. Il sera ainsi plus enclin à faire un choix précis et le nombre de réponses n’aura que peu d’importance.

En regardant cette page d’accueil, on remarque que ce n’est pas uniquement le nombre de boutons qui la rend efficace. La forme, la couleur et la position des boutons contribuent à inciter l’internaute à s’inscrire.

Le désormais célèbre réseau d’épinglage d’intérêts « Pinterest » l’a d’ailleurs très bien compris. Son objectif est de générer des inscriptions. La page d’accueil est simplifiée au maximum

temps de reponse

Principes universels

LE DESIGN créateur de valeur

24

Voici d’ailleurs une représentation graphique de la loi de Hick : l’impact du nombre de réponses est moindre si le temps de réflexion est plus long (la courbe tend vers l’asymptote) (fig 2.2) Mais de manière générale, notre attention est une ressource très limitée. Ainsi les comportements des utilisateurs seront d’autant plus imprévisibles que les choix seront variés.

pour inciter à l’action et ainsi ne pas disperser l’attention de l’internaute.

Ce design à pour effet d’améliorer le taux de conversion.

Jugez par vous même la simplicité (et l’efficacité) de cette page. (fig 2.3) Tout le superflu à été éliminé ! L’internaute dans une logique « coût-avantages » considérera que les bénéfices potentiels sont largement supérieurs au petit effort nécessaire à l’inscription.

fig 2.2 Représentation graphique de la loi de Hick

nombre de choix

Le cerveau humain est habitué à prendre des décisions. Inconsciemment, nous cherchons constamment des indices qui guideront nos choix. Alors qu’en voiture nous nous arrêtons en voyant un panneau octogonale rouge, un triangle, lui, nous signifiera instantanément un danger. Ces réactions dites « acquises » sont devenues de réels automatismes pour tous les automobilistes.

Notre cerveau réagit de la même façon sur internet : il doit faire des choix.

Sur le web, notre champ d’action est nettement plus réduit que dans notre vie quotidienne.

Nos actions sont dans la majorité des cas limitées à deux possibilités : un clic (sur un bouton ou un lien) ou une interaction (remplir un formulaire, sélectionner un élément dans une liste...)

Il s’agit donc, sans communiquer verbalement avec l’internaute, de lui faire

comprendre qu’il peut cliquer ou interagir avec tel ou tel élément et ce, bien évidement, sans qu’il ne se pose la moindre question !

La forme, la couleur et la position des éléments sont là pour l’orienter dans son choix et dans la direction précise que vous voulez lui faire prendre.

La loi de Fitts est pour moi une des règles de base de l’ergonomie numérique. Elle n’est que bon sens et dit ceci : « le temps requis pour atteindre une cible est proportionnel à la distance entre le point de départ et la cible, et inversement proportionnel à la taille de la zone de destination. » Donc plus le bouton est gros et proche de la souris, moins l’internaute met de temps à l’atteindre et plus vite il atteint l’objectif fixé pour le site. Cette loi est à prendre en compte dans la hiérarchisation des éléments d’une page web.

Principes universels

Cliquez moi !

25 LE DESIGN créateur de valeur

fig 2.3 La page d’inscription de Pinterest va à l’essentiel.

Principes universels

LE DESIGN créateur de valeur

26

En plus de sa taille et de sa position, le bouton doit faire comprendre qu’il est cliquable. Et là encore le défi est bien plus important que pour votre microonde ou votre autoradio !

Vous l’aurez compris, taux de conversion rime avec prise de décision.

L’internaute doit faire un choix, à nous de le guider pour atteindre notre objectif !

Il s’agit de donner intuitivement à l’internaute l’indice que cet élément est cliquable. On parle de l’affordance d’un bouton : c’est sa capacité à suggérer sa propre utilisation.1 Certains éléments d’une page web sont immédiatement identifiés comme cliquable car notre culture du web à crée des « conventions d’usage ». Un logo est cliquable et ramène à l’accueil, du texte souligné en bleu symbolise un lien cliquable...

Prendre une décision

Pour tous les autres éléments, c’est au designer de signifier leurs usages, par la couleur, le style graphique, la forme, le libellé mais aussi les changements d’état au survol...

Ce fut un enjeu pas toujours bien appréhendé pour les premières interfaces tactiles. Nombre d’entre elles sont sorties avec des boutons "invisibles" ou des éléments apparemment cliquables qui ne l’étaient pas.

Voici des boutons que l’on a immédiatement envie de cliquer :

by Delacro

Dans une optique de conversion, la prise de décision est un élément capital. C’est l’utilisateur et lui seul qui décide d’ajouter un article à son panier, de s’inscrire à une newsletter ou de créer son compte sur un forum...

Or, on considère que seule 5%2 de l’activité cérébrale d’un internaute face à un écran est consciente. Une expérience utilisateur se joue donc essentiellement dans la partie non-consciente du cerveau.

La décision provient d’un « balayage superficiel » de la situation qui suscite un ressenti rarement conscient et explicable.3 C’est notre instinct qui guide la plupart de nos décisions.

Notre intuition vient nous aider à faire un choix quand notre logique ne trouve pas de solution. Elle nous aide aussi quand la quantité d’informations est trop importante ou que le temps manque pour une analyse rationnelle complète des possibilités. Quoi qu’il en soit, que la décision soit importante ou non, réfléchie ou non... l’intuition y participe. Celle-ci est directement liée à nos émotions, elle donne une sensation d’évidence à faire tel ou tel choix. Notre rôle de designer est donc de générer les bonnes intuitions.

by Sunbzy

1. Source : Wikipedia (fr.wikipedia.org/wiki/Affordance) 2. Source : www.etopia.be - PUBLICITÉ, « PART DE CERVEAU DISPONIBLE » 3. Source : www.e-marketing.fr/Breves/ - Etienne Bressoud

Les apparences et les perceptions que nous en avons sont donc décisives.

Le philosophe Kant à souvent cherché à démontrer que le beau était basé sur une perception et un jugement propre.

En effet, puisque pour juger de l’esthétisme d’un objet (ou d’une interface) on fait intervenir notre sensibilité, le jugement est forcément subjectif.

Or, il dit aussi que l’on prétend souvent à l’universalité de notre jugement. On ne dit pas « cela me plaît », mais « c’est beau. » Comme si la beauté était une propriété de l’objet admise de tous.

Je retiendrai donc cette phrase de Kant: « Le beau est ce qui plaît universellement, sans concept. » A partir de là, nous savons que nous pouvons créer des interfaces harmonieuses et donc agréables pour une majorité d’individus.

Donald Norman, professeur émérite en sciences cognitives fait remarquer qu’un beau design crée une réaction positive de l’affect. Qui dit réaction positive de l’affect dit meilleure capacité cognitive et dans notre cas, prédisposition à utiliser une interface.

On parle d’ailleurs « d’utilisabilité anticipée », c’est à dire qu’en arrivant sur un site visuellement attrayant, notre cerveau sera prédisposé à l’utiliser et à mettre en œuvre toutes les neuroconnexions nécessaires pour y arriver.

Un beau design aidera l’internaute à résoudre son problème ou à atteindre son objectif. C’est un enjeu encore plus important sur internet que dans le monde physique. Rappelez vous la partie que nous avons abordé sur les comportements des internautes : Alors que nous aurions tendance à persévérer avec un objet physique pour atteindre notre objectif, sur internet nous « zapperons » presque immédiatement pour un site plus agréable.

J’affirme donc qu’un beau design réduira le taux de rebond ; et c’est la première étape vers un meilleur taux de conversion !

Les niveaux du design Le professeur Donald Norman à décomposé notre cerveau en trois parties. Son analyse met en évidence une première partie liée aux réactions et aux actions automatiques (le niveau viscéral), une seconde liée à notre comportement quotidien (le niveau comportemental) et une dernière contemplative (le niveau réflectif).

Il associe à ces trois parties, trois niveaux de design qui vont impacter notre expérience.

Le niveau viscéral : Ce niveau correspond à notre réaction immédiate face à une interface. C’est l’apparence, les sensations, les ressen-

27 Principes universels

Depuis le début de ce mémoire, je m’efforce de vous démontrer que le web design c’est avant tout du fonctionnel, de l’utilisable. Mais c’est aussi du beau et de l’agréable. Il s’agit de faire cohabiter esthétisme et utilisabilité.

Imaginez vous, vous présenter à un entretien en pyjama sous prétexte que seules vos compétences comptent...

Un site ultra fonctionnel ne rencontrera pas de succès non plus, s’il reste en pyjama !

C’est une réalité, une belle interface fonctionnera mieux !

LE DESIGN créateur de valeur

Le beau

tis que l’on a dès le premier coup d’œil.

Ce que Kant définissait comme notre jugement du beau vient de ce niveau viscéral.

Pour qu’un site ait un impact positif sur le niveau viscéral, c’est son apparence qu’il faut travailler.

Le niveau comportemental : Ce niveau concerne la fonction du site.

Ici l’apparence est secondaire, l’objectif est de répondre aux besoins de l’internaute. Travailler sur l’aspect comportemental c’est se focaliser sur l’utilisabilité et la qualité de l’expérience de l’utilisateur.

Principes universels

LE DESIGN créateur de valeur

28

Le niveau réflectif : Ce niveau concerne l’aspect émotionnel et l’impression générale que l’on a d’une interface. Il répond à un besoin d’image. C’est un niveau raisonné.

Le designer doit être conscient que les interfaces qu’il crée répondent à des besoins émotionnels plus importants que les fonctionnalités elles-mêmes.

Un utilisateur de Pinterest tirera bien plus de bénéfices à interagir sur ce site que le simple fait d’épingler ses images favorites. C’est l’image qu’il va renvoyer qui le pousse à utiliser ce réseau plutôt qu’un autre.

Chacun de ces niveaux de notre cerveau joue son rôle dans l’expérience que nous aurons avec l’interface.

L’équilibre Cette idée de « beau universel » m’amène à vous parler de formes et de proportions.

Un constat général en matière de web design est qu’en tant qu’êtres humains, nous cherchons sans cesse à trouver des repères. Ces repères apportent une stabilité et un équilibre visuel que notre inconscient perçoit comme rassurant.

Ils sont présents partout. La nature regorge d’éléments équilibrés, le corps humain lui même est un bel exemple de proportions harmonieuses (fig 2.4)

fig 2.4 Léonard de Vinci - L’homme de Vitruve

En revanche, il faut garder en tête qu’en appliquant des règles de proportions simples on enverra au cerveau un signal de stabilité sécurisant.

J’en profite d’ailleurs pour donner un site qui permet de calculer automatiquement les rapport de largeur de chaque colonne d’un site en suivant la règle du nombre d’or : goldenratiocalculator.com Exemple 2 colones :

1

fig 2.5 Twitter respecte le nombre d’or - laughingsquid.com

1,6

29 Principes universels

Dès l’antiquité, les mathématiciens ont découvert un rapport de proportions géométriques : le nombre d’or, qui s’avère encore aujourd’hui être un outil puissant pour la conception des interfaces web. Il permet de créer des rectangles en suivant un rapport de réduction de 1,6 à chaque fois. C’est à dire que chaque rectangle que vous dessinerez sera 1,6 fois plus petit que le précédent.

En traçant un arc de cercle dans chacun de ces rectangles, on dessine une spirale d’or. En basant la conception d’une interface sur celle-ci, l’œil humain retrouvera les bases d’un équilibre graphique. De nombreux designs utilisent ce principe du nombre d’or. L’exemple le plus célèbre reste l’interface de Twitter. (fig 2.5)

Pourtant cette règle n’est pas à appliquer systématiquement à nos créations puisque la nature de plus en plus flexible des interfaces va à l’encontre de cette pratique très figée.

LE DESIGN créateur de valeur

Peintres, architectes, designers l’ont bien compris : l’homme a besoin de retrouver un équilibre visuel pour ne pas perdre ses repères.

2. Engager les internautes Le rêve de n’importe quel e-commerçant est de se différencier des 20 résultats qui le suivent ou le précèdent dans Google ! Et ce n’est pas une nouveauté, sur le web encore plus que dans la vie réelle, l’internaute compare avant d’acheter !

Engager les internautes

LE DESIGN créateur de valeur

30

Notre objectif en tant que designer est de créer cette petite étincelle qui fera d’une visite sur votre site un évènement particulier et mémorable, différent de tous les autres sites. Il s’agit d’établir une vraie relation de confiance avec l’internaute.

Pour cela, la meilleure solution qui s’offre à nous est d’apporter de « l’humain » à nos interfaces. Injecter ce caractère humain à une interface, c’est la doter de sentiments, d’émotions et faire passer la machine au second plan.

Le grand enjeu du travail d’interface homme-ordinateur est justement de faire oublier que l’on est sur un ordinateur !

fig 2.6 Les Tapbots rendent amusant ce qui est pénible.

Humanisons nos interfaces J’aimerais avant toute chose que nous analysions le succès d’une suite d’applications : les Tapbots. (fig 2.6) Ces interfaces n’apportent aucunes fonctionnalités nouvelles à leurs utilisateurs mais sont pourtant plébicitées sur l’AppStore. Il s’agit d’une calculatrice : Calcbot, d’un convertisseur : Convertbot , d’une appli pour surveiller son poids : Weightbot et d’un client Twitter : Tweetbot. Ce type d’appli est ultra représenté sur l’AppStore, il existe d’ailleurs plusieurs centaines de calculatrices différentes apportant toutes les mêmes fonctionnalités !

Alors pourquoi les appli Tapbots rencontrent-elles un tel succès ? Tout simplement parce qu’elles sont humaines, sympathiques et qu’elles apportent une touche amusante à une action jusqu’alors «plate» et «barbante» !

fig 2.7 ConvertBot, le petit robot convertisseur.

Tout le monde rêve de travailler dans une ambiance apaisée et familiale.

MailChimp a été pensé pour apporter ce petit rayon de soleil à une tâche à priori fastidieuse et les utilisateurs y prennent goût.

Pour Aaron Walter: « les interfaces qui parviennent à toucher les émotions de manière efficace se créent non seulement un énorme fan club, mais aussi une armée d’évangélistes. » 1 Humaniser un site et le doter d’une personnalité forte et unique engagera automatiquement les internautes dans un rapport qui outrepassera celui d’homme-machine. C’est la clé de la fidélisation !

Aaron Walter est d’ailleurs le designer principal d’un outil que j’utilise et que j’affectionne tout particulièrement : MailChimp. Cet outil permet d’envoyer des newsletter. Là encore il existe de nombreux sites pour accomplir ce type de tâches. Mais pour moi et pour beaucoup d’utilisateurs, MailChimp c’est ce singe blagueur qui nous accompagne et nous guide le temps de l’envoi d’une newsletter. (fig 2.8)

31 Engager les internautes

LE DESIGN créateur de valeur

Tout dans ces applications est fait pour établir un rapport émotionnel avec l’utilisateur. Leur designer Mark Jardine avoue d’ailleurs s’être inspiré du petit robot des studio Pixar : Wall-E, pour créer ses interfaces. (fig 2.7) Dans ces dernières, nous avons l’impression de voir le visage d’un sympathique petit robot qui est là pour nous aider et sa personnalité nous fait oublier le support froid et électronique qu’est notre smartphone.

fig 2.8 Le singe blagueur de MailChimp.

MailChimp est définitivement humain.

Le site a une personnalité propre et attachante. A tel point qu’une relation unique s’établit avec les utilisateurs et qu’il devient impossible de changer d’interface.

1. Source : Designing fo emotions - Aaron Walter - Editions Eyrolles

L’humour L’humour est une façon puissante d’humaniser un site et d’engager ses internautes.

Engager les internautes

LE DESIGN créateur de valeur

32

Je vous invite à visiter le site archiduchesse.com et à l’utiliser comme si vous alliez y faire un achat. Ce site de vente de chaussettes en ligne propose certes de très bons produits, mais base tout son succès sur la relation privilégiée qu’il établit avec ses clients.

Son gérant, Patrice Cassard était déjà à l’origine du très bon site de création de T-shirts lafraise.com. Pour son site de chaussettes, le concept est simple : un design épuré parsemé de petites touches humoristiques. Le ton familier qu’il emploie avec parcimonie lui permet de se différencier très nettement de tous ses concurrents. (fig 2.9)

L’enjeu est de divertir l’internaute, de lui faire « baisser sa garde » pour qu’il oublie qu’il est sur l’un des 150 sites de ventes de chaussettes en ligne et qu’il vive une expérience unique.

Cette personnalité sympathique est extrêmement attachante. Le blog du site regorge d’ailleurs de témoignages de clients ultra-fidèles et engagés qui n’hésitent pas à passer du temps à rédiger de longs commentaires pour témoigner leur amour à cette marque ! Et rappelez-vous, il s’agit de chaussettes unies !

Cet humour doit bien entendu rester anecdotique pour ne pas télescoper le processus d’achat et surtout ne pas paraître artificiel.

fig 2.9 Le site Archiduchesse use de petites touches d’humour pour engager ses visiteurs.

fig 2.10 Les photographies sont un outil puissant pour créer l’engagement émotionnel.

Mais insuffler un caractère humain à son design ne signifie par forcément le rendre sympathique, drôle ou amusant !

Je suis actuellement confronté à cette situation : j’ai pour objectif de re-designer le site du Syrian Canadian Council.

Mon objectif de conversion est le suivant : inciter à agir et à soutenir la cause du conseil. Le contexte du conflit Syrien est loin d’être aussi léger que le « rose framboise » des chaussettes de l’Archiduchesse. Pourtant, il est primordial que les Syriens, de Syrie et du Canada, se retrouvent dans ce site, qu’ils s’y sentent chez eux. L’enjeu est d’apporter un caractère humain profondément social, basé sur l’aide, le soutien et le

Ce sont les photographies, les portraits, les témoignages... que j’utilise dans une mise en page légère, colorée et minimaliste qui créent toute la personnalité de ce site.

J’ai d’ailleurs pu, au cours de ma veille sur ce sujet, visiter de nombreux sites à la personnalité d’une empathie extraordinaire. Je ne citerai que l’exemple de soworldwide.org. C’est un site qui promeut les droits des orphelins du monde entier. Les pictogrammes minimalistes et l’usage de deux couleurs complémentaires me font presque penser à un site pour enfants; sauf que ceux-ci sont orphelins. C’est là toute la force du design de cette interface. (fig 2.10) Le sujet est grave, mais le traitement graphique léger et coloré, les photos pleines d’espoir ont un impact émotionnel extrêmement puissant et tout cela incite évidemment à soutenir la cause.

33 Engager les internautes

partage. Mon objectif est de leur apporter, au travers de ce site, toute l’attention et la chaleur nécessaire. Ceci en gardant un ton sérieux, officiel et sans être complaisant.

LE DESIGN créateur de valeur

L’internaute détectera instantanément un site faussement sympathique. Une personnalité factice ne trouvera aucun écho auprès de ses clients. Je pense que le gérant doit avant tout être sympathique lui-même. La démarche d’insuffler à son site une telle personnalité doit venir de lui, sans arrière pensée purement mercantile, mais juste pour l’amour du relationnel abouti. C’est la seule façon pour que le design soit cohérent de A à Z.

Le jeu C’est un atout considérable sur un web ultra concurrentiel où il est de plus en plus difficile de fidéliser les utilisateurs.

Mais la gamification ne s’arête pas là !

Une fois engagé dans le processus de jeu, l’utilisateur/joueur sera nettement plus enclin à effectuer l’action que nous attendons de lui. En effet, la mécanique du jeu et la décomposition des actions suivant différents niveaux enferme l’internaute dans un processus dont il ne voit pas forcément l’issue. Une fois les premiers niveaux franchis, l’utilisateur sera suffisamment impliqué pour aller jusqu’au bout du «jeu». Il se dirigera naturellement vers l’objectif fixé sans même y penser.

Ne croyez pas que la gamification se résume à l’obtention des badges Foursquare. Regardez votre profil Linkedin.

Le réseau à constaté que de nombreux profils n’étaient pas à jour. Pour encourager ses membres à compléter le leur, le réseau à mis en place un système de niveaux. Plus vous remplissez votre profil, plus vous franchissez de paliers

processus de gamificaton.

Engager les internautes

LE DESIGN créateur de valeur

34

Nous venons de le voir, rendre un site internet le plus humain possible et lui apporter une personnalité propre est un bon moyen d’engager ses visiteurs.

Mais le constat que font de nombreux UX designers est que l’internaute est toujours plus « blasé ». Il reste hermétique aux discours « plats » des marques.

Une technique me semble efficace : amuser pour engager ! On la nomme à l’anglaise : gamification. Elle consiste à transférer des mécanismes du jeu dans un site web ou une application. Ceci dans l’objectif d’augmenter l’acceptabilité et l’utilisabilité de ce site en s’appuyant sur le fait que l’Homme aime par nature jouer !

De Foursquare à Cityville en passant par les serious games, les mécaniques de jeu se multiplient et ne cessent de séduire et d’engager cet internaute que l’on croyait sceptique et paresseux. L’obtention de badges, les défis, les récompenses, le franchissement de niveaux... génèrent une réelle forme d’addiction.

fig 2.11 Système de niveaux sur Linkedin

3. Suivre la tendance ?

Le Web, comme tout domaine créatif et artistique est régit par des tendances.

On appelle tendance un style populaire qui vit sur une période donnée et qui est connu et adopté par un grand nombre de gens.

Les tendances se renouvellent à différents rythmes et leur cycle de vie peut

Quel que soit son processus créatif, un designer ne peut rester hermétique à ces tendances. Il y est confronté à longueur de journée, dès qu’il ouvre son navigateur. Et même si chacun à son propre style graphique, ces tendances influencent inévitablement nos créations. Ajoutons à cela le client, qui est lui-même à l’écoute des tendances et qui veut un site « actuel » et « moderne ». Vous obtiendrez sûrement une maquette ressemblant à celle-ci : (fig 2.12)

fig 2.12 Exemple utilisant tous les codes de la tendance «Lobster»

35 Suivre la tendance ?

Linkedin apprend à ses membres à utiliser son service de manière ludique.

En remplissant son profil, l’utilisateur évolue en grade en ressent une sensation d’accomplissement. En outre, une fois que ce dernier aura atteint le niveau d’expert absolu, il est peu probable qu’il cesse d’utiliser se réseau.

La gamifiacation est-elle une tendance ou un véritable outil marketing ? Observons ce qu’est une tendance et quel est son impact sur l’internaute.

varier de quelques jours à plusieurs années.

Sur le web, les tendances graphiques sont bien souvent issues de grands groupes (de communications, informatiques...) puis deviennent populaires et incontournables pour de nombreux designers. Elles peuvent aussi être liées à une technologie, ou à un support. L’écran d’accueil de notre smartphone, l’OS de notre ordinateur, notre boite mail... Toutes les interfaces que nous fréquentons quotidiennement façonnent et modèlent notre vision du design digital.

LE DESIGN créateur de valeur

et votre expertise augmente. (fig 2.11)

Bien sûr, je dramatise la situation, mais c’est pourtant ce qu’il s’est passé avec la surexploitée typographie « Lobster » et l’effet « vintage texturé ». Nombreux sont les designers qui se sont mis à utiliser dans toutes leurs maquettes cette police disponible sur Google Fonts il y a quelques mois. Cette tendance de courte durée a générée un véritable ras-le-bol dans le milieu du web design à tel point que cette typographie a été considérée comme la nouvelle « Comic sans MS ».

Suivre la tendance ?

LE DESIGN créateur de valeur

36

Il s’agit d’identifier et de différencier la tendance, de l’effet de nouveauté et du phénomène de mode. En comprenant les codes qui la rendent populaire il est possible de créer des interfaces singulières et admises comme « dans l’air du web ».

Observons les deux grandes tendances qui font le web depuis quelques mois et qu’il est indispensable de maîtriser.

Le skeuomorphisme Je ne sais pas exactement comment prononcer ce mot barbare mais j’imagine assez bien votre tête en le lisant !

D’ailleurs ce terme est un néologisme !

Il définit un style design digital qui tente de reproduire des éléments de la vie réelle.

C’est à dire qu’un élément skeuomorphique imite les textures, les matières et l’aspect d’un élément réel. (fig 2.13) Ce style très ornemental est une véritable métaphore visuelle du monde réel.

Certes ce style ne sert pas (à première vue) au fonctionnement premier de l’élément. D’ailleurs les détracteurs du design skeuomorphique sont nombreux. Je retiendrai cette phrase du

designer Austin Carr qui résume bien comment l’opposition perçoit ce style : « It’s visual masturbation [...] It’s like the designers are flexing their muscles to show you how good of a visual rendering they can do of a physical object. Who cares ? » Mais cette démonstration de style et de reproduction du monde réel remplit aussi selon moi un rôle plus important qu’une simple lubie de graphiste.

Je m’explique : en imitant le monde réel le designer dit clairement à l’utilisateur à quoi sert son site ou son application.

Une page de cahier à carreau légèrement jaunie sert (en vrai comme sur un écran) à écrire et il faut une fraction de seconde au cerveau pour le comprendre ! L’exemple le plus parlant de l’utilité du skeuomorphisme est pour moi cette application pour des professionnels de la musique. (fig 2.14) Habitués à travailler sur des machines réelles, le passage à l’outil informatique risquait de nécessiter un réapprentissage. La solution à donc été de reproduire leur espace de travail réel pour limiter les difficultés.

Apple a d’ailleurs extrêmement bien compris l’importance de cette tendance.

Et même si certaines de ses applications sont aujourd’hui jugées comme ringardes par quelques designers; l’utilisateur, aussi novice soit il, identifiera instantanément ce qu’il pourra faire avec. Le Game Center avec son tapis vert de casino et ses bordures en ronce de noyer regroupera les jeux, c’est une évidence ! (fig 2.15) Dans un objectif de conversion, un utilisateur qui comprend immédiatement ce qu’il fait sur une interface et comment elle marche atteindra inévitablement

plus vite son objectif et par conséquent le vôtre aussi.

Je vous invite à visiter ce site d’un restaurant Polonais www.lamaddalena.pl C’est un bel exemple de design skeuomorphique : bien que nous ne maîtrisions pas la langue le site semble clair et la navigation y est simple.

Le design skeuomorphique agit aussi sur un second levier très efficace si on

pense en objectif de vente (ou de transformation) : il apporte une véritable dimension émotionnelle à l’interface ! Regardez cette application pour tablette : on a presque l’impression de sentir le vieux cuir! Le design skeuomorphique transporte et fait voyager l’internaute, il le fait rêver et c’est une des clés pour un bon taux de conversion.

fig 2.14 Le skeuomorphisme au service des professionels.

fig 2.15 Le Game Center d’Apple.

LE DESIGN créateur de valeur

fig 2.13 Les coutures de cuir des applications Apple imiteraient celle du jet privé que possédait Steve Jobs.

Suivre la tendance ?

37

Le flat design La seconde grande tendance dont j’ai envie de vous parler se nomme Flat !

Flat pour plat, mais aussi pour simple, efficace, malin... J’affectionne particulièrement le flat design qui revient aux fondamentaux du pixel, des couleurs en applat et des typographies. (fig 2.15) Allez faire un tour sur lowdi.com. Ce site résume parfaitement ce qu’est le flat design : pur et efficace, il va droit au but. Après avoir énuméré les fonctionnalités de son produit, il propose l’achat sans tourner autour du pot.

Suivre la tendance ?

LE DESIGN créateur de valeur

38

Le flat est une forme de minimalisme qui est, pour beaucoup de designers, bien plus qu’une tendance éphémère, mais une véritable base au webdesign.

Le flat est au webdesign ce que l’Helvetica est à la typographie : simple et intemporel, capable de traverser les époques avec toujours autant de force et d’efficacité !

Si le flat design est défini comme LA tendance de cette année 2013, c’est qu’il répond à tous les besoins des designers.

Il a l’avantage de coller parfaitement à une logique responsive en s’adaptant sans aucun problème à n’importe quel type d’écran. Les aplats de couleurs permettent de créer des sites «ultra» légers et donc «ultra» agréables pour notre internaute «ultra» pressé !

C’est enfin un design à l’exécution rapide. Le temps de conception reste évidement le même, mais le design d’un aplat rouge sera forcément plus rapide que la reproduction d’un bouton de votre machine à laver dans photoshop !

Pas étonnant que cette tendance si opposée au skeuomorphisme ait été adoptée par le concurrent direct d’Ap-

pel : Microsoft. (fig 2.16) Dans son analyse du design d’Apple face à Microsoft, Farhad Manjoo compare le skeuomorphise et le flat design à deux dîners au restaurant. C’est comme manger dans un grand restaurant avec toutes les contraintes que cela implique ou aller dans un petit restaurant familial, en sachant que le repas sera moins raffiné, mais que l’ambiance y sera décontractée. C’est la même chose pour le Game center d’Apple : le tapis de jeu vert est un peu «ringard» mais diablement efficace et sympathique !

Alors certes, le skeuomorphisme n’apporte aucune fonctionnalité supplémentaire mais il a l’avantage de générer un impact émotionnel sur l’utilisateur. Le design skeuomorphique est doté d’une personnalité, il devient dès lors moins « grand public » et plus accessible, s’il est utilisé à bon escient. (fig 2.17)

39 LE DESIGN créateur de valeur

Suivre la tendance ?

fig 2.15 Exemple de flat design sur un portfolio

fig 2.16 Interface flat de Windows 8.

fig 2.17 Interface flat à gauche et skeuomorphique à droite.

Et les couleurs ?

Même si je suis le premier à remettre en question la psychologie des couleurs, je souhaite quand même aborder l’impact positif (ou négatif) de ces dernières sur le taux de conversion d’un site.

Suivre la tendance ?

LE DESIGN créateur de valeur

40

Nous venons de le voir, les tendances régissent le web et un style graphique adulé peut être mis au placard du jour au lendemain. Les couleurs subissent le même sort. Un petit tour d’horizon s’impose pour voir quels sont les couleurs éphémères qui disparaîtront de nos écrans dans quelques mois et quelles sont celles qui y resteront pour plusieurs années.

On considère d’ailleurs que la couleur de l’année 2013 est le vert émeraude (et toutes ses complémentaires) (fig 2.18) Les couleurs influencent aussi la mémorisation et par conséquent la fidélisation. La couleur est un des souvenirs principaux qui restera chez l’internaute après sa visite sur le site. Faisons un petit test : retrouverez-vous à quel site correspond chaque couleur ?

facebooK Youtube

Avant toute chose, je vous propose un site (déjà célèbre mais je me dois de vous en parler) vraiment pratique qui présente des palettes de couleurs harmonieusement sélectionnées. C’est un outil d’Adobe qui pourrait vous être utile dans vos prochaines créations : kuler.adobe.com

twitter vente privee spotifY

Les couleurs sont un allié puissant pour un site. Un bon usage de ces dernières permettra d’instaurer un climat propice à la transmission d’un message.

Il faut savoir que contrairement à la vie réelle, sur le web un seul de nos sens est effectivement utilisé : la vue. L’acte d’achat, qui découle en général d’au moins deux perceptions sensorielles, devra sur le web être déterminé uniquement par la vue.

Ainsi, on considère en occident qu’un orange ou un bleu électrique, par exemple, engendrera plus facilement un achat impulsif alors qu’un vert ou bleu marine incitera à une réflexion plus longue.

fig 2.18 Couleur de l’année 2013.

ConsĂŠquences consĂŠquences et limites

42

1. Le design pour faire oublier ses erreurs final de sa visite, il quittera le site.

Cette analyse « coût / avantages » est inconsciente et intervient dès qu’il est question de faire un choix. C’est elle qui nous fait avancer dans une interface.

Une défaillance sur le site et la balance risque de s’inverser, le coût risque de dépasser l’avantage, le mauvais risque de dépasser le bon...

fig 3.1 Page d’erreur Twitter

fig 3.2 Page d’erreur Google

Mettez vous à la place de l’utilisateur, le moindre écueil qu’il rencontrera lors de la visite du site alourdira son cheminement vers l’objectif final.

Ménagez vos internautes

43 conséquences et limites

Je le répète, la patience de notre internaute est extrêmement limitée. S’il estime qu’attendre que le problème soit résolu lui « coûte » plus que le bénéfice

Ainsi, si l’internaute est engagé émotionellement avec le site, il fermera bien plus facilement les yeux sur cette erreur et continuera sa visite. Un bon design générera de l’indulgence.

D’ailleurs si vous regardez à nouveau les deux pages d’erreurs de Twitter et Google, vous remarquerez la petite touche d’humour que les designers y ont injectée. Il s’agit de mieux faire « passer la pilule ». C’est comme une lors d’une dispute entre amis : l’humour s’avère une bonne solution pour faire oublier le problème et recommencer une discussion sereine.

Le design pour faire oublier ses erreurs

Un site internet n’est pas infaillible, il contient forcément des bugs ou des petites erreurs. Et même si ces erreurs ne viennent pas du design ou du développement, elles peuvent être dues à une panne chez l’hébergeur...

N’importe quel site y est confronté tôt ou tard. Si vous utilisez fréquemment Twitter, vous avez forcément déjà rencontré cette grosse baleine : symbole du réseau surchargé. (fig 3.1) Même Google rencontre ces aléas ! (fig 3.2)

Pas étonnant, donc, que les designers travaillent tant les pages d’erreurs de leurs interfaces. La fameuse page 404 est même devenue une étape incontournable dans la création d’un site. (fig 3.3) Comme dans les relations humaines, un site avec lequel l’internaute entretient de forts liens émotionnels devient une référence. Il sera prêt à faire un effort pour surmonter une lacune si le site génère une réelle motivation.

conséquences et limites

Le design pour faire oublier ses erreurs

44

fig 3.3 Pages 404 créatives- source : widoobiz.com

Même si le taux de conversion d’un site est optimal, il ne faut pas négliger cet aspect relationnel. Construit petit à petit, c’est lui qui vous permettra de conserver l’adhésion de vos internautes quoi qu’il arrive. C’est une façon très efficace de ne pas perdre beaucoup de clients et d’argent à la moindre défaillance.

La motivation clé du succès ?

En 2007, le site amazon.com, bien connu pour la vente de livres en ligne, a proposé au marché mondial un nouveau produit : L’Amazon Kindle. Cette liseuse de livres numériques a rencontré un franc succès. Elle offrait un service innovant et générait une motivation hors du commun pour ses utilisateurs. Si bien que ces derniers ont fait abstraction de toutes les aberrations ergonomiques et fonctionnelles de cette tablette ! Imaginez vous une tablette qui ne permettait même pas de lire des PDF ; et bien les utilisateurs sont passé outre cette lacune, trop excités de l’utiliser.

2. Attention au changement J’espère que vous êtes désormais comme moi, enthousiastes à l’idée de créer des sites efficaces qui remporteront l’adhésion de leurs visiteurs !

Il ne faut cependant pas se précipiter dans une refonte complète de nos interfaces !

En effet, un des dangers pour le taux de conversion d’un site peut aussi être le changement !

Des améliorations progressives Dans un site web comme dans un supermarché, si vous changez la place des produits, le visiteur risque de se perdre et de mettre du temps à retrouver ses repères. Regardez avec quels automatismes vous traversez les rayons de votre magasin habituel. Ayant changé récemment de continent (je parle de l’Amérique du Nord, pas de l’hypermarché), je me suis rendu compte du temps d’adaptation nécessaire pour retrouver le lait, la viande ou les fruits & légumes.

Nous voulons qu’un visiteur aille droit au but sur notre site, pas qu’il cherche désespérément ce dont il a besoin ! Car contrairement à un supermarché, sur internet, il pourra très facilement changer de boutique !

45 Attention au changement

C’est ici que la motivation de l’internaute entre en scène. Certains sites génèrent une telle motivation que tout leur est pardonné. Facebook est un réseau qui ne marche que par la motivation qu’il génère ! En effet, la navigation sur ce réseau est complexe. C’est d’ailleurs la raison de ses liftings récurrents. Je vous invite d’ailleurs à visiter ce site : bit.ly/liftingsFacebook, pour vous rendre compte de l’évolution de son design. Si vous deviez utiliser se service pour tout autre chose que du réseautage social, il est fort probable que vous ayez déjà baissé les bras.

Rappelez vous de la balance « coût / avantages ». Le bénéfice apporté par Facebook est tel, que l’internaute est prêt à apprendre à s’en servir pour pouvoir en profiter !

Si nous arrivons à séduire le public dès la première approche, il sera prédisposé à utiliser notre service : il ne cherchera ni à comparer, ni à critiquer.

conséquences et limites

Outre les bugs et les pannes, un site peut aussi rencontrer un problème de conception. Malgré tous nos efforts, une erreur ergonomique peut paralyser la navigation.

Il est donc important de commencer par quelques changements modestes, et de tester leurs influences sur le taux de conversion du site. C’est validation après validation que vous construirez une expérience efficace.

Attention au changement

conséquences et limites

46

Des études ont été menées sur le stress lié au changement au CSCP de Montréal (Centre de Santé et de Consultation Psychologique). Les résultats sont frappants. Ils démontrent qu’un changement trop brutal engendre une réaction systématiquement négative de l’organisme et une réaction de refus.

A l’inverse un changement progressif comme le passage de l’hiver au printemps à tendance à stimuler.

Même si le changement d’une interface web est minime et insignifiant au regard d’une saison, il sollicitera notre organisme pour s’adapter et retrouver l’équilibre.

Le site LDLC.com à bien compris l’importance de ménager le stress de ses clients. Ce vendeur de composants informatiques en ligne a opté pour une évolution toute en douceur de son site.

Ce groupe au chiffre d’affaire de plus de 200 millions d’euros ne pouvait pas prendre le risque de perdre ses fidèles clients, mais devait pourtant faire évoluer son image vieillissante et optimiser son site.

Le groupe à donc décidé d’étaler les changements sur plusieurs mois. Le tout était agrémenté d’explications sur le blog du site et l’avis des clients a véritablement joué son rôle dans cette reconversion. Ils ont été choyés, et intégrés à l’évolution du site. Si bien qu’ils ont accueilli la nouvelle interface avec beaucoup d’enthousiasme.

LDLC a utilisé beaucoup des principes d’ergonomie et de design émotionnel que nous avons évoqué précédemment.

Après avoir simplifié au maximum l’interface, les designers ont injecté de l’humour, du jeu et utilisé des méthodes d’user centric design.

D’ailleurs, un des premiers test de d’expérience émotionnelle a été mis en place un 1er avril. LDLC a profité de ce jour particulier pour expérimenter l’humour auprès de ses clients. Un ensemble de petites blagues « geekèsques » ont été cachées sur le site et les visiteurs se sont amusés à les retrouver, faisant ainsi exploser le nombre de pages vues par visite.

L’exemple de cette BOX LDLC au performance affolantes (fig 3.4) : « La plus petite du monde Internet illimité Téléphonie illimitée entre LDLC BoX Télévision : accès à plus de 401 chaînes, dont 16 en couleur Téléphonie mobile : appels illimités dans un rayon de 5 km autour de vous NVIDIA® GTX Titan Emulateur Atari intégré Une connectique complète : USB 2.0 – USB 3.0 – USB 4.0 – USB 5.0 – HDMI Port compatible iPhone 8 – RJ11…

Téléphone intégré (fil spiral non fourni) Pico projecteur Mise à nuit : la LDLC BoX fait toutes les mises à jour de nuit Et beaucoup plus … »

Ce poisson d’avril a eu un réel impact sur la popularité du site ! Il a été partagé des centaines de fois sur les réseaux sociaux. Il a d’ailleurs permis l’obtention de nouveaux fans ou followers et a véritablement contribué à créer une personnalité au site.

Le test du poisson d’avril fut concluant : les internautes ont apprécié l’humour

et se sont un peu plus attachés au site.

C’est un évènement anecdotique, mais il traduit bien la volonté qu’a eu ce site à miser sur l’ergonomie et le design émotionnel.

Depuis le changement d’identité et la refonte du site, le résultat net a augmenté de 79,8%. L’efficacité d’une évolution progressive semble évidente !

Faire marche arrière

Les designers Microsoft ont donc décidé d’opérer un retour arrière en réimplantant cette fonctionnalité dans la version 8.1 du système.

Pour ne pas frustrer le visiteur, il faut être capable d’admettre ses erreurs et de les corriger.

47 Attention au changement

conséquences et limites

Microsoft, qui a récemment sorti son dernier système d’exploitation Windows 8, n’a pas suffisamment écouté ses utilisateurs. La marque qui avait fièrement annoncé ce nouvel OS comme un grand pas en avant est aujourd’hui contrainte

de faire marche arrière. Elle avait en effet décidé de supprimer le bouton démarrer de son système, mais les utilisateurs n’étaient pas prêts à un tel changement de navigation. La preuve en est que près d’1,5 millions d’entre eux ont téléchargé l’application « Pokki Menu » qui imitait l’ancien menu de Windows, avec ce fameux bouton démarrer ! (fig 3.5)

fig 3.4 Un humour adapté à la cible de LDLC

fig 3.5 Pokki Menu apporte une alternative rassurante au nouveau menu Windows

Le processus d’adoption Quel que soit le changement, aussi minime soit il, il entraînera forcément une résistance et une perte de repères pour les utilisateurs.

conséquences et limites

Attention au changement

48

En effet, les réactions face à tout changement sont généralement inévitables.

En revanche, elles varient d’une personne à une autre. On peut organiser ces comportements en quatre phases chronologiques distinctes. Selon la personnalité de l’internaute, il ne passera pas forcément par toutes ces étapes lors d’une confrontation à un changement, abandonnant le processus d’acceptation. Un autre, pourra franchir chaque étape avant de décider de faire marche arrière.

1. La première réaction face à la nouveauté est le choc. Cette phase représente le refus face à la réalité d’un changement. Ce processus est normal et se retrouve chez toutes personnes confrontées à cette situation. Cette réaction permet à l’organisme de ne pas être submergé et de ne pas perdre tous ses repères immédiatement. Deux comportements surgissent à ce moment là. Soit l’individu nie en bloc et interagit avec le site internet comme il l’a toujours fait, sans sortir de ses habitudes, soit il fait un premier pas vers l’acception en se convainquant que les changements effectués sont minimes et n’affecteront pas son rapport à l’interface.

2. Rapidement après le « choc » reçu lors de la prise de conscience des changements, l’esprit se braque et entre dans la phase de résistance (appelée également phase de retrait défensif).

Le cerveau sort de la torpeur survenue

lors de la phase 1 et réalise la situation à laquelle il est confronté. Généralement c’est à ce moment là que les premières inquiétudes surviennent : Comment je me connecte à mon profil ? Où sont passés tels ou tels onglets ? C’est trop différent je ne vais jamais m’y retrouver… Angoisse, colère, désespoir, abandon sont autant de sentiments qui peuvent alors survenir.

3. Puis l’internaute se calme et entre dans la phase suivante, celle de l’ouverture progressive face aux changements.

L’individu retrouve petit à petit ses marques et habitudes dans la nouvelle interface. L’incompréhension du départ disparaît progressivement pour faire place à l’envie d’exploration. Le cerveau s’ouvre à la recherche de solutions afin de se réapproprier « son » site. Les sentiments négatifs forts s’estompent mais sont remplacés par la nostalgie face aux éléments du passé supprimés ou modifiés.

4. Enfin, l’internaute se raisonne et entre dans la dernière phase, celle de l’acceptation. Cette phase d’engagement marque l’étape à laquelle la personne a dépassé ses problèmes. Elle tente alors de s’adapter à la nouvelle interface grâce à l’expérimentation des nouvelles fonctionnalités mise à sa disposition. Elle redécouvre son sentiment d’engagement et d’attachement envers le site internet et ce qu’il représente. Le plaisir revient, ce qui marque le retour à l’équilibre, perdu lors de la première confrontation aux changements.

Selon les individus, les réactions face au changement seront très différentes.

Certains cherchent sans cesse la nouveauté, stimulés par une rupture dans leur quotidien. D’autres la fuient à tout

majorité précoce

2,5%

13,5%

34%

fig 3.6 Courbe d’adoption de Rogers

34%

16%Temps

Attention au changement

49 conséquences et limites

Il est donc évident que la mise en place d’un nouveau design ou d’une nouvelle ergonomie se traduira d’abord par une chute du taux de conversion avant de dépasser le niveau précédent.

early adopters

innovateurs

Nombre

Les innovateurs : Aventuriers et assoiffés de nouveautés il se jetteront tête baissée dans la nouvelle interface.

Les « early adopters » : Ce sont des prescripteurs. Ces leaders d’opinion adopteront rapidement l’interface et convaincront les sceptiques.

La majorité précoce : Elle adoptera l’interface après un temps de réflexion et d’adaptation.

Cette courbe s’adapte parfaitement à l’adoption d’une nouvelle interface web.

Rappelez vous là mise à jour graphique de Twitter. Pendant plusieurs jours les « early adopters » et les réfractaires se sont déchaînés sur la toile. Au final, la majorité a adopté cette mise à jour et plus personne ne s’en est plaint. C’est ce qui vous attend aussi si vous compter modifier votre site. C’est un comportement humain inévitable.

réfractaires

La courbe en cloche (ou courbe d’adoption de Rogers) est un outil marketing qui reprend les différents profils d’utilisateurs qu’une innovation doit convaincre pour se diffuser. (fig 3.6)

La majorité tardive : Elle attend qu’une majorité d’internautes ai adopté cette nouveauté pour s’y risquer.

Les réfractaires : Ce sont bien évidement les plus difficile à convaincre puisqu’ils rejetteront automatiquement la nouveauté.

majorité tardive

prix, de peur que leur confort soit bouleversé.

Il n’existe pas de bonne ou de mauvaise réaction face au changement. Notre capacité à faire face à ce dernier dépend de beaucoup de facteurs : nos habitudes de vies, nos expériences, notre éducation, notre état d’esprit à ce moment donné...

Ne pas prendre de risque ?

Nous venons de le voir, un changement trop radical entraîne inévitablement une perte de visiteurs. A tel point que certains designers conseillent clairement de conserver une ergonomie ou un mécanisme défaillant mais connu plutôt que de demander à l’internaute de tout réapprendre.

Le consultant en design Stephen Anderson explique lors de la conférence Euro IA 2012 que s’il existe déjà des schémas de navigation efficaces il est inutile de les réinventer.1

Attention au changement

conséquences et limites

50

Alors certes, le changement est toujours risqué, mais il peut tout de même être intéressant de vérifier si cette prise de risque est justifiée ou non.

Une excellente méthode pour innover en limitant cet aspect gênant est le test A/B. C’est encore une technique marketing qui consiste à proposer différentes variantes d’une même page web. On mettra ainsi en concurrence la page existante avec une page optimisée, qui suivra les règles d’ergonomie et de design émotionnel. Les deux pages seront affichées aléatoirement.

Après un certain nombre de visites, il devient possible de comparer le taux de conversion de chacune des deux pages et d’adopter celle qui rencontre le plus de succès. (fig 3.7) J’en profite d’ailleurs pour vous donner deux outils qui permettent de faire ce type de test. Le premier, très efficace, se nome kameleoon.com. Vous pouvez le tester gratuitement pendant 30 jours !

Le second n’est autre que l’optimisateur de site intégré à Google Analytics.

1. Source : www.ergonomie-interface.com

Un autre frein à l’optimisation ergonomique peut être purement mercantile. Certaines compagnies basent leur source de revenus sur l’enseignement professionel. C’est à dire qu’elles forment des gens à utiliser une interface, un CMS... Une refonte ergonomique menacerait leur activité. D’une part, car elle devrait reformer ses équipes, mais surtout car les utilisateurs risqueraient de ne plus avoir besoin de ses services.

fig 3.7 Un test A/B permet d’identifier la plus efficace des deux pages.

3. Le design ne fait pas tout

En effet, le design n’est pas une solution à tous les problèmes. Pour qu’un visiteur s’intéresse à un site, encore faut-il qu’il y trouve le contenu qui l’intéresse et lui correspond. Cet aspect dépasse la notion de design et d’ergonomie mais me semble indispensable pour que ma réflexion sur l’optimisation du taux de conversion soit bouclée.

Nous allons d’ailleurs voir que contenu et design sont étroitement liés.

Content is King

La stratégie de contenu Un contenu est adapté aux internautes s’il leur apporte exactement ce dont ils ont besoin, où et quand ils le souhaitent.

Rappelez-vous du premier chapitre, nous parlions de l’importance de connaître les situations d’utilisation d’un site.

Prenons l’exemple du site d’une pizzeria. Si nous visitons ce site de chez nous, nous aurons sûrement envie de découvrir les différentes pizzas, de voir des photos du restaurant ou de lire des avis de clients. Par contre, si nous nous rendons sur ce même site depuis notre mobile, c’est sûrement pour trouver son adresse, son numéro de téléphone ou ses horaires d’ouverture. Le contenu à l’instar du design de l’interface doit s’adapter au support et à la situation d’utilisation.

Les référenceurs considèrent que le contenu est roi. C’est à dire que c’est l’élément le plus important pour un bon référencement naturel. En effet, plus le contenu d’un site sera varié et pertinent, mieux ce dernier sera classé dans Google. Or cette position est un des facteurs clé du taux de conversion.

Mais revenons en au lien entre le contenu et le design d’un site. Le contenu doit servir l’impact visuel de notre site et inversement. Dans tous les exemples que nous venons d’aborder, le design était efficace car le contenu était finement travaillé.

La tendance en matière de web design est d’ailleurs de prioriser le contenu. Des typographies de plus en plus grosses composent nos maquettes et de nombreux sites axent leur design sur l’utilisation de polices originales pour appuyer le message. (fig 3.8) Le contenu se veut clair et concis. Le site lapauvretenestpasuncrime.fr est un bel exemple d’interface qui met en valeur le contenu pour atteindre ses objectifs. Dans cet exemple, l’engagement émotionnel se fait autant par la force des mots que celle des couleurs.

51 Le design ne fait pas tout

D’ailleurs l’objectif de conversion d’un site mobile ne serait pas le même que celui de sa version web. La stratégie de contenu est donc directement liée au design de l’interface !

conséquences et limites

Même si votre design est émotionnellement engageant et que vous avez prêté une attention toute particulière à l’ergonomie, les internautes peuvent rester sceptiques face à votre site.

Préconisations

52

fig 3.8 Les web fonts offrent une liberté supplémentaire aux designers

PRECONISATIONS J’ai mis en avant tout au long de ce mémoire les éléments d’ergonomie et de design émotionnel qui me semblaient les plus pertinents pour un site web.

Nous nous sommes rendu compte de leur influence positive ou négative sur le taux de conversion d’un site.

Souvenez vous aussi que l’internaute n’est pas patient, qu’il veut tout, tout de suite et sans effort. En lui apportant ce dont il a besoin et uniquement cela, il sera automatiquement enclin à enclencher un processus d’achat, d’inscription...

Tout d’abord, rappelez vous que l’ergonomie se base sur un utilisateur, ayant une tâche à accomplir (un achat, une recherche d’information...) et que cette tâche s’effectue dans un contexte bien précis (au travail, dans le bus, à la maison...). Vous devez donc anticiper au maximum les conditions d’utilisation de votre site et adapter votre design à ces dernières. Un contenu et un design parfaitement adaptés à la situation apporteront pleinement satisfaction au visiteur.

Gardez en tête que vous créez pour les humains, dotés de sentiments et d’émotions. L’affectif joue un roule éminemment important dans le processus de conversion. Un internaute peut établir un lien émotionnel avec un site et y rester fidèle pendant des années.

Enfin dites-vous que vous n’êtes pas seul sur le web. La concurrence y est encore plus virulente que dans le monde réel et votre seul atout commercial sera votre boutique en ligne.

Vous n’aurez aucun contact humain pour influencer l’acte de transformation. Il est donc important de trouver un élément de différenciation qui fera de votre site une expérience inoubliable.

Voici un petit rappel des bonnes pratiques dont nous avons parlé au cours de ce mémoire : 1. Votre interface doit être claire : • Limitez au maximum le nombre d’éléments d’une page (souvenez vous de cette fameuse lois de Hick).

• Vos éléments doivent être affordants.

2. Rassurez les internautes : • Respectez les conventions du web (un logo est cliquable, un lien est généralement bleu...).

• Tenez compte des tendances.

• Apportez des repères visuels.

3. Vous créez pour des humains • Humanisez et personnalisez vos interfaces.

• Divertissez et amusez vos visiteurs.

4. Prenez des risques modérés • Testez, testez et re-testez vos designs (le test A/B est une excellente solution pour valider une maquette).

• Maniez les émotions avec précaution.

53 Préconisations

• Guidez l’internaute dans ses choix.

Conclusion

Nous l’avons observé au travers des différents exemples de ce mémoire, ce type de pratiques n’est pas une simple lubie de graphiste. Il y a un vrai enjeu derrière tout cela. Intégrer le design émotionnel et l’ergonomie à l’ADN d’un projet Web, c’est s’assurer de le démarquer de tous les autres et de remplir ses objectifs.

Lorsque je vous parlais d’une jungle concurrentielle, au début de ma réflexion, j’étais à mille lieux d’imaginer à quel point elle était hostile. Nous nous sommes rendu compte que l’expérience d’un visiteur sur un site peut très vite passer du coup de foudre, à l’indifférence la plus totale. C’est le « cruel » constat que font de nombreux webmasters et e-commerçants, impuissants face à des réactions qu’ils ne maîtrisent pas. Dans un désarroi profond, certains en viennent à regretter le commerce physique et critiquent cet utilisateur et son comportement d’achat déshumanisé. Il suffit de parcourir les forums ou de suivre des conférences sur ce sujet pour entendre parler de cette apathie générale. Il est vrai que c’est d’un œil distrait que l’internaute a pris l’habitude de survoler les sites, en ne leur accordant que cinq petits pour cent de son attention. Cependant, il achète toujours plus et ce ne sont pas 35 000 nouveaux e-commerçants français, de l’année 2012, qui vont dire le contraire.

Le commerce en ligne se porte de mieux en mieux et s’ancre durablement dans les habitudes de consommation.

Pour tirer parti de ce secteur en pleine expansion et s’assurer d’atteindre le taux de conversion espéré, il faut commencer par se centrer sur l’utilisateur.

C’est en gardant à l’esprit que nous concevons pour les humains, que nos interfaces seront efficaces et rentables.

En tant que designer, nous devons anticiper les situations d’utilisation, les besoins, ou encore l’expérience de notre internaute.

Nous savons désormais qu’une bonne organisation, un contenu de qualité, et une navigation claire constituent une base incontournable pour qu’un site soit utilisable. Cependant, Archiduchesse, Soworldwide, MailChimp, LDLC, Tapbots, Foursquare et les autres exemples que nous avons analysé allaient plus loin. Ils vont au-delà du simple aspect fonctionnel, apportant une véritable valeur ajoutée à la navigation. En effet, ils parviennent à établir une relation avec l’internaute, en lui faisant oublier qu’il est face à une machine connectée à internet ! C’est en utilisant l’humour, les émotions ou encore le jeu, que les designers de ces interfaces ont su les doter de caractéristiques humaines, si rassurantes aux yeux de leurs visiteurs.

Pour acheter, pour s’inscrire ou tout simplement visiter un site, l’internaute doit s’y sentir bien et en confiance.

Toutes les méthodes que nous venons d’aborder devraient permettre de lui rendre cette visite des plus agréable.

Si vous ne deviez retenir qu’une chose de ce mémoire : Un bon taux de conversion réside dans le rapport qu’établit un site avec son visiteur. Plus il saura se montrer « humain » et proche, plus son taux de conversion sera bon.

55 CONCLUSION

Au cours de ces quelques pages, nous avons découvert des principes d’ergonomie et de design : engageants, drôles, amusants, humains, voire addictifs...

Je profite de ces dernières lignes pour vous rappeler qu’en tant que designer, nous sommes à l’origine des concepts.

Nous avons un devoir de créativité, nous ne pouvons pas nous laisser aller à la facilité sous prétexte que c’est ce dont l’internaute à besoin.

CONCLUSION

56

C’est à nous de révolutionner le web et d’exploiter au maximum les ressources qu’il nous offre.

A ce titre, je tiens à refermer ce mémoire sur la notion de « Mobile First » .

Je pense qu’il est aujourd’hui impossible de concevoir une expérience digitale sans considérer les utilisateurs mobiles. Commençons donc par penser nos maquettes pour les smartphones et les tablettes, en tirant partie de leurs caractéristiques techniques : appareil photo, géolocalisation, connexion sociale... Nos interfaces n’en seront que plus efficaces.

Vive le web !

bibliographie Bibliographie

Alan Cooper - About Face 3 - Editions Wiley Mike Monteiro - Métier Webdesigner - Editions Eyrolles Ethan Marcotte - Resposive Web Design - Editions Eyrolles Aaron Walter - Design Emotionnel - Editions Eyrolles Eric Kissane - Stratégie de contenu Web - Editions Eyrolles J.F. Nogier - Ergonomie des interfaces - Editions Dunod Amélie Boucher - Ergonomie Web 3 - Editions Eyrolles Amélie Boucher - Ergonomie Web illustée : 60 sites à la loupe - Editions Eyrolles Tim Kadlec - Implementing Responsive Design: Building sites for an anywhere, everywhere web - New Riders Jon Ducket - HTML and CSS: Design and Build Websites - Editions Wiley Luke Wroblewski - Mobile First - Editions Eyrolles

Sitographie www.journaldunet.com (Catégorie Web & Tech) www.synbioz.com www.accessoweb.com www.ergonomie-interface.com www.optimisation-conversion.com www.ux-fr.com uxdesign.smashingmagazine.com uxdesign.smashingmagazine.com/tag/usability uxdesign.smashingmagazine.com/tag/user-expérience www.pouledesign.com/design/livre-blanc-ergonomie-web aquitem.surleblog.fr/2012/08/levolution-dinternet-entre-2002-et-2012 www.ergonomie-interface.com/conception-maquettage/euroia-2012-partie2 blocnotes.iergo.fr/breve/motsetphrases/loi-de-hick

Podcasts REMIXJOBS #2 - Parlons aux sociétés du web REMIXJOBS #4 - QU’EST-CE QU’UN WEB-ERGONOME

Conférences 13 octobre 2011 / Paris - ParisWeb 2011 - Les goûts et les couleurs par David Rault 15 octobre 2011 / Paris - ParisWeb 2011 - Dompter le Web Mobile par Yves Van Goethem 15 octobre 2011 / Paris - ParisWeb 2011 - Flash ou HTML5 ? Quelle techno choisir et pour quel prix par Adrien Leygues 15 octobre 2011 / Paris - ParisWeb 2011 - La typo, mon navigateur et moi par Jérémie Patonnier 18 octobre 2012 / Paris - ParisWeb 2012 - How Designers Destroyed the World par Mike Monteiro 19 octobre 2012 / Paris - ParisWeb 2012 - Les tendances dans le web design, faut-il les suivre ou les fuir ?

19 octobre 2012 / Paris - ParisWeb 2012 - Applications mobiles : utiliser le web par Bruno Michel et Anne-Sophie Tranchet 20 octobre 2012 / Paris - ParisWeb 2012 - Bien démarrer avec le Responsive Webdesign Grégoire Hoin et Benoît Vrins 20 octobre 2012 / Paris - ParisWeb 2012 - Collecter et prioriser les besoins de vos utilisateurs à l’aide de Focus Groups “Agile UX”. par Gautier Barrère et Éric Mazzone 7 février 2013 - Montréal - Tout le Monde UX - Le jeu sérieux et l’expérience utilisateur: et si on changeait le monde ?

11 avril 2013 / Montréal - Tout le Monde UX - La recherche terrain au service de l’innovation et de la conception

Emilien rosson

beau et utile, le web design.