1

I have a text field that shows matches in a dropdown when the user starts typing. Below the field are buttons. When the dropdown is activated it covers the buttons. However the dropdown will go away before the user will need to select the buttons, because the user will either a) select the desired match from the dropdown, or b) type their own text that doesn't match anything in the dropdown -- in which case the dropdown goes away.

Is it bad practice to have a dropdown that covers other components? Would it be better to have the dropdown above the field instead, so as not to cover the buttons?

Starting Point Dropdown Below Dropdown Above

4 Answers 4

0

The dropdown is not your problem. Dropdown's are common controls and add the possibility to scroll when it contains a long list for example. But you are missing a scenario:

c) type their own text that partially matches suggestions in the dropdown but has less characters.

In this case the dropdown won't close unless the user clicks somewhere else. My advice is to provide some affordance to the dropdown that it can be closed manually. Add a button so that it looks more like a dropdown:

enter image description here

Only show the button when the dropdown appears so there is no suggestion that it can be opened by that button. That's why the arrow is pointing up in this example as the button only closes the dropdown but never opens it.

0
0

To me, any element that when interacting covers another is a bad practice if it's not its specific function. Especially on the screen where there's more than enough space and resources.

For the example in the question: accordions.

enter image description here

0

I think it all depends on: does the dropdown stops or add friction to the user to do whatever task s/he is trying to do? If it doesn't then I would say it isn't critical.

If I think of forms for example, when filling a form sometimes dropdown cover the next input field but since the user is focus filling THAT dropdown it isn't stopping her/him.

So my best suggestion would be to check what button is it covering? Is it something super critical? Does it add friction for the user?

Answers for these questions could be find with doing a small guerrilla usability testing. Without the need of huge logistic. Just grab some people in the hallway and ask them to perform a task and see what happens.

0

Generally dropdowns in ui-toolkits default to the bottom of the component. And this is the behavior everyone expects. Instead of changing this behavior I'd rather consider using a different component. For example you can replace a single-selection dropdown with radio buttons or button groups if the amount of items is small.

enter image description here

enter image description here

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.