UX#03 - La gestion des actions
Que vous ayez un site vitrine, une application mobile, un site ecommerce, un CRM ou une landing-page, vous vous êtes probablement déjà posé la question : “Comment faire en sorte que les gens cliquent là”.
Autrement dit, comment faire des liens ou des boutons qui font comprendre à l’usager qu’on peut interagir avec eux. Ça parait simple tellement on en voit et utilise chaque jour, mais ça ne l’est pas tant que ça.
Les liens
Commençons simplement, avec la plus ancienne des interactions : le lien hypertexte. Un lien hypertexte est un élément HTML auquel on paramètre une adresse de destination. Au clic, l’usager est simplement redirigé vers cette adresse.
<a href=”https://www.webexmachina.fr” title=”Web ex Machina”>Web ex Machina</a>
<a href=”https://www.google.fr” title=”Google” rel="nofollow">Google</a>
<a href=”https://smartgear.webexmachina.fr” title=”Smartgear by Web ex Machina” target="_blank">Smartgear by Web ex Machina</a>Comme tout élément HTML, on peut lui programmer tous les attributs envisageables, voilà les plus communs :
- href=”<adresse internet>” : évident : l’URL de redirection
title=”<texte descriptif>” : Le texte qui s’affichera quand vous survolez un lien, dans une sorte de bulle - target=”_blank” : Permet de définir le comportement du lien. La valeur _blank veut dire que le lien s’ouvrira dans un nouvel onglet de votre navigateur. En savoir plus sur : https://www.w3schools.com/tags/att_a_target.asp
- rel=”nofollow” : Autre paramètre lié au comportement du lien, il sert à préciser la relation entre la page actuelle et la destination du lien. La valeur nofollow indique aux robots qu’il ne faut pas suivre ce lien. En savoir plus sur : https://www.w3schools.com/TAGS/att_a_rel.asp
Voilà les principaux attributs que l’on peut donner à un lien. On peut également lui donner une classe CSS pour définir un style, même si beaucoup de chartes graphiques prévoient de styliser directement l’élément <a> pour éviter toute dérive.
Comme dit plus haut, un lien est simple. Il n’implique pas de comportement particulier à l’utilisateur. Il est là pour permettre de naviguer sur un site ou une application.
Cela dit, il existe quelques bonnes pratiques à suivre :
- On doit toujours avoir un attribut href et un attribut title
- Si l’attribut href amène à un autre site que la page courante, le lien doit s’ouvrir dans un nouvel onglet (via un target=”_blank”)
- Si le lien amène vers une page où l’on doit s’authentifier, elle ne devrait pas être accessible publiquement et un rel=”nofollow” est nécessaire
- Tous les liens doivent avoir un style similaire. Souvent, on les reconnaît car ils sont soulignés, ou dans une couleur différente du texte.
- Au survol, on affiche un curseur et on retire le soulignement, où inversement s’il n’est pas présent de base. Cela indique à l’usager que ce lien est actif et peut être cliqué.
Avec le temps, on a aussi créé des usages moins évidents mais qui se sont imposés de part leur praticité.
Dans un blog, il est courant que tout le bloc d’une liste soit cliquable, pour couvrir toutes les habitudes. On sait depuis longtemps que les illustrations d’un site attirent le regard, mais on s’est également rendus compte que les internautes essaient d’interagir avec. Depuis, un clic sur l’image amène à la lecture de l’article alors que ce n’est pas vraiment son rôle à la base.
Une autre pratique courante est le retour à l’accueil via un clic sur le logo en haut à gauche d’une page. Ce n’est pas du tout un composant prévu à la base pour être interactif mais c’est devenue une bonne pratique au fil des années qu’une interaction avec cet élément ramène à la racine du système.
Les boutons
Bien plus polyvalent, il est moins évident de déterminer les bons usages d'un bouton. Vous pouvez par exemple avoir des boutons-liens, qui ne sont au final que des liens, stylisés en bouton, pour mettre en valeur l'importance d'une page.
Un bouton a pour vocation de faire quelque chose. Il doit faire quelque chose.
Même si il y a une erreur et qu'il ne se passe rien, le système doit le signaler d'une manière ou d'une autre. Il existe bien des façons d’émettre un message à l’usager, mais le bon sens veut que ce message soit le plus proche possible du bouton, ou via une notification externe à la page.
Le style du bouton est important et doit être manié avec précision. C'est le genre de détails qu'on ne remarque pas quand tout est bien fait, mais qui fait tâche quand c'est raté !
Les principaux frameworks CSS comme Bootstrap prévoient des boutons contextuels, pour permettre ces nuances. Un bouton majeur devrait être de la couleur principale du site tandis qu’un bouton moins important aura une couleur légèrement contrasté, plus discret.
Quand la charte graphique ne laisse pas beaucoup de place aux contrastes, on peut jouer sur la taille du bouton pour nuancer son importance. Attention toutefois à la gestion de la place car sur mobile, il est plus difficile de cerner ces différences.
Un effet au survol et au clic/tap doit également être prévu pour créer un effet de “retour”. On ne s’en rend plus vraiment compte, mais tous les boutons en ont un. Cela peut-être un effet sonore ou une petite animation visuelle, indiquant à l’usager que son clic a été effectué.
Quand vous enclenchez un interrupteur, dans la réalité, vous avez un retour physique et sonore. C’est ce qui vous confirme inconsciemment que l’interrupteur a été enclenché.
Mais ce n’est pas le cas sur un écran. C’est pourquoi on doit simuler cet effet, pour générer le même genre de stimuli que procure un interrupteur.
Faire patienter
Il se peut que votre action demande un peu de temps. En effet, un bouton peut déclencher une suite de fonctions programmées, qui demandent plusieurs secondes d’exécution avant de pouvoir indiquer à l’usager si tout s’est bien passé.
N’attendez pas ce retour ! Indiquez à votre visiteur que son action a bien été prise en compte et que c’est en cours de traitement. Invitez-le à patienter le temps que votre système traite sa demande.
Nous sommes extrêmement impatients quand nous sommes devant un écran. On s’attend à ce que chaque bouton marche instantanément et que le système nous réponde tout de suite que tout s’est passé comme on le voulait.
Une absence de réponse instantanée, visuelle, sonore ou textuelle, provoque bien souvent un nouveau clic sur le bouton, ce qui peut déclencher des bugs ou des ralentissements.
Il est d’ailleurs recommandé de “désactiver” le bouton, le temps que l’action déclenchée au préalable se termine. Cela évite de traiter deux fois une demande et donc de doubler la charge serveur pour rien.
Gérer les erreurs
Comme on l’a dit, un bouton doit faire quelque chose, et l’usager doit être informé de ce qu’il s’est passé. Même s’il ne s’est rien passé.
Informer que tout s’est bien passé n’est pas un problème. Tout le monde s’attend à ce que tout se passe bien. C’est surtout quand une erreur survient que cela est important.
Le système doit retourner une erreur explicite et détaillée sur ce qui ne va pas. Si un champ est manquant, l’usager doit savoir quel champ n’a pas été rempli et quel type de donnée est attendue.
La gestion d’erreurs est une partie essentielle pour assurer le bon fonctionnement d’un programme, et nous aurons l’occasion d’en parler plus précisément prochainement, tant d’un point de vue UX que technique.
Et voilà pour ce petit tour de l’ergonomie autour des composants interactifs d’une application web ou mobile. Plus votre système propose d’interactions, plus vous devez être vigilants quant au respect des bonnes pratiques qui les entourent.
Il est recommandé d’uniformiser toutes les interactions, tous les styles et tous les retours possible pour ne pas créer d’incohérences au sein d’une même application et de désorienter vos usagers par la même occasion.
L’usage d’un framework comme Bootstrap ou Material UI est un bon moyen d’éviter les impairs et de respecter les bonnes pratiques. Ils sont confectionnés par des ergonomes et des personnes habituées aux usages des internautes.
De plus, ils sont pensés pour être modifiés, vous offrant ainsi la possibilité d’intégrer vos propres guidelines et styles.
Ne perdez jamais de vue qu’une interface doit être instinctive. Si vos visiteurs cherchent où interagir, c’est pas bon signe !
Dans la même catégorie
