Les premières impressions comptent : pourquoi un bon design visuel est essentiel

Publié: 2021-07-22

Les gens portent des jugements instantanés. Il ne faut qu'un dixième de seconde pour se faire une première impression sur une personne. Les sites Web ne sont pas différents.

Il faut environ 50 millisecondes (ms) (soit 0,05 seconde) aux utilisateurs pour se faire une opinion sur votre site Web qui détermine s'ils resteront ou partiront.

Ce nombre provient d'études spécifiques. Dans la première étude, les participants ont évalué à deux reprises l'attrait visuel des pages d'accueil Web présentées pendant 500 ms chacune. Dans une étude de suivi, ils ont réduit le temps d'exposition à 50 ms.

Tout au long, les cotes d'attrait visuel étaient fortement corrélées d'une phase à l'autre, tout comme les corrélations entre les conditions de 50 ms et de 500 ms. Ainsi, l'attrait visuel peut être évalué en 50 ms, ce qui suggère que vous disposez d'environ 50 ms pour faire une bonne première impression avec votre site Web.

Cette première impression dépend de nombreux facteurs : structure, couleurs, espacement, symétrie, quantité de texte, polices, etc. Ce post:

  • Recherche de détails sur les sites Web et premières impressions.
  • Vous montre comment créer un design visuel pour améliorer les premières impressions.

Remarque : Toutes les captures d'écran du site Web ci-dessous sont fournies à titre indicatif uniquement .

Recherche sur les sites Web et premières impressions

Les utilisateurs forment des opinions sur la conception en 17 ms.

Il y a quelques années, Google a confirmé le nombre de 50 ms dans ses propres recherches. En fait, selon leur étude, certaines opinions se développent dans les 17 ms, bien que l'effet soit moins prononcé sur certains facteurs de conception.

Les principales conclusions de leur étude étaient que les sites Web avec une faible complexité visuelle et une prototypie élevée (à quel point un design est représentatif d'une certaine catégorie de sites Web) étaient perçus comme très attrayants.

squaresquare exemple de page d'accueil prototype
Les gens ont des attentes sur ce à quoi devrait ressembler un site Web. S'en écarter est un risque, peu importe à quel point le design est imaginatif ou frappant.

À retenir : rendez votre conception de sites Web simple et familière. Suivez les conventions. Les gens ont une idée fixe de ce à quoi devrait ressembler un site de commerce électronique. Si vous optez pour des mises en page innovantes et non conventionnelles, les gens sont moins susceptibles de les aimer.

Remarque : consultez une tonne de directives de commerce électronique et d'idées de test dans notre rapport complet (247 directives spécifiquement pour le commerce électronique).

Il faut 2,6 secondes pour que les yeux se fixent sur les zones clés d'une page Web.

Il faut 2,6 secondes pour que les yeux d'un utilisateur se posent sur la zone d'un site Web qui influence le plus sa première impression.

Les chercheurs ont surveillé les mouvements oculaires des étudiants pendant qu'ils scannaient des pages Web. Les chercheurs ont ensuite analysé les données de suivi oculaire pour déterminer combien de temps il a fallu aux étudiants pour se concentrer sur des sections spécifiques d'une page, telles que le menu , logo, images et icônes de réseaux sociaux, avant de passer à une autre section.

Ils ont découvert que meilleure est la première impression, le plus long les participants sont restés sur la page.

  • Top 21 des idées de test A/B pour le commerce électronique

    Par CXL

    Améliorez votre première impression en testant ce qui fonctionne. Voici les 21 meilleures idées de test de commerce électronique dérivées de la recherche.

  • Ce champ est à des fins de validation et doit rester inchangé.
étude eye-tracking exemple de premières impressions de site web
L'étude a divisé le site Web en six sections, puis a surveillé les mouvements oculaires des étudiants. (Source de l'image)

