WP Admin is an Experience too.

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.

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.

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:

@ @ @ you do know that colour is banned from the WP UI? Don't say I didn't warn you when they come to get you...
@davecoveney
David Coveney
@ it's damn unstable for such. customize a lot now and two versions down you have ton of things to redo
@Rarst
Rarst
@ Either don't do anything or re-brand it completely so its no longer WordPress like what we did with this > http://t.co/tDqPFaj8
@AdamPickering_
Adam Pickering
@ so long as you're not pretending to still BE WP, it's fine.
@GaryJ
Gary Jones
  • Anonymous

    I never mess with the styling of the wordpress admin, but I always customize it as best I can for a client, even if it just removing features they don’t need or changing the name of labels to make things clearer

  • http://www.facebook.com/tomwillmot Tom Willmot

    I had written a long winded comment agreeing with and expanding on what @GaryJ tweeted, but my iPad crashed before I posted it, so instead I’ll just say: What he said.

  • http://twitter.com/Hi_ImNaomi Naomi

    People (my clients, at least) don’t use WordPress because it’s WordPress, but because it’s a tool that meets their needs in a less than painful way (quite honestly, they could care less about WordPress). If I need to change something up in the admin (which I frequently do) to make it an enjoyable, easy-to-use experience for them, then I will. They have other options and I want mine at the top of their list as the perfect balance of functionality, flexibility, and finesse.

  • http://whatiswp.org David Right

    Dean Robinson does some really cool stuff with his Fluency Admin theme for WordPress too. Have you checked it out?

    http://fortysevenrobots.com/wordpress/fluency-admin/

  • http://ednailor.com Ed Nailor

    This is a great post. I would love to see more information on how you have made the Admin UI changes. I have found that a lot of the menu items in the navigation can be tricky to remove, and the CSS for the admin UI is VERY complex, making it a full time experience trying to change the look and feel overall. The look and feel of your UI is very nice, but with WP devs constantly making changes to the admin UI, isn’t this hard to maintain long term? It seems that with every WP version, you would be in there fixing the issues the new admin UI creates to your UI theme.

    Would love to hear your feedback.
    Ed

  • Kevin

    A great article. It’s really helpful to see what others are doing for their clients in terms of the admin area. I’ve been using the White Label plugin to customize our client’s installs a little and I’ve been really happy with it.

    Thanks for the great info.

    -Kevin Maines
    JML Design
    http://www.jmldesign.com

  • http://www.noeltock.com Noel

    Hi Ed,

    Thanks for the comments! It took me about a days work to figure it all out and come up with this layout, another day for a few specifics like food & event custom post types. The CSS is quite straightforward tbh, I used LESS to save me time on colors and other styles. The update pains of new WP versions is just something I have to live with :) If I can tailor a UI to my client-base, what does that tell them about what they can expect? Is that investment worth that day of work? I’d like to think yes :)

    Hope that helps!

    Cheers

    Noel

  • http://www.noeltock.com Noel

    I think it’s cool, but probably only a solution for self-hosted sites imho. If you’re working on larger projects (where you may already need to work on WP beta versions) or client sites (that require consistency over time), this may not be the best idea (imagine your client upgrades and fluency hasn’t upgraded, oops).

  • AC

    Noel,

    How did you get that large bar atop the admin bar? I have tried to do something like that but WordPress disagrees with me every time I attempt it.

  • http://www.noeltock.com Noel

    We did it via jQuery, just need have the corresponding CSS to also push down the WP default admin bar.

  • shawn

    I would love to read about how you managed to modify the editor with the quick insert buttons at the top as well as replacing the shortcodes in the center with custom images. This is a really neat effect.

    Wondering if the changes to wp_editor in the new 3.3 is going to make this easier as well….

  • http://www.noeltock.com Noel

    Thank you! This is actually 3.3 already, we always try to work off latest.

  • Kevin

    hi noel, very hard to make contact with you. forgive this ot post. am wondering if you ever finished your humane society wp theme? looked nice and i am developing something for a humane society myself (a freebie). anyway, wish you the best. please let me know. [email protected] … thanks, kevin

  • http://www.virtualidstudios.com David

    Wow dude, insightful! Thank you!

  • zane kolnik

    Personally I’m a big fan of this, its actually easier than some realize, but its like opening Pandoras box…

  • http://twitter.com/anglina2010 كافيه هبال
  • Alistair
  • hanrichardsonn

    Recently I was really, really low on cash and debts were eating me from all sides! That was UNTIL I decided to make money on the internet. I went to surveymoneymaker dot net, and started filling in surveys for cash, and surely I’ve been far more able to pay my bills! I’m so glad, I did this!! With all the financial stress these years, I really hope all of you will give it a chance. – 4ekx