L'art de la conception de boutons d'interface utilisateur de site Web: 10 tendances et conseils
La conception d'un bon bouton est quelque chose à laquelle la plupart des utilisateurs de sites Web ne pensent jamais… car quand il fonctionne bien, il est presque invisible. Les meilleurs boutons sont faciles à cliquer ou à toucher, ont une fonction évidente et aident les utilisateurs à interagir avec le design sans réfléchir.
C'est une formule assez simple, mais elle peut être difficile à concevoir si vous la laissez après coup.
Aujourd'hui, nous examinons les tendances en matière de conception de boutons, ainsi que quelques conseils pour vous aider à concevoir un bouton d'interface utilisateur sur lequel les gens cliquent encore et encore. Donnez un coup de pouce à la conception de vos boutons avec ces conseils, tendances et idées pour susciter l'inspiration.
Explorez les ressources de conception
1. Restez simple
Tout revient à cette phrase classique de la théorie du design: Keep It Simple, Stupid (ou Silly, si vous préférez).
La conception des boutons du site Web n'est pas différente. Une conception de bouton ne doit pas être trop complexe. Cela devrait être évident et fonctionnel. Parfois, d'autres tendances de conception peuvent entraver cela, ce qui peut avoir un impact sur les conversions sur votre site Web.
Donc, quand il s'agit de la conception des boutons, pensez comme ça - et ne pensez pas trop. Un bouton doit ressembler à un bouton. C'est si simple.
2. Offrez beaucoup de contraste
Presque aussi important que d'avoir un bouton identifiable, c'est de s'assurer qu'il est facile à voir.
La raison pour laquelle les styles de boutons fantômes au-dessus des images ont tendance et s'estompent rapidement est que les boutons n'avaient pas assez de contraste pour être facilement discernables. Les utilisateurs ne pouvaient pas les trouver tout de suite.
Ne masquez pas les boutons avec un mauvais contraste. Faites-les ressortir et crier avec beaucoup de couleurs et de contraste d'espace afin qu'ils se distinguent des autres éléments de l'écran. Laissez suffisamment de rembourrage autour des boutons pour qu'ils puissent respirer.
Cela rend les utilisateurs plus faciles à trouver et à identifier en tant qu'éléments cliquables et facilite physiquement le clic sans obtenir le mauvais élément par erreur.
3. Utilisez la couleur
Avez-vous déjà remarqué combien de boutons sont rouges ou orange? C'est parce que les couleurs vives attirent l'attention sur ces éléments et encouragent l'action.
L'utilisation de la couleur est également une technique de conception assez tendance. Des couleurs vives aux boutons avec des dégradés simples, la couleur pourrait être l'un des moyens les plus faciles d'aider les gens à interagir avec le design.
4. Écrivez une photocopie qui crée des attentes
Ne faites pas cette erreur: un bouton avec les mots "Cliquez ici" dessus. (Comment est-ce du spam?)
La microcopie dans une conception de bouton devrait créer une attente claire de ce qui se passera avec un clic. Dites aux utilisateurs ce qu'ils obtiendront ensuite. Cela peut être aussi simple que «Soumettre» pour saisir des données, ou en cliquant sur un lien pour «En savoir plus», ou regarder une vidéo. Quelle que soit l'action, informez les utilisateurs de la microcopie.
Ces informations peuvent aider à créer un climat de confiance avec les utilisateurs et à augmenter les conversions grâce aux actions / interactions que les utilisateurs jugent souhaitables.
5. S'engager avec une animation subtile
Il y a une tendance dans la conception de boutons où les sites Web utilisent deux boutons côte à côte. L'un est rempli, l'autre est un style fantôme. Les deux incluent une animation de survol qui met davantage l'accent sur deux choix cliquables.
L'animation peut aider à attirer l'attention sur les boutons et même à encourager les clics. C'est devenu un modèle utilisateur communément accepté d'inclure une animation de survol sur les boutons et fournit un signal simple aux utilisateurs qu'ils doivent engager.
N'allez pas par dessus bord. Les boutons tourbillonnants, tournoyants et clignotants sont plus ennuyeux qu'utiles.
6. Rendez-le assez grand pour exploiter
Les boutons doivent inclure une zone cliquable (taraudable) d'au moins 10 millimètres de diamètre, et plus grande est toujours OK. Ce conseil provient d'une étude du MIT Touch Lab qui a examiné la taille des coussinets en relation avec les appareils tactiles.
Mettons cela en perspective. La touche typique d'un clavier d'ordinateur physique est de 15 millimètres par 15 millimètres. Voilà un bon objectif. (N'oubliez pas de tenir compte des différentes tailles d'écran afin que votre bouton ne se perde pas sur les petits écrans.)
Si vous devez utiliser des boutons plus petits, envisagez d'y ajouter un large rayon de clic. De cette façon, si l'utilisateur manque les boutons lui-même, il y a suffisamment de place autour de lui pour que l'action souhaitée se produise toujours. (Les visiteurs de votre site vous remercieront.)
7. Utilisez un style familier
Il existe quelques styles de boutons généraux que tout le monde connaît. Utilisez l'un d'eux.
- Un bouton rempli rectangulaire avec des bords carrés et du texte à l'intérieur
- Un bouton rempli rectangulaire avec des bords arrondis et du texte à l'intérieur
- Un bouton rectangulaire rempli avec une ombre portée visible (ci-dessus)
- Un bouton fantôme rectangulaire
- Boutons circulaires simples, le plus souvent utilisés dans le coin inférieur droit pour indiquer le support, l'aide ou le chat
8. Placez dans un emplacement prévu
Non seulement les boutons doivent apparaître et fonctionner normalement, mais ils doivent également être situés dans un endroit où les utilisateurs les rechercheront.
- Pour les pages d'accueil, cela inclut le placement des boutons sous un titre principal ou un bloc de texte. Les boutons sont généralement alignés à gauche sur le texte ou au centre de l'écran.
- Pour les formulaires, des boutons apparaissent après les entrées. Certains formulaires d'entrée unique alignent le bouton sur la même ligne à droite de l'entrée.
- Les boutons CTA généraux apparaissent directement sous le contenu qu'ils référencent.
- Les boutons pour jouer ou démarrer une vidéo ou un jeu sont souvent au centre de l'écran d'aperçu.
- Les boutons du panier ou du commerce électronique sont généralement dans le coin supérieur droit.
9. N'oubliez pas les commentaires
Le bouton répond-il à l'interaction? Assurez-vous qu'il existe une boucle de rétroaction évidente incluse dans la conception de l'interface du bouton.
Fournissez une indication visuelle ou pédagogique que le bouton a fait son travail. Certains boutons nécessiteront plus de travail que d'autres. Les boutons qui pointent vers une autre page ou un site Web, par exemple, indiquent que le bouton a fonctionné si la nouvelle page se charge. Un bouton d'envoi de formulaire peut afficher un message de remerciement à l'écran si les informations sont soumises correctement.
10. Utilisez les boutons intentionnellement
Trop de boutons créent le chaos.
Utilisez les boutons là où ils ont du sens. Ne surchargez pas le design avec des boutons partout. Les utilisateurs n'auront pas une idée claire de l'endroit et de ce qui est le plus important à cliquer.
Boutons d'enregistrement à utiliser avec les objectifs du site Web. Ils devraient conduire les visiteurs vers les éléments les plus importants de votre conception globale.
Conclusion
Un bouton de site Web est un élément qui convertit votre appel à l'action en résultat. Prenez le temps de réfléchir à ce design, de la couleur à la fonction en passant par la microcopie. Testez la conception des boutons pour vous assurer que vous disposez de la version la plus fonctionnelle de votre interface.
Si vous avez un bouton qui fonctionne, ne tombez pas dans le piège des tendances et changez le design. En ce qui concerne les boutons, la fonction doit être la priorité absolue.
