Pour une meilleure conception UX : puis-je cliquer dessus ?

Comment des changements subtils peuvent augmenter votre CTR

Tout le monde veut plus de clics. Plus de robinets. Plus d'utilisateurs disant "Oui, je suis dans tout ce que vous me donnez." Nous voulions examiner quelques façons qui incitent réellement les utilisateurs à cliquer davantage, c'est là que la conception UX entre en jeu !

C'est assez bien étalé sur tout le Web : lorsque vous incitez les utilisateurs à cliquer, un changement subtil peut faire beaucoup de chemin. Nous avons examiné ce que pourraient être exactement ces changements subtils et l'effet qu'ils pourraient avoir sur vos conversions.

Polices

Les polices peuvent avoir un effet énorme fou. Par exemple, en 2009, Tropicana a changé de marque de manière importante, et une grande partie de cela a été de refaire sa police. N'oubliez pas que la police Tropicana est aussi leur logo.

Image via Vital Design

Les ventes ont rapidement chuté de 20 %.

Les polices sont également l'une des choses les plus stables sur lesquelles vous pouvez compter lorsque vous incitez les gens à cliquer.

Généralement, une police audacieuse sans empattement avec un contraste élevé fera très bien l'affaire.

Pourquoi? C'est le plus facile à lire. Des exemples de ceci sont partout sur Internet. Basecamp, BaseCRM,, Evernote, mHelpDesk - toutes ces entreprises ont les mêmes CTA - contraste élevé, police sans empattement en gras. C'est facile à voir, c'est facile à lire. C'est pourquoi les entreprises ont tendance à l'utiliser plutôt que des polices serif. (Il en va de même pour les affiches - vous pouvez le lire depuis des lustres). De plus, sans serif est plus facile à lire sur un ordinateur, c'est pourquoi vous voulez l'utiliser lorsque vous voulez que le lecteur clique - il a besoin de savoir ce que vous dites avant toute autre chose.

Ombres portées + effets 3D

