As a blogging tool, WordPress is great. It provides countless features and works flawlessly. Existing WordPress users know that they bet on the right horse. Users considering migrating to WordPress, however, might not be so sure.
I was once a Movable Type user myself, and one of the things I was looking at, when considering migrating, was the admin interface.
As such, in order for WordPress to be considered a serious alternative to more main-stream CMS‘s such as Movable Type, a few things have to be changed and improved. With the outlook of a new and improved default template in the next WordPress release, most of the remaining issues, as I see it, are with the Admin Interface.
This article is a follow up to “About WordPress, Usability and Open Source Development“.
Currently, WordPress comes with a nice looking admin interface—
However, the problem does not lie in the design of this interface, rather in the usability of this interface. While the WordPress interface is, technically, just a web page, it has more in common with an application than it does with a web page, simply due to it being an admin interface. Movable Type does this a little better—
… but it is also far from perfect.
There are a number of reasons why the Admin Interface is not perfect, and in the spirit of constructive criticism, I will now run through the most important issues, and suggest possible solutions.
1. The Main Navigation
The main navigation of WordPress, resides right at the top. It works well, and the idea of using a layer of primary and secondary tabs is a good idea. It allows WordPress to have a great many options and features, while remaining clean and tidy.
The main problem with this navigation, as it is now, is that while it works like tabs would, it doesn’t look like tabs. There is a gray focus area behind the selected page of the primary navigation, and although the secondary tab navigation does look more like tabs, it is easy to miss because the links are white.
When working with a web-based admin interface, we are working with two metaphors. One is the HyperText metaphor, with hyperlinks, scrolling pages etc. On the other hand, with it being an admin interface, we are working with something that’s more like a Windows or OSX application.
In order to make the navigation more clear, we should use the strengths of both worlds. That is, clearly indicate that the primary navigation (Write / Edit / Categories / Links … ), are tabs, and only have one layer of tabs. This would mean that the secondary navigation (as seen on the picture above, Manage Links / Add Link / Link Categories …) cannot be tabs. A solution could be to use the hypertext metaphor here, and simply make blue links, with the active link in black and bold.
Please note, the redesigns presented here, are quick and dirty suggestions and serve only to communicate the idea rather than actually being redesigns.
2. Common UI Elements
Currently, WordPress uses highly stylized UI elements, with button backgrounds, and custom input box borders. While it does admittedly, look better than the default input boxes, it not as usable as it could be.
In this case, WordPress should follow the application metaphor, and make use of the default operating system buttons and input boxes. This will serve to let buttons and input boxes become tools rather than demand that the user has to learn and decipher new UI components in order to use the software.
Furthermore, it is important that the background of the input box is clean white, because “that’s how input boxes look”, and a white rectangle is what the user is scanning the page for, when looking for an input box.
3. Base Font
WordPress is currently using a lovely Georgia font, for all elements used. While this font looks great as a heading, the only other benefit is that it’s highly readable when printed. When used as a body font in an already complex interface, it only serves to add clutter, with it’s high detail.
Again, WordPress should make use of the application metaphor, and use a sans-serif font as it’s base, just like most other actual applications do. It doesn’t necessarily have to be Verdana as used in this example.
The sans-serif (French for “without feet”) font, ironically, is much more readable on a screen, than a serif font. This is ironic because all typographers learn that serif fonts are more readable due to the feet creating an optical horisontal line that leads the eye. This is not the case on a screen, where pixels fail to reproduce the soft curves that make up a well designed serif font. On the other hand, the low detail of sans-serif fonts serve to simplify things, and give a “cleaner and tighter” look.
4. Help text / links
As it is now, there are small help articles for most of the common areas of the WordPress interface. They provide direct links to the online WordPress documentation.
There are two main problems with this, in their current iteration. First of all, deciphering what they do, is not clear by just looking at them. Secondly, clicking on them takes you to a help file on wordpress.org, replacing what you were doing (possibly writing an entry), bringing you to a web page that doesn’t look like a help file.
This area needs more work than a simple screenshot can communicate. The above image is far from enough with respects to what should be done.
However, some of the concepts are improved, and show what direction should be taken. First of all, I am not fond of the idea that it is a link at all, since these “quick help” links aren’t logical places to present help. I honestly think that if it should even have help attached to it, it should be on rollover and explained in the rollover title. This would be indicated by the “help” cursor, as seen in the screenshot. Additionally, the rollover text could be more descriptive in itself, than it is now.
If, however, it should remain a link, it should a) open in a small pop up window, as to not interfere with what is being done or written, and b) be bundled with the wordpress package, so no visit to WordPress.org is necessary, and c) be designed as a help file, i.e. no fancy backgrounds or graphics.
Another solution would be to provide a simple “help” link next to each item, such as this:
5. Other issues
There are numerous minor issues that could also be improved upon. Here are a few of them.
- The “Save and Continue Editing”, “Save” and “Publish” buttons are illogical
For one, “Save and Continue Editing” should be renamed to, for instance “Preview”, because having two buttons that say “Save” in their title is confusing: which one is the right one?
“Publish”, is unnecessary since there is a “Post Status” radio group that defines the status of an entry. Instead, the “Post Status” radio group should be moved closer to new “Save” and “Preview” buttons.
- The “Quicktag” buttons above an entry are mostly unnecessary
Those who can decipher what “b-quote”, “del”, “ins”, “ul”, “ol”, “li” and “code” means, are likely to write them by hand. These buttons should only be available in the advanced interface.
The “link” button should have blue text and an underline, to be easier to decode.
The “str” and “em” buttons should be renamed “B” and “i”, because that’s what they’re named in Word.
The “img” button should have a small image icon.
The “Dict.” button should be renamed “Dictionary”.
- The various Delete this post, Delete comment and other “delete” buttons, should actually be buttons
Currently, they are blue web links, with a huge, liquid-width red background square.
In it’s current iteration (v1.2), WordPress has a lot of things going for itself. It’s loaded with features, it’s stable, fast, it’s free and it’s undergoing a continuous rapid development.
However, WordPress is suffering from this very development it is undergoing. As I wrote in my article on the development of WordPress, the nature of open-source development is to add features, features and more features, not worrying about profit since that factor is not part of the open-source game. Combine this with the common developer knowledge, that building a feature may be easy and fast, but making that feature configurable via an interface, takes time, and the result is a user interface that grows ever more complex with every release, and WordPress is beginning to show signs of wear and tear.
While effort has certainly gone into making a comprehensive and good looking WordPress interface, it is my impression that not enough focus has been on making this interface truly usable for the end user. Any power user may be able to use it, but new users will certainly have to learn it. More focus should be put into making the interface user-friendly. More often than not, a few adjustments here and there can make all the difference.
In the end, the main purpose of developing a product such as WordPress is to gather a huge and varied user-base. WordPress is already a good product, it’s just not aimed at the average user… yet.