Adexo
Nous sommes Adexo, une agence de consultants en solutions numériques.
Nous offrons du service-conseil et nous vous aidons à choisir vos fournisseurs en développement web et marketing numérique.

Pourquoi les sites web simples sont scientifiquement meilleurs?

Nous vous présentons une adaptation en français d’un excellent article dont le sujet cadre parfaitement avec la philosophie d’Adexo. En fait, ce sont les fondements mêmes de notre agence: Why « Simple » Websites Are Scientifically Better rédigé par Tommy Walker.

L’article est très long et contient de l’information technique. Si vous ne lisez pas l’article au complet, nous vous invitons à au moins lire la conclusion qui liste 7 éléments à faire lorsque vous désirez créer un site Web plus simple.

———————————–

Dans une étude publiée par Google, des chercheurs ont non seulement déterminé que les utilisateurs jugent de la beauté ou non d’un site Web en moins de 1/50e à 1/20e de seconde, ils jugent que les sites Web visuellement complexes sont moins beaux que leurs équivalents plus simples.

De plus, les sites très « prototypiques », c’est-à-dire les sites dont la mise en page est semblable à celle de la majorité des autres sites de la catégorie, avec des visuels simples, ont été évalués comme étant les plus beaux.

 

En d’autres mots, l’étude prouve que plus le design d’un site Web est simple, meilleur il est.

 

Mais pourquoi?

Dans cet article, nous allons examiner pourquoi des choses comme la maîtrise cognitive et la théorie du traitement de l’information visuelle, peuvent jouer un rôle critique dans la simplification du design d’un site Web et comment des designs plus simples peuvent augmenter vos conversions.

Nous examinerons également quelques études de cas de sites Web qui ont simplifié leur design, et comment cela a amélioré leur taux de conversion, en plus de donner quelques conseils sur la façon de simplifier le design de votre site Web.

 

Qu’est-ce qu’un site prototypique?

Si je dis « mobilier », quelle image apparaît dans votre tête? Si vous êtes comme la majorité des gens, vous pensez à une chaise. Si je vous demande quelle couleur représente les garçons, vous pensez à bleu et rose pour une fille. Pour une voiture vous pensez à une berline, etc.

La prototypicalité est l’image mentale de base que votre cerveau créé pour catégoriser ce avec quoi vous avez des interactions. Du mobilier aux sites Web, votre cerveau créé un modèle de la façon dont les choses devraient ressembler selon vous.

En ligne, la prototypicalité se décompose en petites catégories. Vous avez une image différente mais très spécifique pour les réseaux sociaux, les boutiques en ligne, les sites corporatifs, les blogues, etc., et s’il manque quelque chose sur un de ces sites qui fait partie de votre image mentale, vous rejetez ce site de façon consciente ou inconsciente.

Si je vous dis « boutique en ligne de vêtements à la mode pour les jeunes dans la vingtaine », vous pourriez penser à quelque chose comme:

boutique-vetements-mode

Crédit de l’image

 

Cet exemple suit si étroitement le prototype du « magasin en ligne de vêtements », qu’il partage de nombreuses caractéristiques des « wireframes » d’une boutique en ligne de vêtement de hip-hop.

boutique-vetements-hip-hop

Crédit de l’image

 

Aucun de ces sites ne manque d’originalité et il est peu probable qu’ils se soient copiés un et l’autre. Plutôt, ils vous présentent ce que vous vous attendez d’une boutique en ligne.

 

Que voulez-vous dire par « maîtrise cognitive »?

L’idée derrière la maîtrise cognitive est que le cerveau préfère penser à des choses qui sont facile à penser.

C’est pourquoi vous préférez visiter des sites dont vous savez instinctivement où tout se trouve, et dont vous connaissez les actions que vous êtes censé prendre.

La maîtrise cognitive guide notre pensée dans des situations où nous n’avons aucune idée qu’elle travaille pour nous, et elle nous influence dans toutes les situations où évaluons de l’information. » – Uxmatters.com

