Form input to accept array of strings

Question

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.)

Answer 1

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

Answer 2

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

^{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