Nerdaphernalia

In the past I’ve discussed elegant UI design on this blog, commenting especially how the best plugin design is to integrate the plugin’s function in a way that the end user would never realize that what they’re doing comes from a plugin at all.  There was a trend in the earlier days of WordPress that plugin developers would all dump their interface screen under the “Plugins” menu in the Admin area, because — duh — it’s a plugin.  No, I argued — that’s exactly wrong.  Does your plugin do something with comments?  Put it under Comments.  Does you plugin affect the appearance of the site?  There’s an Appearance menu for that.  Is it purely a Settings screen?  Great — use the Settings Menu.

Today this seems like pretty basic stuff, and most plugin authors seem to get the idea.  But today I came across a particularly striking contrast between Old plugin design and New, and I thought it was worth mentioning.  The plugins in question are PageMash, by Joel Starnes, (last updated six years ago), and Simple Page Ordering, by Jake Goldman and 10up.

Both of these plugins serve the exact same purpose: they allow you to order your site’s Pages via drag and drop.

First, let’s look at pageMash.

I’ll start with the most obvious element of this plugin: had I not just told you what it does, would you have guessed what a plugin called “pageMash” does from the name?  I wouldn’t have.  This illustrates a quandary in software design — the struggle between giving your product a distinct name, and giving it a name that identifies its purpose.  That could actually serve as an entire post — if not a book.

So let us, for the sake of discussion, assume that the plugin name was well chosen.  The author, however, overused the name throughout the interface.  After activating pageMash, there is a singular addition to the Admin menu: under “Pages”, there is a “pageMash” menu.  Even if that’s a great name for the plugin itself, it is a poor name for a menu item — something that is meant to help users find what they’re looking for.  How about “Page Order” instead?

We click on pageMash, and are taken to a page with the following title: pageMash – pageManagement.  Well, I suppose “page management” does a little better job of telling us what the page does, but even at that point the unorthodox capitalization and spacing looks clunky and unpolished.  It’s a perfect example of an interface designed by a coder, because that type of capitalization and mushing-words-together is commonplace in code.  It even has a name: camelCase.  Programmers commonly use it for variable names and such.  I assume most people reading this know this already, but I don’t assume all my readers are programmers; which really just leads to my next point: camelCase would be perfectly fine, I think, if we could assume that all of the users of the plugin are programmers.  One of my own plugins — Log Deprecated Calls — is really only useable by plugin and theme developers, and probably only used in development environments.  Although I didn’t do it, such geeky conventions would have been a safer bet because of the audience.  But pageMash is exactly the opposite — you can assume the many (or most) users of that plugin are going to be writers and editors.  Not the admin installing the thing, but the people using it day-to-day, are likely to be non-technical “content” people. So this breaks the rule I mentioned previously on multiple levels.  From the menu to the page headers, the interface of pageMash screams “add-on”.  There’s just no way this is a part of WordPress itself.

Now, I realize I’m being hard on the developer, and I don’t really mean to be.  The plugin’s function — especially for its day — is quite excellent.  You have a list of pages. You drag and drop them into the order you want, and click the “Update” button.  There’s a short paragraph at the top of the page explaining this, and at the bottom of the page is a “Show Further Info” link that expands a longer help text.  It’s pretty straightforward, and it works.  Before this plugin came along, the only means I had to order pages in WordPress was to type numbers into a little blank next to each page in the list.  It was clunky and extremely tacked-on.  PageMash fixed that.

Now lets fast-forward several years.  Just today I discovered 10up’s Simple Page Ordering plugin.  Any guess what they called the menu item?

Trick question.  There isn’t a menu item.  The interface is so cleanly and tightly integrated into WordPress that you’d never guess it was a plugin.  You simply go to the normal Pages admin page, and you can drag and drop the page order right there.  Need help?  It’s integrated into the existing Help tab and the top of the page.  There’s not even a Save button. Drag, drop, done.

I’m reminded of Steve Jobs — arguably one of the greatest UI designers in the history of computing.  He famously hated buttons.  When designing new devices the first iterations always had buttons, and he’d come swooping in and get rid of them.  Think of the iPhone: there’s Power and Home — that’s it.  And it works, because the device is designed so that you can just look at it and figure out how most of it works.  It’s instinctive.

Simple Page Ordering accomplishes this same elegance.  It’s so beautifully designed and coded that there’s literally no interface beyond simply doing the thing.  “Gee… I want to move this page down.”  Click. Done.

I can’t think of a better example of the design principles all programmers should aspire to.