Thoughts on Plugin UI

Note: Content might be outdated!

This article is based on a talk I gave at WordCamp Europe 2016 (“Caring is the coolest thing I’ve ever seen anyone do.”—Thoughts on Plugin UI). If you’re interested watching the video, it is available on WordPress.tv.

A Short Story of Care

Look at whatever place you want—a country, a city, a building, a WordPress back-end. If you happen to be a local in that place, you can choose to actively take impact on the experience other people (that is: non-locals) will have in and with that place.

Cyrillic lettering
›Bulgarian Post‹

To me, such a place once was the Central Post Office in Sofia, Bulgaria, and the local who would take impact on my experience was an elder lady running a newsstand in said post office.

So, I enter that post office, 8:00 on a Tuesday morning. I have come to post a parcel to Germany, only to realize that neither am I able to read the Cyrillic signage all around, nor does anyone in that place understand, let alone speak a word of English, or German.

Getting increasingly freaked out I spend the next 20 minutes running to and fro the hall, standing in line here and there in order to find the right counter for deliveries abroad. Every counter I go to turns out to be wrong, nobody speaks my language, I gotta catch a cab to the airport, stress hormones all over my neocortex—you get the picture.

After 20 minutes it is the lady from the newsstand who decides to take action and change the idiot’s life forever. She takes a look at my package and starts walking me towards the right counter… which turns out to be located in another building 2 blocks down the street.

A yellow and a green dashed line representing a walk. Animatedly drawn from the icon of a newsstand in the top right corner, downwards, to the left, upwards, right again, up again, ending at a white-on-green checkmark.
From newsstand to happiness through care

That lovely old lady wasn’t the president of Post Bulgaria. She wasn’t even a staff member of the post office, she just happened to run a newsstand inside of that building. Yet she was the one who would make it her responsibility to take care of my needs when I couldn’t seem to find my way around the place.

My experience as a first-time user of the Central Post Office of Sofia—and as a visitor of Bulgaria in general—will forever be determined by an amazingly simple act of human kindness performed by a stranger who chose to do something nobody had told her to do, and nobody would ever blame her for if she had not done it: to care.

›Caring is the coolest thing
I’ve ever seen anyone do.‹

This article is about you if you are a person who develops, maintains, manages, or markets a WordPress plugin. If that is the case, this article contemplates your relationship to a person who uses your plugin on their website.

What we care about here are real people, not abstracted personas. There is no such thing as the ›average user‹ in this post.

We talk about real people facing a real apocalypse on their computer screen when they activate yet another WordPress plugin, and all of a sudden they face a blank page where there used to be a website, and the sky starts falling.

We talk about real people who have been told they need to set up a website in order to run their micro business, and they have been told it is going be easy, and when they do, it soon becomes hell on earth because of a bunch of pixels they cannot seem to control.

We talk about real people who end up blaming random support agents—or worse: themselves—for a problem that might not even exist for professional web developers, but has the power to destroy hours of their work nonetheless.

We talk about real stress points on a real scale that takes real effects on the real health situation of real humans on both sides of a support inbox.

We talk about people losing money, self-respect, respect of others, or even their customers.

We talk about all these things, because this is an article also about ›WP Admin‹—a highly popular user interface constantly open to and at risk of defacement.

The State of ›WP Admin‹ in 2016

1. We have heard it is going away. #RESTinPeace

We probably all agree the REST API offers exciting opportunities, and decoupled WordPress might make WP Admin increasingly irrelevant in terms of its UI in the future.

2. WP Admin isn’t going anywhere, of course. #RESTofUs

There is a majority of millions of real people out there who are and will be stuck with WP Admin for years to come.

Those people we may not see at a WordCamp; we may not even see them asking for help in a community forum on WordPress.org. Yet they are the ones who made and continue to make WordPress the most adapted Open Source CMS in the world. They secure our jobs.

For most of the plugin developers among you, those people are your market. So it is definitely worth the time taking a closer look at what kind of experience they get with WordPress and plugin UI on a daily basis.

What’s up: Admin Notices

When we explore WP Admin as a user interface, we notice 4 types of user messages providing feedback on how things are going. These are:

  • Success: Something went well.
  • Error: Something went wrong.
  • Warning: Something needs attention, or it might cause problems in the future.
  • Info: Something of neutral quality a person probably just would want to know about.

You all know these types of messages; we call them ›Admin Notices‹ (according to the hook names they are accessible by from outside of WordPress core; in fact, many of them really are setting errors by definition, but let’s k.i.s.s. and call them Admin Notices for now).

