2

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.

6

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

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