Les six sections du site Web qui ont suscité le plus d'intérêt de la part des téléspectateurs étaient :

  1. Le logo de l'établissement. Les utilisateurs ont passé 6,48 secondes à se concentrer sur cette zone avant de passer à autre chose.
  2. Le menu principal de navigation. Presque aussi populaires que le logo, les sujets ont passé en moyenne 6,44 secondes à regarder le menu.
  3. Le champ de recherche . Les utilisateurs se sont concentrés pendant un peu plus de 6 secondes.
  4. L'image principale du site. Les yeux des utilisateurs sont fixés pendant 5,94 secondes en moyenne.
  5. Le contenu écrit du site . Les utilisateurs ont passé environ 5,59 secondes.
  6. Le bas d'un site Web . Les utilisateurs ont passé environ 5,25 secondes.

À retenir : une bonne première impression mène à une visite plus longue. Assurez-vous que les six éléments énumérés ici ont fière allure.

Les premières impressions sont liées à 94% au design.

Des chercheurs britanniques ont analysé comment différents facteurs de conception et de contenu informatif influencent la confiance des sites de santé en ligne. L'étude a clairement montré que l'apparence du site Web était le principal moteur des premières impressions.

exemple de conception de site Web propre
Une étude britannique a révélé que la plupart des critiques de sites Web reposaient sur la perception de la conception du site, et non sur son contenu.

Parmi tous les commentaires donnés par les participants au test, 94 % concernaient la conception :

  • Complexe;
  • Disposition occupée;
  • Manque d'aides à la navigation ;
  • Conception de sites Web ennuyeux;
  • Utilisation de la couleur ;
  • Annonces contextuelles ;
  • Présentations lentes du site ;
  • Petite impression;
  • Trop de texte ;
  • Aspect de l'entreprise ;
  • Faibles capacités de recherche.

Seulement 6 % des commentaires portaient sur le contenu réel. L'attrait visuel et la navigation sur le site Web ont eu la plus grande influence sur les premières impressions des gens sur le site.

Dans le même temps, une mauvaise conception de l'interface était associée à un rejet rapide et à une méfiance à l'égard d'un site Web. Lorsque les participants n'aimaient pas un aspect de la conception, l'ensemble du site Web était rarement exploré au-delà de la page d'accueil.

Des résultats similaires ont été trouvés dans des recherches pour Consumer WebWatch, menées par des experts en crédibilité de l'Université de Stanford. Ils ont constaté que ce que les gens disent sur la façon dont ils évaluent la confiance d'un site Web et comment ils le font vraiment sont différents.

Les données ont montré que le consommateur moyen accordait beaucoup plus d'attention aux aspects superficiels d'un site, tels que les repères visuels, qu'à son contenu. Par exemple, près de la moitié de tous les consommateurs (46,1 %) ont évalué la crédibilité des sites en fonction, en partie, de l'attrait de la conception visuelle, y compris la mise en page, la typographie, la taille de la police et les schémas de couleurs.

À retenir : un excellent design incite les gens à vous faire confiance et à rester. Une mauvaise conception crée la méfiance et fait partir les gens.

Pour les premières impressions, l'attrait visuel bat même la convivialité.

Une étude a examiné les effets de l'attrait visuel et de la convivialité sur les performances des utilisateurs et la satisfaction d'un site Web.

Les utilisateurs ont effectué différentes tâches sur des sites Web dont l'attrait visuel (élevé et faible) et la convivialité (élevé et faible) variaient. Les résultats ont montré que les premières impressions sont plus influencées par l'attrait visuel du site.

Les utilisateurs ont attribué des « notes de convivialité et d'intérêt » élevées aux sites très attrayants et des « notes de convivialité et d'intérêt » faibles aux sites avec faible faire appel. Les perceptions des utilisateurs d'un site Web peu attrayant n'étaient pas significativement influencées par la convivialité du site, même après une expérience réussie avec le site.

À retenir : investir dans le design. C'est ce qui compte le plus pour attirer les utilisateurs. Assez drôle, une excellente conception visuelle conduira à des notes d'utilisabilité plus élevées, et l'utilisabilité réelle aura beaucoup moins d'importance.

Une première impression positive peut augmenter la satisfaction globale.

Dans une expérience menée pour étudier les effets des attentes des produits sur les évaluations subjectives de l'utilisabilité, les participants ont lu une évaluation de produit positive ou négative pour un nouvel appareil mobile avant un test d'utilisabilité. Le groupe témoin n'a rien lu.

