Puis-je combiner une zone de sélection avec une barre de recherche?
Eh bien, je me demandais ce que vous pourriez penser d'une boîte de sélection à l'intérieur d'une barre de recherche. Tant que le texte ne passe pas sous la boîte, je pense que c'est vraiment cool.
Exemple:
Cela appartient à un site d'hébergement que je code en ce moment. Mais un ami a dit que tous les autres sites d'hébergement l'ont en dehors de la barre et à côté du bouton et nous devrions le faire comme eux.
Je ne sais pas, j'aime faire différemment ce que font les autres. Qu'est-ce que tu penses?
Il y a un livre célèbre appelé Don't Make Me Think: A Common Sense Approach to Web Ergonomie , qui explique comment inciter vos utilisateurs à penser (même pendant une seconde) pourrait les frustrer avec votre site, nuire à la convivialité , etc.
Les utilisateurs s'attendent à ce qu'un tel contrôle commun ressemble d'une certaine manière et s'il ne le fait pas, ils seront frustrés. Pensez aux voitures - vous pouvez entrer dans pratiquement n'importe quelle voiture et la conduire, car tous les contrôles clés sont à peu près les mêmes - tout est prévisible et attendu, ce qui est une très bonne chose .
BTW - avez-vous pensé ce qui se passe si l'utilisateur essaie d'entrer un nom très long? Dans votre contrôle, il semble que le texte soit soit masqué par la boîte de dépôt soit superposé au-dessus, aucun des deux n'est bon. Si d'un autre côté la zone de texte et la zone de dépôt sont séparées, vous n'obtiendrez pas ce problème (le texte défilera simplement horizontalement).
Donc, vos deux raisons pour concevoir l'interface utilisateur de cette façon sont "ça a l'air cool" et "c'est différent de ce que tout le monde fait"?
Dans ce cas, ma réponse serait: je ne pense pas que ce soient de bonnes raisons de concevoir une interface utilisateur d'une certaine manière. Lors de la création d'interfaces utilisateur, l'une des choses les plus importantes à retenir est que vous ne concevez pas pour vous-même, mais pour vos utilisateurs finaux.
Cela signifie que vous devez savoir ce que les gens visitent votre site attendez, comprenez et avez utilisé auparavant. Ainsi, par exemple, faites un test d'utilisabilité avec certains de vos utilisateurs où vous les observez en utilisant le site d'un concurrent qui place la zone de sélection en dehors du champ de recherche, puis observez les utilisateurs en utilisant votre conception. Voyez lequel fonctionne le mieux (il n'y a peut-être aucune différence, car il s'agit d'un assez petit morceau d'interface utilisateur).
Mais dans l'ensemble, gardez à l'esprit que "ça a l'air cool" et "j'aime être différent" ne vous fera pas prendre au sérieux en tant que concepteur d'interface utilisateur. La plupart du temps, vous devez disposer de faits pour étayer votre argument. Les données d'utilisation ou les mesures sont un bon début.
Cette question semble digne d'une mise à jour ...
Restez calme et combinez les commandes
Il y a sept ans (lorsque la question a été posée), cela semblait "inhabituel" pour certaines personnes. Dieu merci, pour des gens comme @kawoki qui ont pensé à demander - il est normal de mélanger les commandes maintenant!
En tant qu'industrie (en particulier dans les communications électroniques et les mobiles), nous avons expérimenté la combinaison de contrôles qui se complimentaient. Le champ de recherche Amazon est un exemple typique. Après des tests sans fin (toujours en cours), l'expérience de navigation catégorique habituelle a été minimisée dans un menu subtil et le champ de recherche a régné en maître. Par défaut, il s'agit d'une recherche globale, mais les catégories susmentionnées sont accessibles directement dans la zone de recherche pour limiter la portée.
La morale de l'histoire
Si une interaction innovante semble résoudre un problème particulier, elle pourrait également avoir du sens pour vos utilisateurs. Ne le jetez pas comme "rare" - testez-le!
Il convient également de noter que très probablement la majorité des visiteurs de la barre de recherche seront mobiles. Je ne sais pas si la liste déroulante sera très utilisable pour les utilisateurs d'appareils mobiles.