Ces lois du design qui boostent votre chiffre d’affaires
La création d’un site Internet est une étape cruciale pour votre entreprise. Vitrine de votre marque et responsable de son attractivité, votre site devra intégrer de nombreux de critères pour transformer un prospect en client.
Impactant au premier coup d’œil, agréable, mémorable, facile d’utilisation, fiablegrâce à différents éléments bien placés… Autant de détails importants que nous vous expliquons par ailleurs dans un de nos précédents articles.
Mais pour intégrer ces critères à votre site tout en offrant une expérience de navigation optimale à vos prospects, il est primordial de connaître certaines grandes lois du design.
Ces lois, qui se basant sur des études neuroscientifiques, montrent la manière dont les utilisateurs naviguent sur une page, de même que ce que l’on peut faire concrètement pour la rendre agréable tout en débouchant sur une vente
Par exemple :
- Comment présenter son offre sur sa page pour qu’elle soit visible ?
- Comment disposer les différents éléments d’une page pour qu’ils soient faciles à trouver ?
- Comment faire en sorte qu’un bouton d’achat soit cliqué ?
Pour cela, nous aborderons 6 lois incontournables du design :
- La loi de Hick
- La loi de Jakob Nielsen
- La loi de Gestalt
- La loi de Miller
- La loi de Fitts
- La loi de Parkinson
Commençons par la loi de Hick, ou la difficulté de trancher quand on a trop de choix.
1. La loi de Hick
En règle générale, avoir trop de choix peut nous paralyser et finir par nous empêcher de prendre une décision. C’est par exemple ce qui vous arrive quand vous êtes devant le frigo du marchand de glace.
Nous nous perdons en réflexion : plutôt vanille ou fraise, ou non, chocolat, ou non encore, pistache… La variété est trop grande et nous finissons bien souvent par choisir le même parfum que d’habitude.
En réalité, la charge cognitive de la réflexion (autrement dit l’effort de réflexion) est trop importante. Notre cerveau choisit alors de prendre un raccourci et va vers un choix qui est plus facile pour lui.
La loi de Hick décrit et applique ce phénomène aux éléments que l’on peut trouver sur une page de vente. Imaginons qu’une page de vente contient :
- Trop de produits en catalogue
- Trop de boutons d’appel à l’action
- Trop de champs à remplir dans un formulaire
- Trop de textes à lire
Cette exposition à de trop nombreux éléments sur une page peut :
- brouiller le message principale
- décourager l’achat ou l’action
- faire quitter l’internaute de votre site web
Voici donc quelques conseils pour disposer efficacement les éléments de votre page web, et notamment les boutons d’appel à l’action (CTA) et les formulaires : vos prospects seront encouragés et cliqueront plus facilement !
a. Dupliquer les boutons si le texte est long
Si l’on propose une longue page de texte, il peut être judicieux d’égrener le même appel à l’action à plusieurs endroits sur la page.
S’il n’existe pas de règle précise quant au nombre de répétitions à faire, n’hésitez pas à émettre une hypothèse puis à mener des a/b tests pour savoir combien de fois les répéter et à quel endroit.
b. Rendre les zones à remplir visibles et claires
Si le but est par exemple de construire une liste d’emails, il faut créer une zone visuelle bien délimitée, où l’on indique clairement ce qu’il faut faire, et où. Pour cela, il faut bien mettre en évidence :
- le bouton sur lequel cliquer
- le champ où entrer son email
- le libellé du champ pour permettre de savoir ce qu’il faut y écrire (mettre des exemples, voire des explications sur ce qui est demandé, etc.)
c. Proposer une seule action à la fois
Si le but est par exemple d’inviter le prospect à réserver un rendez-vous dans votre agenda en ligne, il faudra éviter de mettre différents appels à l’action (CTA) sur la même page, par exemple :
- un CTA d’inscription à la newsletter
- un CTA pour télécharger un pdf gratuit
- un CTA d’achat d’un produit, etc.
Cela provoquera l’effet inverse de celui recherché, à savoir l’impossibilité de choisir et certainement l’abandon de la page.
En plus de réduire le choix, voyons à présent comment disposer ces différentes options sur une page pour offrir la meilleure expérience de navigation possible.
2. La loi de Jakob Nielsen
Regardez les 4 pages d’accueil de ces sites Internet. Pour chacun, repérez où se situe :
- le logo de la marque
- la barre de recherche
- le menu avec les différents onglets
Les positions sont-elles toutes les mêmes ?
Voici la réponse :
- le logo de la marque se situe en haut à gauche
- la barre de recherche est centrée en haut de la page
- le menu avec différents onglets est horizontal et en haut de la page
Vous voulez savoir pourquoi ces similitudes dans l’agencement des quatre sites ? Parce que les designers actuels suivent la loi Jakob Nielsen.
Cette loi montre qu’utiliser des interfaces au design similaire permet aux utilisateurs de s’y retrouver lorsqu’ils naviguent. Ainsi, si votre site est agencé de la même manière que celui des autres, les internautes trouveront rapidement votre logo, la barre de recherche, le menu etc. Vous offrirez alors à vos utilisateurs une expérience optimale.
Et si vous intégrez à tout cela la notion de “flow”, c’est encore mieux !
a. Le parcours client
Le parcours client (ou customer journey) est l’ensemble des étapes chronologiques que va franchir un utilisateur-type en fonction de son/votre objectif final. Pour chacune de ces étapes, il est important de définir les éléments que vous allez placer dans votre interface, c’est ainsi que vous pouvez guider l’utilisateur vers l’action escomptée.
Par exemple :
- Si vous voulez que vos prospects fassent une recherche sur votre site, vous présenterez une barre de recherche au milieu de votre page.
- Si vous voulez qu’à l’issue de la recherche, ils cliquent sur le bouton “acheter”, vous présenterez ce bouton à plusieurs endroits sur les pages de résultat de sa recherche.
Globalement, le parcours client dans une boutique en ligne peut être représenté de la façon suivante :
A vous d’imaginer ce que vous souhaitez que votre futur client accomplisse à chacune de ces étapes. Et ne perdez jamais de vue votre objectif final, car chacune des étapes n’est qu’un moyen de faire rencontrer le besoin de votre prospect avec votre proposition de valeur. C’est le secret pour booster votre chiffre d’affaires !
A présent, vous savez l’importance de réduire et de bien placer les éléments-clés de votre interface. Voyons désormais comment orienter et regrouper les éléments d’une page web entre eux.
3. La loi de la Gestalt
Cette loi au nom allemand trouve son origine dans le développement de la psychologie de la forme (gestalt), un courant psychologique et philosophique du début du 20e siècle.
La théorie de la Gestalt a expliqué comment nous percevons le monde qui nous entoure. Elle a permis de mettre en avant que notre cerveau va chercher à ordonner, simplifier et mettre en forme les différents éléments de son environnement. Il tente donc d’amener de la simplicité dans la complexité.
En ce sens, toujours selon cette loi, les éléments qui vont dans le même sens, dans un même mouvement, sont automatiquement regroupés par notre cerveau.
Appliquée à l’UX design, cette loi implique que si l’internaute est confronté à des éléments ordonnés (par exemple des listes), il les associera instinctivement comme faisant partie d’un tout. Il en sera de même pour des blocs ou des sections d’une page web ou tout autre élément similaire.
En pratique, vous pourrez donc regrouper des formes pour :
- faire comprendre plus facilement une information
- permettre à l’internaute de comparer
- pousser l’internaute à effectuer une action
4. La loi de Miller
Selon les études du psychologue Georges A. Miller, la mémoire à court terme peut retenir entre5 et 9 éléments nouveaux maximum.
Les designers doivent donc limiter le nombre d’informations nouvelles pour que l’utilisateur se concentre sur l’essentiel (et ne retienne que cela !). Moins d’infos sera le maître mot. Mieux vaut présenter les informations par “petits morceaux” appelés “chunks”, plutôt qu’en bloc.
A votre avis, est-il plus facile de retenir ce bloc de chiffres ?
Ou ces groupement de chiffres séparés par des points et des slashs ?
Au moment d’indiquer le passage au paiement par exemple, il est important de simplifier la tâche en proposant des blocs clairs et séparés.
Les exemples aussi sont très importants : l’utilisateur mobilise moins de ressources cognitives s’il peut suivre un formulaire pré-rempli.
Passons maintenant à la loi du “smartphone first”.
5. La loi de Fitts
Les utilisateurs achètent autant depuis leurs smartphones que depuis leurs ordinateurs, si ce n’est plus. Les bons designers l’ont bien compris et n’oublient jamais de penser leur design à la fois pour un smartphone, une tablette ET pour un ordinateur.
La loi de Fitts détermine le temps qu’il faudra pour atteindre un point d’arrivée, en fonction de sa distance avec le point de départ.
Appliqué à l’UX design, et en particulier sur un smartphone, il s’agira de trouver la distance la plus courte entre le point d’arrivée, le call-to-action, et le point de départ, là où se situe le doigt de l’utilisateur au départ.
En tenant le smartphone dans la main droite, le pouce atteindra plus facilement le bas de l’écran, on placera donc naturellement le CTA en bas.
La prise en considération de ces petits éléments peut faire une grande différence dans les taux de conversion de vos interfaces, c’est pourquoi il ne faut pas les négliger !
6. La loi de Parkinson
Cette loi prouve que l’urgence augmente l’efficacité.
Vous l’avez peut-être déjà vu dans le monde du travail : plus une tâche est urgente et plus un employé fournira des efforts à court terme pour l’accomplir. C’est le cas de l’étudiant qui fait son devoir en “dernière minute”, boosté par l’adrénaline d’une “deadline” toute proche, etc. A l’inverse, s’ il sait qu’il a beaucoup de temps, il étalera ses efforts sur la durée.
En design, on crée cette urgence en intégrant sur la page du site :
- des éditions ou places limitées
- des ventes flashs
- des offres promotionnelles temporaires
On peut aussi intégrer sur la page un chronomètre, un compte à rebours, etc.
Et l’avantage dans tout cela est que tous ces petits trucs ne demandent pas des développements importants…
a. Le fold : la surprise et l’urgence
Le fold (ou ligne de flottaison en français) est une ligne virtuelle sur votre page, en-dessous de laquelle on peut aller uniquement en scrollant. Cette section est déterminante pour la poursuite de la navigation d’un internaute sur votre site web.
Dès lors, il est important que l’utilisateur comprenne qu’il y a du contenu caché et qu’il ait envie de faire l’effort de “scroller” vers la bas pour le découvrir. Placer une petite flèche animé vers le bas peut p.ex. inviter votre utilisateur à scroller vers le bas, car 80% des utilisateurs s’arrêtent aux informations du dessus du “fold” et ne scrollent pas.
Au-delà de la gestion du fold, le design doit guider l’utilisateur en tout temps. Autrement dit, à tout moment, l’utilisateur doit savoir :
- où il est
- la prochaine action qu’il peut faire (et surtout que vous souhaitez qu’il fasse)
Ne sous-estimez donc pas ces éléments qui améliorent fortement vos taux de conversion sur une interface.
Que faut-il retenir ?
Il ne faudra pas plus de 50 millièmes de secondes à un prospect pour savoir s’il a envie d’aller plus loin sur votre site ou non. C’est pour cette raison qu’il est primordial de soigner son design non seulement sur le plan esthétique mais aussi et surtout navigationnel.
Simple et agréable, la navigation doit permettre à l’utilisateur de franchir les différentes étapes jusqu’à l’objectif final, jusqu’au passage à l’action :
- acheter
- s’abonner
- s’inscrire…
Pour cela, n’hésitez pas à vous servir des différentes lois du design dont nous avons parlé dans cet article. Elles se basent sur des résultats de recherches en neurosciences ainsi que des tests menés sur des utilisateurs.
Grâce à ces lois nous savons ce qui pousse un utilisateur à l’action :
- un choix limité d’éléments (produits, photos…)
- un placement des éléments similaires à la majorité des sites web
- un schéma de navigation qui le mène d’un point à un autre
- un nombre limité d’informations à retenir
- un design adapté à tous les supports (mobiles, tablettes, desktop)
- un sentiment d’urgence (un peu d’adrénaline)
En résumé, le nec plus ultra sera un design simplifié, qui limite l’effort cognitif à fournir par l’utilisateur, avec si possible une petite touche d’adrénaline.
Pour réussir à prendre en compte tous ces aspects techniques et graphiques, n’hésitez pas à faire appel à des professionnels qui pourront soit vous conseiller sur l’orientation stratégique à prendre, soit vous créer le design sur-mesure qui fera décoller vos taux de conversion (et votre chiffre d’affaires !).
- Gratuit
- Sans engagement
- Sourire garanti !
