Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

On a web-app I'm working on, we have many forms inside dropdown menus.

On many of them we have an optional field: Description. This field has been added for the users that want to work on a more "methodical" or pragmatic way.

Unfortunately a "description" textarea takes precious space, especially in case of our quick forms in the dropdowns.

I was thinking to hide the textarea and to put a (+) button close to the label. By clicking the (+) the user enables the hidden text area and has the possibility to fill a description.

What UI/UX thoughts do you guys have about it? I think it could help UX and the overall form design.

Some notes:

  • Javascript is enabled, and it's a fundamental requisite for the web app.
  • 99% of our users does not use mobile devices.
share|improve this question
    
Could you perhaps add a mockup of the UI you are describing? It is a bit hard to visualize what you are talking about. You can add a mockup directly from the question editing interface, just click the Smileyface. –  cdeszaq Mar 9 '12 at 18:28

3 Answers 3

In my organization we us jQuery to bind a simple function to slide down/display a hidden div that contains the other inputs/content. Based on a specific radio/checkbox/dropdown list value selection the function executes. We also style the div so the contents appear to be indented to provide the context that its a sub-question. See example below.

enter image description here

share|improve this answer

I agree more information would help. Sometimes you want to encourage users to fill-out the optional description, but the opposite may be true too. It would also be helpful to know what typical questions and dropdown values are.

I think here are two basic approaches, but in either case, I would definitely use self-adjusting input field that grows in height as you type.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

You could go with an automatically expanding textbox for the description. It would keep the fields rather unobtrusive when not used.

There is a good article/example here:

http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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