Loading

Aujourd’hui, le web offre des possibilités énormes quant à l’interaction et le design des éléments. C’est pourquoi un simple bouton n’est plus simplement ponctué par les 3 états que tout le monde connaît : l’état normal quand il est encore inutilisé, l’état actif quand il est en train d’être utilisé, et l’état passé quand évidemment il vient d’être utilisé.

Le cas du bouton : avant, pendant et après interaction Cliquez pour tweeter

Il y a une vie entre ces 3 moments, de plus un bouton n’est plus un simple bouton, il peut se transformer en autre chose et devenir un élément de contexte. Ce qu’il faut comprendre, c’est qu’il faut s’écarter du design d’interaction traditionnel qui date de l’époque où les performances informatiques n’étaient pas assez évoluées pour avoir la liberté créative que nous avons aujourd’hui. L’objectif d’un bouton doit être bien plus que simplement effectuer l’action qu’il déclare, il est considéré aujourd’hui comme un facteur essentiel de l’expérience utilisateur. Finalement un bouton c’est parfois l’accomplissement de tout un parcours qui résulte de cette expérience que l’interface souhaite transmettre à l’utilisateur.

 

L’avant, le pendant et l’après interaction

Le moment où le bouton retient toute l’attention de son utilisateur c’est lorsque ce dernier positionne son curseur de souris sur la zone définie par le bouton ou son alentour. C’est là que le design d’interaction entre en jeu pour donner du feedback à l’utilisateur, nous sommes habitué à voir un simple changement de couleur, du sombre au clair ou vice versa. Pourtant plusieurs alternatives sont possibles pour améliorer la sérendipité d’un bouton.

Il faut savoir qu’une zone plus ou moins grande autour du bouton peut être établie afin de réagir comme si l’utilisateur avait son pointeur sur le bouton. Il est aussi possible de déclencher l’animation progressivement en fonction du temps, sur la durée que l’on souhaite Ainsi l’état “actif” peut avoir deux changements, un immédiat et un autre légèrement décalé. Le fond peut changer alors que la forme évolue progressivement pour donner une forme de vie au bouton. Cela évite le simple changement unique du fond qui change de couleur ou du carré qui devient rond.

real_pixels

Par Bill S Kenney

Pour tenir en haleine l’utilisateur lorsqu’il a son curseur sur le bouton il faut créer du mouvement pour inciter à l’interaction. Pendant cette interaction, il existe en code l’état “active” qui se déclenche lorsque l’utilisateur est réellement en train d’appuyer sur le bouton. Il très peu utilisé car le laps de temps est considéré trop court. Il est rare que quelqu’un reste appuyé plusieurs secondes sur son trackpad ou sa souris, hormis lors d’une action de “drag & drop” c’est-à-dire en maintenant le bouton pour le déposer à un endroit différent. Pourtant cet état peut être utilisé même lorsque le bouton entraîne une action basique. Malgré le fait que son état ne soit visible que durant quelques millièmes de secondes, l’utilisateur peut percevoir ce changement d’état. Celui-ci aura une perception claire et précise de cet état, mais il peut distinguer un changement de couleur ou de forme.

L’état passé d’un bouton est parfois tout autant important que l’état précédant. Principalement lorsqu’il s’agit d’un bouton “interrupteur” ou “switch” qui possède en réalité deux états, un état par défaut et un état second (dans le sens premier du terme).

ios-toggle

Par Joby

Néanmoins cela n’empêche que pour les boutons traditionnels, l’état passé a son importance, notamment lorsque celui-ci entraine une action unique. Le simple fait qu’un lien change de couleur pour indiquer que nous l’avons déjà visité, c’est culturellement ancré dans notre approche du web et nous pouvons donc facilement nous guider grâce à ça. Ce principe est aussi appliqué au bouton qui change d’état une fois visité ou actionné. La différence avec un bouton d’action c’est qu’il peut être modifié et ainsi communiquer un message différent que lorsqu’il n’a pas encore été visité. Cela rajoute du feedback à l’utilisateur et peut le guider dans ses futurs choix.

Utilisez la récurrence des labels de bouton

Qui dit bouton dit label, car sans lui celui-ci n’aurait aucun sens. Cependant un bouton doit être le plus accessible possible tout en étant précis sur l’action qu’il entraîne. De plus, des contraintes de répétition le restreignent dans sa largeur (dans le cas d’un bouton de navigation par exemple). C’est pourquoi il est souvent labellisé d’un mot unique voire d’un simple pictogramme. Cela va évidemment à l’encontre de la compréhension de l’utilisateur. Le principe reste le même pour un bouton “call to action” qui va se retrouver souvent seul ou accompagné d’un texte d’introduction. On fait alors appel à l’habitude d’usage dans ce type de navigation. On sait tous à quoi s’attendre derrière un bouton “se connecter”, “s’enregistrer” ou alors “s’inscrire” lorsque ce dernier est surplombé d’un champ pour écrire son e-mail. Ainsi nous pouvons profiter de ces habitudes pour divulguer davantage d’informations.

