Conception des boutons: suivre six règles

Il est absolument nécessaire d’ajouter un bouton sur le site. Non seulement ils aident les utilisateurs à interagir avec votre site, mais ils les encouragent également à consacrer plus de temps. Dans certains cas, les boutons ne semblent pas jouer un rôle important, mais trouver un bon endroit pour eux peut en fait augmenter les ventes et rendre l’expérience utilisateur plus agréable. Lisez plus sur ce sujet dans cet article créé par l’équipe d’amelia (le plugin Best booking pour WordPress). Principes fondamentaux de la conception des boutons Comme pour la plupart des travaux de conception, de nombreuses règles doivent être respectées, quel que soit le type de bouton à créer. Tous les boutons personnalisés doivent suivre ces règles de base et les boutons que vous créez doivent avoir un style basé sur leur utilisation sur la page.
Plus important encore, ces boutons doivent attirer l’attention de l’utilisateur sur eux. Par conséquent, le bouton est souvent accompagné d’une déclaration d’appel à l’action qui encourage l’utilisateur à cliquer dessus. Mais vous ne pouvez pas compter uniquement sur le CTA pour attirer les utilisateurs, et les règles de conception traditionnelles ne distinguent pas vos boutons, donc vous devez être créatif. Il s’agit d’un court guide qui vous aidera à comprendre les boutons et à énumérer six règles différentes qui assureront le succès de vos boutons. Types de boutons il existe plusieurs types de boutons parce qu’ils peuvent être utilisés à différentes fins. Ils peuvent être placés n’importe où dans l’interface du site, et pour de meilleurs résultats, vous devez choisir le type de bouton le plus approprié pour votre site. Pour créer votre propre bouton, sélectionnez l’un des types suivants:
Texte C’est probablement le type de bouton le plus courant. Ils ressemblent à des blocs de texte accentués simples. Dans la conception des boutons, les boutons texte ne sont pas très efficaces parce qu’ils n’ont pas assez d’accent
Cependant, vous pouvez les utiliser lorsque c’est exactement ce que vous voulez faire. Un fantôme. Les boutons GHOSTING, également appelés boutons de contour, sont un peu difficiles à concevoir. Ils sont généralement utilisés pour des opérations moins importantes, mais pour des boutons texte pour les opérations principales. Le processus de conception des boutons de type Ghost est un peu plus compliqué que le type de bouton texte.
Amélioration Les boutons surélevés sont également connus sous le nom de boutons include, que vous pouvez identifier par une forme rectangulaire avec un effet 3D. L’effet 3D est réalisé en utilisant des ombres extérieures ci – dessous. Cela lui donne l’air d’un vrai bouton, donc il est plus intuitif d’appuyer dessus. Activer \/ désactiver Le type de bouton on \/ off est utilisé par l’utilisateur pour grouper plusieurs actions en un seul bouton ou pour afficher une série de paramètres. Dans le premier cas, l’utilisateur clique sur un bouton et ne sélectionne qu’une seule option à la fois. Vous ne pouvez pas ajouter une deuxième option chaque fois que vous sélectionnez une option. Si vous cliquez sur une autre option, la première option est automatiquement désélectionnée.
Dans ce dernier cas, le bouton on \/ off vous permet d’activer ou d’éteindre différents paramètres. Flottant Les boutons d’opération mobiles sont souvent appelés fabs. Ils sont utilisés pour des opérations courantes sur les interfaces. Ils sont généralement placés en position très visible, au – dessus du contenu. Dans la plupart des cas, ils sont ronds, mais ce n’est pas obligatoire. Lors de la conception d’un bouton, il est essentiel de choisir le bon type car il déterminera la facilité d’utilisation de l’interface sur le téléphone, le PC, la tablette, etc. Par exemple, pour les utilisateurs mobiles, l’utilisation de boutons texte est moins intuitive que l’utilisation de boutons surélevés, mais elle est également possible sur un PC.
Il y a beaucoup de boutons de chaque type, donc s’il vous plaît prendre le temps de faire le bon choix.
Couleur et contraste La psychologie des couleurs joue un rôle important dans la conception des boutons. Chaque couleur peut affecter une personne d’une manière ou d’une autre. Vous devez différencier les boutons de votre site en fonction de leur utilisation. Vous devriez garder à l’esprit les principes de la psychologie des couleurs et de l’esthétique. Nous vous recommandons de le modéliser de la façon suivante: opérations principales: couleurs solides, opérations secondaires à contraste élevé: couleurs transparentes, opérations de contour complet de niveau 3 – texte souligné chaque couleur a son propre effet. Regardez les logos des plus grandes marques autour de vous et vous verrez ce qu’ils font. Le rouge est souvent associé à la passion, à la faim ou à la vitalité. Le jaune ou une autre couleur muette est idéal pour les boutons utilisés pour afficher les pages d’information. Le vert ou le bleu s’applique aux boutons qui indiquent une action positive, comme un don.
Six règles d’or 1. Préserver la tradition Ne soyez pas fou de la forme. Les boutons doivent toujours ressembler à des boutons. Sinon, les visiteurs de votre site peuvent être confus et éviter d’utiliser des objets de forme étrange que vous y placez. Essayez de maintenir la tradition lors de la modélisation. Les principes de base doivent être pris en considération lors de la conception des boutons – poussoirs. Par exemple, si votre site contient des éléments carrés, utilisez les boutons pour sélectionner le même modèle. Si votre site Web est plus rond, arrondissez les bords du rectangle du bouton ou utilisez le bouton circulaire.
Quelle que soit la forme que vous choisissez, assurez – vous qu’elle est attrayante et qu’elle attire l’attention de l’utilisateur. Une fois que vous avez sélectionné une forme, gardez – la dans toute l’interface, sinon vous n’obtiendrez pas d’effet esthétique. De plus, l’utilisateur se familiarisera avec la forme du bouton et le scannera lors de l’utilisation de l’interface. 2. Rendre visible Si vous ne le faites pas, il n’y a aucun sens à créer un bouton
Une seule page. Cela n’oblige pas l’utilisateur à les cliquer. Au lieu de cela, ils peuvent démarrer l’utilisateur instantanément parce que l’interface est trop encombrée. Un bouton par page est l’objectif que vous devriez atteindre. Peut – être deux, si c’est absolument nécessaire. 6. Ajouter des commentaires Lorsque vous cliquez sur un bouton, faites quelque chose pour informer l’utilisateur que l’action a été annotée. Sinon, ils peuvent trop cliquer sur le bouton et l’application ou le site Web peut s’écraser. L’expérience interactive doit être aussi bonne que l’apparence des boutons. Lorsque vous cliquez sur un bouton, vous pouvez le faire changer de couleur ou faire un son. La dernière considération pour la conception de ces boutons est d’espérer que les conseils de cet article vous seront utiles. La conception des boutons n’est pas aussi simple que les gens le pensent. C’est une bonne idée de prendre le temps de lire le CTA et son impact sur les utilisateurs. Vous serez surpris de l’impact qu’un tel petit projet pourrait avoir à long terme. Lorsque vous mettez les boutons ensemble, rappelez – vous ces deux mots: identification et clarté. Ce sont les qualités que tous les boutons d’interface doivent posséder. Si vous aimez lire cet article sur la conception de boutons, vous devriez lire cet article sur les sites malveillants. Nous avons également écrit sur des sujets connexes tels que la conception de pages Web modernes, la mise en page, la conception visuelle, les meilleures pages 404 de tous les temps, les tendances de la conception de pages Web, les fonds sombres, la mise en page de sites Web et l’animation de chargement.