appareil mobile utilisé dans l'étude de l'amorçage avec des critiques de produits positives.
L'appareil utilisé dans l'étude. Les avis positifs sur les produits ont incité les utilisateurs à vivre une expérience plus positive, même lorsqu'ils n'ont pas réussi à terminer une tâche assignée.

L'étude a révélé l'effet étonnamment fort des attentes positives sur les évaluations subjectives post-expérience. Les participants qui ont lu la critique positive ont donné à l'appareil des notes post-expérience significativement meilleures que celles des groupes négatifs et non principaux.

Cet effet stimulant de la prime positive s'est maintenu même dans la condition de tâche difficile, lorsque les utilisateurs ont échoué à la plupart des tâches.

À retenir : si les utilisateurs aiment « instantanément » votre site, ils vous laisseront un peu de marge en cas de problème sur toute la ligne. Ce type d'amorçage peut également fonctionner dans l'autre sens : A n égatif la première impression diminue la satisfaction globale de votre site.

Alors si vous voulez faire bonne impression, par où commencer ?

Comment faire une bonne première impression avec un design visuel

1. Différenciez votre site Web (et votre entreprise) avec votre design.

Êtes-vous chic, idiot, sexy, avisé, intelligent, classique ou quoi? En quoi êtes-vous différent de la concurrence ? Communiquez-vous cela le plus rapidement possible par le biais de la typographie, des images et du design sur votre site Web ?

Il y a un équilibre entre éviter la conception « innovante » – qui peut rebuter les consommateurs – et rechercher un style visuel unique. Trop souvent, les entreprises du même secteur adoptent une approche « moi aussi » dans leur esthétique de conception.

Parfois, les sites concurrents sont si similaires que, si vous supprimiez le logo de l'en-tête du site, il serait presque impossible de distinguer un site d'un autre.

D'après ce que j'ai remarqué, c'est pour deux raisons principales :

  1. La conversation interne sur l'esthétique du design se transforme en une conversation sur les fonctionnalités, plutôt que sur le développement d'une identité visuelle distincte.
  2. Les caractéristiques et l'esthétique qui « semblent fonctionner » pour la compétition sont adoptées.

Bien sûr, lors du lancement du nouveau site, tout le monde est trop occupé à se donner des tapes à l'œil pour remarquer que le nouveau design est une copie quasi conforme d'un grand concurrent, ou que vous avez complètement négligé de demander aux clients existants pourquoi ils aimaient faire du shopping avec votre entreprise en premier lieu.

Si vous souhaitez ajouter plus de distinction à votre communication visuelle mais ne savez pas par où commencer, consultez la technique d'élicitation de la métaphore de Zaltman et appliquez-la à vos enquêtes qualitatives. Cela peut vous aider à créer une première impression qui reflète les valeurs fondamentales de votre marque sans aliéner les visiteurs.

Technique ZMET en recherche marketing de Taylan Demirkaya

« Identité de la marque » n'est pas seulement quelque chose de spongieux à mélanger. L'archétype Cheskin Research & Studio a découvert dès 1999 que les six facteurs les plus importants pour établir la confiance avec une entreprise de commerce électronique sont :

  • Marque;
  • La navigation;
  • Accomplissement;
  • Présentation;
  • Technologie de pointe;
  • Logos de sécurité.

Réfléchissez y un peu. Si la première impression est que votre site ne se distingue pas des autres sites Web, pourquoi quelqu'un devrait-il explorer vos pages de produits, et encore moins vous choisir par rapport à la concurrence ?

Voici un exemple : j'ai recherché « veste en cuir » sur Google pour voir si la distinction visuelle et la première impression globale seraient un problème lors d'une recherche aléatoire. Voici les trois premiers résultats :

Est-ce que quelque chose sépare ces trois sites ? Pas vraiment, même s'ils ne partagent pas exactement la même démographie.

Il m'a fallu un certain temps pour parcourir les résultats de recherche avant de trouver un site qui ne ressemblait pas à ceux ci-dessus, pour finalement tomber sur Bomboogie. Il est indéniable que la page se distingue de ses concurrents :

Contrairement à d'autres sites, la page projette immédiatement un sentiment différent : ce n'est pas une entreprise qui fabrique des vestes délicates et de haute couture. Leurs vestes sont "inspirées des vestes utilisées par les aviateurs", et le site ressemble à la pièce.

