Nous parlons beaucoup de détails dans la conception. C'est pour une bonne raison. Faire attention aux moindres détails peut faire ou défaire un dessin.
Aujourd'hui, nous allons approfondir un de ces détails et examiner des moyens de concevoir des boutons sur lesquels les utilisateurs veulent cliquer (ou appuyer). Même si les boutons sont l’un des éléments les plus petits de votre conception, ils sont l’un des plus importants. Sinon, comment communiquer des actions à un utilisateur? Sinon, comment pourraient-ils fournir des informations dans cette boucle de rétroaction?
Réfléchissez un instant à l’une des grosses plaintes concernant le design plat au tout début: les utilisateurs ne savaient pas ce qui était et ce qui n’était pas interactif dans le design. D'où l'importance d'une excellente conception des boutons.
Il devrait avoir l'air palpable
Les utilisateurs doivent voir un bouton dans la conception et penser qu'ils doivent - euh, veulent - tendre la main et le toucher. Alors que presque n'importe quel bouton de taille est cliquable sur un écran, la taille et le remplissage d'un bouton sur un périphérique tactile sont essentiels.
L'utilisateur moyen a une taille de doigt comprise entre 8 et 10 millimètres. Dans cet esprit, une cible de 10 sur 10 millimètres constitue une excellente taille de départ pour les boutons des appareils tactiles. (C'est légèrement plus petit que les touches standard de votre clavier.)
Vous pouvez également concevoir plusieurs éléments pour donner à un élément l’apparence du toucher.
- Une ombre subtile peut? Lever? Élément de l'arrière-plan pour le rendre un peu plus proche de l'utilisateur.
- Le rembourrage accru autour des boutons leur permet de sembler plus facile à cliquer et aide à guider l'utilisateur vers l'élément.
- Les actions de survol ou de bascule colorées peuvent montrer aux utilisateurs ce qu’elles font, et indiquer une action.
La couleur compte
La couleur des boutons doit être spéciale dans la conception du site Web. C'est un bon endroit pour utiliser une couleur d'accent particulière et l'utiliser uniquement pour les actions de bouton.
La couleur des boutons doit être brillante et attrayante. Il y a une raison pour laquelle tant de conceptions incluent des boutons jaunes, bleus ou verts. Ils sont faciles à voir et se démarquent du reste de la conception. Pour un bouton qui se démarque vraiment, sélectionnez une couleur complémentaire de la couleur principale du dessin (opposés sur la roue chromatique).
L'autre problème de couleur est la marque. Vous souhaitez sélectionner une couleur de bouton qui correspond à votre palette de couleurs et à votre identité de marque. Même si vous souhaitez qu'une couleur de bouton se démarque dans la conception, elle doit fonctionner avec - et non contre - votre jeu de couleurs primaire.
La taille compte encore plus
Faites le grand!
Les boutons ont besoin d’un certain poids pour que les utilisateurs soient immédiatement attirés vers eux par l’écran. La tendance des boutons fantômes - les contours sans couleur de bouton distincte - est axée sur les gros boutons en termes de nombre de pixels mais manque de poids visuel. En termes de taille, un bouton doit être grand dans les deux cas. (C’est l’une des raisons pour lesquelles cette tendance est tombée de la mode.)
Il y a un point délicat quand un bouton passe de taille parfaite à gênant surdimensionné. Le moment exact où cela se produit dépend de l'échelle des autres éléments de conception, mais vous saurez avec certitude quand cela se produira. Si vous ne voyez que le bouton dans la conception, il est fort probable qu'il soit trop gros.
Le placement est la clé
Où dans la conception le bouton devrait-il aller? Existe-t-il un emplacement qui permette de générer plus de clics que d’autres?
Dans la plupart des cas, les boutons doivent suivre le contenu qu'ils sont conçus pour compléter.
- À la fin d'un formulaire
- À la droite d'un message d'appel à l'action
- Au bas de la page ou de l'écran
- Centré sous un message
Pourquoi ces placements? Parce qu'il suit le chemin naturel d'action et la façon dont les utilisateurs lisent et interagissent avec les sites Web.
Focus sur le contraste
Avec tous les éléments de conception, le contraste est une considération importante. Cela est vrai des techniques utilisées au sein de l'élément lui-même, mais également de la relation entre l'élément et son placement dans la conception et dans l'environnement.
N'oubliez pas de penser aux techniques suivantes dans cet environnement dual:
- Couleur
- Tapez poids et taille
- Taille des éléments
- Forme en ce qui concerne l'arrière-plan
- Transparence ou animation
- Ombres ou Graidents
- Espace blanc et rembourrage
Utiliser des formes standard
En ce qui concerne les boutons, vous ne devez prendre en compte que deux formes:
- Cercles. Le bouton circulaire est devenu populaire grâce aux concepts Material Design et Material Lite. Avec une esthétique similaire, un bouton rond fonctionne avec le design et s’adapte au modèle de l’utilisateur.
- Rectangles Cette forme par défaut devrait être votre référence pour tous les boutons, sauf si vous utilisez un cercle dans l'exemple ci-dessus. C'est ce que les utilisateurs savent et ce à quoi ils sont habitués. La plupart des rectangles de boutons ont tendance à être au moins deux fois plus larges que hauts (parfois trois ou quatre fois plus larges). Les utilisateurs voient cette forme et savent immédiatement quoi faire. Certains peuvent faire valoir le bien-fondé des angles arrondis par rapport aux angles à 90 degrés, mais l’un ou l’autre convient également en fonction de votre style de conception.
Dire aux utilisateurs quoi faire
Chaque bouton doit inclure une instruction de texte qui indique aux utilisateurs ce que le bouton fera exactement. Vous voulez garder la langue courte et simple et elle devrait correspondre au ton du reste de la conception du site Web.
Ensuite, tenir cette promesse. La prochaine chose qui apparaît devrait indiquer à l'utilisateur qu'il est arrivé à la destination attendue. Qu'il s'agisse de soumettre un formulaire, de faire un achat ou simplement de passer à un autre lien, l'utilisateur doit obtenir le résultat souhaité en interagissant avec le bouton. (Si ce n'est pas le cas, assurez-vous qu'une erreur est indiquée dans la boucle de rétroaction pour que vous sachiez quelles corrections doivent être apportées à la conception du site Web.)
Voici des exemples de messagerie par bouton:
- Cliquez ici
- Créer un compte maintenant
- Essayez-le gratuitement
- Ajouter au panier
- Lire la suite
Donner aux boutons une grande importance visuelle
La plupart des conceptions sont remplies de petits éléments d'interface utilisateur.Un des pièges qui se produit est que la conception de ces éléments est poussée jusqu’à ce que le projet soit presque terminé. Ensuite, vous choisissez un design pour tous les éléments de l'interface utilisateur, avec quelques petites différences.
Ne reste pas coincé dans cette situation dangereuse.
Dans la conception, les boutons doivent ressembler à seulement des boutons! Rien dans la conception ne devrait avoir la même forme, la même couleur et le même poids visuel qu'un bouton. Ils doivent être différents. Pensez à créer un style pour les boutons plus volumineux que tout autre élément similaire de la conception ou utilisez une couleur d'accent seulement pour les boutons. Ces techniques peuvent aider à donner à un bouton un aspect spécial et à en souligner l’utilisation.
Conclusion
Commencez-vous à repenser certains de vos choix de conception de boutons? Pensez-vous pouvoir créer quelque chose qui encouragera mieux les clics?
Essayez quelques-uns de ces conseils tout en gardant un œil sur l’analyse de votre site Web pour voir précisément les modifications apportées à la conception auxquelles votre base d’utilisateurs réagit. Utilisez ces informations pour vous aider à créer encore plus de boutons cliquables pour les projets futurs.