Advertisement
  1. Web Design
  2. Design Theory

Principes de Base pour une Conception de Bouton Réussie

by
Read Time:7 minsLanguages:

French (Français) translation by Bertrand Dupraz (you can also view the original English article)

Il y a un millier de façon de concevoir et créer des boutons de nos jours et consacrer un minimum de son temps à parcourir les créations sur Dribbble permet de s'en apercevoir rapidement. La plupart d'entre eux se ressemblent mais il arrive que certains se démarquent car une plus grande attention aux détails a été apporté dans leur création.

En s'appuyant sur les merveilleuses nouvelles propriétés CSS3 nous pouvons créer des styles de bouton étonnament élégants et sophistiqués sans même une once d'image et toujours bénéficier d'un style de repli pour les navigateurs plus anciens. Vous pouvez préférer créer vos boutons directement dans le CSS, ou bien préférer vous orienter vers les outils de création de votre choix, mais il est important de prêter la plus grande attention à la manière dont le design de vos boutons va s'intégrer dans le design de vos pages.

Il est tellement plus aisé de simplement récupérer un PSD déjà réalisé qu'une ame généreuse a mis à disposition gratuitement (et qui contient sans aucun doute des boutons inspirés par Apple). Mais pourquoi ne pas prendre le temps de se demander si le design des dits boutons est en harmonie avec votre design global et envisager si possible de créer quelque chose d'un peu plus original ?

