Skip to main content
Designing for action: Best practices for effective buttons | Wireframing Academy | Balsamiq

balsamiq.com · 11 min

Apparence

  • Des boutons qui ressemblent à des boutons
    qui ont une gueule de bouton, on innove pas, on fait des rectangles
  • Différencier visuellement les actions primaires et secondaires
  • Boutons ≠ Liens
    • Bouton -> Faire une action
    • Lien -> Naviguer entre les pages
  • 1 action primaire par page

Placement

  • En bas à droite.
  • Si le contenu est sur une partie de l'écran, dans la même colonne que le contenu (si tout se trouve sur la moitié gauche de l'écran, ne mettez pas le bouton tout à droite)

Wording / Formulation

  • Simple
  • To the point
  • Pas d'action générique type "OK" (mettez le verbe d'action qui correpond à l'action)
  • Donnez un peu de contexte, "Ajouter à la carte" plutôt que juste "Ajouter"
  • Pas de mot confusants, type "Annuler" pour faire l'action d'annuler… ou annuler l'action d'annuler ?

Actions destructrices

  • Si l'action est critique, concentrez bien votre utilisateurice dessus (bouton rouge, signe attention, double confirmation)
  • Aidez l'utilisateur à corriger leurs erreurs (Vous avez supprimé "bidule" + un petit bouton "annuler la suppression")