Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 3 down vote favorite

It's easy to indicate an item is a dropdown when the item has a rectanglar shape. For example, bit.ly/Zbc1kq . But when the item has a circular shape

enter image description here

, what's the best position to place the indicator?

share|improve this question
Why do you want to use a dropdown in a circle. Thats not an anticipated affordance – Mervin Feb 18 at 20:03
It's not in the circle per say, I know it's my terrible example. Take a look at this dribbble.com/shots/468341-Profile-Dropdown . Remove the name "pie" and imagine a circular picture there for the profile dropdown menu, using a triangle next to a circle would look pretty weird right? That's why i'm looking for another way to indicate it's a dropdown menu. – Tommy Adey Feb 18 at 22:20

2 Answers

up vote 2 down vote accepted

I would say there are three options:

  • to the right, providing white space between similar elements (pairs of circle and triangle down)
  • centrally (big triangle down)
  • in the right bottom position (a little triangle down)

After some explanations, what I understand is that you want to use it for user menu. I think it is quite common to have user menu, and I'm really not sure if it needs a special dropdown indicator. Look at the quick wireframe below. Once you communicate visually it is user related section, users will click it revealing menu (or even better: discover it after hovering on the icon).

enter image description here

share|improve this answer
Sorry for my bad example lol. Look at this dribbble.com/shots/468341-Profile-Dropdown. If you remove the name "pie", the triangles still looks ok with the rectangle/square but it'll look weird with a circle. That's why i'm wondering if there's a better way or not to put it at all. – Tommy Adey Feb 18 at 22:12
Still not 100% sure what you want to achieve, but look at the updated answer above. – Dominik Oslizlo Feb 18 at 23:15
Thanks, that's exactly what i mean. I know it obvious for a lot of people to assume it's a dropdown but isn't it better to indicate it's a dropdown as well? – Tommy Adey Feb 19 at 0:09
I think a small triangle down in the bottom right will do, but wouldn't say it is necessary. One more thing - if you remove the username from the menu bar, you should place it somewhere in the dropdown, e.g. "Log out <username>" – Dominik Oslizlo Feb 19 at 6:57
Thanks, what if i were to put it under the circle, would that look bad? – Tommy Adey Feb 19 at 9:09
show 2 more comments
up vote 0 down vote

I'd say that there is something fishy with this situation. Is it really a "dropdown" and not a contextual menu you're going for?

Although they usually are very similar, the functionality differ in a couple of subtle ways.

If the circle is representing some kind of object, how would you indicate - if at all - that the object is clickable and subject to a contextual menu?

share|improve this answer
Really sorry, that's actually a bad example. It's meant to be a profile menu dropdown(profile,settings,help and logout) etc. Something like this without the name "Pie". dribbble.com/shots/468341-Profile-Dropdown. In this case, the user's picture would be circular and it looks weird putting a triangle beside it=, you know. – Tommy Adey Feb 18 at 22:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.