4

In my screen I have 3 sections, and on each section I have different elements to take input from the user.

In one of the section I have a dropdown menu to select a predefined option. The options are very wide, up to a maximum of 215 characters. And it will not fit in the drop down which I can define in that much area.

What is an alternative solution for this? Are pop ups a good option with radio buttons to select the option?

Also I have another option where the user can write a custom description.

Thanks in advance.This the approximate layout of my screen

  1. This is the second option which i am planning to do, On clicking on the add button Pop up will come. enter image description here
  2. Pop up with radio buttons in it. enter image description here
4

Considering your design layout, I really think the best option is to use either checkboxes or radio buttons (depending on whether the user can select more than one option or not).

Below is a quick mockup of what I mean:

enter image description here

However, if you have a large number of options, this could prove to be problematic. In that case, I would consider having your Section C separate to Sections A and B.

Without knowing the details of your form, this may mean separating all three sections into their own screens. You would just allow the user to navigate from Section A to Section B once Section A was complete. Once the user was in Section B they could navigate back to Section A if needed, otherwise they would complete Section B and then progress to Section C. Because Section C is on its own page, you now have much more screen realestate to work with.

Hope this helps. Good luck with your form.

  • It will not fit for my design and i have about 19 options. And the design which i am planning is a pop up. Description label and a button to add the Description on click of it pop up will open with options as radio buttons. – Shaharban T A Apr 29 '16 at 12:36
  • If I was you I would seriously reconsider the popup. It will be unexpected by your users and this will disrupt their workflow. However, if your form is only to be used by staff in an organisation where you know a pop-up will work as intended, and no-one here can offer you a better solution, then a pop-up may be the way to go. And if your users will be repeat users, then they will come to expect the pop-up. Either way, though, I would inform the user that a popup will appear and provide some instruction as to what is required. – Monomeeth Apr 29 '16 at 13:12
2

Here are some options to reduce cognitive load and make the task easier:

  • Shorten your descriptions. 200 symbols * 19 options = 3800 symbols, which is roughly A4 sheet, full of text. Looks crazy.
  • Substitute long description with short labels. For repetitive users this is OK, for the new ones provide some help/guide. E.g. "Home", "Professional", "Professional Plus" versions of a product.
  • Shorten the number of options, if possible.
  • Use Information disclosure pattern. Provide several most frequent/probable options in the custom combobox, and a control to open a modal window with full set of options, see the picture: enter image description here
  • Group the options and provide an hierarchy. So a user need to do two or more steps, but these are more obvious and distinguishable for her.

Otherwise, use modal window. Choosing from many options and reading extensive text is quite hard task, so dialog both allows more screen space for presenting, and focuses user on a single task.

1

In most (if not all) modern browsers and Operating Systems the menu of a dropdown is a separate (but not independent) object from the trigger.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This means that the text on the trigger can be safely truncated while the contents of the menu remain full length - Effectively showing the menu as a popup attached to the trigger. If the dimensions for the trigger part of the dropdown have been specified, then this is usually handled automatically in browsers.

The caveat the I need to add here is that the drop down should be clearly labelled to make it's purpose clear when it is showing truncated text.

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.