La maîtrise cognitive est la racine d’une autre facette du comportement connu sous le nom de « Effet de la simple exposition » (Mere Exposure Effect en anglais) décrit par Robert Zajonc, qui affirme que plus nous sommes exposés à un stimulus, plus nous avons un sentiment positif envers lui.

 

Encore une fois, les règles sont les mêmes en ligne.

 

C’est familier pour un blogue d’avoir un lien d’abonnement dans la colonne de droite, ou des boutiques en ligne d’avoir une grosse image avec un titre accrocheur en accueil, et de façon générale d’avoir le logo de l’entreprise sur le côté supérieur gauche de l’écran.

Si vos visiteurs sont conditionnés à certaines caractéristiques comme étant la norme dans l’industrie ou dans la catégorie de site, le fait de s’y éloigner pourrait inconsciemment classer votre site dans la catégorie « moins attrayant ».

 

Voici quelques boutiques en ligne. Voyez si vous remarquez des similitudes:

boutique-en-ligne-1

 

 

boutique-en-ligne-2

 

 

boutique-en-ligne-3

 

Avertissement: Quoi que vous fassiez, pour l’amour de Dieu, ne considérez pas ce que je dis comme « faîtes ce que tout le monde fait ». Si vous ne faites pas attention, vous pourriez vous faire très mal.

Il est important de connaître ce qui est prototypique dans notre catégorie mais il est encore plus important de trouver des preuves qui supportent nos choix de designs pour s’assurer de leur efficacité.

Plusieurs designers font de mauvais choix. Sans faire de recherche, vous pourriez également faire ces mauvais choix et penser que ces choix sont prototypiques. Par exemple, de nombreuses boutiques en ligne utilisent les carrousels d’images automatiques pour afficher leurs produits ou leurs offres sur la page d’accueil, mais plusieurs études démontrent que ces carrousels nuisent à vos conversions.

 

Qu’arrive-t-il lorsque vous répondez aux attentes minimales? – Une étude de cas

Dans les trois images présentées précédemment, tout ce que vous vous attendez d’une boutique en ligne sont présents, aux endroits que vous vous attendez. Même si vous n’aviez jamais vu ces sites auparavant, vous avez accordé une crédibilité à ces designs.

Avec un haut niveau de respect de ce qui est prototypique, un site Web nous paraîtra assez familier que nous n’aurons pas à offrir un effort mental élevé pour comprendre le site, ce qui nous permet de nous concentrer sur la raison principale pour laquelle nous sommes sur le site Web.

Par contre, lorsqu’un site sort trop de ce qui est prototypique, vous le sentez immédiatement. Prenez par exemple le détaillant de cravates en ligne, SkinnyTies.com, qui ne ressemblait pas vraiment à un site de commerce électronique jusqu’à sa refonte réalisée en octobre 2012.

Avant:

skinnyties-avant

Après:

skinnyties-apres

 

Voici quelques changements qui ont menés à d’énormes résultats:

  • Suit les principes prototypiques de mise en page d’une boutique en ligne;
  • Beaucoup plus épuré avec beaucoup de blanc;
  • Présentation d’un seul produit, avec des photos en haute résolution et des couleurs contrastées.

 

Voyez l’étude de cas complète de SkinnyTies.com (en anglais) qui démontre ce qui est possible de faire lorsqu’on fait une refonte de site Web avec les standards prototypiques actuels.

 

Voici les excellents résultats suite à la refonte, seulement 2.5 semaines après le lancement:

  • 42.4% d’augmentation des revenus provenant de tous les dispositifs de navigation;
  • 377.6% d’augmentation de revenus provenant des iPhone;
  • 13.6% d’augmentation du taux de conversion;
  • 71.9% d’augmentation du taux de conversion pour les utilisateurs d’iPhone;
  • 23.2% de réduction du taux de rebond;
  • 44.6% d’augmentation de la durée des visites.

 

Même si le design est très beau, il ne fait rien de révolutionnaire. Il joue exactement dans les attentes que les gens ont lorsqu’ils visitent une boutique en ligne moderne de vêtements. Il est épuré, fait en design adaptatif (ou responsive design en anglais) et dispose d’un design uniforme dans toutes les pages de présentation de produits.