WordPress itself uses Admin Notices to communicate system-related feedback only. Things like:

  • Plugin activated.
  • Settings saved.
  • Post published.
  • Update available.
  • An error occurred.

Plugin developers, however, are free to use the same types of messages (via hooks) whenever and for whatever purpose they see fit.

We see plugins generating Admin Notices for:

  • Instructions to install other components (so called ›recommended plugins‹).
  • Compatibility warnings.
  • Critical update notes.
  • Up-sell teasers.
  • Cross-sell promos.
  • Rating nags.

An we’re not talking edge cases. As a customer support agent who gets to look at an average of 5-10 real world WP Admins in all kinds of languages on a weekly basis, my personal experience is:

It has become the rule in 2016 to have plugins stuffing WP Admin with sometimes well-meaning, but misguided, sometimes plain abusive Admin Notices.

This becomes particularly interesting when we consider human states of emotion related to these 4 message types:

  • Success: Something went well.—Relief.
  • Error: Something went wrong.—Fear.
  • Warning: Something needs attention… —Alertness.
  • Info: Something of neutral quality… —Assuredness.
Emotions related to admin notices: Whew!—Sh*t!!!—Uh-oh…—Thanks, mom.
Emotions related to admin notices

As so many plugin developers seem to be convinced that any message important enough to themselves, their strategy, or their plugin in general is worth an Admin Notice and don’t seem to care at all about what kind of chemistry those message types may invoke in the people they try to communicate to, the natural consequence is: people stop caring as well.

It has become very, very hard to get a person’s attention in WP Admin.

When you gamble on (and I’m saying the word now) user attention, you can only lose. And everyone else loses with you:

Being bombarded with messages from dozens of plugins, people learn quickly to not give a shit. Hence even critical messages get overlooked, stuff breaks, and the drama is on.

Losing a reputation is incredibly easy these days when you run a business based on a WordPress plugin.

Plugins, UI, and WP Admin

Plugins and what they do to WP Admin or not in terms of UI are absolutely significant for the interactive experience people have with WordPress as a CMS.

To a great extent (sic!), WordPress is what it is because of plugins. It is what it is because of you, the people who make plugins. You bring every possible and impossible functionality from this world and the next into WordPress.

Many enhancements of WordPress start out as a plugin. And if you, the plugin creators in this community, won’t make an effort to keep WP Admin neat and clean and usable for the people who use your products—who will?

There will always be jerks, of course. But my question is:

Why do even the well-meaning among plugin providers seem to struggle with core concepts of basic interaction design more often than rarely?

I have no data to distill an answer from, but luckily, I was trained in mind-reading by an old Apache tracker (native American, not server tool). So here is what I have to offer from reading the minds of a room full of plugin providers:

1. Many of you think you know WP Admin inside out.

But do you?

Unless you check in on customer systems regularly, chances are you develop in a standardized environment that has little in common with what WP Admin looks like out there in the wild.

Simple admin message “Plugin activated.” in multiple languages
Do you know how WP Admin looks like in the wild?

2. Many of you develop your plugin as if it is the only one people are ever going to install.

It is not.

  • They probably have Yoast.
  • And Jetpack.
  • Increasingly WooCommerce.
  • Some sort of ›security‹ berserk, and even more than one of those.
  • A caching solution.
  • A page builder.
  • And one or the other megaton of sliders, Custom Post Types, ad integrations, tracking scripts, social plugins, form builders, e-commerce extensions, and shortcode generators.

You might want to take into consideration that WP Admin is not your home. It is a shared apartment. You have little to no control over the number of other people you’ll have to live with, nor whether you get the king size bed, or a mat underneath the kitchen table.

Animation of an ever growing number of admin notices occupying screen estate in WP Admin; some even come back when dismissed before
Your plugin has dozens of room-mates.

3. Some of you still let yourself get away with the assumption that people are ok figuring out how stuff works once they activate your plugin.

They are not, and they won’t.

In 2016, people don’t figure out how stuff works anymore. People expect stuff to figure out itself, so they can go ahead and just use it.

They may find your settings page, because you placed it in that top-level menu item and bumped up its priority, so it will appear even above Jetpack. But what then? These days people expect a user interface to literally talk to them and let them know when to do what, or not.

Apps on your phone do it all the time. Great web applications do it all the time. Do we really think we are going to get away with WordPress plugins just throwing a settings page into an already bloated left-side menu and calling it a day?

People

Human beings and their interactions with user interfaces are subject to studies, and ridiculous marketing budgets. But let’s break it down to common sense here:

People interact with people.

When a human interacts with a user interface on their computer screen, what they really do most of the time is trying to figure out the thinking of ANOTHER human (or group of humans)—the one who built that very interface, and who tried to anticipate the thinking of the very person who’s now trying to figure out their thinking in order to use their creation effectively…

