Design & UX
Article

Userstyles, ‘Molly Guards’ and Idiot-Proofing the Web

By Alex Walker

Here's a quick pop quiz. What is 'Poka-yoke'?

A pokemon?

Is it:

  • a). A tasty, freeze-dried egg snack from Thailand?
  • b). A Woodpecker-like Pokemon?
  • c). A Japanese system for mistake-proofing?

If you answered 'c' well, done, you get a gold star!

Poka-yoke was invented by the Toyota Production System and is an approach to eliminating operator errors by making it impossible (or extremely difficult) to make them. It was originally known as ‘baka yoke‘ which translates to ‘fool proofing’ or ‘idiot proofing’.

You're probably already aware of products using this idea. My manual Volvo won't even attempt starting unless the clutch is engaged.

In a similar way, it’s now impossible to insert Apple’s lightning cables the wrong way, because — unlike the previous cable design — there IS no wrong way. Even most electrical power outlets are designed so the only way to use them is the correct way.

This is a really useful principle to build into our designs — and even to retro-fit into the tools we use.

Poka-Yoking the Web

I spend a long time in WordPress, so I feel like I’ve got a good lock on its strengths and weaknesses. My biggest pet peeve is on the WP post composition page.

The WordPress admin

As this screencap shows, the page is almost entirely tones of wispy whites and light grays under dark text. As a writer, most of the time you are going to be pushing that drab, unobtrusive 'Save Draft' button on the top right.

The main visual exception to this 'sea of grays' is that lovely, big, blue, enticing 'Publish' button on the right.

Now this is a button you REALLY don't want to push before you're ready because it instantly unleashes a surging cascade of RSS entries, tweets, Facebook posts, Discourse entries, and who knows what else.

Nothing to see here...

There is no ‘undo’ or CMD-Z for that, so getting absent-mindedly lured into sending a half-baked, half-edited post out into the universe is a very bad look.

(So I'm told… on good authority… [whistles innocently]..).

So, what can you do about it?

Well, you could begin campaigning for WordPress to change it. Power to the people, right on! But how long you got?

You could write a legit WordPress extension to fix the problem, and if you did, I would salute you, sir or madam.

But sometimes even getting permission to install a new WordPress extension can be a roadblock. 'How will this extension impact server performance? Is it compatible with WordPress x.xx….? Do we really need it?'

Sysadmins are paid to ask these questions, and we often lack good answers.

Hitting it with Stylish

One often-overlooked way of tackling these types of UI problems is to hit the issue directly in your browser.

Stylish for Chrome is one of a handful of userstyles extensions (Stylebot is another) that let you re-engineer the sites and web-apps you use every day.

If you haven’t used one before, these extensions allows you to automatically re-code the CSS on any site you target each time you visit. Want larger textboxes on Facebook? Re-code it. Hate the body font on a blog? Re-code it.

As frontend people, we tend to notice UX problems more keenly. This is your chance to fix them.

The Molly Guard

The Molly Guard - Photo by Mark Wahl

The Molly Guard – Photo by Mark Wahl

Today I want to run you through a userstyle that I call 'The Molly Guard'. The original 'Molly Guard' was an improvized plexiglass cover for the 'Big Red Switch' on an IBM 4341 mainframe computer. Apparently 'Molly' was the programmer's daughter who reset the big red switch twice in one day.

Fair enough too. Big red switches are hard to ignore, after all.

So, I wanted something similar to protect the publish button from absent-minded clicks. If you haven't used Stylish before, here's a quick lesson.

  1. Install Stylish (there are version for other browsers).
  2. Go to the URL/app you want to tweak.
  3. Use 'Inspect Element' to find a HTML class or ID you want to change. In my case, I found the ID of the WP publish button was '#publish'.
  4. Click the Stylish button and hit 'Write style for URL'.Write style for URL
  5. Give your new userstyle a name – mine was 'The Molly Guard' – and start writing CSS.In my case, the quickest, dirtiest solution was to make the publish button tiny by default, but to expand it to normal size when you hover over it for a second — a hover state and a simple CSS transition provides the magic. I figured that would be hard to do by accident.
  6. When you're done, hit 'Save' and you're in business. You should see a small red notification on your Stylish button telling you the userstyle is active. Your new CSS will now automatically run on that domain any time you render the site in that browser. You also can tweak your userstyle any time you like through the 'Manage installed styles' panel.

Animation showing the Molly guard in action

Here’s the result.

Let’s be clear: the Molly Guard was never designed to be a polished product. It’s more of a McGuyver ‘wire-and-chewing-gum hack’, but I suspect it’s already saved me many times over. I could spend more time writing a more elegant solution, but this one does the job – it ‘satisfices’.

I also use Stylish to tweak Campaign Monitor, Tweetdeck, Groupon and Spotify amongst other sites. If it runs on CSS, you can unleash your CSS superpowers upon it. The cool thing is, you can stop complaining about bad UX on sites and just fix it and get on with life. It’s quite cathartic.

A few readers have mentioned that they prefer Stylebot or even UserCSS. These look great and it’s really just the legacy that has kept me on Stylish, so check them out. Stylebot certainly appears to have a better social/sharing aspect.

Guerilla Feature Development

One interesting potential use for Stylish is a kind of guerilla feature development method. You can build a working prototype of a new feature — perhaps new modals or navigation changes — live on your existing site without needing to touch any of the source code.

Getting buy-in on a new feature may be easier if your client, manager or test subject can see it working on a real site. I’ve used this method twice and it’s been very effective. Sometimes userstyles are the fastest way to get a usable result.

Originally published in the SitePoint Design Newsletter

Comments
ralphm

I've tended to use Stylist for Chrome, but I'm looking forward to trying some alternatives. I still miss being able to place my user style sheets in a local folder, though, like I used to do on Firefox.

alexmwalker

Yeah, I use Stylish mainly because I already have about 10 scripts that I'd have to move to any new system. It lets you share your script to userstyle.org but it's a terrible UX. Tediously utilitarian to look at, but AMAZINGLY horrible to use.

At one point it warned me about a scope issue, and showed me a link to a github page to read about how to fix it -- without actually linking that URL text!?! Google account oauth fails. I tried for 10 minutes to upload Molly Guard but ended up walking away.

Someone did point out Stylebot and it does look quite good. Its basic mode has properties panel which you could teach most kids to use. The advanced mode lets you write straight CSS (all I want personally) but lets you share (or at least backup) your script to stylebot.me.

Took me about 30 seconds to upload molly guard there, and seems to have a pretty active community too.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.