2

I have a big form where the user must select a category and a location, each have 3 levels, user must select the first option that enables the 2nd and then the 3rd one. Each dropdown have at least 5 options.

double triple dropdown

I have this situation both in desktop web and in an android tablet. I would like to find a way to improve this kind of selections in order to simplify this process.

EDIT 27/6/18

I have this idea of using something like a multi-level menu as selector, I know that I'm adding more steps but it looks easier to use and to understand to me.

https://xd.adobe.com/view/eb623b6b-3011-4578-56c0-e0944fce52b7-9d53/

  • I'd be curious to know what problem your form is trying to solve. – Maxcot Jun 28 '18 at 4:20
  • This form will register an incident inside an airport. It have to work on desktop browsers and on mobile devices (android tablet and phone app). The form have a lot of elements so I'm trying to simplify it. The 1st step is to select the category and then the location, that's why I'm focusing in this area. I would like to achieve a form with no so many elements. – George Jun 28 '18 at 12:38
  • Is there a specific target group that will use it? Is it intended for end "business" users, or is it a technical audience. – Maxcot Jun 28 '18 at 18:49
  • This form will be mostly used by technical personnel, they will be walking around the airport reporting incidents with a tablet, and then they will have the posibility to edit those reports on desktop. – George Jun 29 '18 at 19:52
3

If these are strictly dependent on each other, perhaps expand the first unselected category automatically so that the user doesn't have to click into it, scroll to their item, and select it.

After selection1, that element can be collapsed into a single select menu as you currently have in your design. The collapsed select menu can still be modified if the user needs to fix an error.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1: Specific interaction and implementation details: The method of expansion I'm suggesting here is modifying the size attribute on the <select> element. I'd recommend disabling unpopulated select elements until its preceeding select item is blurred. This way the user isn't distracted by the element collapsing while they may still be working on it. Toggling the size attribute on blur would keep the form elements in order in the DOM and only affect their presentation, so navigating with the keyboard should work as expected. For example, a user clicks or tabs into the first select item, makes their selection, then when they tab into or click the next field, the first is collapsed, and the second expands. Testing should be conducted for how this behaves on a mobile device.

  • I dont' have the necessary height to do that, but it's clearer than the actual 3 dropdowns. – George Jun 22 '18 at 19:44
0

If you don't have the height, as you mentioned in your comment. You could have a bread crumb at the top of the page. Once the first is selected you could move it to a bread crumb at the top and hide the select, then show the second select. Once that is selected put the value in the breadcrumb then show the third. Clicking the second or first step in the breadcrumb will re-show the select box.

The advantage of this is that the current select box has focus, being only one select box at a time. You also save real estate and the user can see in a simple, and commonly used, manner what they have selected.

The only issue I see is if you are on mobile and the selected values are long your breadcrumb would start to wrap.

  • Breadcrumbs could be a good option on desktop but, as you said, on mobile that could be not the best option. – George Jun 27 '18 at 13:26
0

Total blue sky thinking here... Don't even know how it would be coded, but...

Ever seen Autodesk Revit? They have this orbit control.

Imagine if you had some compass looking picture. You put your thumb/mouse on it, and make a slide action in a certain direction to choose that category. Then "click" through to the next level. Make the next selection. "click" through. And again.

You could theoretically make 10/20/100 selections.

When you make a selection, the item is added to the breadcrumb trail etc.

Not sure how you would reverse out though.

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.