Sur l'impulsion du Web riche et du mobile (téléphones et tablettes) on voit disparaître des boutons permettant de confirmer une action….
Quel sont les avantages de cette disparition ? Alléger l’interface ? Diminuer le nombre de clics ? Nous vous proposons de faire un point sur quelques cas concrets qui nous montrent, à des degrés différents, l’obsolescence du bouton de validation.
Pour comprendre l’enjeu de la disparition des boutons de validation, voici quelques règles d’usage extraites de notre livre Ergonomie des interfaces :
- Employer les boutons pour les commandes fréquemment utilisées.
- Préciser l'intitulé de la commande en toutes lettres dans l'étiquette du bouton. Son libellé est important en termes de guidage puisqu’il permet de comprendre l’action qui va être déclenchée. Il doit être explicite sur l'action qui va être exécutée. Ex : "Enregistrer", "ouvrir", "envoyer".
- Toute action doit pouvoir être annulée, ceci afin d’éviter les erreurs. L’utilisateur doit être maître du fonctionnement de l’application.
- Si plusieurs actions sont possibles, le focus doit être mis sur l’action la plus fréquente, afin de permettre une utilisation rapide au clavier.
La disparition de ce petit composant est donc une problématique intéressante puisqu’elle touche à différents aspects ergonomiques.
Valider un champ de saisie.
Saisir du texte est une des actions les plus courantes dans la pratique du web. Entrer un mot-clé dans un moteur de recherche ou une adresse web dans un navigateur, rédiger un mail, remplir un formulaire, chatter, twitter ou communiquer sur d’autres réseaux sociaux. Les tâches sont diverses et variées… et pourtant nécessitent toutes la même action : valider le texte que l’on a saisi. C’est un principe fondamental pour s’assurer d’avoir un contrôle utilisateur lors de la saisie.
Saisir du texte et le valider par la touche “Entrée” est une pratique standard dans les logiciels de discussion comme Skype. En général un bouton d’action “envoyer” est toujours visible à côté du champs. Cela permet à l’utilisateur d’effectuer la même tâche de manière flexible. Cependant l’utilisation est beaucoup plus fluide lorsqu’on utilise le clavier à la fois pour écrire et pour envoyer un message.
Facebook assume ce parti pris en ne proposant pas de bouton “envoyer” dans ses panneaux de chat et ses zones de commentaire. Dans ces exemples où les tâches sont de discuter et de commenter, l’intuitivité et la spontanéité sont privilégiées en forçant l’usage unique du clavier. Si les actions les plus fréquententes nécessitent la présence d’un bouton d’action accessible à la souris, elles sont encore plus efficaces quand on utilise directement la touche “Entrée” du clavier.
La suppression du bouton et la validation au clavier est donc envisageable sur une action clairement identifiable et unique, à condition que son comportement soit intuitif. Mais que se passe-t-il lorsqu’une validation peut déclencher deux actions différentes?
Le navigateur Chrome de Google est particulier puisque le champs de recherche et le champs d'adresse sont unifiés en un seul champ de saisie. Celui-ci peut donc éxécuter deux actions à l'appui de la touche entrée. La disparition de bouton entraine une absence de libellé, ce qui est pourtant utile au guidage des actions que l’on va exécuter.
Google propose alors une aide à la saisie qui permet de palier l’absence de ce libellé. En plus de l’auto-complétion, à gauche du champs, une icône permet d’illustrer l’action qui va être exécutée selon la syntaxe du texte saisi. Celle-ci est accompagnée d’un texte de guidage à droite. Une loupe pour la recherche Google et une planète pour une URL.
On peut voir dans ces usages qui préfèrent la manipulation du clavier, une volonté de fluidifier l'activité de l'utilisateur. Cela permet de ne pas jongler inutilement entre deux périphériques d'entrée (clavier et souris). Il n'y a plus ce soucis sur les écrans tactiles puisque l'utilisation se fait au doigt sur une unique surface. L'une des solutions pour fluidifier l'usage de ces écrans est de minimiser le nombre d'interactions au doigt. Apple en fait sa pierre angulaire à travers sa gamme d'iPhone et d'iPad. Le cas typique est l'écran de dévérouillage.
Au revoir le bouton de validation, celle-ci s'enclenche automatiquement à la saisie du dernier caractère. Avec l'absence d'un bouton, l'utilisateur qui a choisi de dévérouiller son terminal par la saisi d'un code, s'évite (paradoxalement :-) de ralentir sa manipulation.
Recommandations
L'usage exclusif du clavier pour valider un champs de saisie peut fluidifier l'utilisation d'une interface. Pour s’assurer d'un contrôle utilisateur de qualité, certaines conditions doivent être respectées:
- Les actions concernées doivent être fréquentes et l’usage au clavier doit être intuitif.
- L’action déclenchée doit être clairement identifiable.
- Il est conseillé d'avoir un guidage alternatif au libellé des boutons d’actions disparus. L’utilisateur doit comprendre l’action qu’il va intentionellement déclencher.
Pour un usage tactile, on s'interessera plus au comportement de la validation automatique. Les règles décrites ci-dessus s'appliquent également à ce contexte d'usage.
Configurer sans valider
Allons plus loin et faisons un tour du côté de certains écrans de configuration.
Dans cet écran de réglage de l’iPad, la validation est enclenchée à la sélection d’un élément. Une fois le réseau sélectionné, l’iPad se connecte tout de suite à celui-ci sans demander à l’utilisateur la validation de la connection (dans le cas ou le réseau est connu).
La validation automatique est appropriée puisque les actions déclenchées n’ont pas de conséquences importantes et surtout, elles sont réversibles. Quand l’action est plus importante, comme “confirmer l’accès”, Apple utilise l’équivalent du bouton de validation pour iPad/iPhone : un interrupteur qu'on doit glisser pour déclencher une commmande. Cela nécessite plus de concentration de la part de l’utilisateur pour une action plus réfléchie. Il est donc nécessaire de bien hiérarchiser les actions afin d’appliquer judicieusement cette validation automatique et éviter des erreurs.
Ci-dessous, on retrouve la même logique hiérarchique dans l’écran de configuration du navigateur Chrome sur PC. Les éléments de sélection sont automatiquement validés, alors que les actions plus importantes, comme désinstaller une extension, nécessitent la présence d’un bouton “Supprimer”.
Si la logique est la même sur ces 2 exemples, leurs niveaux de compréhension diffèrent. Ci-dessus l’utilisation standard de la case à cocher dans chrome n’est pas assez explicite sur les changements opérés. Alors qu'en dessous la qualité des interactions proposées par Apple permet de donner à l’utilisateur un feedback qui le guide dans ses actions. Pendant que l’utilisateur règle les paramètres, celui-ci peut instantanément percevoir les changements de ses réglages. La séléction d’un paramètre est bien comprise, grâce à de l’animation et une tonique de couleur bleu qui vient attirer le regard.
Dans un cas d'usage de la case à cocher classique, on préférera au minimum un feedback qui indique qu'une action s'exécute.
Basecamp notifie par une animation simple l'action en cours
Google, avec son site de réseau social Google+, solutionne bien le problème : l'interaction est nettement améliorée puisque un message de notification nous avertit des réglages effectués. Là au moins le message est clair.
Message de notification sur un écran de configuration Google+
Malgré son faible succès, Google+ sur son site en version PC offre des interactions innovantes comme la gestion de ses cercles. Concentrons nous sur une partie de cette gestion avec le bouton “Ajouter aux cercles” dans la visualisation d’un profil. La fluidité est encore de mise puisque ce bouton non cliquable s’active au survol et propose une liste des différents cercles à cocher .
Une fois que le ou les cercles sont sélectionnés, et que l’on sort le curseur hors de la liste, la validation se déclenche automatiquement. La première utilisation peut paraître suprenante voire destabilisante, mais la compréhension de l'action déclenchée est renforcée, grâce à un libellé et un changement de couleur explicite.Quand l'interaction est moins conventionnelle, on veillera particulièrement à proposer un guidage très clair pour éviter toute ambiguité dans la compréhension de l’utilisateur.
Attention à prendre en compte le support d’utilisation, car dans ce cas cette fonctionnalité est inadaptée aux tablettes numériques qui ne gèrent pas le survol de la souris. Pas de panique ! Google a prévu une version tactile.
Recommandations
L’avantage de la validation automatique, dans les écrans de configuration, est clairement d’éviter des interactions superflues qui ralentissent l’utilisation. Cela est encore plus vrai sur les interfaces tactiles qui nécessitent d’atteindre les boutons au doigt (ce qui est plus fatiguant que de cliquer à la souris).
Nos conseils pour la validation automatique :
- Dans un écran de configuration, privilégier la validation automatique pour les réglages de paramètres simples et éviter de les appliquer sur les actions engageantes.
- Ces actions doivent être immédiatement réversibles.
- Accompagner l’utilisateur dans les actions qu’il déclenche par un guidage renforcé : Animation d’attente, tonique colorée.
- Indiquer à l’utilisateur les actions qu’il a effectué, par des messages de notification.
- Adapter l’interaction au système d’opération utilisé, prévoir des interactions compatibles ou alternatives, pour le support tactile.
Sauvegarder? Pour quoi faire?
Nous avons pu observer que la suppression des boutons de validation permet de fluidifier l’activité de l’utilisateur quand le contexte est approprié. L’avènement du web collaboratif pousse cette disparition à son paroxysme puisqu’on peut observer la disparition d’un bouton primordial des logiciels : le bouton “enregistrer”!
Ce bouton permet d’assurer à l’utilisateur d’avoir le contrôle des versions de fichier sur lesquels il travaille.
Voyons ce que Google (une fois de plus;-) propose à travers son outil de bureautique Google Documents. Ici il n’y a plus de bouton enregistrer, ni parmi les boutons visibles, ni dans le menu fichier. L’enregistrement est en fait automatique et quasi en temps réel. La moindre modification de la part de l’utilisateur est enregistrée. Sa disparition a été progressive puisqu’il était encore présent quelque temps avant, sans doute pour rassurer les utilisateurs !
L’enregistrement automatique d’un document de travail évite la perte de données, suite à une erreur de l’utilisateur, ou à une erreur du système. Enlever la gestion de cette fonction permet à l’utilisateur de s’alléger l’esprit, en se focalisant uniquement sur son travail. En plus de cela, la vocation collaborative de cet outil permet d'éviter des conflits de différentes versions de documents enregistrées entre plusieurs utilisateurs. Le bouton et son libellé ayant disparu, on notera que Google s'évertue à toujours guider l'utilisateur. Dans son interface un statut notifie en temps réel l’état du document. On comprend ainsi qu’une modification est en cours ou est prise en compte. Une pop over peut s'afficher au survol pour aider l'utilisateur à comprendre le bon fonctionnement de l'enregistrement.
La contrepartie est que l’utilisateur doit pouvoir facilement revenir en arrière et accéder aux différentes modifications opérées. Le but étant qu’il ne perde pas ses données, il doit donc pouvoir annuler (ctr+Z ou cmd+Z) et surtout avoir un historique de son fichier depuis sa création.
Recommandations
L'enregistrement automatique est très pratique, mais l'utilisateur doit en être conscient et doit pouvoir facilement s'y retrouver. Il est donc important de :
- Notifier le statut d'enregistrement, par un message clair et constamment visible.
- Avoir un accès à l'historique des versions d'un même document.
Conclusion
La suppression du bouton de validation n’est pas anodine, puisque cela influe sur le contrôle de l'utilisateur, et sa compréhension d’une interface. A travers les cas montrés nous avons vu que cette suppression peut améliorer la fluidité d’utilisation. En veillant à soigner l’interaction, la suppression d’un bouton de validation peut être tout à fait pertinente et appropriée à un contexte d’utilisation qui se veut intuitif.
Note
Plus qu’une aide à la saisie, Google.com a implémenté la recherche instantanée dans son champs de recherche (également activable dans Chrome). Pendant qu’on saisie un mot au clavier, des résultats apparaissent au fur et à mesure sans avoir besoin de valider.
Le bouton de recherche est-il voué à disparaître?
