web-dev-qa-db-fra.com

Entrée de formulaire pour accepter un tableau de chaînes

Pour un formulaire, je souhaite accepter une liste d'entrées de texte (par exemple, "quels noms de bébé aimez-vous?"). Ce n'est pas une situation de sélection multiple car il n'y a pas de liste de valeurs par défaut (l'utilisateur pourrait inventer des noms de bébé inconnus).

Je pourrais mettre une entrée de texte et un bouton "+" à proximité afin qu'ils puissent ajouter plus de zones de texte. Mais nécessite une certaine mise en œuvre.

Je pourrais montrer une seule entrée de texte et dire à l'utilisateur d'entrer une liste séparée par des virgules. C'est vraiment facile à mettre en œuvre, mais évidemment pas une aussi bonne expérience utilisateur que de taper des réponses séparées dans des cases distinctes.

Existe-t-il un moyen efficace et/ou standard de gérer cette situation?

(StackExchange a un exemple de ce type de chose avec leur liste "Tags" lors de la pose d'une question, mais ils ont une liste de valeurs attendues qui devraient être utilisées en général.)

formsinput-fieldsinput
2
tscizzle

Un bouton + Ne nécessite pas seulement une implémentation mais nécessite également (pour la plupart des gens)

  • déplacer la souris sur le bouton
  • clic de souris sur le bouton
  • retour de la souris au champ de texte
  • clic de souris sur le champ de texte

Je considère cela comme trop d'efforts pour l'utilisateur.

Bien que j'aie vu toutes sortes de séparations de données, y compris l'espace et les virgules, je ne l'aime pas personnellement.

  • Les espaces dans ce contexte peuvent ne pas avoir de sens du tout si vous autorisez plusieurs noms, par exemple Allemand "Hans Peter" ou "Karl Heinz".
  • Les virgules sont faciles à manquer. Ils n'ont que quelques pixels

Compte tenu de tout cela, je dirais qu'une approche propre consisterait à utiliser des sauts de ligne. Il a l'air sympa comme une liste, c'est une séparation claire, il est facile à comprendre et ne nécessite pratiquement aucun effort à part taper le mot.

Exemple:

Michelle
Lucas Carl
Jerry
Henry
Samantha Martine
3
Thomas Weller

Pour minimiser le physique des utilisateurs (+ pressions) et cognitives (mentales), vous pouvez essayer l'approche:

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Pro:

  • La liste des noms les plus populaires (selon données statistiques ) permet de choisir, au lieu de taper
  • La liste prédéfinie est basée sur des statistiques, elle peut donc fonctionner assez bien pour un utilisateur moyen
  • La zone de texte permet la saisie manuelle et l'espace réservé indique le format

Con: L'entrée des utilisateurs peut être biaisée, car vous fournissez une liste d'options prédéfinie

1
Alexey Kolchenko