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.

Sidebars Tabbed

Media-like Widgets ModalThis 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.

It we use the media-like modal from my initial concepts, we could turn the list of “available widgets” into a list of recent widgets, with a button to open the modal and browse all widgets.

Sidebars Tabbed, with Recent Widgets

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.

Drag a WidgetWidgets 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 replies 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.

Quick mockup of what I’m talking about: http://cl.ly/image/0x182s0R2Y32

Would it be feasible to fall back to horizontal tabs with three or less?

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.

Leave a Reply

Your email address will not be published. Required fields are marked *