11

I have a select tag that looks like this:

Dropdown

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?

  • 14
    Why is it so wide to begin with? – DA01 Jan 6 '15 at 17:35
  • It's supposed to span the length of the contents, but I'm seriously considering just having a regular header of some sort, and just have the dropdown on the left side of the header. – user3826865 Jan 6 '15 at 17:37
  • Yes, it definitely shouldn't be a header. The table should have hit's own header to describe the data (even if it does include the filter info). I'd agree that the drop down should be relocated. – DA01 Jan 6 '15 at 18:59
  • Anecdotal, but I feel like Sorts/Filters usually are right justified. If you do reduce the size, I'd suggest putting it on the right side rather than left. – aslum Jan 7 '15 at 17:14
41

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.

| improve this answer | |
15

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.:

enter image description here

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:

enter image description here

(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:

enter image description here

| improve this answer | |
9

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.

| improve this answer | |
  • 3
    There is absolutely a proximity issue here, and moving the caret closer to the text will certainly help, but remember that drop downs by design have the caret always on the right, so moving it to the text can add some visual confusion elsewhere. – DA01 Jan 6 '15 at 17:34
  • @DA01: Regular dropdowns do not center their text, so this is different already. Visually, my impression of the white area is that of a button rather than that of a combobox, and on a button, I personally do not expect the dropdown indicator to be necessarily on the far end-of-line side. – O. R. Mapper Jan 7 '15 at 12:12
2

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

| improve this answer | |
1

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.

| improve this answer | |
0

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.

| improve this answer | |
  • No, making it look like a link will make people expect it to behave like a link, taking them to another page. – user56reinstatemonica8 Jan 8 '15 at 10:50

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.