It is a complicated mess, but it can become the most beautiful thing when we manage to create a state of understanding and agreement between both sides of the screen, all the way through time and space.

We all know that feeling when we see something working on the screen, and we suddenly realize:

›Hey… somebody I don’t even know cared about me when they created this thing. Somebody spent time and effort in the past to make my life easier today. Wow.‹

That is a wonderful feeling, isn’t it?

That state of understanding and agreement is somewhat the Holy Grail you want to reach as a plugin developer, and before we finally dive into some specific examples, let’s take a another quick look at caring in general.

Care

There is a reason why I picked the term ›caring‹ over UX buzzwords like ›empathy‹, or—just recently—›compassion‹.

Note: Ok, so this may sound somewhat arrogant. Buzzwords? Terms like these are highly relevant for our profession, of course, yet in our industry and community I’m afraid they might get absorbed by marketing speech all too soon.

In order to understand them better, and the meaning they should have for all of us, I highly recommend you watch Morten Rand-Hendriksen’s talk on Empathy and Acceptance in Design and Community, and of course Eric A. Meyer on Design for Real Life.

Care is a verb, a do-word.
You can excuse yourself that you just don’t have a lot of empathy, or you might tell yourself you just aren’t that compassionate all the time.

You have no excuse when you don’t care. It is a synonym for consciously chosen ignorance.

Caring is one of those things you either do, or you don’t. Like picking up that piece of paper. There’s no way to pick it up just a little; you pick it up, or you don’t.

There is no such thing as ›wanting to care‹; your inner attitude is irrelevant until it shows outside of yourself, by evidence of your actions.

You don’t care, until you do.

I’m sure all of you developers who read this do care about the experience people have with your plugin. And I’m sure it’s awesome. But here’s some food for thought:

  • How much of that lady’s newsstand would exist without the post office?
  • How much of your plugin would exist without WordPress?
  • How much of your plugin’s UI would exist without WP Admin?
  • How much of awesome will be left for your plugin when the overall experience a person has with WP Admin becomes annoying, or even painful?
  • Do you care about the experience people have with WordPress?

The Plugin Life Cycle: 8 States to Take Action

Caring through plugin UI can include the same sort of small, simple acts of human kindness I was blessed to benefit from in that post office back in Sofia.

And the good news is: WordPress offers plenty of opportunity throughout the 8 states of the plugin life cycle for you to make WP Admin an even nicer experience.

In case you have never thought about the plugin life cycle before, here it is:

Animation of the list of 8 states of the plugin life cycle: search, install, activate, configure, operate, update, deactivate, delete
WordPress plugin life cycle: search, install, activate, configure, operate, update, deactivate, delete.

Each of these states usually invokes or implies certain interactions between a user interface within WP Admin and a human—interactions that you can take care of pro-actively.

Just like that lady from the newsstand in that post office, as a ›local‹ in WP Admin you would basically make it your responsibility that a person gets along well.

You don’t want to take them on a sight-seeing tour through all of WP Admin, of course. It’s theirs, you are the new kid on their block.
You do want to make sure, though, they find their way around in terms of using your plugin.

1. Search

Sample text: “Adds random lines of song lyrics to WP Admin. Useless, but stylish. Entertaining for authors and editors.”
Fictional plugin short description

When people search for a solution to their problem, give them a meaningful description in their search results.

Your plugin short description is not the place for generic superlatives. ›The best‹, ›the most‹, ›the greatest‹, ›the easiest‹ are not descriptions people will draw any value from for their decision making. Besides, you’re setting yourself up for failing. It’s incredibly easy to fail being ›the whatever-st‹.

Write your short description as if you were composing a good tweet: Say what your plugin does and why people would love it in 140 characters, and be a little entertaining at the same time.

2/3. Install and Activate

There isn’t anything to do for you during installation, WordPress takes care of that. But once a person does activate your plugin, that’s when you can score with an excellent first impression.

Be polite and say hi. Give them a clue of what to do next.
Take them on a quick tour and show them around, but make sure you keep them in control over their space. They should be able to dismiss that tour for everyone forever, or have it pop up again later.

Radio buttons on a tour pointer to dismiss the tour for everyone forever, or to be asked again later
Dismiss for everyone forever

4. Configure

If your plugin has a great deal of settings to configure, consider providing some sort of guidance through the initial setup process.

WordPress itself has a pretty neat setup wizard. WooCommerce has a great one. Could your plugin use one?

If it requires certain settings to be made before a person will be able to use it, a quick and decent wizard will take that person by the hand and guide them along.

