WP Admin is an Experience too.

6 minute read -

Many of us working with WordPress on a daily basis focus all our creative energy on how our solutions interact with the user through the theme. But what about the admin area? According to W3Techs, WordPress is now running 15% of sites, but how many of them have an admin area that is tailored to the user, the same way you craft a theme to evoke certain emotions or create an experience?

When I attended the Frontend Conference ’11, I went to an interface design presentation by Bastian Allgeier (who created and maintains Zootool). He made some great points, one of the concepts I liked the most was taking this customers perspective when evaluating an interface:

  1. Does it have the features I need?
  2. Does it match my workflow?
  3. Does it feel good?

He went on to say that a great interface can make you (feel) more productive. It resonated well with me and it’s something I finally have a little time to experiment with before taking Theme Force out of beta. The challenge with something like Theme Force, a web application built on top of WordPress, is relatively simple to explain: A potential client sees our demo and wants a site exactly like that, but doesn’t want to get lost setting it up. They’ll likely make up their mind whilst working in the admin area. Wouldn’t I want them to feel good and feel productive, when browsing through this area (assuming we can satisfy their business requirements)?

What Experience?

Though it’s not easy to quantify, I’m a firm believer that experiences can be created in a precise manner, and that having the correct features & functionality is only half the battle. Take the Apple store in New York for example. They could have easily done with much less, but no, they create a glass cube and build a shop beneath it. The iPod’s & iPhone’s are still the same, but the experience is worlds apart (see those two circular metal connectors on each step, Apple patented those in 2002, and no, they are not an actual product sold by Apple). Carefully designed experiences attach so much more emotion to the end product. As developers, we should be just as considerate of the experience as we are of the features.


How does this all come back to WordPress? Well, does the current admin UI make your users feel good? Do your solutions even need to make them feel good? In our case (Theme Force), you bet it does, they’ll likely make their purchasing decision whilst hanging out in the admin area. I’m by no means saying you need to create an entirely new UI, but they can be small changes too. For example, I love what Chris Pearson did with the Thesis options page back in the day. Look at the save button below, how can you not feel even the slightest bit more of accomplishment than over a standard browser submit button? When I first clicked it, I probably muttered something like “F*** yeah” under my breath.

Nor Apple’s connectors or Chris’s big ass save button are actually product features, but both are very relevant in creating and maintaining an experience. Even if they both are very small parts of a much larger picture, they both do contribute to this picture. It seems that everyone selling WordPress themes these days has a mascot to parade around their website, but how many are keeping up this engagement throughout the admin area (or worse, are still going Inception on us with a design within a design)?

What Admin?

The WordPress admin area is really beautifully done, the core UI team have managed to design the closest thing you’ll ever get to “one size fits all”, and it’s by no means an easy feat. That being said, as soon as you start working on client projects or other online solutions based on WordPress, your requirements will certainly change (and more importantly, client expectations too). It’s also important to note that developers providing visual themes or function-specific plug-ins can’t exactly take over someones WordPress entire install, so their room for maneuvering is limited. However, if you’re creating a solution to be enjoyed by many, it’s worth taking a few chances. The items below will describe some of the things we’ve done so far with Theme Force.

Branding

To our users, WordPress is just a tool, the same way Google Apps or DropBox is a tool. It solves one of their problems (the last thing a restaurant owner wants to deal with is their website). There’s no point in confusing them by showing them all the different building blocks that make up the entire site.  As such, we’ve replaced any sort of WordPress wording all the way from sales material to the dashboard (except for a credit in the admin footer). Similarly, if we use any plug-ins that have a branded or complicated name, we’d just turn it into something generic. “Ultimate Twitter Badge” would simply become “Twitter”. Whilst, we’re still polishing parts, having a consistent tone & style in your copy throughout the admin area is equally important.

Overall Design

Changing the overall look and feel of the UI is probably where I’ll find the most controversy, but it’s something I feel is important to spend time tailoring for your end user. I personally find the current core UI very compact & well compartmentalized. With Theme Force, I wanted to move into a direction that’s a little warmer and has a bit more breathing room between select elements. My end users are far from being computer experts, so I feel it’s important to emphasize certain structure & hierarchy even more than before. In addition, we’ve also segregated views to create a “Simple View” (below) and an “Advanced View” as part of an onboarding process.  The current image below is all work in progress, but you get the idea.

custom wordpress admin

Editor

Another area we’ve been working on is simplifying the editor. First off, I would never even attempt to use the words TinyMCE or Shortcodes with a client.  So instead of adding a TinyMCE button after a series of other very small buttons, we put the important features for our clients right above the editor. Furthermore, our food menu is quite pretty (example here), however isn’t the easiest concept to explain to a first-time user (and we certainly don’t want them to disconnect 3 minutes into their trial). So WordPress magician Joe Hoyle managed to replace our in-editor shortcodes with images. Customer support queries in respect to this has dropped significantly since.

shortcode image replacement

Less is More

Something else I’ve done is started stripping a bunch of content & elements from the UI for our “Simple View”. A first time user won’t care for certain options. Take creating a page for example, you’ll see characteristics such as “Status:Draft”, “Visibility:Public”, “Publish:immediately”. These are all useless to our type of clientele, hence we’ve hidden them. By eliminating a lot of this fluff, we’re better able to guide/channel user into a certain direction.

Final Thoughts

Whilst I’m only scratching the surface, one thing is already clear: It’s a lot easier to get carried away creating new things, then to go back and question the old. As we’re getting closer to launch, I’m finding it increasingly important to leave the feature-set as it is, and focusing on the glue that bonds new users & the product, or what I hope can be collectively described as an experience (and not a loose set of screens & buttons). I’ll continue to post on our experiences, and if people are also interested, touch on the elements of gamification we’re implementing. What is your opinion on extending the tailored user experience you already provide right into the admin area? Do you have any nice examples or other comments?

Community Reactions on touching the UI

Thanks to the following people for tweeting their opinion: