User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

For a product just shipped, I needed to separate a single horizontal toolbar into 2 distinct parts: the first for file operations, the second for editing/navigation operations.

Because I added the file operation buttons last, I hadn't added the code to paint the gradient on these for the '3d' effect. It then occurred that these new buttons had a subtle 'sunken' quality that helped differentiate them from the rest.

The other 'benefit' seems to be that the right part of the toolbar appears as if it could slide over the top of the left part (to reduce clutter). Does this work, or does it seem too contrived for what's a simple toolbar?

The toolbar:

enter image description here

share|improve this question
up vote 5 down vote accepted

The images on the right would indicate to me an inactive state or some sort of sub-dominance to those to the left; it doesn't indicate that it can slide. That is my subjective opinion of course, but generally convention is that inactive states are greyed or faded and that's the metaphor you're messing with here. Be careful.


Increase by 2 or 3 px the distance between the function sets

Use different background colours to indicate different functionality a la windows ribbon.

hope this helps!

edit: I also note that your LHS icons are very colourful. I would guard against that and use colours to delineate different functions

share|improve this answer
I see what you're saying about the inactive state, it's unfortunate that I took the screenshot when there were so many disabled icons, but I see now that some of the lhs icons are too bright. It's obvious now that I need to look at this design again. – pgfearo Sep 12 '11 at 15:16
Agreed. Sinking the buttons confuses the metaphor of the button itself, where clicking is 'pushing' the button and the sunken look gives it a sense of being pushed. I wouldn't give up on playing with this idea, but tread carefully on established ground. – Todd Sieling Sep 12 '11 at 15:19

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.