Articles Comments

GUI Journal » Controls, GUI Design Review, Tooltips » GUI Review Revisited: WordPress®

GUI Review Revisited: WordPress®

In March 2011 I posted a review of the WordPress® GUI which resulted in a rating of 4 out of 5 GJs. I detailed only two complaints, and apparently the developers at WordPress care enough about my opinion that they have fixed the biggest problem for me. (Who knew I had such influence?)

In that article I explained how long it took for me to become accustomed to a pair of icons that had a similar appearance, causing me to repeatedly click the wrong one when I was editing a post. Figure 1 contains portions of two screen shots of the previous toolbar with the mouse hovering over the icons for Add an Image and Toggle fullscreen mode.

Figure 1. Previous WordPress® Toolbar with Tooltips for Two Similar Icons in Fullscreen Mode

Notice how similar the icons look to each other. I had trouble with these until I realized that one was intended to be a computer screen and the other a photograph or slide. These screen shots are from Fullscreen mode where the icons were located near each other, making the problem worse. Regular mode actually had the Add an Image (and other Add various media icons) displayed a row above as is seen in Figure 2.

Figure 2. Edit Post Toolbar Icons in Regular Mode


I didn’t have a problem in regular mode because the icons were located in different areas, but I usually do my editing in fullscreen mode.

Figure 3 is a portion of a screen shot of the updated WordPress Toolbar Icons.

Figure 3. New Toolbar Icons in Regular Mode

There are minor changes in a couple of the icons, but the only major changes are with the two that I had a problem with previously. Note that the new Toggle fullscreen mode icon now has arrows pointing outward in each corner, very similar to icons in other applications that expand to fullscreen view. The four icons that were previously used for adding different types of media have now been combined into a single icon of various media types. Very nicely done. Thanks to WordPress for responding so promptly to my request for a change.

Figure 4 shows the icons in fullscreen mode.

Figure 4. New Toolbar Icons in Fullscreen Mode

The toolbar in fullscreen mode is quite a bit different than it was in the previous version. The toolbar in Figure 4 only shows when the mouse hovers at the top of the screen, whereas before (Figure 1) it was always present. This is especially nice when editing near the bottom of a long post so that it is not necessary to scroll to the top in order to access the controls; rather the toolbar appears at the top of the current view.

Unfortunately, there are now only a limited set of icons displayed. I get a little annoyed when I must exit fullscreen mode simply to access one of the missing icons. Also note that there is no longer a Toggle fullscreen mode icon at all; rather it has been replaced with the Exit fullscreen link at the left. If the icon in Figure 3 isn’t used for both entering and exiting fullscreen mode, then the tooltip should probably be changed to Enter fullscreen mode (instead of “Toggle”). However, the keyboard sequence shown in the tooltip (Alt + Shift + G) does actually toggle between the two modes. Interesting.

Something else of note is that the tooltip in Figure 1 reads Add an Image which uses title capitalization rather than sentence capitalization, as the rest of the tooltips do. When I saw that this button was replaced with a combination of adding various types of media, I hoped the capitalization error would be fixed also. But Figure 3 shows that the error was simply transferred to the new word “Media” and is displayed as Add Media. (For further discussion on Capitalization see CAPITAL Idea.) The funniest part of that is the fact the the tooltip for the same icon in fullscreen mode shows Insert/edit media (Alt + Shift + M). (But at least it uses sentence capitalization!)


This GUI is fantastic. I still give it a solid 4 out of 5 GJs. I’m quite pleased by the one improvement, though not everything about it is ideal. And I still would like to see the option of displaying text with the icons (as discussed in the original WordPress review).

GUI Design

GUI Design Guidelines

Graphical User Interface

User Interface

Graphical User Interface Design

Graphical User Interface Design Guidelines

GUI Review

Written by

Carl Andersen currently works for Micro Focus International as a Senior Development Manager. Carl has led teams at NetIQ, Novell, and WordPerfect and been the principal designer of multiple GUIs which have received analyst acclaim.

Filed under: Controls, GUI Design Review, Tooltips · Tags: , , , , ,

Leave a Reply


− seven = 1

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>