1

I need a simplified means of selecting a category from within a form that is contained in a modal. The problem is that each of these categories has a LONG description that needs to be shown before selecting (so a standard drop down list won't work). The descriptions are to help the user understand what the categories are. I'm trying to save space because there are a lot of form elements already.

The list of information is a list of company values and a description of those values something like:

  • Company Value 1: Donec vel velit ac ipsum sagittis tempor vitae non diam. Quisque mollis aliquet mi, vel hendrerit mauris aliquet in. Pellentesque nec dapibus mauris. Sed pulvinar tempor consequat. Integer augue velit, sagittis at adipiscing sit amet, feugiat fermentum neque. Suspendisse commodo, dolor non tempus ultricies, nibh velit ullamcorper lorem, vitae accumsan lectus enim ut massa.
  • Company Value 2: Pellentesque nec dapibus mauris. Sed pulvinar tempor consequat. Integer augue velit, sagittis at adipiscing sit amet, feugiat fermentum neque. Suspendisse commodo, dolor non tempus ultricies, nibh velit ullamcorper lorem, vitae accumsan lectus enim ut massa.
  • Company Value 3: Donec vel velit ac ipsum sagittis tempor vitae non diam. Quisque mollis aliquet mi, vel hendrerit mauris aliquet in. Pellentesque nec dapibus mauris. Sed pulvinar tempor consequat.

There can be up to 8 categories with equally long descriptions. Any ideas?

| improve this question | |
  • Isn't the most obvious to have a radio list with very long titles? – icc97 Jan 11 '13 at 16:14
  • Perhaps, but I'm trying to save on vertical space. I have a modal window that is a particular size constraint. – Corey Campbell Jan 11 '13 at 16:17
  • Is it possible to split the categories into a features table so that people can compare the categories? – icc97 Jan 11 '13 at 16:19
  • You'll probably have problems fitting the 8 columns in though. Can you subdivide the categories in anyway? – icc97 Jan 11 '13 at 16:22
  • 1
    My last thought is to use tabs and have radio buttons in the tab headings - not very standard UI though. You might have to back up a bit and figure out why you ended up trying to get a lot of information in a small space. – icc97 Jan 11 '13 at 16:28
1

Check my suggestion. It's hard without knowing all details about your project, but the way to select entire sections is used in Windows (for example http://www2.palomar.edu/pages/atrc/files/2011/12/MakeAnotherCopy.png).

The example on top is before something is selected.

Select section

| improve this answer | |
  • If the header of the category is too long to put into a button, make a label that states which category that is chosen (so it's visible even though the selected category is scrolled too far to be visible). To further improve the cue that each category is an interaction object, change the cursor from arrow to a hand on hover. You can also make a title/header to the entire window that says that the user should select a category. – Henrik Ekblom Jan 11 '13 at 16:14
  • I had a similar idea, but I'm uncertain if this will conflict with a modal window. It's almost like opening a modal on top of a modal. – Corey Campbell Jan 11 '13 at 16:14
  • Well, it's just a scroll inside the modal window - my experience says that it shouldn't be a problem. – Henrik Ekblom Jan 11 '13 at 16:16
  • Oh I see, so this wouldn't be in a separate window? Hmm... Let me think of that. – Corey Campbell Jan 11 '13 at 16:18
  • Well, if you can fit everything into one window without making it look too messy it's and advantage over opening modals from a modal etc. – Henrik Ekblom Jan 11 '13 at 16:28
0

How about putting the categories in an accordion? That would let the user select a category, see the description and select if appropriate, but also view and compare selected other categories if desired.

| improve this answer | |
  • Hmmm... That might be closer... I don't see that idea working well with this particular instance, though. The modal would constantly be resizing to accomodate the different paragraph lengths. Also, (I made the correction) it's not a selection list. It's a drop down list where the user can only selection one category. – Corey Campbell Jan 11 '13 at 16:04
  • It would be great to see some example copy for a category. What's the minimum someone would need to see to make a decision? Is a paragraph needed, would bullet points work? Would a decision tree be an option? – Peter Jan 11 '13 at 16:19
  • The categories are company values. So they change depending on the company. So let's say the value is Flexible. The description would be what that means so the user could make a selection. The description, at minimum, needs to be shown at some point before the user proceeds. – Corey Campbell Jan 11 '13 at 16:23
  • 1
    I'll try and mock something up later, but you might then consider "Flexible" as the title, with a radio button next to it, and a "More" link to show the description. I think you need the user to be able to select the category without viewing the description as people will learn the system fairly quickly if this is (as it sounds) a business application. – Peter Jan 11 '13 at 16:29
  • That's exactly what I was just discussing with the team. After a point the user is going to ignore the descriptions, but they need to be there for beginners. – Corey Campbell Jan 11 '13 at 16:32

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.