User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have an element that could look a bit like the one below (it's not a select box). My challenge is that Sport (in this example) is just as important as the subsections (e.g Football, Basketball) within Sport.


This means that I have two options:

  1. I make the whole element one interaction, which then calls for a link to "All Sports" in the bottom of the toggle layer. This feels clumsy somehow.

  2. I make the interaction for Sport a seperate interaction and use the arrow to toggle. This is what I want to do, but I am afraid people will interpret the element as one interaction and thus expect Sport to toggle rather than to initiate a full pageload to the "Sport" section.

Any suggestions on this?

share|improve this question
Can the list be collapsed? If not, then you can replace the dropdown arrow with some other visual elements because the arrow usually indicates a toggle. Instead of using "All Sports" within the sub view (I think that's what you're describing), you can make the top level "All Sports" to begin with. In addition, you can eliminate the indentations so that "All Sports" is on the same level but contains the rest of the sub sections. – Poyi Sep 23 '13 at 19:50

The element is perceived as a whole control due to label and triangle proximity and dropdown pattern familiarity. In your second option you divide the control on two parts, implementing rules which are hidden to users. So this way could lead to user's confusion because it breaks familiar pattern.
enter image description here

First option is better. At least, interaction rules are obvious at first sight. Then, on mouse over, user discovers element's content. You also could handle click event for the Sport label, which leads to All sports page. Such solution is used quite often in menu.
enter image description here

Although there are two links to the same page (Sport and All sports), the interaction is non-confusing for a user.

An example of such solution you could see here, at SE user menu:
enter image description here

UPDATE on @André comment
You mentioned panel (ribbon, toolbar) extender control, which is not fits this question. As @Larson said, he used dropdown element with subitems. To demonstrate the difference with real-world examples, take a look at the picture, please.
enter image description here
The last picture with border setup dropdown button is close to @Lars' second option. With a little differences:
enter image description here

  • On mouse over the button clearly displays two parts: the button itself and dropdown button (triangle).
  • Inside dropdown panel there is the same border style as on the button's face, i.e. close to @Lars' first option.
  • In Word users have several ways to perform the same action, but on site this menu could be single mean for an action, so it should be totally clear.
share|improve this answer
I disagree with this pattern being unfamiliar. It is used frequently in ribbons or toolbars. Usually, the segmentation becomes appearent there when the mouse moves over the button. If you're aiming for touch, this is obviously a problem of course, but it is not unfamiliar. – André Sep 24 '13 at 8:30
@André I've updated the answer, please, take a look. – Alexey Kolchenko Sep 24 '13 at 9:38
What tool do you use for your nice markups? – JOG Sep 24 '13 at 10:20
Hej @JOG! I use Xara Designer. – Alexey Kolchenko Sep 24 '13 at 10:31

Your Answer


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.