UI Designer, Web Developer, Drummer

Widgets: Tabbed UI Concept

I’ve continued to think about sidebars and widgets in WordPress. I’ve begun coding up some of the ideas from my original concepts. Before I get to far down the rabbit hole, I wanted to take a step back and think through some other layout options. The first one I’ve tackled in a vertically tabbed UI, with each tab representing a sidebar.

This is more inline with the existing layout of widgets. It allows for lots of sidebars, while leaving room for the list of available widgets. A giant list of available widgets could still be unwieldy, but that could be solved with search and some basic filters.

I’ve taken the time to think through a basic “blank slate” for empty sidebars, which prompts users to add a widget by either drag-and-drop or clicking the browse button to open the widget modal.

Widgets in this concept can easily be re-ordered within their sidebar via drag-and-drop sorting. Moving widgets between sidebars could still be possible by dragging the widget to the sidebar tab. Holding a widget over a sidebar tab for more than a few seconds would swap the active tab, and let you drop the widget into that sidebar’s list.

4 thoughts on “Widgets: Tabbed UI Concept”

I really like the idea of moving the available widgets to the right and I see the value of vertically stacked widget navigation when there are four or or more widget areas, but with one or two might feel odd.

I definitely see the issue with a single sidebar, in which case it does make sense to slightly tweak the UI. Otherwise, I think it makes sense to keep the UI as consistent as possible, for 2, 10, or 20 sidebars.