1

For a form, I want to accept a list of text inputs (e.g. "what baby names do you like?"). It's not a multi-select situation because there is not list of default values (the user could make up unknown baby names).

I could put a text input, and a "+" button nearby so they can add more text boxes. But requires some implementation.

I could show a single text input and tell the user to enter a comma-separated list. It's really easy implementation-wise, but obviously not as good a user experience as typing separate answers in separate boxes.

Is there a good and/or standard way to handle this situation?

(StackExchange has an example of this type of thing with their "Tags" list when asking a question, but they have a list of expected values which should be used in general.)

3

A + button does not only require implementation but also requires (for most people)

  • mouse move to the button
  • mouse click on the button
  • mouse move back to the textfield
  • mouse click on the textfield

I consider that as too much effort for the user.

While I have seen all kinds of data separation, including space and comma, I personally don't like it.

  • Spaces in this context may not make sense at all, if you allow multiple names, e.g. German "Hans Peter" or "Karl Heinz".
  • Commas are easy to miss. They only have a few pixels

Considering all this, I'd say a clean approach would be to use newlines. It looks nice like a list, it's a clear separation, it's easy to understand and does hardly require any effort except typing the word.

Example:

Michelle
Lucas Carl
Jerry
Henry
Samantha Martine
1

To minimize users' physical (+ pressings) and cognitive (mental) efforts, you can try the approach:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Pro:

  • The list of most popular names (according to stats data) allows choice, instead of typing
  • Pre-defined list is based on stats, so it can work quite well for average user
  • Text area allows manual entry, and placeholder shows the format

Con: Users' input can be biased, as you provide pre-defined list of options

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.