Maison / Art Graphisme / L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces

L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces

La plupart des utilisateurs de sites Web ne pensent jamais à la conception de boutons géniaux… car, quand ils fonctionnent bien, ils sont presque invisibles. Les meilleurs boutons sont faciles à cliquer ou à toucher, ont une fonction évidente et aident les utilisateurs à interagir avec la conception sans y penser.

C’est une formule assez simple, mais il peut être difficile à concevoir si vous le 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 utilisateurs 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.

1. Keep It Simple

conception de bouton de site Web  L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces loom 2

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 de 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 en matière de conception peuvent gêner cela et avoir un impact sur les conversions sur votre site Web.

Donc, quand il s’agit de concevoir des boutons, pensez comme ceci – et n’y pensez pas trop. Un bouton devrait ressembler à un bouton. C’est si simple.

2. Fournir beaucoup de contraste

conception de bouton de site Web  L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces anna

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 situés en haut des images ont tendance à disparaître rapidement est due au fait 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 contraste faible. Faites-les se démarquer et crier avec beaucoup de contraste de couleurs et d’espace afin qu’ils se distinguent des autres éléments sur l’écran. Laissez suffisamment de rembourrage autour des boutons pour qu’ils puissent respirer.

Cela facilite la recherche et l’identification des boutons par les utilisateurs en tant qu’éléments cliquables, ainsi que leur physique plus facile à cliquer sans obtenir le mauvais élément par erreur.

3. Utiliser la couleur

conception de bouton de site Web  L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces helm

Avez-vous déjà remarqué combien de boutons sont rouges ou oranges? C’est parce que les couleurs vives attirent le regard sur ces éléments et incitent à l’action.

L’utilisation de la couleur est également une technique de design plutôt tendance. Des couleurs vives aux boutons avec des dégradés simples, la couleur peut être l’un des moyens les plus faciles d’aider les gens à interagir avec le dessin.

4. Écrire une microcopie qui crée une attente

conception de bouton de site Web  L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces volk

Ne faites pas cette erreur: un bouton avec les mots «Cliquez ici» dessus. (C’est comment le 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 vont obtenir ensuite. Cela peut être aussi simple que «Soumettre» pour entrer des données ou cliquer sur un lien pour «En savoir plus» ou regarder une vidéo. Indépendamment de 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 avec des actions / interactions que les utilisateurs jugent souhaitables.

5. S’engager dans une animation subtile

conception de bouton de site Web  L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces cognito

Il existe une tendance dans la conception des boutons: les sites Web utilisent deux boutons côte à côte. On est rempli, on est un style fantôme. Les deux incluent une animation de survol qui met en évidence deux choix cliquables.

L’animation peut attirer l’attention sur les boutons et même encourager les clics. L’inclusion d’une animation survolée sur les boutons est devenue un modèle d’utilisateur communément accepté, qui permet aux utilisateurs de s’informer facilement.

Il suffit de ne pas aller à la mer. Les boutons tourbillonnants, clignotants et tournants sont plus agaçants qu’utiles.

6. Faites-en assez gros pour taper

conception de bouton de l'interface utilisateur  L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces kittycat

Les boutons doivent inclure une zone cliquable (tappable) d’au moins 10 millimètres de diamètre, et une plus grande est toujours OK. Ce conseil provient d’une étude réalisée par le MIT Touch Lab qui ressemblait à une taille de doigt par rapport aux appareils tactiles.

Mettons cela en perspective. La clé typique d’un clavier d’ordinateur physique est de 15 millimètres sur 15 millimètres. C’est un bon objectif. (N’oubliez pas de prendre en compte différentes tailles d’écran pour que votre bouton ne soit pas perdu sur les petits écrans.)

Si vous devez utiliser des boutons plus petits, envisagez d’ajouter un large rayon de clic. De cette façon, si l’utilisateur manque les boutons lui-même, il ya suffisamment de place autour de lui pour que l’action souhaitée se produise. (Les visiteurs de votre site vous remercieront.)

7. Utilisez un style familier

conception de bouton de l'interface utilisateur  L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces sugat

Il existe quelques styles de boutons généraux que tout le monde connaît. Utilisez l’un d’entre eux.

  • Un bouton rectangulaire rempli avec des bords carrés et texte à l’intérieur
  • Un bouton rectangulaire rempli avec des bords arrondis et texte à l’intérieur
  • Un bouton rectangulaire rempli avec une ombre portée visible (ci-dessus)
  • Un bouton fantôme rectangulaire
  • Boutons circulaires simples, généralement utilisés dans le coin inférieur droit pour indiquer une assistance, une aide ou une discussion en ligne

8. Placez dans un emplacement prévu

conception de bouton de l'interface utilisateur  L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces 222 1

Non seulement les boutons doivent apparaître et fonctionner normalement, mais ils doivent également être situés dans un endroit où les utilisateurs les chercheront.

  • 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 avec le texte ou au centre de l’écran.
  • Pour les formulaires, les boutons apparaissent après les entrées. Certains formulaires à 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 auquel ils font référence.
  • Les boutons permettant de lire ou de démarrer une vidéo ou un jeu se trouvent souvent au centre de l’écran de prévisualisation.
  • Les boutons de panier d’achat ou de commerce électronique sont généralement situés dans le coin supérieur droit.

9. N’oubliez pas vos commentaires

conception de bouton de l'interface utilisateur  L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces intents

Le bouton répond-il à l’interaction? Assurez-vous qu’une boucle de rétroaction évidente est incluse dans la conception de l’interface du bouton.

Indiquez au visuel ou à l’instruction que le bouton a fait son travail. Certains boutons nécessiteront plus de travail que d’autres. Les boutons liés à une autre page ou à un autre site Web, par exemple, indiquent que le bouton a fonctionné si la nouvelle page est chargée. Un bouton de soumission de formulaire peut fournir un message de remerciement à l’écran si les informations sont correctement envoyées.

10. Utiliser les boutons intentionnellement

conception de bouton de l'interface utilisateur  L’art de la conception de boutons d’interface utilisateur de sites Web: 10 tendances et astuces amram

Trop de boutons créent le chaos.

Utilisez des boutons là où ils ont du sens. Ne surchargez pas le motif avec des boutons partout. Les utilisateurs n’auront aucune idée précise de l’endroit où cliquer et de ce qui est le plus important.

Enregistrez les boutons pour les utiliser avec les objectifs du site. Ils devraient amener les visiteurs aux é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 un résultat. Prenez le temps de réfléchir à cette conception, de la couleur à la fonction au microcopie. Testez les conceptions de boutons pour vous assurer que vous disposez de la version la plus fonctionnelle dans votre interface.

Si vous avez un bouton qui fonctionne, ne tombez pas dans le piège des tendances et ne modifiez pas le design. En ce qui concerne les boutons, la fonction devrait être la priorité absolue.

Source

A propos newstrotteur-fr

Découvrez également

John Boskovich à O-Town House (Contemporary Art Daily) CCSAA 22Powerless22001 900x1372 310x165

John Boskovich à O-Town House (Contemporary Art Daily)

Artiste: John Boskovich Lieu: O-Town House, Los Angeles Titre de l’exposition: Psycho Salon Sélectionné par: …

Laisser un commentaire