Sweating the Small Stuff

If there was a checkbox in your application called "Be awesome?" would you have it unchecked by default? I did.

This, then, is my sorry confession. Let's go back a little. Go with me now.

I was hooning around in my car, listening to Amy Hoy on the chasing product podcast when I heard Amy say:

Do you know Kathy Sierra? Her new book is coming out, "Creating Badass Users"

ScreeeeeeEEEEch!! I stopped the car.

My mind instantly said: "Disregard podcast, acquire that book!"

To extract phone from pocket and google for book was the work of a moment. Alas. No joy. There is not yet such a book! (Will there ever be? Let's hope so.) But I did find a few examples of talks Kathy gave with similar titles and watched this one, "Kathy Sierra - Building badass users"; recommended. Thumbs up.

This notion of making kick ass users is the crux of much of Kathy's work. The talk is brimming with excellent advice, largely focused on removing "Cognitive Leaks" -- the little distractions, problems, breakages, hiccups, and annoying microinteractions that make us feel confused, anxious, uncertain and generally unhappy with everything around us.

Then I turned to one of my products, NimbleText, and tried to look at it with beginner's eyes. Slowly I turned... you know when you turn slowly toward something, an everyday something that has sat ignored in your presence... slowly you turn, knowing, as you turn, realising, as you slowly turn... Ah-ha! The murderer! Lurking right there in our presence! Slowly I turned... Ah ha! Nimbletext! And I looked upon it with beginner's eyes. Knowing that it would now reveal itself to be an evil bug-ridden, unusable, maker of much sadness.

When you've been around something so long it's very hard to achieve this "beginner's mind". It's impossible really, for me. I've been around this product a lot. I use it for all sorts of tasks, day in, day out. Alt-tab, tappity-tap, F5, tab tab ctrl-A, ctrl-C, alt-tab. I'm so familiar with its quirks that I don't see them at all. But I tried, I really tried to look at it as a beginner, and see what little cognitive leaks I could find.

And, blow me down, I came up with quite a few!

First up, I noticed there was no tool-tip on the calculate button. I love it when tool-tips tell you the keyboard shortcut. It helps you graduate from beginner to ninja. Turns you from a good user to an expert user. Helps you feel kick ass.

So now it has that tool-tip. And the tool-tip includes details of which keyboard shortcut you can use instead of clicking the button. (F5 by the way. F5 is Calculate).

There's a little check-box called "auto preview" and I suddenly realized that the name is wrong. It's called 'auto preview' but it doesn't 'preview' the result, it calculates it. A preview would indicate some kind of partial result. But no, it's a full result. So I changed the name to 'auto calculate'. And I improved the tool-tip to explain exactly what the button does.

And "Auto calculate" is an awesome feature. And by default, it's unchecked. Why is that? Why on earth would I do that? If there was a checkbox in your application called "Be awesome?" would you have it unchecked by default? When it's turned on it means that the application starts to give you instant feedback about your pattern. When feedback cycles are shorter, everything is better. There's research that says this. There's books about it. There's blog posts on the topic. It's established fact.

So why have it disabled by default? I know my original reasoning, was that it might slow down the application. If calculations took a long time to perform, it could cause the app to become sluggish. But that's a separate problem. If I can solve that problem, I get all these other awesome benefits of instant feedback. Why wouldn't I do that? So I did that. I just solved it in a very straightforward way. I said, "if there's more than 1000 rows of data then turn off the auto calculate." Done. Solved. Move on. Be awesome.

Next I realized that the auto calculate check-box should be right next to the calculate button. (It could even be 'on' the button, if I could find a nice way to implement that.) So I placed the check-box adjacent to the button.

I noticed that there's almost no margin around the text inside the textareas. It looks ridiculous in fact! When I look at it with beginner mind, it looks so very wrong. So I added a margin to the textareas and immediately knew why I'd done it like that in the first place. CSS. Bloody CSS. There was a bit of messing around to get it correct, but eventually I worked out the magic css spells to get 100% to mean 100%, added in the margins I wanted, and moved on again.

And here's a weird cognitive leak. when you mouse over the top of each panel you notice that the mouse cursor becomes a hand... why is that? What is it about? It's asking you to click... but why? Will it break if I click it? That's a cognitive leak right there. So I put a tooltip in place to explain what would happen if you clicked at that point. Now it's not the best usability result. But it's a step up. A steady improvement. That's what I'm after.

And what is with these stupid gradient backgrounds? Gone. Removed. Never should've been there. The embarrassing thing is that I've gotten rid of them before. Then I must've brought them back. Argh! Past Me!? What a fool! Always making it hard on present me, and never any way to get back at him. Anyway, they're gone and they've been banished to 2008 where they belong.

Other little improvements went in as well. The smaller the better. I wrote them all up in the release notes, over here.. And new features too. Always new features.

It saddens me that my "beginner's eyes" seem to mostly be a little guy who shouts "tool-tips! more tool-tips!" over and over. Well, I have tried. It's over to you now. Tell me what you see, particularly if you're a beginner. What mental models have you formed? How did you form them? Were they wrong? What broke them?

My book "Choose Your First Product" is available now.

It gives you 4 easy steps to find and validate a humble product idea.

Learn more.