← Back to index

Hi. All my current writing is over at Audacious Fox, and I'd love to show you around. Thanks for reading.

Sidebar design

I’m designing a sidebar for a web application, which has a typical header-sidebar-content layout. The header holds the main navigation, the content area has content, but the sidebar has a lot more:

We’ve put a lot in that sidebar, arguably too much. There are too many competing methods of interacting with the content, and it’s not clear what the user can actually click. One possible solution would be to have the sidebar serve a more traditional navigation role, but that would uproot our two buttons, which aren’t used for navigating.

Everything in the sidebar has to stay for now. Sidestepping the buttons / navigation conflict, the biggest design challenge is creating enough visual distinction between a collapsible list and a list that’s static. Right now, we have a small chevron floating to the right of the list title that denotes collapsible functionality. That works OK right now, but the collapsible / non-collapsible list titles look so similar that I’m concerned the user won’t notice the difference.

Do the lists need the ability to collapse? Yes. The content of each list can get quite long. One possible solution would be to have all lists be collapsible. That would remove the ambiguity, and it would make the interaction with each list header consistent.

Monday, 17 August 2015