Pour les boutons d’action plus efficaces
quatrepointzero_header_lire-larticle-captivant

La conception d’interface nous amène à écrire des mots sur des boutons et des liens tout le temps. Mais comment choisir quels mots écrire sur les boutons ?

Les boutons et les liens permettent de réaliser des actions comme « Obtenir un document », « Télécharger », « Ouvrir un compte » etc.

Par exemple, si on ne lit que le lien «  Cliquez ici », on ne comprend pas ce qui se trouve dans la page visée. Un lien doit indiquer le plus explicitement possible vers quoi il pointe.

Est-il possible d’appliquer un principe généralisé de choix de forme grammaticale sur ces boutons d’actions ?

Les mots sur le bouton doivent commencer par un verbe pour appeler à une action et avoir un sens dans le contexte de l’interface. Il faut penser à utiliser des mots déclencheurs qui poussent à réaliser une action. Par exemple « Plus d’information » n’est pas une phrase qui appelle à l’action et elle n’est pas reliée à un contexte.

Une façon de tester si les mots que l’on écrit sur les boutons seront compris par les utilisateurs, est de réaliser le test « WYLTIWLT » (Would you like to {Button text} & I would like to {Button text}) :

  • Placez les mots à écrire sur les boutons après ces deux phrases : « Voulez-vous… ? » et « Je voudrais… ». Si les phrases complétées ont du sens alors les boutons sont utilisables.

Voici des exemples de boutons qui ont été évalués positivement par le test :

quatrepointzero_Test-WYLTIWLT-ok1

Boutons évalués positivement au test WYLTIWLT

Il est intéressant de voir que l’erreur fréquente (suivant la logique du test WYLTIWLT) est l’utilisation des adjectifs possessifs « mon » / « votre » sur les boutons :

quatrepointzero_Test-WYLTIWLT-pas-ok1-480x141

Boutons évalués négativement au test WYLTIWLT

Recommandations :

– Les mots d’action (mots déclencheurs) doivent être utilisés pour caractériser de façon concrète l’action que renvoi le bouton,
– Les boutons d’action doivent être placées dans les composants associés pour les mettre en évidence,
– Lorsque la page est scrollée le bouton doit être répété en bas de page,
– Les attributs graphiques du bouton participent à sa mise en avant (la couleur, la brillance, la taille etc.),
– Les mots doivent être directs et concis. Cela rend l’appel à l’action efficace,
– Les subtilités langagières d’une langue à une autre doivent être prises en compte.
– Pour préserver l’impact de chaque bouton d’action sur une même page, limiter leur nombre. Ci-dessous, le bouton important « open an account » est étouffé par les autres boutons:

quatrepointzero_TD-waterhouse-UK1-129x200

Exemple d’une mauvaise pratique (TD Waterhouse UK)

 

Il y a des exceptions qui confirment la règle. Les meilleurs sites peuvent ne pas respecter les règles grammaticales lors de la conception de leurs boutons. Il faut garder à l’esprit que les boutons simples sont efficaces et que ce sont eux qui déterminent le succès du site. Les boutons d’action permettent de créer une expérience positive et de faire revenir les utilisateurs sur le site.

Sources :

http://www.uxbooth.com/articles/the-grammar-of-interactivity/

http://www.simpleweb.fr/2009/05/12/quelques-conseils-pour-vos-boutons-daction/

http://boagworld.com/design/10-techniques-for-an-effective-call-to-action

Publié le 20 février 2013 / Design

Partager cet article

Haut de page