Guide de conception des boutons: comment concevoir un bouton converti

Pourquoi écrire un guide de conception de boutons? Les boutons sont – ils si importants? Pourquoi dépenser autant d’énergie sur une petite partie de l’interface utilisateur? Bien que les boutons – poussoirs soient courants et semblent simples dans la conception du Web, leur importance ne doit pas être sous – estimée. Ce sont des éléments importants des sites qui exécutent des tâches très importantes. En particulier sur les sites de commerce électronique, les boutons – poussoirs, en tant que principaux appels à l’action, ont en fait une incidence sur les résultats. Cependant, même les boutons de partage social, d’inscription par courriel et de soumission de formulaires sont essentiels au succès du site.
C’est pourquoi, dans cet article, je voudrais discuter en détail de cet élément de conception souvent négligé et de la façon de créer des boutons de conversion élevés pour les sites WordPress. Bien que l’accent soit mis sur le CTA (appel à l’action), nous discuterons également de nombreux conseils généraux sur la conception des boutons. Le sujet a appuyé sur votre bouton? Puis continuez à lire. Avant de commencer, nous examinerons brièvement les tests A \/ B plus tard et nous examinerons quelques lignes directrices claires pour la création et l’utilisation de boutons. Ces principes vous aideront à réfléchir à la conception, à l’emplacement et à d’autres propriétés importantes de tout bouton sur votre site Web.
Toutefois, il faut aussi garder à l’esprit qu’il ne s’agit là que d’une base pour améliorer le taux de conversion. Les principes de conception vous permettent de deviner ce qui fonctionnera, mais pour vraiment savoir quel bouton contient la clé pour convertir un visiteur en un abonné, un acheteur ou quelqu’un d’autre, vous devez le tester. L’exécution d’un test A \/ B vous donne une idée de ce qui convient vraiment à votre site, de la couleur des boutons, des copies, de l’emplacement et de la meilleure réponse des visiteurs à d’autres paramètres. Parce que tout compte. Même les plus petits changements peuvent avoir un impact énorme sur les taux de conversion
Ulsanti est un rectangle ou un rectangle arrondi. Les utilisateurs d’ordinateurs sont exposés à ce design depuis longtemps, donc ils le connaissent très bien. Source: wikipedia est utilisé avec la permission de Microsoft et bien sûr d’autres formes, y compris des carrés, des cercles, des triangles et même des formes personnalisées. En fait, il y a beaucoup d’exemples de boutons extravagants et inhabituels, comme sur les palettes. Le choix d’une forme moins traditionnelle peut rendre la conception de votre site cohérente. Cependant, comme le montre Apple iOS, cela ne signifie pas qu’il ne fonctionne pas. Image de ienjoyeverytime \/ shutterstock. Com. Quoi que vous choisissiez, assurez – vous d’être cohérent. Évitez d’utiliser une conception différente pour différents boutons. Cela permet non seulement d’améliorer l’interface utilisateur, mais aussi de s’assurer que les utilisateurs peuvent identifier les boutons dans l’ensemble du site.
Un autre point de conception important est les ombres et les lumières. Les ombres extérieures sont devenues une indication courante que l’élément est cliquable ou tactile. D’autres graphismes l’utilisent également comme signal fonctionnel. Source: matériel. Io fournit des étiquettes claires en plus de la conception de base, des étiquettes claires sont également importantes pour l’utilisation des boutons. Sans étiquette, l’utilisateur ne peut pas déterminer son comportement. Les étiquettes ne doivent pas nécessairement être écrites et les icônes peuvent fonctionner (voir le bouton partage social). La combinaison des deux est une autre possibilité, en particulier sur les boutons e – commerce. Image de prixel Creative \/ shutterstock. Com. Il est important que l’utilisateur comprenne l’impact de cliquer sur un bouton. S’ils ne le font pas, ils pourraient d’abord éviter de le faire. Voici quelques lignes directrices pour des étiquettes claires: utilisation descriptive et spécifique de verbes d’action, a
Par exemple, la barre latérale amovible du monateur: En cas de doute, une bonne règle pratique pour placer un bouton est de se demander où l’utilisateur regardera. La conception devrait guider le chemin de l’utilisateur, de sorte que le bouton peut être sa conclusion logique sur le chemin du site. Notez la taille et l’espacement maintenant nous allons discuter d’un sujet particulièrement important dans la conception mobile. Le comportement des utilisateurs qui interagissent avec votre site Web en touchant est moins précis que celui des utilisateurs qui utilisent la souris. Par conséquent, vous devez leur permettre d’utiliser et d’accéder aux boutons sans problème ni risque de toucher les mauvais boutons. Source: la première étape d’Apple est de s’assurer que le bouton est assez grand. La largeur moyenne du bout des doigts humains est de 8 à 10 mm. Par conséquent, les articles qu’Apple propose de fabriquer doivent être utilisés à une vitesse d’au moins 44px par 44px (en utilisant des points plutôt que des pixels pour l’affichage rétinien). Les recommandations d’autres fabricants s’articulent également autour du marquage de 10 mm. Bien sûr, vous pouvez réduire légèrement la taille de la conception web que votre Bureau utilise. En même temps, vous devez tenir compte de l’espacement entre les boutons. Vous ne voulez pas décevoir un utilisateur parce qu’il pousse accidentellement quelque chose qu’il ne veut pas. L’immense espace rend également les éléments plus faciles à détecter, ce qui est important pour les grands appels à l’action. Une fois que les boutons ou votre site sont reconnus et disponibles, vous devriez envisager quand ils sont réellement appelés. Ces boutons peuvent avoir différents états d’existence: normal – reconnaissable comme un bouton indiquant qu’il peut être cliqué sur Focus: change lorsque vous passez le curseur sur le bouton, confirme à l’utilisateur que l’action peut être pressée – Édition supplémentaire pour récompenser l’utilisateur
53xjiopu Little. Gazouillis Com \/ wznpyterd2 – design pickle (@ design pickle) 25 juillet 2015 les boutons de comparaison sont également importants pour établir l’ordre entre eux. Lorsqu’il y a deux choix ou plus, plus la couleur est forte, plus vous pouvez indiquer lequel vous préférez ou suggérer aux visiteurs de choisir. Source: le bouton quickpout Summary est un élément central mais souvent négligé de la conception web. Tout de suite. En particulier, sous la forme d’appels à l’action, ils peuvent avoir un impact considérable sur les taux de conversion, les taux de clics et d’autres indicateurs importants de succès. Par conséquent, le thème de la conception et du placement des boutons – poussoirs ne doit pas être sous – estimé. En dernier analyse, Créez des boutons efficaces: Assurez – vous qu’ils s’adaptent à votre conception globale assurez – vous qu’ils sont reconnus par l’utilisateur parce que les boutons fournissent des étiquettes de localisation claires où l’utilisateur peut les trouver attention à la taille et à l’espacement fournir des commentaires lors de l’utilisation pour les différencier du reste du site et ces guides vous aideront à définir Vos utilisateurs ne peuvent cliquer que sur. Toutefois, comme indiqué au début, ces meilleures pratiques devraient servir de point de départ. Pour vraiment comprendre quels boutons s’appliquent à votre site et comment améliorer la conversion, la conception des boutons devrait toujours aller de pair avec des tests A \/ B approfondis. Heureusement, nous avons aussi un article sur ce sujet. Quelle est votre expérience de la conception de boutons? Y a – t – il d’autres ajouts importants? Veuillez nous le dire dans la section commentaires ci – dessous! Un microcosme de l’article berrycat \/ shutterstock. Com