Comment gérer la saisie des utilisateurs sans focus d'entrée
Un problème que j'observe à plusieurs reprises avec les utilisateurs Web novices est qu'ils commenceront parfois à taper sans d'abord sélectionner (focaliser) correctement un champ de saisie. Un modèle typique que je vois est le suivant: l'utilisateur clique juste à l'extérieur du champ de saisie et commencera à taper de manière à chasser et à picorer - il n'apprendra que son texte n'a pas été entré lorsqu'il reviendra pour regarder l'écran. Je suppose qu'il y a plusieurs raisons à ce problème: un mauvais contrôle de la souris ou un mauvais contrôle du moteur semblent être les plus importants.
Je voulais avoir une opinion sur ce que vous pensez être la meilleure stratégie pour traiter ce problème. Doit-elle simplement être ignorée ou la demande doit-elle prendre une mesure proactive pour y faire face?
La mise au point automatique n'est pas idéale. Cela peut avoir du sens dans certaines pages très simples à tâche unique, comme un écran de connexion, où les deux seuls champs sont nom d'utilisateur et mot de passe.
Mais sur une page plus complexe que cela, cela peut être un énorme obstacle à l'accessibilité. Si, par exemple, vous avez un grand formulaire complexe sur une page avec le premier champ étant, par exemple, "ID", une personne utilisant un lecteur d'écran chargera la page et entendra "Form. Field: ID". Ce qui ne donne absolument pas de contexte sur le sujet de cette page. Idéalement, ils pourraient d'abord lire des choses comme le titre de la page, le contenu d'introduction, etc.
Un peu plus de lecture à ce sujet: http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/
En ce qui concerne la convivialité, de nombreuses personnes préfèrent garder le contrôle de leur propre curseur. Ainsi, bien que la mise au point automatique puisse être une amélioration de l'utilisabilité pour certains, elle peut être un problème d'utilisation pour d'autres. Donc, une autre raison d'éviter la route de mise au point automatique.
Pour revenir à votre question, notez que vous avez affaire à des utilisateurs d'ordinateurs de chasse et de picage. Ils existent certainement. Et nous devons les accueillir. Mais pas au détriment des autres utilisateurs. ;)
Ce que je suggérerais, c'est simplement de créer une zone cible plus large sur laquelle se concentrer. Agrandir les champs.
Au lieu du haut "standard", stylisez-le comme le bas.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Et le bonus supplémentaire est que cela rend les choses beaucoup plus faciles pour ceux qui utilisent des appareils tactiles.
La meilleure stratégie consiste à placer le curseur dans le premier champ de saisie attend dès que la page se charge. Supprimez la nécessité de sélectionner complètement le champ. Cependant, si l'utilisateur peut avoir plusieurs alternatives, vous devez éviter la sélection automatique car cela peut prêter à confusion.
En ce qui concerne les champs suivants, utilisez une navigation par onglets appropriée pour permettre une expérience de frappe sans souris.
par exemple: Regardez les pages de connexion Facebook et Gmail, dès que la page se charge, le curseur est déjà dans le champ du nom d'utilisateur.
Si vous voulez ennuyer les utilisateurs qui ont laissé leurs haut-parleurs allumés, vous pouvez commencer à faire bips d'erreur lorsque l'utilisateur commence à écraser les touches en dehors des champs de saisie. (Le problème est qu'il gâche les raccourcis de navigation du clavier du navigateur)
J'adopterais une approche proactive qui ne dérange pas l'utilisateur par le bip ou la mise au point automatique.
Si les utilisateurs cliquent juste à l'extérieur du champ, il est possible de fournir une amélioration progressive des champs de saisie via JavaScript qui pourrait aider à résoudre ce problème. Le champ de saisie peut être entouré d'un <div>, ou d'un autre élément, qui fournit un espace blanc cliquable. Lorsque l'élément parent du champ de saisie est cliqué, ce que JavaScript peut écouter, puis le champ de saisie de l'élément l'enfant gagnerait en concentration.
Statistiquement, cela peut ne pas donner de résultats valables, mais si vous voyez souvent le même problème, cela peut valoir la peine car le développement ne devrait pas prendre trop de temps. J'ai entendu parler d'implémentations similaires sur les boutons, où la zone de clic est légèrement plus grande que le bouton visuel lui-même.
Selon la disposition de votre page et son objectif, la mise au point automatique d'un champ peut aider.
Notez que si le point principal de la page n'est pas de remplir une entrée, alors ce n'est peut-être pas une bonne idée.
De plus, si le champ en question ne se trouve pas en haut de la page, ne le faites pas. J'ai constaté que lors de la mise au point automatique d'un champ qui n'est pas en haut, la page se charge partiellement défilée vers le bas (jusqu'à l'entrée), ce qui est un comportement assez étrange si vous ne comprenez pas pourquoi.
Une autre solution (en supposant que vous travaillez avec HTML) pourrait être d'envelopper l'entrée dans une balise d'étiquette correspondante. Ensuite, avec CSS, vous pouvez ajouter un peu d'étiquette. De cette façon, en cliquant sur ou n'importe où près de l'entrée, le champ sera focalisé. Je n'ai jamais essayé cette méthode, mais c'est du HTML valide selon W3.
Je serais d'accord avec rk. A l'approche proactive semble exagérée comme le bip sur la saisie en dehors du champ de texte.
Juste pour faire écho, comprendre où les utilisateurs sont les plus susceptibles de commencer à taper lorsqu'ils se lancent sur votre site est cependant crucial pour la stratégie de mise au point automatique sur le chargement de la page. Si les gens sont habitués à cela et que le mauvais champ est au centre de l'attention, ce serait juste une gêne et pas un gros problème. Mais si vos analyses sont câblées, vous pouvez voir combien de personnes se concentrent en dehors de votre champ auto focalisé avant d'effectuer toute autre action sur la page pour voir avec certitude ce que les gens font.