Aller directement au contenu

Les boutons de validation en voie de disparition ?!

21/06/2012

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 :

Exemples de boutons

  • 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.

Fenêtre de chat et zone de commentaires Facebook

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?

Champs de saisie Chrome

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.

Guidage Chrome

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.

Écran de dévérouillage iPhone

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.

Écran de configuration iPad

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”.

Extension Chrome

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.

Interaction tactile iPad

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

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.

Notification sous Google +

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 .

Gestion des cercle de Google+

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.

Disparition du bouton sauvegarder de Google docs

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 !

Notification de Google doc

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.

Historique des révisions de Google Doc

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?

 

14 Commentaires

  • Testapic dit :

    Article vraiment très intéressant, notamment la dernière partie sur la disparition des sauvegardes “manuelles” au profit des sauvegardes auto.

    Cela dit, mettre en place un historique des sauvegardes est aussi pertinent afin de pouvoir revenir sur une précédente modification (une sorte de “révision”).

  • iggOne dit :

    Cette article est vraiment très très intéressant.

    Je partagerais à mon tour une expérience, cette fois-ci négative, due à la suppression du bouton Envoyer sur Facebook.

    Facebook a fait le choix de supprimer le bouton Envoyer lorsque l’on envoie un statut sur la version web.
    Lorsque je me connecte avec mon iPad sur la version web, il devient impossible de valider mon texte car il n’y a ni bouton d’envoie sur le site, ni de bouton d’envoie sur mon le clavier virtuel de l’iPad.

    Du coup, il devient impossible d’envoyer un statut depuis la version web de Facebook actuellement. Pourtant, j’ai besoin de m’y connecté car la version web est + complète que l’application où certaines fonctionnalités sont absentes.

    ça n’est qu’un défaut, un oubli de la part de Facebook qui sera certainement corrigé par la suite mais ça montre bien que l’ergonomie au service des tablettes tactiles n’est pas souvent pensée dans la création des sites web !

  • Article vraiment top en effet mais il manque une petite partie : “Comment rassurer l’utilisateur sur le fait que son action soit bien enregistrée” !
    Je doute souvent (surtout sur des appli iphone) pour savoir si mon action est enregistrée ou pas. 25 ans de “save” sur windows ça laisse des traces ;)

  • Valéry dit :

    Bonjour, merci pour vos commentaires. L’expérience de Facebook sur iPad est surprenante. Merci pour l’anecdote ;-)

  • cad dit :

    Moi il n’y a qu’à un seul endroit où cela me gène, c’est sur Skype Mac. Je n’ai jamais compris pourquoi ils ont enlevé le bouton valider uniquement sur Mac et pas sur Windows, surtout que c’est pas ça qui va surcharger l’interface.

    Bref il y a pas mal de moments où j’ai n’ai qu’une main sur le clavier et pas forcément envie de la déplacer jusqu’à la tâche Entrée, et bien je suis obligé de le faire (flemmard indeed).

  • Nickko dit :

    Moi, ça me gêne un peu, la suppression de ce bouton, surtout pour la saisie d’un code.

    Pour la petite histoire, j’habite en Belgique, ici, lorsqu’on tape son code de carte bancaire, aucune validation n’est nécessaire, contrairement à ce dont j’avais l’habitude en France.

    Sur le coup, je me suis dit, parfait, ça retire une action.

    À l’usage, c’est un vrai cochemare si l’on fait une erreur sur la dernière touche, validation immédiate et sanction rapide si on est maladroit. (serais-je maladroit ?)

  • f1oren dit :

    Intéressant

    À noter que sur iPhone/iPad pour le code PIN il y a toujours le bouton de validation OK. Une idée de pourquoi ? Peut-être que le code PIN ne fait pas toujours 4 caractères ? Car pour un mot de passe ça nécessite de connaître à l’avance sa longueur.

    Pour Google Document, s’il n’a pas inventé la sauvegarde automatique (c’est une option dans Word depuis la nuit des temps par ex), il a carrément simplifier le processus. Idem pour le nom du fichier qu’il est possible de saisir a posteriori ou de modifier à tout moment, chose impossible avec un fichier physique depuis une appli (on crée un doublon et on est obligé de donner un nom et un emplacement avant d’enregistrer)

  • Julian dit :

    Personnellement je ne trouve pas les menu de config iphone très clair.(notamment l’exemple reseau wifi présenté)
    faut il cliquer sur la ligne ou la fleche en bout ?
    et faisant de la formation je confirme que les utilisateurs ne comprennent pas cette fleche comme étant une demande de connexion : une case à cocher est plus compréhensible à mon avis

    Idem pour la loupe et la mappemonde, la touche entrée ou la touche tab : des trucs de geek pas compris par les utilisateurs grands publics que je forme.
    la barre d’adresse n’est pas encore comprise je dirais dans 60% des cas de mes stagiaires (commerciaux équipés de pc et régulièrement d’appli sur iphone ou Ipad)

    très bon article

  • Valéry dit :

    @Nickko : J’adore les histoires belges !
    A l’usage, le fait de pouvoir se tromper 10 fois sur le code de déverrouillage iPhone/iPad dédramatise l’erreur de saisie.
    @f1oren : Ce qui n’est pas le cas du code pin puisqu’au bout de 3 erreurs, la carte sim se bloque ;-)
    Effectivement Google n’a pas inventé la sauvegarde automatique, mais a fait le choix d’assumer cette fonctionnalité.

  • f1oren dit :

    @Julian
    Justement la flèche n’est pas une demande de connexion, c’est pour accéder au détail de la connexion. La demande de connexion se fait naturellement en appuyant sur la ligne comme tout le reste des menus de réglages. Et il est bien plus aisé d’avoir le choix de tapoter n’importe où sur la ligne que d’avoir à cliquer précisément sur une case à cocher.

    Quand je vois la facilité avec laquelle des enfants en bas âges arrivent à utiliser naturellement iPhone et iPad sans avoir besoin d’explication, je trouve que ça révolutionne radicalement l’interaction avec l’objet.

  • Cet article est excellent ! On oublie trop souvent l’ergonomie. Je prends note de cette belle analyse, complète et illustrée. Félicitation.

  • Je trouve que la disparition des poutons de validation n’est pas un progres dans l’ergonomie et même dans le design

    Je pense que cela peut nuire au produit en rendant son utilsation plus difficile

    Le produit sera moins attectif pour le consommateur ou l’utilisateur et donc baisse des ventes

    pour moi la disparition des boutons est une mauvaise idée

  • palk dit :

    Bonjour, et bravo pour votre intérêt pour les interfaces utilisateurs et l’usabilité.

    J’ajouterai pour l’intérêt de tous ceux qui sont sensibles à cet aspect des choses de vous conseiller de passer au Macintosh.

    Apres avoir passé (perdu) 15 ans de ma vie informatique sous windows, passer sur Mac a créé comme un choc en moi: Comment au-je pu résister aussi longtemps et utiliser des systèmes aussi pénibles et mal concus que Windows et Linux?

    Le Mac utilise de nombreuses perles et trouvailles ergonomiques simples et efficaces, si simples qu’on se demande pourquoi on a toujours fait autrement sous Windows.

    Un exemple, présent depuis 2002 et OSX 10.0, c’est qu’il n’y a pas de validation dans le panneau de configuration. les traditionnels ‘OK’ ‘Appliquer’ ‘Annuler’ n’existent pas et on vit bien mieux sans.

    Les actions dangeureuses, elles seules demandent confirmation et entrée du mot de passe admin.

    Intéressés par l’U.I. ou l’usaility ? vous feriez une sérieuse erreur en ne passant pas sur MAC, pour votre culture personnelle.

  • Mirabelle dit :

    une belle illustration :http://www.mtv.com/artists/
    un moteur de recherche, sans boutons : vous tapez, vous trouvez…

Laisser un commentaire à cad Annuler la réponse