Shaun Andrews

Another Idea for Widgets

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:

Widget Area Blueprint

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?

Posted

in

by

shaunandrews

Tags:

,

Comments

3 responses to “Another Idea for Widgets”

  1. Shane Pearlman (@justlikeair) Avatar
    Shane Pearlman (@justlikeair)

    It is an interesting pattern and has a lot of possibility. It does require the theme author to somehow communicate layout in a way the admin can groc, which is no mild feat.

    While this might be an edge case, what I don’t see intuitively covered is the idea that a sidebar is actual an object in its own right that can be shared in different circumstances and layouts. For example, imagine a “support” sidebar that is rendered in a special page template & a bbpress forum template. The views (page & bbpress forum) have very different layouts and may even have different arrangements of sidebars, but share one sidebar in common. How do you make it clear to the user in that use case that changing the content of the support sidebar in the page template would also change it in the bbpress template?

    Reply
  2. Matt McLaughlin Avatar
    Matt McLaughlin

    I agree with the basic proposition that drag and drop is not very discoverable. Maybe it will get more discoverable if Mel uses it for Content Blocks and people get used to that, but I think the add widget approach is preferable.

    That said, the mockup above really falls down when you have a profusion of sidebars. My site is for a multi-country team of people and each country has their own sidebar with country-specific info. Even though there’s only really a few page layouts, each of those page layouts can use one of 40+ sidebars. In short there’s a many to many relationship between sidebars and layouts and many to many relationships are inherently a bear to communicate to users.

    A few thoughts:
    1) A 1:1 relationship between templates and widget area configurations is conceptually much much simpler. At the post (and page) level, you pick one template and all of the sidebars are automatically chosen – there’s no picking sidebars on a per post or per page basis. The down side of this is that you need to have a template for every single page + sidebar configuration which is a real drag.

    2) Some of the hassle of needing a template per page + sidebar configuration could be ameliorated with a form of cascading layout choices. So you define “Country Page” as 2/3 width with a single Sidebar and two footers, populate those widget areas, and then any Page template that is a child of “Country Page” only needs to specify how it is different and children can’t change the number and location of widget areas, only their content.

    3)If you need to maintain a many to many relationship then rather than adding the widgets directly in the sidebar (in your above wireframe) the sidebar should contain the name of all the different sidebars that can go there in that template. Click on the name and up pops a modal where you can add and reorder widgets.

    4)If you’re going to go with an “as close to what you’ll see on the page” approach, then why not actually put the widget as it will display in the widget area? Make it work just like images in posts – click on the widget once and you get the option to edit or delete it.

    Reply
  3. WordPress widget mockups. | Easy Web Design Tutorials

    […] Here is Shaun Andrews mockup: http://www.shaunandrews.com/wordpress/another-idea-for-widgets/ […]

    Reply

Leave a Reply

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