I’ve continued to work on this prototype for widgets in WordPress. Its coming along nicely. I hope to run some user tests next week.
Part of the goal of redesigning widgets in WordPress is to make the connection between widget areas, and their presentation on the front-end of your site, more obvious. It’s clear that there’s a big disconnect between the narrow column of sidebars (or widget areas) in wp-admin, and their location within your site’s theme. Here’s an idea that presents a blueprint of your theme’s templates, allowing you to add widgets to the available widget areas:
During some recent user testing, it became clear that the current UI for managing widgets does little to make it clear that widgets must be placed using drag-and-drop. It seems that re-ordering widgets using drag-and-drop is intuitive, but the initial placement of widgets is more cumbersome and not so obvious. This design tries to solve that problem by relying on the “Add Widget” button for each area. You can drag-and-drop widgets between areas, or click on the “Add Widget” button to popup a media-like modal from which you can choose widgets.
My hesitation with this approach, and with the general concept of front-end editing in general, is that it puts a lot of “stuff” in front of your face. This approach makes a lot of sense for managing the location of widgets, but not so much for managing the content of widgets. What do you think?
Along with working on Widgets, I’m also working on some ideas for the theme experience in WordPress. Working with Matías Ventura, I’ve come up with the following wireframe:
The big idea here is to merge the two pages, Manage Themes and Install Themes. We ran a user test, which you should totally watch, and quickly discovered that the user got completely lost looking for a way to add/browse themes. The label “Install Themes” didn’t convey that they could search and browse. The above wireframe aims to make searching and browsing the main focus of the themes page. Your installed themes are displayed at the top, with your active theme highlighted. The rest of the page is dedicated to browsing and searching themes. Its a quick idea, but something I think could make the overall experience better. What do you think?
Earlier today I published a general survey asking question about how you (yes, you!) use widgets in WordPress. I’d love it if you could take a few minutes and fill out the survey. Thanks!
I spent some time today working on a plugin that redesigns the widgets in WordPress. It’s a prototype. I love to build quick prototypes, not design something on a static Photoshop canvas. This way, I get to play with the “thing” I’m building and tweak it in realtime. This method of “don’t just draw, build something real” is the primary reason I learned PHP as a designer.
I’ve been working on some design concepts for a redesign of widgets in WordPress, hopefully for release in 3.8 towards the end of this year. The latest concept I’ve been thinking about is a vertically tabbed UI for listing sidebars and widgets.
WordPress 3.5 brought us the great media modal, which makes it super easy to upload and add images while writing a post. The modal features a grid-based layout, with large images that make browsing your library a breeze. Meanwhile, the main media page hasn’t changed much. It still lists your media library using a standard WordPress table view. Its not bad, and sometimes the table view is useful — but that grid-based layout from 3.5 would bring that easy, breezy browsing to the main media page.
I’ve worked up a few quick wireframes to run through the idea. I’m diggin’ it. There’s the standard table list view, a hybrid view, and a traditional grid view. Lots more ideas brewing in my head, but I wanted to get these “on paper.” What do you think?
Look at this, another plugin! Menu Recent Pages will add a list of recently edited pages to you wp-admin menu. They appear as a sub-menu of Pages, and will take you to the edit screen when clicked. Simple.
Another day, another plugin. This morning I whipped up a concept-plugin for a smaller admin bar. I’m calling it (creatively) Mini Admin Bar. This isn’t for the faint of heart, as Its pretty broken right now; No drop-downs work, and it breaks miserably with Jetpack enabled. However, if your brave (and have MP6 activated) check it out.