Idées pour fermer un popover sans élément Close
J'ai des moqueries d'un concepteur montrant une forme initiale pour rechercher un emplacement. Il y a des champs pour le nom du lieu (entreprise) et la ville (pré-remplis) et un bouton Suivant (désactivé au début). Lorsque l'utilisateur commence à taper dans le champ Nom de l'emplacement, un div contenant les résultats de la recherche apparaît en temps réel sous le champ Nom de l'emplacement. Pour choisir un emplacement, l'utilisateur appuie sur le résultat de son choix, la liste disparaît et le choix s'affiche sous le bouton Suivant, qui est maintenant activé.
Un collègue de l'AQ craint que si l'utilisateur choisit dans la liste, décide de rechercher à nouveau, puis change d'avis et souhaite poursuivre son premier choix, comment peut-il ignorer la liste des résultats sans avoir à choisir une autre sélection dans la liste et re -rechercher son choix d'origine? Actuellement, c'est le seul moyen de rejeter la liste. À propos, la liste des résultats couvre le bouton Suivant. Une option consiste à ajouter une icône "Fermer" ou "X" à la liste des résultats de la recherche, mais c'est un défi visuel. Un autre collègue a suggéré d'utiliser les boutons Suivant ou Terminé qui apparaissent sur la barre de l'assistant de formulaire de Mobile Safari, mais Suivant uniquement les onglets entre les éléments de formulaire et Terminé ne font que mettre au point un élément de formulaire, puis masquent le clavier.
Je recherche des suggestions sur la façon de fermer les résultats de la recherche, soit avec une légère refonte, soit s'il existe un moyen de personnaliser l'assistant de formulaire de Mobile Safari et d'avoir une action de touche liée à la fermeture de la division des résultats. (par exemple, Annuler au lieu de Terminé). La solution devrait également fonctionner dans d'autres appareils; J'utilise juste les iPhones comme exemple. Ce n'est pas non plus une application native; c'est un site Web.
Se moquer d'origine -
D'après mon commentaire ci-dessus.
Une façon de l'implémenter consiste à ajouter un petit symbole "x" gris à la fin de la zone de saisie qui, lorsque vous cliquez dessus, effacera à la fois la zone de saisie et les résultats de la liste déroulante. Ce système est assez répandu, les utilisateurs sont donc susceptibles de le comprendre (par exemple, le champ de recherche de l'Explorateur Windows l'utilise). Cependant, vous pouvez toujours ajouter une légende au-dessus de la zone de recherche pour dire que cliquer sur l'icône effacera votre recherche.
La deuxième méthode est également bien connue. Vous pouvez détecter un clic en dehors de la zone et l'utiliser comme déclencheur pour effacer l'entrée et les résultats. Cependant, je pense que l'ancienne méthode est meilleure car elle peut être implémentée sans JavaScript (en utilisant un contrôle de formulaire de type 'reset') et en tant que telle sera toujours disponible pour tous les utilisateurs, qu'ils aient ou non JavaScript activé.
Deux options
- Détectez tap/touch/click en dehors de la zone de saisie et des résultats de recherche (si vous voulez éviter le bouton x)
- Allez avec le bouton x traditionnel
Mais les utilisateurs pourraient ne pas savoir comment fermer si seule l'option 1 est implémentée, jusqu'à ce qu'ils essaient.