Conseils de conception des boutons: simples, petits et d'une importance vitale
Nous parlons beaucoup de détails dans la conception. C'est pour une bonne raison. Prêter attention aux moindres détails peut faire ou défaire un design.
Aujourd'hui, nous allons approfondir l'un de ces détails et étudier les moyens de concevoir des boutons sur lesquels les utilisateurs souhaitent cliquer (ou appuyer). Même si les boutons peuvent être l'un des plus petits éléments de votre conception, ils sont l'un des plus importants. Sinon, comment pourriez-vous communiquer des actions à un utilisateur? Sinon, comment pourraient-ils fournir des informations dans cette boucle de rétroaction?
Pensez un instant à l'une des grandes plaintes concernant le design plat dans les premiers stades: 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.
Explorez les ressources de conception
Il devrait être palpable
Les utilisateurs devraient voir un bouton dans la conception et penser qu'ils doivent - euh, vouloir - tendre la main et le toucher. Bien que presque n'importe quel bouton de taille soit cliquable sur un écran, la taille et le rembourrage autour d'un bouton sur un appareil tactile sont vitaux.
L'utilisateur moyen a une taille de bout de doigt comprise entre 8 et 10 millimètres. Dans cet esprit, une cible de 10 x 10 millimètres est une excellente taille cible de départ pour les boutons des appareils tactiles. (C'est légèrement plus petit que les touches standard de votre clavier.)
Il y a quelques choses de design que vous pouvez faire pour rendre un élément tactile également.
- Une ombre subtile peut «soulever» l'élément de l'arrière-plan pour le faire se sentir un peu plus près de l'utilisateur.
- Un rembourrage accru autour des boutons les rend plus faciles à cliquer et aide à guider l'utilisateur vers l'élément.
- Des actions de survol ou de bascule colorées peuvent montrer aux utilisateurs ce qu'ils font en temps réel et signifier une action.
Questions de couleur
La couleur des boutons doit être spéciale tout au long de 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 des boutons.
La couleur des boutons doit être lumineuse et attrayante. Il y a une raison pour laquelle de nombreux modèles incluent des boutons jaunes, bleus ou verts. Ils sont faciles à voir et se distinguent du reste de la conception. Pour un bouton qui se démarque vraiment, sélectionnez une couleur qui est une paire complémentaire à la couleur principale dans la conception (opposés sur la roue chromatique).
L'autre préoccupation de couleur est la marque. Vous souhaitez sélectionner une couleur de bouton qui fonctionne avec votre palette de couleurs et votre identité de marque. Peu importe combien vous voulez qu'une couleur de bouton se démarque dans la conception, elle devrait fonctionner avec - et non contre - votre jeu de couleurs principal.
La taille compte encore plus
Faites grand!
Les boutons ont besoin d'un peu de poids pour que les utilisateurs soient immédiatement attirés sur l'écran. La tendance des boutons fantômes - contours sans couleur de bouton distincte - se concentre 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 sens. (C'est une des raisons pour lesquelles la tendance est passée de mode.)
Il y a cependant un point délicat quand un bouton passe d'une taille parfaite à une taille embarrassante. 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 le bouton est tout ce que vous voyez dans la conception, il est probable qu'il soit trop grand.
Le placement est la clé
Où dans la conception le bouton doit-il aller? Y a-t-il un emplacement qui aidera à générer des clics plus 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
- À droite d'un message d'appel à l'action
- En bas de la page ou de l'écran
- Centré sous un message
Pourquoi ces stages? Parce qu'il suit la voie naturelle de l'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 aussi de la relation entre l'élément et son placement dans la conception et ces environnements.
N'oubliez pas de penser aux techniques suivantes dans ce double environnement:
- Couleur
- Type poids et taille
- Taille des éléments
- Forme en relation avec l'arrière-plan
- Transparence ou animation
- Ombres ou graidents
- Espace et rembourrage
Utiliser des formes standard
En ce qui concerne les boutons, il n'y a que deux formes à considérer:
- 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'instance ci-dessus. C'est ce que les utilisateurs savent et sont habitués. La plupart des rectangles de bouton 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. Alors que certains peuvent faire valoir les mérites des coins arrondis par rapport aux angles à 90 degrés, l'un ou l'autre est également approprié en fonction de votre style de conception.
Dites aux utilisateurs quoi faire
Chaque bouton doit inclure une instruction de texte qui indique exactement aux utilisateurs ce que fera le bouton. Vous voulez garder la langue courte et simple et elle doit correspondre au ton du reste de la conception du site Web.
Alors, tenez 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, d'effectuer un achat ou de simplement passer à un autre lien, l'utilisateur doit obtenir le résultat souhaité en interagissant avec le bouton. (Sinon, assurez-vous qu'il y a une erreur indiquée dans la boucle de rétroaction pour vous afin que vous sachiez quelles corrections doivent se produire dans la conception du site Web.)
Voici des exemples de messagerie de bouton:
- Cliquez ici
- Créez un compte maintenant
- Essayez-le gratuitement
- Ajouter au chariot
- Lire la suite
Donner aux boutons une grande importance visuelle
La plupart des conceptions sont remplies de petits éléments d'interface utilisateur. Un piège qui se produit est que la conception de ces éléments est poussée jusqu'à ce que le projet soit presque terminé. Et puis vous choisissez un design pour tous les éléments de l'interface utilisateur, avec quelques petites différences.
Ne restez pas coincé dans cette situation dangereuse.
Dans la conception, les boutons ne devraient ressembler qu'à des boutons! Rien d'autre 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 qui soit plus grand que tout autre élément similaire dans la conception, ou utilisez une couleur d'accent uniquement pour les boutons. Ces techniques peuvent aider à rendre un bouton spécial et à souligner son utilisation.
Conclusion
Commencez-vous à repenser certains de vos choix de conception de boutons? Pensez-vous que vous pouvez créer quelque chose qui encouragera mieux les clics?
Essayez quelques-uns de ces conseils tout en gardant un œil sur les analyses de votre site Web pour voir précisément à quels changements de conception votre base d'utilisateurs répond. Utilisez ces informations pour vous aider à créer encore plus de boutons cliquables pour de futurs projets.