Sample setup wizard with 4 steps and a unicorn branding
Unicorns love wizards.

And ›That Undo link for saved settings is so annoying‹, said no user never.

“Undo” link in the “Settings saved” admin notice
Undo is the most common thing on a computer.

5. Operate

Once a person has configured your plugin to run on their website, the only thing they would expect from it is that it keeps operating smoothly.

That is a fair expectation. You wouldn’t expect your car to display car manufacturer advertising on the windshield every 1,000 kilometers, would you? So don’t have your plugin do that. If you think you need other people’s WP Admin to market your product, then at least be creative about it.

Make it an up-sell feature. Instead of contributing to notice fatigue, create an eye catcher on your settings page that will entertain and provide value.

Sample settings page with sidebar on the right, colorful coupon code teaser in the sidebar next to unicorn illustration
Make your up-sell promo a feature: provide both value and entertainment.

And of course, keep those agencies and freelancers in mind who may desperately want a paid version of your plugin where up-sells will not be displayed to their clients. White-label FTW?

6. Update

You get a chance to gain user attention in WP Admin at least 3 times a year. Every time WordPress issues a major core release, you can (and should) run at least a compatibility update to let people know your plugin has been tested and will operate smoothly with the new core version.

That’s the time for you to show you care for plugin UI. Don’t just fart an Admin Notice into people’s faces, together with the 5 other poorly designed Admin Notices occupying the top 700 pixels of WP Admin.

Make your update a feature, too. Allowing you to enter their website and perform an update is an incredibly vulnerable moment for many people. Show you care for their peace of mind.

Sample update notice on the plugins page in WP Admin
Make your plugin update a feature.

Have your plugin automatically detect and solve as many potential issues as possible. Caring means to protect your kin. Don’t let them click that update button and take their chances whether their website is going to survive or not.

Plugin authors gambling on system sanity during the update process contribute to a serious problem in WordPress which is: update paranoia.

As a plugin developer you want people to update in order for you to be able to keep marketing to them. So there is your incentive to make triple sure your update won’t break their site—and in case it does, provide means of immediate crisis management and support.

They may only be another complaining user to you, but in fact they are real people in real fear and pain.

Support form with default questions and options to include relevant site data, and to grant support staff admin access
A link to a support forum is good—a support form even better.

7. Deactivate

Illustrated blue envelope with white and pink unicorn emerging out of it
›You deactivated a week ago, can we help?‹

In case a person keeps your plugin deactivated for longer and you have the chance learning about it (which may only be possible for self-hosted plugins), a polite message in their inbox can make sense.

People don’t always have the nerve to pull up your support page and post their problem. Pro-actively approaching them when your plugin has been deactivated longer than a week, can start the support process from your end and may help you win a customer back. (We do this for WP Rocket, and most of the time people appreciate the approach.)

Better make clear, though, that this is solely out of concern for their needs, and not for your marketing.

8. Delete

When your plugin gets deleted from WP Admin, the expectation is clearly that it gets deleted. Deleted, as in: wiped out entirely.

  • Files? Gone.
  • Options? Gone.
  • Custom tables? So gone!

WordPress should look like that plugin had never been there.

Don’t fall trap to the assumption it wouldn’t hurt if a person installed your plugin again after they deleted it, and all their settings would magically reappear. That kind of magic is reserved for deactivation.

If you absolutely think, your users would love to keep your custom tables and options in their database after deletion, put them in control and make total deletion transparently optional—possibly right before deactivation.

Notice asking if plugin data should remain in database, checkbox for yes/no
Put people in control over their space, make optional deletion transparent.

Care, Explore, Learn, Implement

So, there is lots of opportunity for plugin developers to really care. Sounds like a lot of work?

Well, another part of the good news is: there are no wheels to re-invent here. Just look around and learn from the best! There are plenty of examples of great interaction design out there.

Animated row of brand logos of MailChimp’s monkey, Slack’s “#”, and GitHub’s Octocat
MailChimp, Slack, and GitHub Desktop all have interactional features plugin providers can learn from.

Pretty much all you have to do is explore them, play with them, determine how those products apply caring as a design principle, code your own interactional features into your plugin, and eventually build your reputation as one of the plugin providers whose UI in WP Admin clearly shows care.

WordPress has become a mature platform—for better, and for worse. WP Admin is and will be open for you to create plugin user interfaces with. It is your choice whether your plugin will make WordPress look pretty, or old.

In any case, whether you like it or not:

Your plugin is not a separate entity; it is part of a community of components, and actively, or passively it will contribute to the way people perceive WordPress as a whole.

