Une icône de recherche dans une barre de recherche doit-elle être tabable?
Je développe une barre de recherche. Le champ de saisie et l'icône sont de conception uniforme, et donc une icône tabulable semble superflue car le comportement par défaut lorsque vous appuyez sur la touche Entrée alors que le champ de saisie est activé est de soumettre le formulaire. Cliquez sur l'onglet> entrez et vous obtenez exactement la même chose. Cependant, l'icône est un bouton cliquable, ce qui, à mon avis, est une nécessité. Devrait-il y avoir une relation 1: 1 entre tabuler et cliquer? Ce qui signifie que si quelque chose est cliquable, alors il doit être tabable?
Un autre défi est le "X" à gauche de l'icône de recherche, ayant pour rôle d'effacer l'entrée. Parce qu'il a un comportement différent de celui par défaut du champ de saisie, je pense qu'il devrait être tabable. Mais pour le moment, j'ai l'impression de taper en arrière lorsque je me concentre. Il a également l'air un peu bizarre dans son état focalisé.
Avez-vous des commentaires sur cette situation? Merci.
Aperçu
Vous avez créé cet élément d'interface utilisateur pour permettre aux utilisateurs d'effacer facilement leurs critères d'entrée de recherche. Dans la plupart des cas, les utilisateurs qui utilisent leur clavier pour interagir avec le formulaire choisiront le bouton de recherche sur le bouton d'effacement car il s'agit de l'action principale. En utilisant la navigation par clavier, votre première préoccupation serait votre ordre d'indexation, devrait effacer avant la recherche ou pas du tout?
Tabable?
À mon avis, une bonne conception est inclusive, certains utilisateurs peuvent utiliser une technologie d'assistance. La suppression de clear de index supprime cette fonctionnalité de ces utilisateurs. Cela étant dit, oui vous devez rendre le bouton d'effacement indexable.
Effacer avant recherche ou rechercher avant effacer?
Il est devenu courant que pour terminer l'action principale sous une forme que vous appuyez sur Entrée . Dans la plupart des cas, les utilisateurs s'attendent à ce que l'ordre de tabulation ne change pas par rapport aux modèles courants (de haut en bas, de gauche à droite). L'utilisateur doit tabuler dans le champ de saisie, tab pour accéder à clear et enfin tab pour accéder à la recherche. À tout moment, vous pouvez appuyer sur Entrée pour soumettre la recherche tant que vous vous concentrez sur le formulaire (champ de saisie).
Choses à considérer
- Architecture de l'information
Étant donné que "clear" est spécifique à ce champ de saisie et non au formulaire (même si le formulaire n'a qu'un seul champ de saisie), il est logique de placer le bouton d'effacement à l'intérieur du champ de saisie (architecture d'interface utilisateur très courante Parent-> enfant). Cependant, l'icône "Rechercher" est l'action principale de votre formulaire. Il est plus logique de mettre cela en dehors de votre champ de saisie. Cela gardera tous les formulaires suivant la même architecture d'information.
- Appel textuel à l'action
S'il y a des résultats de recherche, "effacer" supprime-t-il également les résultats ou simplement l'entrée dans le formulaire? L'icône "Fermer", "Supprimer", "Arrêter" est holistique et ne représente pas exactement de quelle action vous essayez d'informer les utilisateurs. Pensez à supprimer cette icône et utilisez simplement du texte pour indiquer aux utilisateurs ce que cela fait. Utilisez peut-être une info-bulle, mais n'oubliez pas d'utiliser alt="" attribut pour les lecteurs d'écran.
La même considération pourrait s'appliquer à l'appel à l'action de recherche. À l'heure actuelle, vous utilisez une étiquette pour nous informer de l'action des champs de saisie et non du champ de saisie. Cependant, vous pouvez y parvenir en utilisant "Rechercher" comme action et non comme étiquette. Cela gardera à nouveau toutes les formes suivant les mêmes modèles et supprimera toute ambiguïté.
Étant donné que la recherche se trouve en haut de votre site, les utilisateurs lisent de haut en bas, de gauche à droite. Au moment de voir ce champ de saisie, ils peuvent avoir peu de contexte de ce qu'il fait. Est-ce que cela recherche des produits, des informations de contact, des blogs, des moteurs de recherche? Essayez de laisser votre appel à l'action clair et concis, par exemple "recherche de produits". S'il n'y a pas beaucoup de place, vous pouvez utiliser du texte d'espace réservé pour le transmettre aux utilisateurs.
Ne faites jamais réfléchir l'utilisateur. " Ne me fais pas réfléchir "
En tant qu'utilisateur, je m'attendrais à ce que je suppose, et je suppose que vous appliquez tab comme verbe lorsque vous dites "tabulation", la recherche à effectuer lorsque je tapotais ou cliquais sur l'icône de recherche ou que le contrôle perdait le focus.
Je m'attendrais à ce que le bouton d'effacement nécessite et un appui physique pour effacer l'entrée.
Si vous incluez le bouton Effacer dans la liste des onglets, il me semble que cela deviendrait assez irritant et que les gens supprimeraient par inadvertance leur terme de recherche.
Je pense que vous devriez prendre position sur cette situation car les deux comportements sont valides. Demandez-vous: est-ce un comportement que vous aimeriez encourager? Voulez-vous que vos utilisateurs appuient sur l'onglet> Entrée, ou appuyez simplement sur Entrée? Je suis moi-même en faveur de simplement appuyer sur Entrée, et de ne pas autoriser l'onglet> Entrée. Les utilisateurs avancés qui utilisent le clavier appuieront très probablement sur Entrée, les utilisateurs de souris le seront probablement aussi, mais dans le cas contraire, vous disposez du bouton de recherche.
Je suggérerais de remplacer l'icône de recherche par le X lorsqu'un utilisateur effectue une recherche. Si l'utilisateur appuie sur le bouton X, l'entrée est désélectionnée et le X est à nouveau remplacé par l'icône de recherche.