Quand un champ de texte doit avoir un bouton Effacer?
Je parle d'une petite croix apparaissant à l'intérieur du champ de texte après avoir tapé un texte, en particulier pour les champs recherche dans interfaces de burea. Mais toutes les considérations sur les champs de texte généraux sur toutes les plateformes sont également appréciées.
Certains sites utilisent le bouton Effacer mais d'autres non. Je me demande quels sont les avantages et les inconvénients des deux versions?
Exemples de sites avec bouton clair dans le champ de recherche:
- Apple.com/search
- yahoo.com (sur la page des résultats de recherche)
- pinterest.com
- asos.com
- translate.google.com
Et sans:
- google.com
- youtube.com
- stackexchange.com
- github.com
- Twitter.com
L'un des cas évidents est celui mentionné par la réponse de Nirav Chadda, qui peut être raccourci à "1 clic vaut mieux que plusieurs frappes" . Ceci est lié à moins d'efforts et à une meilleure convivialité
Un autre cas peut être vu sur Yahoo, dans ce cas spécifique, vous pouvez voir la page Basketball Fantasy de Yahoo .
À cette fin, supposons que je suis un utilisateur qui souhaite ajouter un nouveau joueur à l'équipe. Je vais donc cliquer sur un bouton intitulé "Ajouter un joueur" puis je serai dirigé vers l'écran suivant: 
Cet écran affiche tous les joueurs en fonction de certains filtres et tri par défaut, dans ce cas, Tous les joueurs disponibles trier par Pré-saison rang.
Cependant, disons que je veux chercher un joueur dont je ne me souviens pas s'il est nommé Devin ou Devon, donc je vais chercher Dev, tapez une partie du nom et voici ce que j'obtiendrai:
Maintenant, j'ai une liste de 4 joueurs. Veuillez noter que le champ de recherche conserve ma recherche "dev" et a ajouté une icône "supprimer" (défendable mais pour moi il s'agit d'une icône de fermeture). Je vérifie les joueurs et ils ne conviennent pas à mon équipe, je veux donc revenir à la liste de TOUS les joueurs disponibles. Je clique donc sur l'icône et la première page s'affiche à nouveau (ou si j'ai utilisé un filtre différent, quel que soit le filtre que j'ai utilisé).
Ainsi, cette icône d'effacement/fermeture/suppression supprime non seulement les caractères dans le champ de recherche, mais efface également toutes les informations dynamiques créées sur le processus de recherche (par exemple, les processus AJAX).
Une icône effaçant uniquement la chaîne entrée me laisserait tous les résultats que j'ai recherchés. Mais ... si j'efface ce champ, on peut supposer que je ne veux pas non plus ses résultats. Cela pourrait être facilement résolu en en ajoutant un autre bouton pour revenir en arrière ou en utilisant le bouton de retour dans le navigateur de l'utilisateur . Cependant, l'icône claire simplifie tout d'une manière élégante offrant une grande facilité d'utilisation et moins d'effort pour l'utilisateur
Cela dépend du contexte. Si l'utilisateur connaît la valeur à saisir et qu'il est moins probable qu'il la modifie plus tard, le bouton "effacer" n'est pas nécessaire. Vice versa si le comportement courant pour ce champ est que l'utilisateur va probablement itérer sur la valeur. Alors oui, un bouton d'effacement peut être bénéfique. Exemple: dans un champ de recherche, l'utilisateur raffinera probablement la requête plusieurs fois tout en vérifiant la qualité des résultats. Bouton clair nécessaire. Au lieu de cela, si le champ est une "date de naissance", la valeur est bien connue de l'utilisateur et ne changera pas. Pas besoin d'un bouton clair. Logique? Avoir moins de "trucs" sur la page réduit la charge cognitive de l'utilisateur (devoir s'arrêter pour reconnaître et donner du sens aux éléments de la page) et par conséquent, l'interface semble plus simple. J'espère que cela peut vous aider.
Les champs de saisie HTML5 avec type = search affichent la croix dans Chrome et Safari.
Je peux imaginer que le crossmark soit utile sur les appareils mobiles. Il est plus facile de toucher la croix pour supprimer votre entrée que d'avoir à taper ou à appuyer en continu sur le bouton de retour arrière.
Si je tape, un clic de souris est certainement pas plus facile qu'une combinaison de clavier ou deux comme suggéré dans une autre réponse.
Appuyez sur CTRL + A puis DELou BkSPC peut être fait presque immédiatement.
Pour cliquer sur un bouton avec la souris, je dois d'abord déplacer une main du clavier vers la souris, localiser le pointeur à l'écran, déplacer le pointeur vers l'icône, cliquer sur l'icône, puis replacer le clavier.
La sélection de texte sur les écrans tactiles est cependant plus compliquée, donc pour le contenu conçu pour les écrans tactiles, le bouton d'effacement est utile. - alors que les PC avec écrans tactiles sont de plus en plus courants, le périphérique d'entrée principal sera toujours un clavier physique, donc il y a peu de pression pour l'ajouter là où il n'existait pas auparavant, bien qu'il puisse y avoir quelque chose à penser à l'avenir.
Lorsqu'une interface est principalement pointer-cliquer, dictant l'utilisation de la souris, elle sera plus utile.
Son objectif est donc essentiellement d'effacer le champ de type d'entrée. Analysons le processus pour les deux:
Cas 1: Sans le signe croisé Généralement, pour que je puisse effacer le champ de recherche, je ferais ce qui suit:
- Appuyez plusieurs fois sur la touche de retour arrière pour effacer ce que nous avons écrit Word par Word.
- Maintenez momentanément la touche de retour arrière pour effacer complètement le champ.
- Sélectionnez tout (Ctrl + A) et appuyez sur Supprimer.
Cas 2: Avec le signe croix Ici, le processus implique un seul clic pour effacer le champ.
Points clés à considérer
Dépend de votre décision d'effacer le champ, partiellement ou dans son ensemble, le signe croisé ne conservera pas les mots partiels si nécessaire.
Cela dépend de votre rapidité/expérience utilisateur avec le clavier/la souris.Certaines personnes sont assez Swift avec l'utilisation des touches, qu'elles ne touchent pas du tout à la souris pour rien alors que certaines sont assez rapides avec l'utilisation d'une souris.