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

OK, so here are two screenshots of classic collapsible sidebar: this is collapsed and this is expanded As we can see, when collapsed, sidebar still holds some space. The question is - what design patterns can be used to overcome this issue? Off the top of my head, we can have an arrow on the bottom/top and in collapsed mode we can show only this arrow.

share|improve this question
up vote 6 down vote accepted

If your intention is to reduce the reduced sidepanel real estate to zero, there's really very few options available in terms of design patterns. The question simply becomes 'where do you put the button'

For example, The Opera Desktop Browser has a button at the bottom left, in the status bar which toggles the visibility of the panel:

enter image description here

Other positions could be at the left end of the tab header, or in a toolbar, or in a pulldown menu or via a context (right mouse) menu, and not forgetting access via keyboard shortcuts. You could use any or all of those!

You could perhaps show a draggable sash on hover over the leftmost few pixels of the window, but that's not great for discoverability or usability. If you previously sized the panel just how you like it, drag out panels are a pain, so I wouldn't recommend that route.

You could incorporate a permanent small and discrete button into the border (similar to that shown in the sash that you have in the image in your question) which expands when you get close to it with the mouse, so as to provide a larger clickable area. (And which shrinks back when you move away.)

Eg - as in the quick mock-up below - perhaps with a little drop shadow to lift the tab, and of course with a tooltip over the button to explain what this is.

enter image description here

share|improve this answer
thank you for this systematization, Opera's example is good example as well. The second case is exactly what I'm thinking about, except I want to try to move expand button to the top or to the bottom, just to make it not so annoying. – shabunc Dec 5 '11 at 21:13

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.