Il y a des années, lorsque j'ai fait cette recherche pour la première fois, le site le plus distinct que j'ai trouvé était Schott. Bien que j'aurais abandonné leur curseur d'image, leur navigation dans les bouchons de soda et la plupart des fausses textures, le design avait un charme qui a fait une première impression forte, d'autant plus qu'il s'agit d'une ancienne marque.

Schott

Vous pouvez ressentir le caractère et l'émotion, et avoir une idée de s'ils sont dignes de confiance ou non, c'est ce qui fait toute la première impression.

La tendance du design les a également rattrapés, et maintenant ils ressemblent beaucoup plus à tous les autres sites :

Shopify a créé une liste de 100 superbes designs de commerce électronique qui présentent des entreprises avec des premières impressions distinctes.

À retenir : vous pouvez (et devez) communiquer une identité de marque unique sans être trop innovant au point de semer la confusion ou de gêner les utilisateurs.

2. Inspirez les visiteurs du site pour créer une première plus forte impression.

Une étude portant sur le rôle des premières impressions dans les sites Web touristiques a révélé que les éléments liés à l'inspiration avaient le plus grand impact sur première impression s.

Cela suggère que les stimuli visuellement attrayants sont un outil important pour amener les gens à rester plus longtemps sur un site et, ainsi, convertir plus de visiteurs en acheteurs.

vue inspirante de la nature sur le site de voyage chilien

La convivialité était le deuxième facteur le plus important de formation de la première impression, suivie de la crédibilité.

Dans l'ensemble, cela nous indique que les voyageurs veulent s'inspirer d'une destination (images). Ils ne veulent pas gaspiller leur énergie mentale à comprendre des choses (utilisabilité), et ils veulent être sûrs que le fournisseur de voyages est légitime (crédibilité).

