WordPress 2.5 Widgets: Taking the Load Off Your Mind

WordPress, the free and open-source software that runs this site, has recently been the victim of a major upgrade. WP enthusiasts throughout the blogosphere are debating and coping with some pretty drastic changes to how their favorite software works and looks. On the front end of a WordPress site, where readers read and comment, all seems calm; but on the back end, where authors write and set up their sites, colors have changed, layouts have shifted, and new ways of working have emerged. Many people are thrilled…and some are not.

WordPress theme developer and English teacher Justin Tadlock has taken up the debate with a post In Defense of the WordPress 2.5 Widget Panel, where some some very dramatic changes have been made, not only in how that area looks, but in how it works for authors arranging a site. Naturally, the whole debate reminded me of something I read a while back: an article in Science with the catchy title, “Cognitive Supports for Analogies in the Mathematics Classroom.”¹ Contact your local public or university library for more than this summary.] If the connection doesn’t immediately jump out at you, fear not–and read on!

Widgets: the Draggable Web

WordPress was originally designed to publish web logs (don’t miss NPR’s fantastic 10th anniversary blogging retrospective, which includes a brilliant spot where the narrator surfs the web over the radio!), originally a chronicle of daily activities and personal home page on the web, where the new content from each entry pushed the previous entries further down the page. A “sidebar” is often included to hold navigation and little extras–search boxes, random quotes, even (gasp!) advertising. WordPress, as a publishing tool for these kinds of web pages, handles these two kinds of content differently. The traditionally chronological “posts” are entered in an editing screen similar to many other electronic document editors, and arranged on the web page according to a hard-coded theme template. Adding new updates (“posts”) is easy, just type in regular English–no knowledge of computer code necessary–and click “publish,” but rearranging posts on the page, out of the traditional reverse-chronological order, is hard. You need new code in the templates. For a while, WordPress sidebars worked the same way, via template tags, but then came widgets:

“Widgets” is just a silly buzzword we’ve chosen for this sidebar-chopping plug-in we have developed. They could have been called Gadgets or Gizmos or Wizbangs or Whatevers. On the surface, they’re just things you can use to personalize your WordPress site without knowing HTML. Way down deep, they may be something entirely more significant.
—Automattic, the company that develops WordPress.

Widgets allowed a website author to stack little boxes of whatever into the sidebar of the blog without ever diving in to that strange-looking PHP code. (Because anything with a recursive acronym is guaranteed to be intimidating for beginners.) Honest-to-goodness coders could make a widget for you, and all you needed to do as a blogger was drag & drop it (or cut & paste it) where you chose. Easy! So easy, in fact, that widgets, whether in WordPress or else–where, have become “the new black,” the basic accessory of the web.

Shiny New Widgets ²

Here is how we use WordPress widgets:

In WP 2.3 
1. Click on a widget and drag it from its current location (the available widgets pool at the bottom, or either of the sidebars) to its new location
2. Click on the “Edit” icon to configure the widget
3. Click “Save Changes”
4. Click “View Site” to see that everything works.

In WP 2.5  
1. Select sidebar from menus and click “Show” to display
2. Click “Edit,” “Remove,” and “Save Changes” to remove a widget from the sidebar, then return to step one to move it to another sidebar, or
3. Click “Add” on a widget from the list at the left
4. Click “Edit” on the widget to configure it
5. Drag widgets up or down to desired location on the displayed sidebar
6. Click “Save Changes”
7. Click “Visit Site” to see if I got the changes I want to keep.

Which one seems easier to you?³ The old widget control panel puts everything on the screen in front of you, and lets you move it around on one screen. But what if you have more than just a couple of widgetized areas to manage? Justin Tadlock’s post pointed out the problem with that–at some point, there may be just too much information to display in one place. The new panel manages a lot more information–more “sidebars” and more widgets–but only displays a tiny fraction of it at a time. To move to a new sidebar, you have use the dropdown menu and “Show” button to move to a new screen.

Only Analagously Real

And what does all this have to do with that paper on the cognitive psychology of education? The paper investigates how how teachers across several cultures try to make analogies clear to their students. “Learning by analogy,” the authors write, “typically involves finding a set of systematic correspondences (a mapping) between a better-known source analog and a more novel target.” Using data from the Trends in International Mathematics and Science Study (TIMSS), the authors analyzed videos (available here) of classroom teaching of eighth-grade mathematics (i.e., the students were about 13 years old) in three of the TIMMS countries, the United States, Hong Kong/SAR China, and Japan. They painstakingly coded the videos for moments when teachers taught by analogy, and behaved in ways that would help their students “get it.” Specifically, they looked for instances when teachers:

1. Used a something familiar as the source of the analogy
2. Presented the source analog visually
3. Kept the source visible during comparison
4. Used spatial cues to highlight alignment between corresponding elements
5. Used comparative gestures moving between the source and target analogue
6. Used mental imagery or visualizations of the analogous relationship.

The first three of these teacher behaviors focus on aspects of the source of the analogy that the teacher is trying to communicate; the second three call attention to correspondences between the analogous situations –the mapping between source and target– making the analogy more vivid and present to the students. All of them have been established over the last thirty years of experimental cognitive psychology as “sound principles for supporting relational learning.”