If anything else, think about that for a while, and come to your own conclusions.

Hopefully you’ll find caring the coolest thing you’ve ever seen anyone do—including yourself.

Charlie Brown and Linus van Pelt looking out the school bus window, Linus saying: “Caring is the coolest thing I’ve ever seen anyone do.”
The title of my WCEU talk was quoted from a Peanuts cartoon by Charles M. Schulz I found on Twitter. It may have appeared on Pinterest before.

Acknowledgements

Obviously, talk is cheap.

After my presentation at WCEU, an attendee asked the question how I would have solved a specific UI problem that had led to huge problems for one highly popular plugin provider in our ecosystem in the past.

I had to tell the truth: just from the top of my head, I had no idea. There are no shortcuts to great interaction design, context is key. Personally, I assume that particular plugin provider put tons of thoughts and effort into their solution, and unfortunately it still did not work for many.

There is a lesson to be learned from that specific case, though, that every plugin provider can benefit from:

Build for crisis early.

Solid channels of communication to your plugin users are a backup plan. You may never use, yet desperately miss them in the sort of case we all hope never happens. (Though it will, of course.)

When shit hits the fan, it is way too late to start thinking about how to communicate to people using your plugin. Establishing means of communications early and—encore—taking care of your people by making them aware of those features pro-actively, might save your own reputation one day.

Lastly, I’d like to recommend Design for Real Life by Sara Wachter-Boetcher and Eric Meyer.

I started reading the book on my way home from WCEU. Sara’s and Eric’s perspective goes way beyond WordPress, of course. And when I mentioned ›compassion‹ as a current buzzword in our industry above—the way Sara and Eric introduce the term has nothing buzzword-ish at all, but shows a way deeper understanding of what compassion and care mean for user experience design than a customer support agent could ever muster.

Feedback

Thank you if you were one of those people who approached me after my talk at WordCamp Europe—I appreciate your feedback a lot!

If you just read all this: what are your thoughts on plugin UI? I’d love to listen, learn, and discuss—comments are open!

43 reactions on “Thoughts on Plugin UI

  1. Felix Arntz says:

    Great post, Caspar! I’ll definitely try to improve my plugins to follow some more of these patterns.

    An addition that I think is important as well is that your plugin’s UI fits into WordPress. There are many (especially commercial) plugins which completely create their own UI which doesn’t look like WordPress at all – the result is that it feels like a stranger in WP Admin. If your plugin actually does something for which no WordPress UI components are available, design it still as if it was part of WordPress. Yes, you might not have the super-fancy (plugin-branding) UI you were going for – but instead users will be familiar with the appearance and layout, so they will better find their way around.

    1. @Felix: I used to agree, but came to disagree lately. 🙂

      Branding a settings page wouldn’t necessarily make a person feel excluded from their own WordPress back-end. In fact, a nicely branded settings page can add additional value to people’s user experience IF – and that’s a big ‘if’:

      • the plugin provides a larger amount of custom options which beg for a custom settings page rather than appending them to existing default settings;
      • the design clearly relates to the product’s branding, so people will intuitively recognize it;
      • the settings page loads fast and performs well;
      • any extra scripts and styles get loaded only where they should, so the rest of WP Admin remains unaffected;
      • any custom design supports useful interactional features WordPress doesn’t provide by default;
      • your design doesn’t go banana, but still makes use of e.g. WP Admin’s default fonts, font-sizes, primary button colors etc.
      • the overall decision to implement custom branding is based upon care for users, not pure marketing strategy.

      If those stipulations (maybe a couple of more) are met, I personally think the freedom WordPress gives you as a plugin provider rightly includes the freedom to extend its UI creatively.

  2. Amanda Rush says:

    Caspar,

    This was excellent, and thank you so much for the transcript, along with the well-crafted alternative text for your images. They made this post an even more enjoyable experience to read. I didn’t have time to listen to the talk right now, and my screen reader is set to 1,000 words per minute, which makes transcripts an easier read because they’re quicker than listening to the talk or podcast. I’ll listen to the talk itself when I get some downtime though.

    1. Thanks so much, Amanda! I can’t tell you how much it means to hear those alternative texts worked for you.

  3. Luc Princen says:

    Thank you for this Caspar.

    We need reminders like this more often as a community and need to get out of our “WP Admin is VERY user friendly and simple anyway”-thinking.

    1. Thanks, Luc. 🙂

  4. Great article. As you said, still 100% relevant.
    I think the WordPress project should have taken this issue much more seriously when it started.
    Devs have to be mindful of their interactions with users (beautifully explained I’m the article), but WP has to also change some stuff.

Reactions are closed.