Par contre, lorsque nous comparons les deux sites côte-à-côte, il est très clair que l’absence de ces éléments dans l’ancienne version empêchait les visiteurs à faire des achats sur le site.

skinnyties-cote-a-cote

Vous cherchez le meilleur hébergement WordPress sur le marché?

Lisez notre article présentant notre sélection des 5 meilleurs services.

Qu’est-ce que le traitement de l’information visuelle a à voir avec la complexité d’un site Web?

Dans une étude conjointe de l’Université Harvard, de l’Université du Michigan et de l’Université du Colorado, les chercheurs ont trouvé de solides corrélations mathématiques de ce qui est esthétiquement plaisant entre différentes données démographiques. Par exemple, les participants ayant un doctorat n’aimaient pas les sites Web très colorés, par contre aucune ligne directrice n’a émergée de façon universelle.

La seule chose qui était universelle était que plus un site Web était visuellement complexe, moins il semblait attrayant.

tableau-visuellement-attrayant

Si vous désirez faire le test de préférence visuelle, rendez-vous ici.

 

Pourquoi ce qui est simple est scientifiquement plus simple à traiter?

La raison pour laquelle des sites Web moins complexes visuellement sont considérés comme plus beaux est en partie expliquée par le fait que les sites moins complexes nécessitent moins de travail pour nos yeux et notre cerveau pour décoder, emmagasiner et traiter l’information.

Regardez cette courte vidéo (en anglais) qui explique comment nos yeux envoient l’information au cerveau, afin que cette affirmation fasse plus de sens.

Fondamentalement, votre rétine convertit l’information visuelle en impulsions électriques. Ces impulsions sont ensuite acheminées à travers les cellules photoréceptrices pour transmettre des informations de couleurs et de lumière au cerveau.

Plus il y a des variations de lumière et de couleur sur la page (complexité visuelle), plus l’œil doit travailler pour envoyer l’information au cerveau.

 

Chaque élément communique de l’information subtile

Voilà pourquoi il est important de se souvenir, lors de la conception d’un site Web, que chaque élément de la page, par exemple la typographie, le logo ou la sélection de couleurs, communique de l’information subtile à propos de notre marque.

Lorsque ces éléments ne font pas leur travail, le concepteur Web compense souvent en ajoutant des contenus et images inutiles, ajoutant ainsi à la complexité visuelle du site, nuisant alors à l’esthétique dans son ensemble.

L’optimisation d’une page pour le traitement visuel de l’information, donc la simplification du traitement de l’information entre l’œil et le cerveau, est simplement de communiquer le plus possible, avec le moins d’éléments possible.

 

Voici quelques réflexions à propos de la refonte du logo et du site de MailChimp pour appuyer la théorie.

Lorsqu’ils ont décidé de faire évoluer la marque, MailChimp n’ont pas ajouté le classique « nous sommes dans l’industrie du courriel depuis 2001, 3 millions de personnes nous font confiance, voici pourquoi nous sommes extraordinaires, bla bla bla ».

refonte-mailchimp

À la place, ils ont redressé l’écriture, simplifié le site Web, le titre du haut lit simplement « Send Better Email » (Envoyer de meilleurs courriels), et ils ont ajouté une animation très simple qui explique les bases du fonctionnement du produit.

Même si ces éléments font partie d’une stratégie plus complète de croissance, les résultats sont tout de même impressionnants. Plus d’un million de nouveaux utilisateurs ont été ajoutés depuis la refonte, en juin 2013.

alexa-mailchimp

 

« Mémoire de travail » et le Saint Graal de la conversion

Ce à quoi toute cette simplicité nous mène est ce qui arrive une fois que l’information visuelle trouve son chemin vers le cerveau.

Selon une célèbre étude du psychologue George A. Miller de l’Université Princeton, le cerveau d’un adulte moyen est capable de stocker entre 5 et 9 morceaux d’information au sein de la mémoire à court terme, la mémoire de travail.

