Comment puis-je rendre évident que les suggestions de saisie semi-automatique ne sont pas obligatoires?
Nous avons développé un widget d'invitation qui complète automatiquement les noms en fonction de la personne que l'utilisateur suit sur Twitter. Il est également possible d'inviter n'importe qui, mais j'ai l'impression que cette conception donne l'impression que vous devez choisir l'une des suggestions de saisie semi-automatique. Comment pourrais-je dire avec élégance que les suggestions ne sont pas obligatoires?
Tout d'abord, ne mettez pas automatiquement en surbrillance la première option comme indiqué dans la casquette d'écran. Réduisez ensuite la zone de suggestion automatique lorsque l'utilisateur est en train de taper. S'ils frappent la flèche vers le bas ou survolent la zone de correction automatique, cela reviendra à son état actuel. Du texte pourrait être ajouté pour donner aux utilisateurs des instructions, mais je ne pense pas qu'elles seraient nécessaires.
Le problème n'est pas avec votre contrôle de saisie semi-automatique, c'est avec votre formulaire.
Découvrez comment Trello fait cela.
1. Avant de commencer, le champ de saisie explique ce que vous pouvez saisir
Notez que le formulaire est intitulé "Ajouter des membres" et vous permet de saisir plusieurs adresses e-mail et de sélectionner plusieurs personnes dans la liste.
2. Lorsque vous commencez à taper, "recherche ..." apparaît pour indiquer que le système recherche quelque chose
Le bouton "inviter" est grisé car il n'y a pas de correspondance réussie.
3. Lorsque le système fait correspondre les résultats avec votre entrée actuelle, il les affiche dans une liste
Comme vous êtes toujours en train de taper et que vous n'avez pas sélectionné quelqu'un en cliquant dessus ou tapé son nom en entier, le bouton "inviter" est toujours désactivé.
4. Une fois que vous avez sélectionné quelqu'un, le champ de saisie est désactivé et le bouton d'invitation est fortement éclairé.
Notez que le champ de saisie ne se met pas à jour en fonction de votre sélection.
5. La saisie d'une adresse e-mail dans le champ fonctionne également.
Si le système remarque que vous avez entré une adresse e-mail valide, il vous permettra également de cliquer sur le bouton "inviter".
En d'autres termes:
- Combinez vos deux champs de saisie
- Utilisez une copie pour expliquer quelle entrée est acceptée
- Mettez à jour l'utilisateur pendant qu'il tape pour lui montrer ce qui se passe
- Utilisez des styles désactivés/activés clairs pour vos boutons pour indiquer quand l'état change
- Autoriser la saisie du courrier électronique et du nom d'utilisateur dans le même formulaire
Parce que vous avez un tas de champs en rangées, chacun faisant la même chose (d'après ce que je peux voir sur vos captures d'écran), vous voudrez gérer cela avec un message d'introduction. Quelque chose dans le sens de:
All fields below are optional. You may skip this step by taking the [add your action here]
Un autre point à retenir pour vous, il ne serait pas clair pour moi que le deuxième champ de texte de chaque ligne est pour les adresses e-mail et le premier pour rechercher un nom/identifiant Twitter. Je pense que vous aurez probablement besoin d'un étiquetage pour fabriquer ce cristal.
N'oubliez pas de tester avec certains utilisateurs une fois vos ajouts effectués. Très important.
Similaire à réponse de Mike Eng , mais je mettrais le (créer un nouveau) en haut.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
C'est complètement sans ambiguïté.
Vous avez quelques problèmes avec la microcopie ici. Tout d'abord, comme Kevin l'a mentionné, les champs de saisie de texte ne sont pas étiquetés. Deuxièmement, il n'est pas clair si les 5 noms doivent être remplis pour continuer (bien que cela puisse être dans la partie de l'écran que vous n'avez pas partagée). Troisièmement, votre question réelle peut être résolue avec une ligne similaire à "Choisissez un contact Twitter ou entrez un nom et un e-mail pour quelqu'un d'autre" placé ensuite "Qui vous rejoindra?".
Cependant, je ne comprends pas comment la saisie semi-automatique ajoute de la valeur à vos utilisateurs dans cette interaction. Je suppose que vous avez l'intention d'envoyer des invitations sous forme de messages directs sur Twitter, mais cela nécessite que l'autre personne suive votre utilisateur et pour vérifier ses DM (les habitudes d'utilisation ici sont différentes de celles des e-mails). Même si vous avez toujours besoin d'une adresse e-mail lors de l'invitation d'un contact Twitter, la saisie semi-automatique ne permet pas de gagner du temps ni de valider les données saisies par l'utilisateur car votre utilisateur et l'invité peuvent utiliser des noms différents de ceux sur Twitter (par exemple, "James Patrick Gibson "peut être connu sous le nom de" JP Gibson "ou" Jim Gibson "). De plus, les suggestions sont inutiles car le système divise la requête en caractères séparés et trie les résultats par ordre alphabétique et non par pertinence (mettre "Jason" comme premier résultat sur la requête "Jon" est inacceptable).
Vous pouvez ajouter le contenu exact (entre guillemets) du champ comme une autre ligne sous les options de saisie semi-automatique. Ajoutez une barre de défilement si nécessaire, mais le bas (contenu exact du champ) doit toujours être affiché. Cela donne la possibilité qu'une entrée personnalisée soit autorisée.
Voir l'exemple "Gmail" comme saisie semi-automatique.
Excellentes suggestions jusqu'à présent, mais personnellement, je recommanderais de désactiver le premier champ en surbrillance (comme indiqué précédemment) et de couper également la saisie semi-automatique. Donc, disons qu'ils tapent 3 lettres, présentez-leur un certain nombre de choix jusqu'à un certain point ou une certaine longueur, puis coupez la saisie semi-automatique.