I have a drop-down that lists org names. After selecting, it disappears and shows the org name (and address), with a command link to change it back to a drop-down. Is this good usability, and if so, why?

And what are the advantages and disadvantages of using a three-column form layout? Should it be responsive (for mobile, tablet and desktop)? If so why?

  • Are the three columns for same kind of input. Will all columns used for example to input organisation thingy shown in 1)? If so, why not use rows and collapse them to columns on mobile? – locationunknown Oct 22 '15 at 5:54
  • No they are not same kind of input. the image 1 and 2 are different. The image 2 talks about three column form layout, and some of the fields are dependent based on the selection of first dropdown. Based on the first dropdown, the second dropdown will be enabled and so on... – erytop Oct 22 '15 at 6:45
  • why is this not two separate questions? I can't see any relation between the two – icc97 Jan 24 '16 at 16:48

Concerning your first question:

The second approach gives one or two advantages. First you can see the relation between the item on the dropdown and the actual address. Another advantage is an interface that easier is understood: If additional information is visible, an item was selected.

What I generally dislike about the whole approach is the switching of interface element: Click on item, text information gets added BELOW. With this, the dropdowns will be forced to MOVE (especially on mobile devices, where relevant content will get pushed out of the screen), which generally is a bad thing, since the point of attention moves. The information is not lined up nicely, so users can digest it easily. So I think mixing up dropdowns AND a selected list is not the best approach.

What you could do is customize your dropdown: Dropdown Alternative

With this you can get rid of changing the ui element, while still provide possible responsive behavior. Maybe you could try to see if this can still be a native dropdown field, since that would be important for mobile devices.

At the same time, information is lined up easier to read.

Concerning your 2nd question:

It does not matter if you go for 3 or 4 or 5 columns. Generally: The more information, the longer users need to understand. So if you can reduce it, reduce it. From a responsive point of view, the important thing is to create content boxes, that you can realign below and next to each other. So yes, your approach is a possibility.

| improve this answer | |
  • thanks. Dont you think adding the address into the dropdown will make the selection little harder the user. The user has to read the text carefully before making a selection from the dropdown. what if the there 20 org loaded in the dropdown and as per lukew (fill in the blanks book), loading minimal set of values in dropdown makes easier for the user – erytop Oct 22 '15 at 8:53

You're asking about a pretty specific use case here. If you want my opinion as a UX designer, I like option 2 better where the drop box stays on the screen. But it really depends on your target user. How likely is your user to make a mistake here? It's always possible to accidentally click the wrong item, but will your users be familiar enough with the information that they might pick the wrong item and have to go back and edit it? Option 2 is easier to fix mistakes. But really I would test 5 or 6 participants and see how they perform. Have them fix a mistake during the test. My instinct says it's a small difference between the two and you might find a slight preference for the 2nd version.

As far as a 3 column form layout, again, it really depends on the form and your target user. But off the top of my head the pros are: less scrolling. The cons are: the user doesn't have a clear path to take through the form, they may be confused about the order they should go in, more visual clutter, it's not clear whether something on the top right could be required before entering something on the lower left, etc.

You could remedy those cons by creating sections using background colors, borders, etc., to group like items. But again, I'm going to say that it will come down to a usability test. I don't think there's a universal UX rule to use or not use a 3 column layout. You can make anything work if you design it well enough. And they key to that is user testing. Your biggest question is, how can I make my form as fun as possible and reduce confusion, thought required, and errors as much as possible?

| improve this answer | |
  • Thanks a lot. I will see what's the best approach while creating the form. – erytop Oct 22 '15 at 8:57

To your 1st question: No. The user won't expect the select box to change to plain text.

To your 2nd question: the 3 column layout will only help me save vertical space. Placing the 3 form in series doesn't help guide the user.

My suggestion: Why not break this single form into a 3 step wizard? Like so:

Step 1. Select org. >
Step 2. Select purchase >
Step 3. Enter name

Would this work?

| improve this answer | |
  • Thanks a lot for your reply. But how does this work in bootstrap framework. Because the site is going to be responsive – erytop Oct 22 '15 at 12:52
  • You can always use Bootstrap tabs to create the wizard. And because you have only 3 steps it should easily fit on mobile with the labels I suggested. – Jonathan D'Mello Nov 3 '15 at 8:21

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.