myp2

Par exemple sur un réseau social : si un bouton en état normal est “créer un compte” et en état actif (ou hover) affiche “cela prendra 3 secondes …”, l’utilisateur se sentira incité à cliquer de manière assez drastique, il faut l’avouer, reste à vous d’être plus créatif. L’idée c’est qu’il faut utiliser ce changement d’état et d’habitude de l’utilisateur pour se différencier des concurrents ou plus justement pour améliorer le feedback de votre bouton.

En soi, le label d’un bouton va être très personnel au site et à son environnement. Le fait d’employer l’indicatif ou la troisième personne du pluriel va dépendre de l’importance et du contexte de l’action à exécuter. Il faudrait faire une étude sur le comportement des utilisateurs face aux différentes formulations d’un label pour en être certain (si vous en avez écho, je vous en serais infiniment reconnaissant si vous le commentiez en bas de l’article).

La transformation fait son effet

Le plus important à savoir aujourd’hui sur le design d’interaction d’un bouton, c’est qu’il peut devenir autre chose qu’un simple bouton.

Ce qui caractérise particulièrement ce fait, c’est le material design introduit par Google en 2014-2015 : “Le bouton devient alors l’action qu’il exécute”. Cliquez sur un bouton “play” il deviendra le fond du player de musique. Ce principe peut fonctionner avec tous types d’actions ou d’interactions avec l’utilisateur. Le “metamorphing” du bouton dirige le regard de l’utilisateur vers la nouvelle zone où l’action se passe. C’est ainsi que l’avantage de cette transformation prend tout son sens. Le fait de guider l’utilisateur vers la zone qu’il vient lui-même d’actionner, cela constitue un réel gain d’expérience et de simplicité.

aasada

Par Ivan Bjelajac

Durant cette transformation il rentre alors dans un “état de transition” qui est perçu brièvement par l’utilisateur, ce mouvement doit être fluide et cohérent avec le changement de forme et l’emplacement qu’il vient remplir. Comme un liquide qui remplirait progressivement une surface, le “morphing” du bouton doit s’étaler et se former sans rupture de matière. Le bouton passe souvent d’une forme plus petite à une plus grande, ou vice versa, ainsi l’échelle et la vitesse de grossissement doivent être proportionnelles à la surface totale visée.

Finalement un bouton n’est plus un simple élément d’interface mais il est le pont entre l’homme et l’interface. Il l’a toujours été, mais aujourd’hui nous reconsidérons cette approche afin d’avoir un retour d’action graphiquement intéressant. Mieux que de produire l’action qu’il prétend, il va la faire deviner et/ou la faire ressentir en se confondant avec l’action elle-même.

Tout ça pour introduire le fait qu’il faille porter une importance majeure à chaque élément qui entraîne de l’interaction avec l’utilisateur, ne serait-ce que pour un simple bouton.

Crédits images : TsurielAdrien Olczak

Do you like Hugo Vermot's articles? Follow on social!
People reacted to this story.
Comments to: Un bouton est bien plus qu’un simple bouton
  • 13 mars 2017

    Bonjour
    Très bon article, dommage cependant que le nombre d’exemple “graphique” soit limité.

    Sur la partie état d’un bouton déjà cliqué, j’avoue ne pas avoir trouvé d’application ou d’exemple, l’usage étant à mon avis plus lié à des liens textuels ?
    Les boutons dans une interface sont en grande majorité :
    – liés à une action récurrente (connecter, quitter, lancer, enregistrer, etc…)
    – utilisés dans une action unique (créer un compte, valider, accepter, etc…)
    Un contre exemple ? 🙂

    Pour la question des labels, nous avons testé chez l’un de nos clients des labels type : obtenir un tarif, demandé un devis, demandé en ligne, etc…
    Sur une meme interface, sans autre changement, la variation du taux de clic est significative en plus d’une différence de conversion en bout de parcours, dû à la promesse faite à l’internaute au moment du clic.

Write a response
Inscription obligatoire et gratuite

Suivez toutes nos actualités

Ne manquez pas un article ! Toutes les nouveautés directement dans vos emails.

ARTICLES LES PLUS APPRÉCIÉS

Articles des membres

Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]

LES NOUVEAUX ARTICLES

  1. Actualités
Cela n’est plus nouveau, la cybersécurité est un enjeu crucial pour toutes les entreprises et organisations qui utilisent des systèmes informatiques. Mais, en même temps, l’expérience utilisateur (UX) est également devenue un facteur clé pour la bonne utilisation des systèmes. Malheureusement, ces deux objectifs ne vont pas toujours de pair. En effet, sécuriser quelque chose […]
  1. Articles des membres
Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]