The six principles are helpful because they serve to reduce demands on your brain for processing power and to focus your attention on the right parts of the task. If the teacher keeps a familiar example continually visible (placing a balance scale on the podium while lecturing about balancing equations, for example), then you don’t have to use up cognitive resources holding it in mind. If the teacher lines up that source example with the unfamiliar target (placing the podium and balance scale in front of the chalk board, for example, with the fulcrum of the scale beneath the equation’s equal sign, one pan under the left side of the equation, the other under the right) and connects the two with gestures (touching the left side of the equation, then the left pan, then the equation again) and visualization (drawing a big down arrow on the board next to the “subtract from both sides” step in solving the equation, and telling the students “when you subtract, imagine pushing one side of the scale down”), then taking your old knowledge into the new territory becomes clear and easy. Released from the need to recall the old or to map out the journey, your mind is free to focus on learning the new.

The new widget panel brought this to mind because when you work with WordPress, you don’t really edit your blog; you edit an analog of your blog. The “back end” of a WordPress blog has a systematic correspondence with what readers see on the “front end.” The stack of little blue boxes from my screenshot is an analog for a widgetized sidebar; the PHP code of WordPress links the back end of the blog data to its display on the front end, and thus maintains the correspondence. When I use the widget panel, I am trying to build an analogy between my actions and changes as I use the control panel in front of me (the source analog), and the visible effects of those actions on my site (the target analog).

Working with Widget Psychology

Jakob Nielsen defines usability in terms of whether a user interface is easy to learn, efficient to use, memorable after an absence, discouraging but resilient to errors, and pleasant and satisfying in practice. He also notes that utility is just as important as usability: “It matters little that something is easy if it’s not what you want.” Given the insights drawn from the TIMMS data, what can we say about the usability of the WordPress 2.5 Widget panel?

First, as Justin has pointed out, the utility of the new version is much greater–you can have many sidebars (widgetized areas) without breaking the interface. But the new version is much less usable–it breaks just about every one of those sound cognitive principles for making analogies learnable and memorable. The familiar stack of boxes that is analogous to your sidebar is still there, but only one at a time. The current state most of your blog’s widgets is hidden behind the “Show” button. Instead of presenting your existing layout visibly, it requires you to recall where your widgets are, and choose the correct sidebar to display. Even if I display “sidebar one” to see which widgets I’ve installed there, that information becomes invisible again as soon as I call up “sidebar two.” Spatial alignment is ignored–all sidebars are displayed in the same place on the screen, regardless of where the blog author wants to display his or her content. But laying out a blog is one task where you want both information about content (which widgets?) and presentation (displayed where?) to be displayed together–otherwise, you will burn cognitive resources just to comprehend your own layout. Gestures are limited to sorting widgets up and down a single sidebar–you can no longer make the gesture that is analogous to moving a widget from one sidebar to another. (In a related bug, moving widgets sometimes causes them to lose the data with which they were configured. This is very frustrating; when you move your lunchbox from your kitchen to your locker, you don’t expect your sandwich to disappear.)

So what can we do about this? We need to have more information made visible on each screen, and that information needs to be embedded in a spatially meaningful display. But we also need to manage many more widgitized areas than we can display at one time. (Justin comments that the display gets unwieldy with more than three or four widgetized areas to manage.) Here are my suggestions:

Usable analogies–taking the load off your mind: 
1. Add more informative labels to the “Available Widgets” pool. leave the column of available/used/unused widgets along the left side of the screen, but move the brief descriptions of widget functions (currently taking up space in the middle of the screen) underneath their respective widget icons (or into tooltips?), and add a note describing the current placement of the widget, e.g.the “Add” link could toggle with something like, “Currently added to Sidebar Three”
2. In the space that has opened up, allow users to display controls for up to six widgitized areas simultaneously, each in its own “Widget Area Management Box,” just like the “Current Widgets” single display. If the theme does not have that many widgetized areas, or you don’t need to work with more than one or two, the extra Widget Area Management Boxes can collapse, like the boxes for tags and categories below the post editing window. Uncollapsed boxes can display a widget area, or can read “none selected.”
3. Allow users to decide whether each Widget Area Management Box will display its widgets in a column (portrait orientation) or a row (landscape orientation).
4. Make everything draggable. Allow users to move individual widgets back and forth between the from the available pool and the currently displayed Widget Areas, and maybe even allow us to move the Widget Area Management Boxes themselves around in relation to each other.

Take a moment with that WP 2.5 Widget Panel screenshot, and see if you can visualize what I’m suggesting.⁴

What could we do with such a setup? Imagine you have 50 types of widget areas available to use on your site. (Yes, fifty. Or maybe a hundred!) Some of these make up a the footer, some are for the standard sidebar, some control items in the header. Most of them show up on specific templates, but not on every page of the site. You don’t need them all in focus at once–just a few.

Your template for an author profile page, for example, might use a widget area for the header, a widgetized author stats & feeds box in the upper left of the content area, two right-hand sidebars, and two widget areas that make up a fat footer. How to arrange the widgets in this set of sidebars? Simple! Select the Header Widget Area from the dropdown menu on the first Widget Area Management Box (WAMB? WAM Box?), and set it to Landscape display, just like the real header on the page. Select the other widget areas you want to use in the other five WAM Boxes, setting the footers to horizontal display as well. Drag the Boxes around, if necessary, so that the header is displayed across the top of the work area, followed by the author stats area and two sidebars displayed as three columns beneath the header area, and the two footer areas are displayed underneath that, horizontally, one beneath the other. Things are lined up on the panel in the order they will be displayed on the page, but in a more compact form. The column of available widgets is displayed on the left–go crazy! Drag and drop widgets anywhere, in any of these six widget areas, in any order, to your heart’s content. The interface puts everything right in front of you, and you don’t have to burn out your brain cells to see what you are doing to your site. Hit save when you’ve got things sorted. When you want to work with a different set of widget areas, those powerful dropdown menus make them available.

So what do you think? How does this compare to other Content Management Systems? Would you like to see such a thing in the WordPress 2.6?