I currently use WordPress® for this blog. That could change at any time simply because I enjoy trying new applications and when I discover something better, I generally make the jump—at least until the awful outweighs the awesome. WordPress is my favorite web application for blogging because of the power it puts at my fingertips, in spite of some drawbacks I find in the GUI. This review is for the GUI alone.

If you are a blogger, then there is a good chance you are familiar with WordPress. I laughed to myself more than once in the last several months as I have used WordPress to write about good and bad GUI designs and features, because WordPress breaks some of my rules for good GUI design. But let’s begin with some good things—because they are plentiful. Figure 1 shows a screen shot of the WordPress Dashboard. (Note that I made the window as narrow as I could and then did a little horizontal editing to try to show as much as possible.)

NAVIGATION

The title bar in Figure 1 begins with the WordPress logo, followed immediately by the name of the blog I am currently editing: a convenient display for those who have multiple blogs. The left navigation area is simple and easy to interpret. My current location is marked by a dark blue background to the navigation heading and bold black type below on the particular subheading for the area currently being displayed to the right. Major headings that are not currently selected use a lighter background. When hovering, both the icon and text colorize and a drop-down menu arrow appears at the right (see the Posts heading in Figure 1). This is a great design.

LAYOUT

Throughout the GUI, the designers realized that what they thought might be most important is not necessarily going to be the same for everyone. Because of this all of these individual panes on the Dashboard and elsewhere are draggable so that I can put them wherever they work best for me and just leave them there. Awesome.

FEEDBACK

Areas that may need my attention have a red circle with a number inside that indicates how many items need my attention (the circle is gray when the heading is expanded). This “feedback” fits into the highest level of help provided by applications as described in my blog posting 1..2..3..Help! — GUI Design.

Figure 2 shows the upper feedback circle tooltip. Few applications use tooltips the way they could and should. A tooltip that changes or updates depending on the circumstances is really taking advantage of a powerful tool. I mentioned this as a potential solution to frustration regarding disabled menu options in my blog posting Vanishing Options — GUI Design. I really like it when tooltips are used to give additional information; I find it very annoying when tooltips simply repeat the obvious. The other thing I like about the feedback that there is “1 WordPress Update” available, is that this information is actually also shown in two other places in Figure 1: the yellow bar at the top, and in the Right Now panel. It may seem excessive to show this in three places, but the fact of the matter is that when we use GUIs, we have our favorites places to look while we do our work. If the only place this feedback exists is on a panel or in a location that I don’t usually work, look, or notice, then I will likely miss it. The other thing that is good about this feedback is that it didn’t pop anything up and make me click a [Go Away] button. If it’s not absolutely required before anything else can happen, then please let me deal with it when I’m ready (Dialog Assault — GUI Design).

Figure 3 shows how the left navigation display from Figure 1 changes when clicking the Posts option. Note that the pane expanded to show all the options under that heading and automatically selected the first item in the list, which in turn updated the display at right. (I also happened to expand a couple of other panes in the left navigation area.)

The WordPress web application does some other great things with mouse hovers. I’ve always been a fan of “click on something to view/edit” and this implementation has that and more. Before hovering, the list at right shows all my published posts. (Notice that I clicked Published at the top.) When I hover over a particular post name, not only do I get a tooltip indicating that I can click the name to edit, but the display also has several other options just below the name: Edit, Quick Edit, Trash, and View. Once they appear, they are immediately clickable. This is a fabulous way to provide lots of options for a specific item in the list without cluttering up the display. Very nicely done.

Figure 4 shows the display after clicking the name of the first Post in the list or clicking its Edit option. (Note that there are more panes to the right that didn’t fit in this graphic—and of course they are draggable.)

TOOLBAR

When editing a post, I am presented with a screen containing myriad toolbar icons, some of which are recognizable and obvious, but some of which are not. Hovering over the icons gives helpful tooltips, but my first real complaint about this GUI is that there is no option to show text with the icons. The first couple of months I was using this GUI, I repeatedly had to hover over icon after icon to find what I was looking for. It was frustrating. An option to show text would have helped me much more quickly learn what all the icons were for, not just the ones I used most frequently. This definitely breaks one of the rules I have blogged about before (Icons or Text? — GUI Design).

FOCUSING ON MY TASK

I soon found that one of my favorite (textless) icons was the one that toggled me between regular mode (Figure 4) and fullscreen mode (Figure 5).

I really like working in fullscreen mode because the left navigation and title bar area shown in Figure 4 not only restricted how much of my current post I could see, but they just aren’t needed for anything when I’m concentrating on my editing. Of course, my Prime Directive basically says that I’m using your GUI to accomplish a task, so get out of my way and let me do it. This mode let’s me do that. Thank you very much!

The only problem I had with switching back and forth between these modes is the icon shown in Figure 6.

Because neither the Toggle Fullscreen Mode icon or the Add an Image icon were familiar to me, I constantly got them mixed up and would very, very often accidentally select the wrong one. Again, text would have been very helpful. Once I was familiar with the application, I realized that the one icon is supposed to look like a computer screen while the other is supposed to be a slide or photograph, so I now I can tell them apart. But when a user is new to an application, those clever icon designs are just too subtle when mixed in with everything else that is unknown.

Something else interesting about the Add an Image icon is the fact that the grouping of four icons (Add an Image, followed by Add a Video, Add Audio, and Add Media) are actually in a different location in fullscreen mode than they are in regular mode (Figure 4). In regular mode there is the helpful Upload/Insert label preceding them.

Accessibility is an issue with WordPress. Unfortunately, much of the functionality is unusable without a mouse or trackpad. Of course that’s what I usually have available, but it seems like every once in a while I end up needing to edit or update something from a computer or location that is not my usual locale and where accessibility can be a problem: I’m visiting my brother-in-law and his mouse isn’t working correctly or some other unusual situation. It happens. So please give me an alternative (508 Compliance — GUI Design).

CONCLUSION

This GUI is fantastic. I give it a solid 4 out of 5 GNs. I think I will likely be using it for a long time, despite the handful of minor frustrations. For the most part it is well designed and well implemented.