Réutiliser les boutons d'une autre personne est très bien, cela permet de gagner du temps, mais il n'y a pas de mal à prendre un moment pour comprendre la conception et la composition de vos (ou ceux d'un autre) boutons un peu plus en détail. Comment sont-ils conçus? Correspondent-ils à l'interface / contexte / marque ? Est-il envisageable de créer quelque chose d'unique ? Mes boutons sont-ils suffisamment importants ? Ai-je besoin d'avoir des boutons primaires, secondaires voire tertiaires ? Se différencient-ils sensiblement les uns des autres ? Sont-ils sophistiqués ? (Pourquoi pas, nous voulons tous concevoir les meilleures choses n'est-ce pas ?)

Voici dix choses à la fois simples et rapides auxquelles je pense toujours quand il s'agit de concevoir des boutons. Je ne vais pas parler d'idées sur la manière d'utiliser les effets de calques dans Photoshop mais plutôt de principes de base simples permettant d'améliorer la conception de vos boutons et qui pourront également être appliquer à toute conception d'UI en général.

1. Cohérence Avec la Marque

Il est important que vos boutons correspondent au contexte graphique. Ça peut signifier s'intégrer à la palette de couleur globale, au style graphique ou s'inspirer d'une certaine ligne directrice issue de la marque ou du logo. Peut-être y a t'il une forme particulière, une texture ou un style particulier sur lequel s'appuyer. Peut-être le logo a-t'il un aspect circulaire qui pourrait être repris par vos boutons ou vos autres éléments d'intéractions potentielles.

Si une interface utilise principalement des applats de couleur alors il se peut qu'un gros bouton brillant façon Apple ne soit pas la meilleure option. Si vous le pouvez, essayez de mettre en avant la marque par le biais de l'interface en utilisant des formes appropriées, des effets, des couleurs ou d'autres formes d'embellissement.

2. Cohérence Avec le Contexte Graphique

Pour aller plus loin, attendez un instant avant d'ouvrir le PSD. C'est plus facile de récupérer des élements, ombres, reliefs, etc. mais prenez un moment pour penser si c'est le bon choix d'être, non seulement, cohérent avec la marque mais aussi l'interface dans laquelle les boutons vont prendre place et si ils ont besoin de réellement avoir l'aspect de bouton.

Les boutons peuvent nécessiter un réel aspect de 'bouton' au sein d'une application ou sur mobile, par exemple, mais avec les sites internet il y a peut-être une opportunité de proposer quelque chose de différent pour vos boutons ou intéractions.

3. S'assurer du Contraste des Boutons

Parmis toutes les interfaces qui s'inspirent du design des OS d'Apple, particulièrement dans de nombreux PSD actuellement, les boutons peuvent sembler perdus parmis tous les élements utilisés dans l'UI, réduisant ainsi leur potentielle importance. Essayez d'utiliser des couleurs, tailles, espacements ou polices qui permettent d'affirmer l'importance visuelle que vos boutons nécessitent afin de se différencier du reste de l'interface.

4. Envisager les Boutons Arrondis ou Sophistiqué

Pour approfondir le point précédent, si la plupart des éléments de l'interface on déjà des angles arrondies, envisagez le fait d'utiliser des boutons aux extrémités rondes ou peut-être d'autres modifications de forme. Cela pourra ajouter ce petit plus de contraste qui appuyera l'importance que vos boutons méritent.

5. Simplifier les Élements Secondaires

Si vous visez un style inspiré par un OS ou que vous travaillez avec un style prédéfini d'un PSD alors il y a beaucoup de chance que les éléments soient principalement rectangulaires avec des angles arrondis. Il pourrait être judicieux de réduire le niveau d'embellissement des élements qui peuvent se permettre de moins ressembler à des boutons.

Par exemple, les menus déroulants, barre de boutons, boutons à panneaux déroulants peuvent avoir les mêmes angles arrondis mais utilisés moins d'ombre, contour, relief, dégradé ou tout autre effet permettent de réduire leur complexité pour ainsi mettre en valeur le design des boutons.

6. Correspondance de Couleurs de Bordures et Fond

La plupart des boutons que nous voyons sur internet ont une sorte de bordure autour d'eux. Grosso modo, si le bouton est plus sombre que le fond sur lequel il est posé, utilisez une bordure sombre de la couleur primaire du bouton. Si c'est l'inverse, alors choisissez un trait d'une nuance plus foncée de la couleur de fond. Si vous reprenez le premier bouton et l'utilisez sur un fond plus sombre, cela peut créer un bord légèrement "flou" et "sale" sur le bouton. En utilisant le second sur le fond plus sombre, cela peut vraiment faire ressortir le bouton. Je considère cela comme un principe de conception général lorsqu'il s'agit de bordures dans la création de site web.

7. Être Prudent avec le Flou des Ombres

Au fil des années, j'ai toujours juré par ma "Loi de l'Ombre". La "Loi de l'Ombre" dit que l'ombre portée est plus efficace quand le bouton est plus clair que le fond qui l'entoure. Si un élément est plus sombre que le fond qui l'entoure alors les ombres portées devraient être utilisées avec parcimonie. De la même manière qu'avec les traits et bordures, je considère très fortement cela comme étant un principe à suivre pour n'importe quel élément graphique.

8. Une Iconographie Subtile Accentue L'affordance

En plus d'être un détail supplémentaire pour améliorer la différenciation de vos boutons par rapport aux autres éléments graphiques, l'utilisation d'icône simple tel qu'une flèche permet de donner une idée à l'utilisateur de ce qui va se passer lors qu'il cliquera.

Par exemple, une flèche pointant vers la droite juste après le texte d'un bouton peut suggérer à l'utilisateur une possibilité de déplacement ou bien qu'il va quitter la page actuelle. Une flèche pointant vers le bas indique généralement que du contenu placé en dessous du bouton va apparaitre progressivement ou qu'un menu contextuel va apparaitre.

9. Envisager des Styles Primaires, Secondaires ou Tertiaires

Si vous concevez une interface où se trouve à l'écran de nombreuses actions et fonctionalités simultanément, il peut être important de constituer une certaine hierarchie visuelle avec vos boutons en établissant des styles primaires, secondaires, tertiaires et plus encore si besoin.

Envisagez de conserver la couleur la plus vive et percutante pour vos boutons primaires puis utilisez des teintes et saturations progressivement moins vives à mesure que l'importance des boutons diminue. De même que la couleur et la forme, réduire la taille, l'espacement, la taille du texte et les détails graphique permet de réduire l'importance visuelle des boutons qui ne sont pas primaires.

10. Toujours Réaliser des Retours D'états

C'est quelque chose de pourtant simple mais souvent considéré qu'en fin du processus de conception. Il faut pourtant toujours réaliser les états de base nécessaires de vos boutons afin de s'assurer qu'ils fournissent à l'utilisateur un rétour d'états suffisant de leur action. Les utilisateurs ont une idée de la façon dont un bouton fonctionne dans le monde réel du fait qu'ils utilisent différents états. Certains réglages CSS simples avec des ombres, des bordures et des dégradés ou autres peuvent donner à l'utilisateur une rétroaction simple et un aspect visuel plus plaisant pour les yeux!

Conclusion

En tant que designer, vous avez votre propre workflow. J'imagine qu'une partie du temps est consacré à prendre du recul par rapport à l'écran, incliner la tête légèrement, plisser les yeux et dire "Ouais, c'est ça!". Ca fait partie du plaisir de concevoir et les designers ayant du talent tendent à se suffire de cela pour attendre leur but, mais je pense qu'il est toujours bon de faire un petit travail d'introspection et de raisonnement par rapport aux décisions prises.

Il n'y a pas de mal à réutiliser ou se tourner vers des styles et éléments graphique pré-conçuss, ils peuvent évidemment faire économiser beaucoup de temps. Il se peut même que quelqu'un ait conçu ce que vous recherchez au pixel près et l'offre gratuitement. Cependant, je pense qu'il est bon d'avoir une meilleure compréhension du processus de conception et de création de ce que vous produisez et pour en faire profiter vos décisions de conception à l'avenir.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.