2

Problem: I have a requirement for a predefined list of text that can range from 100 to 400+ chars. This list should be shown to the user in some fashion and then, once one of the items is selected, we allow the user to edit the selected option.

Current implementation: after selecting an item from the dropdown, the value can be edited in a textbox directly underneath it. This text is then submitted with the form (see image).

Screen shot of dropdown with textarea

My goal is to find a better user experience that will allow the editing and selection of these messages without a gross duplication of form fields. Thank you in advance, gurus.

Edit: this is the full form, I have been reluctant to show it because I am not actually the UX/UI expert on the team. I am a senior developer who specializes in front-end development. With that said there are many things on "hurting" this form and I ask that we try to stay away from that (i.e. favorite icon is so far out of the eye pattern it is not getting clicked, sheer amount of data input required, etc.)

The field "choose personal closing" populates the textarea below it after the select box option is chosen, overwriting anything that is in it.

enter image description here

The proposal is to add a second textarea right underneath the "Choose Sentiment" text input.

enter image description here

Improve this question
2
  • 3
    At least you realize there is alot that "hurts" about this form. Although the favorites icon should be the least of your worries; the sheer amount of information required is overwhelming. I imagine only the most determined of users would even bother filling it out. I know you said try to stay away from that topic but if you find a way to simplify the form (i.e. splitting it up, removing things, etc.) it will be much easier to accommodate the new field.
    – DasBeasto
    Sep 3, 2015 at 19:52
  • 1
    I'd also like to add the fact that labels IMO are necessary, at the very least after that a value has been filled in. Right now, the placeholders are being overwritten, which makes it hard to get what the meaning of a value is. +1 for DasBeasto to, indeed, point out that the amount of fields is really overwhelming. Maybe one idea could be to concat certain fields: e.g. name+last name; a whole address block instead of separate fields (since I'm guessing most people will get the concept of a complete address by now?); again, the in-place autocomplete for sentiment and closing field; etc.
    – Xabre
    Sep 3, 2015 at 22:11

1 Answer 1

Reset to default
1

I'd first go ahead and figure out if that is, in fact, a problem for the users. Before doing anything, I'd perform a hallway test or better, to validate the assumption.

Anyway, have you considered turning the dropdown, into an editable textarea, that is, as the user starts typing stuff in, they are presented with a shortlist of matching items. The user can select the known topic, to prevent him typing it, and can than choose to really continue editing it. See this as a textarea variant of a regular search input (like google's implementation).

If you like, you can still present it as a dropdown, allowing the undecided user to scroll the list of possibilities.

If case there are multiple things that can be combined, consider using an inline autocomplete, like intellisense in Visual Studio.

Sources:

Improve this answer
3
  • Thank you for the input, we will most likely be doing some analytics around the fields, errors, and looking for user feedback. As you said, this may or may not be an issue. I was trying to be a bit proactive as the current design calls for 14+ inputs already :/
    – O'Mutt
    Sep 3, 2015 at 16:49
  • Are all the inputs like those? Perhaps you can add this + some example to your question, this way we might be able to give you better answers :-)
    – Xabre
    Sep 3, 2015 at 19:40
  • Added the full form, thank you for getting back to me!
    – O'Mutt
    Sep 3, 2015 at 19:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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