Widgets are part of the “secret sauce” that make a WordPress site yours. Dropping a text block, your latest tweets, and a menu into one of your site’s sidebars is one of the core features used for customizing the content of your WordPress site. Widgets were first introduced as a plugin from the fine folks at Automattic, and originated on WordPress.com in 2006. They were added to WordPress Core in version 2.2 in 2007. In 2009, version 2.8 brought with it a redesigned widgets interface with a focus on inline editing and drag-and-drop interactions. Since then, the interface for managing your widgets hasn’t changed much.
Widgets in WordPress 3.6
In the latest version of WordPress, 3.6 “Oscar”, which was just released on Aug 1, 2013, widgets are cleaner in their appearance but otherwise work the same as they have since 2009.
In March of 2013, Matt Mullenweg introduced the MP6 plugin on the Make UI WordPress blog. Outside of being the poster child for future WordPress development, MP6 aims to simplify the wp-admin interface. Here’s how MP6 (version 1.9) displays the widgets screen on my site:
A few problems…
Lets go over a few of the bigger problems with the existing widgets UI.
The Sidebar Connection
First off, its a little confusing at first glance. The concept of sidebars, which is where widgets are placed, it not very well defined anywhere. The vertically stacked boxes, which each represent a sidebar in your theme, have no actual association to their location while viewing the theme.
The Wrong Focus
More than 75% of the page is consumed by the “Available Widgets” area. This is a collection of the all the widgets that are installed, including those from core, plugins, and themes. With even a few widgets (12 in my base core install), this screen is very intimidating. Add to this the “Inactive Widgets” area that may show if you have saved widgets, and you get a large page full of little boxes.
For the initial setup of your widgets, this layout isn’t terrible. Ignoring the huge potential for analysis paralysis, its likely that during your initial setup you’d like to pick and choose from a list of available widgets. However, after you’ve got things the way you like, updating those widgets becomes a huge pain. The sidebar area, where you update and reorder your selected widgets, is very narrow. Reordering widgets in, and between, sidebars could easily be constrained by the window height making it difficult to drag and scroll.
How do I install widgets?
For new users, the fact that widgets can’t be installed alone is confusing. We all know that widgets come from a few places (core, plugins, themes), but this isn’t obvious to those new to WordPress.
Fixing the Focus
The connection between widgets and sidebars is related to the focus on the “Available Widgets” area. What if we flip the focus around, giving sidebars more room and pushing the “Available Widgets” to the side.
This is a little better, as it gives more breathing room for sidebars, but we can only fit two sidebars before needing to wrap to a second row. Also, this doesn’t really fix the problem of having to see all the available widgets everything you visit the section. Lets take it one step further and dedicate the entire screen to managing existing widgets.
Huh, this is getting interesting; Removing the “Available Widgets” section all together shines a light on something. What we’re now looking at is a list of sidebars, which contain widgets. Putting the focus on the sidebars, even renaming the section, actually helps reinforce the connection between your widgets, their sidebars, and their theme. Since removing the list of available widgets, there’s no way to actually add a new widget.
Lets see what we can do to further reinforce that connection.
Adding visual and description locations for each sidebar helps emphasize the connection with the Theme. Taking things one step further, we can add a reminder of the current theme and the total number of sidebars available with that theme.
Adding a Widget
This is starting to take shape, but we’re missing a key piece: How do I add a widget? In the wireframes above, I’ve added an “add a widget” link. I first thought about having a single link for adding widgets, but you can see in the last wireframe that I added a link for each sidebar. With a single link, once you choose the widget to add, where do we put it? We could put it in the first sidebar, or ask the user to select a sidebar — or we could add a link for each sidebar and make it a more implicit decision.
OK, but what happens what I click that link? I have an idea, but lets talk through the thought process a bit. Here’s a few key points I have in mind for a successful widget selection UI:
- When you click the link, you want to choose from a list of available widgets.
- There may be any number of available widgets; Its easy to imagine having anywhere from 10 to 100 widgets available.
- With the possibility of having a large number (20+) widgets being common, it should be easy to browse, filter, and search through them all.
- You should be able to choose from your inactive widgets, as a sub-set of the available widgets.
- It should be just as easy to add one widget, or 5 widgets at once.
- You should be able to customize your widget as you add it.
- However it looks/works, it should be future proof.
- The process should feel like a natural part of WordPress. Lets not reinvent the wheel.
About that idea…
In WordPress 3.5, the new media interface introduced a brand new modal convention to WordPress. Its a beautifully simple way to browse, add, and edit a large number of media items for your site. It defines a design language for things like searching, navigation, editing details, loaders, buttons, and more — I’m a huge fan.
It also happens to be a great starting point to solve our problem of adding widgets. Clicking on the “add a widget” link could open a media-like modal which lists all the available widgets.
A Few Concepts
I’ve worked up a few mockups based on the ideas above. I’ve tried to respond to many of the key points we outlined above:
- New ways to filter and search widgets.
- Added a way to browse inactive widgets, navigable via the left-hand side).
- Choosing a widget displays its option on the right, letting you customize it as you place the widget.
- Just like media, you can select multiple widgets to add. I haven’t thought about adding multiple instances of a widget.
- Widgets get an icon!
- Editing widgets happens similar to how it works currently.
What do you think?
So I’ve laid out my thoughts, and presented some wireframes and early mockups. I plan to march forward and continue work on this rethink. I’d love some help. Leave a comment with your thoughts; Catch me on twitter; Ping me on IRC or in the Make p2’s (I’m shaunandrews). Lets work together to make widgets in WordPress even better than they are today!