Bouton d’action principal et secondaire
Nous arrivons enfin à la leçon finale concernant les wireframes, et une des plus importante caractéristique de tout design interactif sur l'importance du bouton principal et secondaire.
Vous venez juste d’arriver ? Vous voudrez peut être commencer par qu’est ce que l’UX design.
L’exemple au dessus nous montre deux boutons. En règle générale, vous aurez besoin de deux types de boutons, car la plupart des actions des utilisateurs se séparent en deux catégories :
Les actions primaires : qui sont utile pour atteindre leur but
Les actions secondaires : qui ne le sont pas
Boutons primaires
Certaines actions que peut réaliser l’utilisateur sont productives, comme s’enregistrer, acheter, répondre à un formulaire, enregistrer, partager du contenu etc.. Ils produisent quelque chose qui n’existait pas avant. Ces actions primaires sont des choses qu’on veut que les utilisateurs fassent.
Les boutons qui exécutent des actions primaires – les boutons primaires – devraient être aussi visibles que possible. Pour faire ça, utilisez les principes vus dans les autres leçons (poids visuel, contraste, axe d’interaction…).
- Style primaire : fort contraste comparé à la couleur de fond
- Position : le plus proche possible de l’axe d’interaction pour que l’utilisateur le remarque par réflexe.
Boutons secondaires
Certaines actions proposées peuvent être contre-productives, comme annuler, décliner une offre, etc… Elles suppriment ou arrêtent la création de nouvelles choses, ce qu’on ne veut pas que l’utilisateur fasse, mais elles sont quand même proposées par soucis d’utilisabilité.
Ceux-ci devraient être moins visibles, ceci pour prévenir les accidents ou les cliques par réflexe.
- Style secondaire : moins contrasté comparé à la couleur de fond.
- Position : loin de l’axe d’interactivité, pour que l’utilisateur le voie que s’il est déjà à sa recherche.
Exception
Parfois certaines actions contre-productives sont importantes, comme supprimer son compte.
Ces actions doivent avoir un style primaire, mais une position secondaire dans votre design, car nous voulons que l’utilisateur puisse le remarquer, mais qu’il ai le temps de réfléchir à son action avant de cliquer.
C’est aussi important de donner à ce bouton une couleur qui indiquera à l’utilisateur l’importance de cette action.
Boutons spéciaux
Dans certains cas, vous aurez un type d’action qui est spécifique à votre site ou votre application, et qui nécessite une attention particulière. N’hésitez pas à créer un design spécial pour celui-ci.
Quelques exemples : Les boutons d’achat d’Amazon, le bouton « Pin it » de Pinterest ou encore le like et Facebook.