La mémoire de travail est la partie du cerveau qui stocke et traite temporairement l’information dans le cadre de quelques secondes. C’est ce qui permet de concentrer notre attention, résister aux distractions, et surtout, guider notre prise de décision.

working-memory

Source de l’image

 

Tout ce qui a été mentionné jusqu’à présent dans cet article est de réduire le « bruit » qui fait son chemin dans la mémoire de travail.

Sur un site Web très prototypique et ayant une faible complexité, les 5 à 9 morceaux que la mémoire de travail tente de traiter sont les garanties, les descriptions de produits, les offres ou prix. Lorsque la mémoire de travail peut rester concentrée sur la résolution de problème, elle va essayer de régler le problème aussi rapidement que possible.

 

La déviation cause le désengagement

Lorsque vous déviez des attentes d’une personne, par exemple votre prix est plus élevé que prévu, la palette de couleurs et la symétrie ne sont pas adéquats, le site Web ne se charge pas assez rapidement, les photos ne sont pas en assez haute résolution, etc., la mémoire de travail traite ces détails plutôt que garder le focus sur ce qui est important.

Ceci est dû au fait que la mémoire de travail appelle la mémoire à long terme d’utiliser ce qu’elle sait déjà pour effectuer la tâche. Lorsque la mémoire à long terme ne peut pas aider dans le traitement de l’information, le flux est brisé et la mémoire de travail se désengage et va ailleurs.

C’est pourquoi il est vital de comprendre  les attentes de vos visiteurs, pas seulement pour les sites de votre catégorie, mais pour des sites Web en général, si vous désirez contrôler la mémoire de travail à l’aide du design.

Les blogues qu’ils lisent, les sites sur lesquels ils magasinent, leur navigateur Web, leur âge, leur sexe et leur localisation physique, tout cela aura un impact sur le niveau de familiarité que votre site Web aura sur eux, lors de la première impression.

 

Conclusion

Si vos visiteurs ne peuvent pas compter sur leur expérience passée, ils ne pensent pas à la façon dont votre site est novateur. Ils font juste se demander pourquoi les choses ne sont pas situées où elles devraient être. Ceci n’est pas le meilleur état d’esprit si vous désirez qu’ils achètent ce que vous avez à leur offrir.

 

Bonus: 7 éléments à faire lorsque vous désirez créer un site Web plus simple:

  1. Faites des recherches sur votre public cible et trouvez les sites qu’ils visitent le plus. Essayez ensuite de trouver des études de cas sur les modifications réalisés au design des sites en question et comment ces changements ont amélioré leur efficacité et performance;
  2. Parmi ce qui a été trouvé à l’étape 1, faîtes la liste de tout ce qui peut s’appliquer à rendre votre propre site plus efficace et performant;
  3. Respectez les règles de maîtrise cognitive lorsque vous créez votre design. Positionnez les éléments dans l’écran aux endroits où vos visiteurs s’attendent de les trouver;
  4. Utilisez vos propres couleurs, logo et typographie pour communiquer clairement et subtilement votre message. N’ajoutez pas de contenus ou de photo à moins que cela communique quelque chose dont votre visiteur aura vraiment de l’intérêt;
  5. Gardez votre site Web aussi simple que possible. Une grande image plutôt que plusieurs petites, une seule colonne plutôt que trois, utilisez le plus d’espace blanc possible;
  6. Vérifiez plusieurs fois que votre site Web correspond à ce que le public s’attend de celui-ci en matière de tarification, esthétique, vitesse de chargement, etc.
  7. Rappelez-vous que « prototypique » ne veut pas dire que tous les aspects de votre site doivent respecter le moule.

 

Ne considérez pas votre site Web comme étant un flocon de neige c’est-à-dire quelque chose de magnifique et unique. À la place, considérez votre site Web comme étant un rassemblement de tout ce qui se fait de mieux dans votre catégorie ou industrie.

Vos visiteurs l’apprécieront.

 

———————————–

Rappel: Cet article est une adaptation en français de l’article Why « Simple » Websites Are Scientifically Better rédigé par Tommy Walker.

Nous utilisons des cookies pour offrir une meilleure expérience.