À retenir : si vous vendez un rêve (par exemple, l'idée de partir en vacances au Chili), la photographie inspirante est le principal créateur de première impression.

3. Assurez-vous que la zone au-dessus du pli bascule.

Au fil des ans, la question au-dessus de la ligne de flottaison a été vivement débattue. La recherche indique que les gens n'ont aucun problème à faire défiler et, en fait, préfèrentpartage le contenu en plusieurs pages. Qu'est-ce que cela a à voir avec les premières impressions?

9 tueurs de crédibilité de site Web

Par Alex Birkett

Apprenez à créer une page Web qui inspire la confiance, pas le scepticisme, qui facilite un achat au lieu de le dissuader.

  • Ce champ est à des fins de validation et doit rester inchangé.

Voici une nouvelle façon de penser au problème au-dessus de la ligne de flottaison : il doit être la meilleure partie de votre site Web. Les premières impressions se forment en 0,05 seconde. Les utilisateurs ne feront pas défiler vers le bas pendant ce temps.

Par conséquent, ce qu'ils voient immédiatement sans faire défiler est ce qui détermine s'ils font jamais défiler vers le bas. Dans cet esprit…

Portez une attention particulière à votre navigation.

exemple de navigation claire sur le site

De nombreuses études de cartes thermiques ont montré que la navigation est généralement l'une des zones les plus consultées d'un site Web. Mais au-delà des catégories typiques, que devriez-vous inclure ?

Selon une étude de Business Insider sur les raisons pour lesquelles les gens abandonnent leur panier, 25 % des personnes ont déclaré que le « site Web est trop compliqué » (c'est-à-dire que la navigation est difficile à utiliser), et près de 60 % ont noté des « frais ) comme principale raison pour laquelle ils sont partis sans pa oui .

graphique montrant pourquoi les acheteurs partent sans payer dans un magasin de commerce électronique
Les coûts cachés et les sites Web compliqués sont deux raisons principales pour lesquelles les utilisateurs quittent les sites Web sans payer.

Dans une autre étude réalisée par eConsultancy, les visiteurs interrogés sur l'achat sur un site de commerce électronique inconnu ont noté que « conception professionnelle », « le site contient des marques bien connues » et « avoir des informations de contact visibles » ont tous influencé leur décision d'acheter (ou de ne pas acheter ).

résultats d'une étude sur les achats auprès d'un détaillant que vous ne connaissez pas.

Bien faite, la navigation d'un site peut inclure tout ou partie des éléments qui, s'ils sont absents, découragent les visiteurs d'acheter.

Il suffit de regarder ce qui est communiqué dans la navigation d'un de mes sites préférés, ThinkGeek, sans jamais entrer dans le contenu du site :

navigation sur le site qui véhicule de nombreuses informations précieuses.

Sans avoir à trop chasser, il est facile de trouver :

  • Sensibles au temps promotions;
  • Plusieurs façons de naviguer plus profondément dans le site (catégories, intérêts, recherche);
  • Produits nouveaux, haut de gamme et exclusifs, ainsi qu'un aperçu des produits qu'ils proposent (cadeaux, t-shirts, appareils électroniques, chèques-cadeaux);
  • Un programme de récompenses ;
  • Produits en vente;
  • Leur seuil de « Livraison gratuite » ;
  • Disponibilité du support client (via les boutons « Live Chat » et « Aide »).

Comparez cela à un exemple extrême, comme Zara, et vous verrez pourquoi c'est important :

exemple de navigation minimaliste

Étude de cas : Alight augmente les recherches sur le site de 16 % et les achats de 25 %

Vieux Allumé

Alight (maintenant CurvyHQ) savait que leur site semblait daté. Le détaillant pour femmes de taille plus a modernisé la navigation sur l'ensemble de son site.

Ils ont augmenté la taille de leur barre de recherche, supprimé le symbole de confiance, incorporé les catégories « vente » et « nouvelles » dans la zone de navigation rose et clarifié leur proposition de valeur, entre autres mises à jour mineures.

navigation sur la page d'accueil mise à jour avec barre de recherche

Le résultat a été une augmentation des recherches sur le site de 16% et une augmentation des achats globaux de 25%, le tout en faisant de la navigation une première impression forte.

Les premières impressions, sur des sites Web ou dans la NBA, peuvent durer des années.

Les recherches des économistes Barry Staw et Ha Hoang se sont penchées sur l'impact du projet de décret dans la NBA. Ils ont observé la carrière des joueurs pendant cinq ans après leur repêchage. Cinq ans suffisent pour faire vos preuves à bien des égards, alors le projet de décret ne devrait pas jouer un rôle, n'est-ce pas ?

Tort. Selon l'étude, le temps de jeu que les joueurs obtiennent est en corrélation avec leur ordre de repêchage. Les équipes ont accordé plus de temps de jeu aux joueurs hautement repêchés et les ont conservés plus longtemps, même après avoir contrôlé les performances des joueurs sur le terrain, les blessures, le statut commercial, la position jouée et d'autres facteurs.

Chaque incrément du nombre de draft (c'est-à-dire être drafté neuvième au lieu de huitième) diminuait le temps de jeu jusqu'à 23 minutes. Incroyablement, le projet d'ordre a continué à prédire le temps de jeu jusqu'à la cinquième année d'un joueur dans la NBA, la dernière année mesurée dans l'étude. Les joueurs repêchés au premier tour ont également eu des carrières plus longues; ils ont joué 3,5 ans de plus que les autres.

exemple de page d'accueil qui fait une première impression claire et forte

Une autre étude a examiné la persistance des premières impressions. Il a découvert que les nouvelles expériences qui contredisent une première impression deviennent « liées » au contexte dans lequel elles ont été faites. Cependant, les premières impressions dominent toujours dans d'autres contextes.

Notre cerveau stocke les expériences contraires aux attentes comme des « exceptions à la règle ». La règle (c'est-à-dire la première impression) est considérée comme valide sauf pour le contexte spécifique dans lequel elle a été violée.

À retenir : si une première impression est négative, cela pourrait nuire à l'utilisateur pendant des années.

Conclusion

L'attrait visuel est important. Beaucoup. Mon conseil : n'essayez jamais d'économiser de l'argent sur le design. J'ai vu à maintes reprises comment une refonte « simple » de la conception a entraîné des augmentations de conversion significatives.

Les gens se forment leur opinion sur votre site en quelques millisecondes. La première seconde sur votre site Web peut avoir plus d'importance que toutes les secondes qui suivent (le cas échéant). Assurez-vous qu'une seconde fait une bonne première impression.