C'est incroyable de voir comment les ombres portées et la création de quelque chose en 3D peuvent amener les gens à cliquer dessus. C'est vraiment le seul inconvénient majeur du design plat. (Actuellement. L'autre est que, finalement, ça va être fou.) Quand les choses sont vraiment plates, elles ont fière allure, mais il n'est pas si facile de savoir ce qui est cliquable et ce qui ne l'est pas. Jakob Nielsen en a parlé lorsqu'il a évalué Windows 8 en 2012.

Parce que les gens cliquent plus lorsque les choses ressemblent à des boutons, des bords arrondis ou une ombre portée, il est très facile de savoir ce qui est cliquable et ce qui ne l'est pas.

(conseil de pro : on les appelle des boutons de style kiosque).

Cela pose en fait un problème intéressant. Les boutons de style kiosque étaient à l'origine utilisés dans les arcades et autres endroits à l'époque. Ainsi, lorsque nous sommes passés au numérique, cette norme s'est poursuivie. Cela a du sens, mais à un moment donné, ils deviennent des boutons biseautés et 3D pour le simple fait d'être des boutons 3D biseautés, pas parce que quelqu'un se souvient réellement d'où ils viennent. C'est comme l'icône de sauvegarde de la disquette - la racine skeuomorphe finit par devenir arbitraire, et elle n'est plus skeuomorphe.

Tout cela pour dire que les gens sont plus à l'aise de cliquer sur des boutons de style kiosque en ce moment, mais nous pourrions voir un éloignement constant si un design plat peut rester quelques années de plus.

Mouvement

Beaucoup de gens associent le mouvement à la création de quelque chose de 3D cliquable, mais je pense que c'est suffisamment important pour justifier une catégorie à elle seule, d'abord du point de vue UX, et ensuite en raison de ce que cela signifie pour le design plat.

D'un point de vue UX

Les utilisateurs ont besoin de commentaires pour leurs actions. C'est le moyen numéro 1 d'aider les utilisateurs à comprendre où ils se trouvent et quoi faire.

Le premier travail pour rendre quelque chose cliquable est de dire aux utilisateurs qu'il peut être cliqué.

En ce qui concerne les boutons, par exemple, le moindre changement de dégradé peut faire des merveilles. Par exemple, la page d'accueil d'Eventbrite utilise un léger changement de dégradé sur ses icônes pour montrer qu'elles sont cliquables et renforcer l'emplacement de l'utilisateur :

Un autre excellent exemple est la page d'accueil du site Web d'eTecc/Interactive. Ils utilisent en fait un remplissage pour faire savoir à l'utilisateur que quelque chose est cliquable.

C'est un moyen tellement simple de comprendre comment informer les utilisateurs de ce qui est cliquable et de ce qui ne l'est pas. Et à mesure que les choses deviennent de plus en plus plates, ce retour visuel est de plus en plus important. Curieusement, c'est quelque chose qu'Apple pourrait améliorer. Consultez la page d'accueil Apple.ca.

Il semble que les liens en haut soient cliquables, ce qu'ils sont, et il y a un petit changement de gradient pour réaffirmer cette connaissance pour l'utilisateur. Nous pouvons également supposer que l'option Afficher la galerie est également cliquable, et encore une fois, il y a un changement de couleur pour renforcer cela.

Mais le problème est que tout l'écran est en fait cliquable ! C'est extrêmement peu intuitif pour l'utilisateur et en tant que personne qui clique beaucoup , il m'a fallu un certain temps pour comprendre pourquoi la page ne cessait de changer. Ce n'est pas du tout une interface utilisateur intuitive.

D'un point de vue plat

Ainsi, même si Apple n'a pas réussi à 100% du temps, ils sont assez proches. Et le mouvement permet aux concepteurs de créer les interfaces plates qu'ils souhaitent tout en permettant aux utilisateurs de savoir ce qui est cliquable et ce qui ne l'est pas. Remarquez comment tous les exemples étaient des conceptions exceptionnellement plates ? Divulgation complète, j'avais prévu cela. Cela montre que la conception plate peut fonctionner pour un bouton, tant qu'il y a un retour.

Voici un exemple de design plat (plutôt) sans retour - alors qu'il est clair pour moi qu'il s'agit d'un bouton, sans retour , j'ai un peu l'impression que mon ordinateur ne fonctionne pas.

Contraste + Couleur

Malheureusement, il n'y a pas de code RVB particulier qui garantit aux gens de cliquer. Mais il existe d'excellentes règles à suivre qui vous aideront. Si vous voulez que les utilisateurs cliquent sur quelque chose, vous voulez qu'il se démarque. Cela signifie que vous en avez besoin pour contraster de manière spectaculaire avec tout ce qui l'entoure, même si cela signifie rompre avec la palette de couleurs d'une marque.

Par exemple, David Hamill recommande d'utiliser une couleur pour les hyperliens qui n'est utilisée pour rien d'autre. Sur son site, chaque lien est fait en rose. En tant qu'utilisateur, il est facile de savoir ce qu'est un lien et ce qui ne l'est pas. Combiné avec un changement lorsque vous passez la souris dessus, il est vraiment évident pour l'utilisateur que vous puissiez cliquer sur quelque chose.

Ce type de problème de couleur et de contraste se présente le plus souvent avec des appels à l'action (CTA) et des boutons, et un petit changement de couleur peut entraîner un énorme changement dans les bénéfices. Par exemple, Vibethink a écrit sur les CTA et les boutons, et a signalé que la modification de la couleur et de la forme d'un bouton augmentait les conversions (lire : les clics) de 35 %. Ils ont estimé que le contraste accru facilitait le clic des utilisateurs.

Mais ils ont changé deux choses, donc ce n'est pas absolument scientifique. Hubspot a publié en 2011 les résultats de certains tests A/B sur les boutons rouges et verts et a constaté que le bouton rouge surpassait le bouton vert de 21 %.

La couleur et le contraste peuvent donc jouer un rôle énorme pour inciter les utilisateurs à cliquer sur des éléments.

Emballer

Le diable est dans les détails. En tant que concepteurs, développeurs, UX et spécialistes du marketing, chaque fois que nous rendons quelque chose cliquable, nous demandons à l'utilisateur de faire quelque chose. Cliquez ici. Présenter une demande. Contactez-nous. Acheter maintenant. Quoi qu'il en soit, c'est quelque chose qu'ils ont et dont nous avons besoin. Alors pourquoi ne pas simplifier cela ? La meilleure façon d'aider vos utilisateurs à cliquer (et donc probablement de vous aider) est de faciliter le clic. En adaptant les boutons aux attentes avec une conception de style kiosque, en rendant les polices faciles à lire sur un écran (même si elles sont petites) et en fournissant des commentaires sur les boutons et le contenu cliquable, vous simplifiez la vie de vos utilisateurs.

C'est ça, vraiment. Lorsque vous rendez quelque chose cliquable, simplifiez la vie de vos utilisateurs en même temps.

Vous avez aimé cet article ? Vous pouvez également lire notre article Comprendre vos utilisateurs pour améliorer la conception UX de votre site Web ou nos excellents produits que chaque concepteur UX devrait posséder !