Usability in WordPress' Admin Interface

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“.

The Interface

Currently, WordPress comes with a nice looking admin interface—

wp-iface

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—

mt-iface

… 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

wp-nav

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.

Suggestion

wp-nav-suggestion

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

wp-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.

Suggestion

wp-ui-elements-suggestion

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

wp-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.

Suggestion

wp-font-suggestion

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

wp-help

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.

Suggestion

wp-help-suggestion

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:

wp-help-suggestion2

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.

Conclusion

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.

24 thoughts on “Usability in WordPress' Admin Interface”

  1. Michael says:

    I thought the admin interface was okay all in all, until now 🙂

    Seriously, I think these are some great examples of things that can be done to make the admin interface better usability-wise. And, best of all, they are all peanuts to change…

  2. Matt says:

    While you bring up some good visual issues that should be considered I think there are some more fundamental usability issues that need to be addressed first, mainly with regards to flow and interaction. That’s where developments in 1.3 are focused right now. The prettiest UI in the world that follows every possible convention is still completely unusable if it doesn’t behave in an intuitive manner. People adapt to aesthetics, as Michael has shown, but cognitive disconnects in the interface will bug them forever.

  3. Joen says:

    Michael,

    Peanuts indeed, but they make a big difference.

    Matt,

    The prettiest UI in the world that follows every possible convention is still completely unusable if it doesn’t behave in an intuitive manner

    Indeed, very true. Other things than the interface elements need work. However, a rewrite of interface flow an improvements in interaction doesn’t seclude updates to the stylesheet, which most of these suggestions really are.

    People adapt to aesthetics

    While this is true, the changes I’m suggesting are not aesthetic improvements. Aesthetics refer to pleasing the eyes, something the WordPress UI already does very well. The suggested improvements will not make the UI prettier, they were never supposed to. They do, however, make it more usable and logical.

    There is a reason why most non-web applications use common UI elements, common scrollbars and common buttons. It’s because those are elements that the user already knows. You argue that “people adapt”, and while they’ll certainly learn how to use WordPress, they still need to learn it when starting out. This learning curve would’ve been smoother, had it followed common UI conventions.

    With that said, I don’t think you necessarily disagree with anything I’m saying, but it was important for me to get my point across. And whether UI improvements such as those mentioned appear in WP 1.3 or 1.4 is of less importance.

    Just don’t underestimate the power of a few CSS adjustments.

  4. Nik says:

    Joen – I completely agree, I’m no great designer or web developer but it seems to me that the admin interface could benefit from a few aesthetic improvements such as form buttons that look standard for instance. I think you’re right in that whilst it is true that people adapt, the non-standard appearance of some of the elements in the interface almost add an additional learning curve to getting started with WordPress…

    Having said that, all this is fairly trivial detail to what is an awesome application! 😀

  5. indieb0i says:

    Those are some really good points, Joen. It’s always interesting to see what tweaking the usability of an interface can really do to improve a product – especially such minor adjustments as these. It also goes to show just how good of a job the WP developers have done that more and more of the “major” issues are indeed minor ones.

    I’m curious, did you study usability anywhere, or are these simply things you’ve figured out along the way?

  6. Joen says:

    indib0i,

    Indeed they are minor adjustments, but I stand by the effect they have on the final product in question.

    As for studying usability, well, kinda. I read both of Jakob Nielsens “primary works”, Homepage Usability, 50 Websites Deconstructed, and Designing Web Usability. Both are great reads, in fact quite interesting considering how dull the subject really is. I can recommend them to anyone who want’s a more usable website.

    Other than this, I’ve designed websites freelance, and later on at Titoonic where I currently work. As such, I’ve had a lot of work related experience with usability.

    I didn’t always focus on Usability. Previous iterations of noscope, not to mention some of the past work I’ve made, were not all that usable. I used to think that people were intelligent, and able to figure out a design made by an intelligent person. I thought, and fought “usability advocates” fiercely, right up to the day I actually read about it. What I failed to understand, before “I saw the light”, was that designing with usability in mind, doesn’t mean neither compromise nor “dull design”—it just means “if you do this, people will know what it does by heart—if you choose not to, you should keep this or that in mind”. In short: usability is good advice, and nobody says you have to take that advice. Look at your stats before and after, and see for yourself whether it worked or not.

    It’s hard to argue with that, isn’t it?

  7. Joen says:

    I forgot to mention that since both of Jakob Nielsens books are +2 years old, you (or at least danish people) can most likely borrow them at your local library, not needing to purchase them. Again, I highly recommend both books, and even though they are +2 years old, the contents apply today.

  8. Richard says:

    This is another fantastic thread and if nothing else, please Matt, consider reducing the size, both font and actual of the tabs and changing to a sans-serif typeface.

    I would also recommend that all of these great designers come up with a new logo for WordPress and Matt has a poll at his site so we can vote on it.

    One of the first things I did when I got WordPress installed was mess with the stylesheet for the back end just to see if I could make a more pleasant work environment for myself.

    I agree with Matt that there are deeper process order UI issues to solve in the admin UI but Joen’s comments are part of that and not peanuts at all.

    This is also part of the tightening of the tool: making it look like like it’s the well thought out and well designed tool that it is.

    Again, this is an area that I think MT has thought out a bit more. I agree, its admin UI and Typepad’s is far from perfect but it’s cleaner to look at and this visual cleanliness helps useability as much as the deeper process issues Matt is talking about.

  9. Joen says:

    Richard,

    This is also part of the tightening of the tool: making it look like like it?s the well thought out and well designed tool that it is.

    I couldn’t agree more. WordPress is a great tool, it just doesn’t look like it from the admin interface.

  10. Richard says:

    Sorry for being ignorant but what would be a next step to offer suggestions for redesigning the admin UI? I like what you did in this post with screen shots of small areas, is that something that Matt et al might find useful or do we just make a list of things and changes?

    Or, is even reworking the UI of the admin area also something that’s off limits because core people have invested so much in the current setup?

    Or, do we wait for the next release and then go from there?

    If we’re starting a list, I’d like to add that the “delete post” button is not in an intuitive place and acts like no other button (red box the width of the screen) and even though it’s a serious thing to be doing with real consequences, there are other ways of handling this without making it a big red box.

    A small button like the “Post” button below would be fine, with a warning dialog that’s clearly written with a default “Cancel” button on it would be plenty safe and pretty much the way most apps currently work.

  11. Matt says:

    I’m reading everything here, so even if I don’t respond to it all directly it’ll be in my mind while working on things.

  12. Joen says:

    Richard,

    I prefer this way, with screenshots, because that way core wp developers can take what inspiration and parts they like and work them in at their own pace. I find this to be much more effective than providing complete redesigns, especially since all that’s needed, is just small changes.

    As such, while a new logo and a completely freshly designed UI could be nice, I would go for a gradual change—that is, small baby steps towards a more usable UI. One of the rules of usability is to not change core navigation. Especially in areas like this admin interface, which thousands of bloggers use daily—if it changes too drastically, some will definetely jump ship. Just imagine if Google redesigned completely from one day to the next, people would be down-right scared!

    In short: the admin UI should gradually change, and the suggestions made here could slowly be worked in over time, in the suggested form or otherwise.

  13. Richard says:

    Joen: thanks for bringing me back down to earth. Absolutely, I agree. And I also agree that your typeface and tab navigation change is a good place to start.

  14. Michael says:

    Seems like as good a place as any to put something like this admin screen from another CMS.

  15. Richard says:

    Wow, now that’s a killer UI and is exactly where I want to go. Very clean, visually clear, and a great source of ideas.

    I didn’t have a chance to read his whole weblog; is he going to sell or give away typeworks or do what Garret has done and just use it himself?

  16. Joen says:

    Great link Michael, very nice UI. Indeed clean and simple.

    A commenter mentions something related to this discussion:

    “I think it’s so important for CMS/Blogging software companies to show their admin interfaces to potential customers. The admin interface is one of the most important aspects of CMS software (to me, at least) and I would never consider switching software unless I loved the new admin interface I was moving to. It’s one of the reasons I haven’t switched from Movable Type to something like WordPress or TextPattern.

    … I don’t think he’s the only one.

  17. Scrivs says:

    Wish I would’ve known about this one before I wrote about the issue. I could’ve just quoted you word-for-word and saved me an hour of work 🙂

    Nice stuff and glad to see someone else agrees with me.

  18. Joen says:

    Two in agreement is better than one vigilante, so no wasted work there 🙂

    Plus, I didn’t manage to compare to TxP, and only a little bit to MT.

  19. Nik says:

    I realise this thread is a little old, but anyone tried ExpressionEngine from pMachine. Has a nice admin panel, which you can tryout at this URL

  20. Joen says:

    Very nice. I remember seeing some other, much nicer screenshots of ExpressionEngine admin… maybe that’s a future release?

    For now though, I’m pretty happy with the features in WP, and I’m seriously looking forward to the 1.3 “Pages” feature…

  21. Richard says:

    So, how many of you are using 1.3? Do most people wait for an official release or do many of you jump the gun?

  22. Joen says:

    I’m using 1.2.1, which I cannot recommend to anyone due to the bug described here. I’ve been really close to upgrading to a nightly, but I have decided not to.

    Once 1.3 comes out, I’ll probably even redesign this.

Comments are closed.