How do I show that a wide dropdown is clickable?

Question

I have a select tag that looks like this:

It spans along the top of the page contents, which is roughly 90% the screen width. So, while it's not obvious in this question, the caret is roughly 400px from the text.

When the user selects an item from the dropdown, it changes the grouping of the assorted charts and tables below.

I need to make it obvious to the user that it is a dropdown. Right now, users are confused because they don't see the carat. How do I emphasize the fact that this is in fact a clickable item that drops down?

Answer 1

I need to make it obvious to the user that it is a dropdown.

By making it look like a dropdown.

Don't make it so wide. The reason it doesn't look 'clickable' is because it doesn't look like a drop down because it's stretched across the entire width of the screen.

Answer 2

Maybe you could separate the dropdown from the 'Group by' label, and align them at the two sides of the available space and - as others have already suggested - make your dropdow look like a dropdown.:

This way it spans over the width of the content (so it can serve as a header) while you have a recognizable dropdown.

And if it applies: you can introduce multiple 'group by' options quite easily:

(Of course some 'add new' and 'remove' buttons will be needed, but that's a different story.)

Or even better, if you want to use it as a header, you might introduce a meaningful data header:

Answer 3

You put the drop arrow to the right of the text.

People's eyes will scan the text, but may not see the arrow in the peripheral view. So having the arrow next to the text should do it.

Answer 4

If your sorting options are not many, since you have a lot of space, consider replacing the drop-down with a radio button.

Answer 5

I like that the dropdown spans the whole width of the area it is referring to, and thus serves as a header with a dropdown function. It emphasizes that the selection in the dropdown applies to the whole area.

I see why some users may have a hard time recognizing the dropdown as such if they do not notice the arrow on the far right. I see three direct solutions to this:

• The arrow emulates the look of an ordinary dropdown, however, such dropdowns are usually aligned left or right - with text on one side, and an arrow on the other side. As you are using a centered layout anyway, there should be either one arrow right below the text (might look weird), or two arrows, one on each side. This would maintain the symmetrical appearance of the whole dropdown and make seeing the arrow more likely.
• Do not align the arrow at the side of the element, but place it right next to the text. Like this, the whole bar becomes a clickable header with a dropdown menu.
• Rather than a "combobox", use a header and a (separate) dropdown button. If the button is a separate element with visible borders, even when it is in the same place as the arrow is now, it might be easier to catch the users' attention.

Related to the last item, maybe that points to another issue: The arrow, as it is, is quite small and indeed somewhat unnoticeable, compared to the entire size of the header bar and the text. At the size the image is scaled down to in your question for me (i.e. not at full size), I can hardly recognize that it is an arrow at all, it could just as well be a little circular dot. Hence, making the arrow larger (just try and give it about the same height as the text) and slightly increasing the spacing between arrow and border of the control might be a good start.

Answer 6

People are used to click on blue text, especially if it is underlined.

In this case you could make 'category' blue (and underlined?).

Group by: category

That way, even people who don't notice the arrow, may still find it intuitive to click.

---

Alternately, as mentioned just make the dropdown smaller. If you want to signify that it impacts both sides of the screen just keep it centered.