Toggle between a select or text input?

Question

Trying to determine a feasible way for the user to use a select option as an input or a text if nothing is suitable.

Most of the time, the user will be using what has been pre-populated within the select options but may have various instances that an actual text input is needed.

I don't feel that having an "other" field on the select options works with a form field being displayed after so I've come up with this solution:

The wording will not stay how it's presented, this is purely for you to see what's there on a visual basis.

Seen working here:

http://codepen.io/brycesnyder/full/WoeVrY/

Are there any potential pitfalls with this design and functionality, or is there another way to represent this?

Answer 1

Why not use a combo box?

A combo box is a combination of both a drop-down list and a text box, and is a common control element across the web.

Examples:

• Kendo UI - ComboBox Demo
• Stack Overflow - HTML combo box with option to type an entry

Answer 2

One of the best arguments to using list-forms and lists in general is that human beings are very good at keeping track of top-to-bottom information that flows in a sensible way. Similarly, we're used to (at least in the west) to check for the most important information in the top right corner (hence the usual logo placement). It's both what we're used to (right to left reading) and what our brains happen to be efficient at (top to bottom tracking).

While I don't necessarily dislike your design, I think you are forcing the visitor to break from the usual top-bottom eye pattern by having her/him look to the right then back to the left to input before continuing along. Just think of your to-do lists: do you write them left to right or top to bottom?

You could make an A/B test with the text input/dropdown on right and text input/dropdown on left (following the top-bottom eye movement) and see what effects this has on users?

None of this is, of course, to say that you can't try something new and disprove a theory or two!

Answer 3

There is a risk that the user wont see the "Text input" option. And there's another risk that the user wont understand it (the term 'input' in my opinion is not very user friendly, but rather technical). A suggestion for your design could be to rename the "Text input" to "Other" indicating the option to add something that is not contained in drop down list.

Answer 4

It looks like users first decision is to choose betweeen:

• Predefined option
• Custom option

Depending on the predefined options importance I can think of several way of approaching it.

---

Select:
    Option A
    Option B
    Option C
    Option Other. Fill:
        Text input

(Selecting Option other would show the text input)

---

Radio:
    Option A
    Option B
    Option C
    Text input

(Only one can be selected)

---

Radio:
    Predefined option. Select:
        Option A
        Option B
        Option C
    Custom option. Fill:
        Text input

---

Select:
    Option A
    Option B
    Option C
Checkbox:
    Text input

(When checking "Enter custom option" the text input should appear)