On Usability

I’d appreciate it if you read this entire article before commenting.

So there I was, in a RyanAir Boeing 737-800 coming back from FOWA Dublin. Having just spent three days partying it up I was a little under the weather. It was late, it was raining, and I wanted to sit back bolt upright, read my Jeremy Clarkson book and drink my €5 Coke.

During take-off, the crew turn off all the lights in the cabin. I like to imagine this is because the pilots think it’s more fun taking off in darkness. I was surprised, though, to hear the sound of chimes from all around me, as passengers pressed the “I need a napkin” stewardess button. Were they so frightened of the dark that they wanted a hug and a €3 cookie? I shrugged it off, and reached for the light-switch so I could continue reading.

I was confronted with this:

The upwards view from my seat

That’s right – the buttons have no lights on them. So, when the cabin lights are out, you can’t see which button does what.

Now, the 737 is a good plane, built by clever engineers, and even when bought by the lowest bidder and covered with advertisements, it’s still an engineering miracle. It weighs 80,000kg and is capable of carrying 189 people 5,600km at Mach 0.8, which is no mean feat. Clearly the people who made this machine know what they’re doing. So why couldn’t they, at a cost of about €5 per seat, light up the buttons on the ceiling? I don’t know, but I have my own theory:

Usability is difficult.

As with many things, usability comes from a military background. The concept was invented during the course of World War 2, when the Americans realised they were blowing themselves up with grenades a bit too often to be statistically viable. So they streamlined the product, gave their chaps instructions like “throw it toward the enemy”, and then, as far as the film industry would have it, proceeded to stomp all over Europe smoking cigars and shouting at one another. The P-51 Mustang was a miracle of simplicity too – by reducing the number of switches and dials and buttons, they let the pilot concentrate on what he was doing – which is vitally important when you’re whizzing about over France upside-down at 700 miles per hour.

P-51 Mustang! Caddilac of the sky!

So clearly, removing things is the shortcut to usability. Everybody’s heroes, Apple, Google, and 37Signals do this to great effect. The fewer buttons I have on my page, the more I start to feel like that Mustang pilot. My Macbook Pro is the Cadillac of the Sky.

Hello, I'm a Spitfire. And I'm a Mustang.

The problem is, though, sometimes just removing things isn’t the whole answer – as with the 737 and its buttons. Usability is something that you need to study, and practice, and think about. It doesn’t just happen.

This brings me to Balsamiq. Sure, it’s a great tool, if you like post-it notes and Comic Sans. Okay, it lets you build mockups of your websites that look like drawings. But let’s remember one thing: it doesn’t necessarily mean you know what you’re doing.

I understand what the tool is for, and @balsamiq verified this for me: creating 5-minute mock-ups that can be thrown away. But that’s ALL it’s for. It’s really, really not for full-scale wireframes. If you think about this, it’s obvious. You don’t get to re-use components, there’s no layout grid to speak of, and you can’t save files together in a folder-type-arrangement. The tool simply wasn’t designed to do these things, because it’s not meant to.

But the problem is, it’s available to the masses. And that means people are going to start using it. It gives people the illusion that they know what they’re doing. Being a child of the internets, I couldn’t resist but make a funny image of this, complete with Impact writing. Now, if I were really mean, I’d use it. But I won’t. Well, I’ll use it satirically and then apologize, because that seems to be the way of the bloggers these days:

A picture of a kid drawing with crayons. It's a bit of a low blow.

Thankfully, you’re reading this ENTIRE article instead of just looking at the pretty pictures. Right? Good. You won’t be offended, then, because that image is just for satire purposes – a cheap laugh, and a cheap shot. I’m sorry! I should write for TechCrunch.

The problem is, as I was saying, that your clients are about to start doing usability. They’re going to start doing your job. I’m not concerned about the money involved here: FrontPage, Dreamweaver and .NET have been around for years and I’m still making internets. I’m really more concerned about the quality of what you’ll end up producing, in the same way I love finding MM_* functions in websites that I pick apart. When you lower the barrier to entry, people start using simple products for complicated things – and then you end up with crap.

You can’t tell the client that, either, because they’re proud of what they’ve done. They hand you their stack of .bmml files with a big smile, like a 5 year old who’s finished a drawing. The only difference is that instead of just sticking the drawing to the fridge and giving them a chocolate bar from the Treat Drawer, you’re supposed to publish the drawing, put your name next to it, and then accept the criticism. You don’t want to tell them that what they’ve done won’t work, because you’ll break their hearts with the sad truth, and they’ll go off and find some other poor sap who’ll knuckle down and produce it.

If a client comes to you with a mock-up of their website, that’s fine – they’ve thought ahead and given it a shot. Now, when you apply yourself to it, you have something to work from – and even if you go the other way, you still know what you’re avoiding. But if a client comes to you with their own full set of wireframes, what on earth are you supposed to do?

@balsamiq is a very clever, and friendly chap, and his product is cool. I like where he’s going with it. What I’m trying to say is that the problem doesn’t lie with the tool – it lies with the way it’s used. The bottom line is: be careful. Just because you can do something, doesn’t mean you can do it right.

In fact, there’s a whole talk I’ve got planned based on that very concept – and I’m trying hard to get to speak at a Future of Web Apps event. Shameless plug? Me? Never. Anyway, it doesn’t matter, because you’ll have stopped reading at the last image and proceeded straight to the comment form to rant at me for being nasty. That’s the beauty of the web – everyone can have their say.

Image credits: Usabilitylabrental.com for the cockpit photo, farmerdoodah on Flickr for the upside-down Mustang, and @elliottkember for the satirical internet image.

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

25 comments on “On Usability

  1. Most of daily use products probably just never heard of usability term. Not to mention the possibility to hire the guy who can make their products usable…

    TV remotes especially sucks on this. Come on, out of this hundred of buttons how many do we actually use? Four, five? REMOVE THE USELESS ONES, PLEASE.

  2. Great post Elliott!
    I’ve often had a rant at not just airplane designers (who can’t put the recline button in any obvious place) or architects (who make me embarrass myself by pulling on a push bar… no, putting a big “push” sticker on the door doesn’t fix the problem!).

    Everyone pipes up about usability these days, but usually without any backing or studying on it (usually saying, “that’s not how I’D use it). Now we know how typographers felt like with the advent of the computer! We really didn’t think the amateurs would stay out for long, did we?

  3. This reminds me that I have at home; oil paints, expensive horse hair brushes and many lots of canvases. However I am not yet a famous artist. What gives? I’ve got all the tools of the trade, but I’m not a super rich artist?

    Great post, I do completely agree with the point though that just because anyone can create a mock-up or wireframe, etc with software, doesn’t mean they have the skills to create something beautiful or useful!

  4. Wonderful rant Elliott. Well written and ecologically poetic. A+

    I’m not a designer. I don’t do wireframes. I’ve never used Balsamiq (except on salads). I won’t hate anyone who does use it.

    We all like to try something new and not be an expert at it. At the end of the day it’s how we cope with the criticisms that makes us progress. If every teacher we’ve ever had just patted our back, said “Well done” and stamped a big ‘A’ across the top of our papers, we’d never get anywhere.

    I say let them use Balsamiq for all their attempts at glory. Shoot them down with that parental-mild pedantic tone: “That doesn’t look like a man, Jimmy, that’s more like a Blascorrg from Elon VII! And you call that a car?” It can only help them grow! … Jimmy became a fine surrealist painter.

    My point? Next time you fly in a Boeing 737-800 at night, take a torch.

  5. Good post dude, I definitely agree with that line “The bottom line is: be careful. Just because you can do something, doesn’t mean you can do it right.” I’ve had to stop myself a few times and remember that!

  6. Well done. The part about finding Dreamweaver’s MM_* functions when picking apart a web site make me smile. That paragraph pretty much matched my thoughts in that regard, and I’m sure that’s the case with so many others who are in or who have been in the business.

  7. I find myself despairing at businesses that have bought Sage Accounts because their auditors said it was a good package. Good for what though? Producing final accounts and a VAT return maybe, but hopeless for providing meaningful management information.

    Put price and pride to one side, just for a moment, and ask yourself, is it fit for purpose?

    Great blog – sometimes a rant really helps. Or does it…

  8. Here is a thought. Usability of a product should be tightly coupled with the end user of a product. If you go purely off of standards to build an application, you could be building an application that the end user will not use. Who better to define the usability of a product then the client (who I would hope has done their homework on their target market). Give more credit to those that write your checks.

  9. Hi Elliot, Peldi here from Balsamiq. I must first of all thank you for the free publicity! ;) I actually feel like it’s quite a milestone for my little tool to cause you these problems, it means people are actually using it! :)

    All jokes aside, I think you nailed it when you say “the problem doesn’t lie with the tool – it lies with the way it’s used.”

    Sure it might feel awkward to shoot down a client who comes to you with 50 wireframes made with Mockups over the course of 2 days, but to me that’s an opportunity for contributing to the World knowledge on usability! :)

    Clearly your client cares about UX, or they wouldn’t have hired you, right? They could have sent the same mockups to some rent-a-coder service, but they didn’t. Like Simon says above, “shoot them down with that parental-mild pedantic tone”…in fact, charge them for a quick lesson on usability, and use their project’s mockups for it! They’ll leave feeling smarter, happy that they contributed to the project and happy that they hired you, don’t you think?

    I am also surprised, and I must admit a bit flattered, that this issue only comes up now that Mockups is around. You never got a client coming to you with a notebook full of scribbles before? Is Mockups really more enticing and empowering than pen and paper for the non-initiated? Now that would be powerful! :)

    I say set expectations up-front, include an optional “usability training” phase at the early stages of any project, raise your rates because of it and live happily ever after! :)

    Let me know if I missed any of your points, I am enjoying this conversation, thank you!

    P.S.FYI…I failed twice to post this comment via Firefox 3 on OS X…it just reloads the page with no feedback. Trying Safari now, fingers crossed!

  10. The P51 analogy paints a vivid and memorable picture and makes an excellent point.

    I’ve used Balsamiq for several months now and it’s the fastest way I’ve found for presenting a user interface for discussion and revision.

    I agree that the product makes it so easy to produce mock-ups that it can result in impractical UI’s in untrained hands. Does this mean we should keep it a secret? Perhaps Balsamiq has presented an opportunity to further democratize the craft application design. I can imagine an extensible Balsamiq, that much like a spell-checker(perhaps more like a grammar checker), could in real-time validate the mockup against an community maintained library of design conventions. The XML format of the .bmml files lend themselves to this time of analysis. With this in place, the UI authors could be educated on the basics, avoid common mistakes, and have the satisfaction of creating something usable. The community development and debate of the design conventions might also help to canonize and evolve the craft.

    On a side note, although many might find this a further incursion on the sacred domain of ‘experts’, I’ve always felt that the bmml format also lends itself to translation into forms like html/css, and mxml.

    Thanks for the post.

  11. Good post Elliott I saw the stream between you and Balsamic on twitter and was interested in what you were saying. I agree Balsamiq is a good tool, but it can be mis-used. It is an easier way to give your developers mockups of what you are thinking for your site but that is pretty much it.

  12. The reason, I believe, that lights are dimmed for landing / takeoff is so that your eyes become accustomed to the dark…. which is safer if there is a crash et.

    Hence that is a safety feature.

    The problem is that clients have requested that they still want to be able to see (hence have been given lights which they have to turn on themselves) – but the clients (passengers) probably don’t understand the safety implications of putting their light on.

  13. I’ve found that the majority of clients using our wireframing tool are designers and developers with good experience, who want a faster way to produce mockups, to get ideas across to coders, speed up the process, get feedback from their own clients or to pitch for work that they may or may not get. However, an end user may start with the ideas, but the designer has to take over at some point to make sense of it. Either way, anything that reduces confusion is a good thing, and the more tools to do this, the better.

  14. If a client comes to you with a shitty mockup you will loook in their eyes and clearly explain to them what is wrong with it. Eg. links cant be pink and bold because all browsers use by default blue underlined links

    You will also have to back up your claims with articles and studies otherwise the discussion will turn into a battle of the egos.

    If nothing works “I am a professional web deisgner and you are a professional insurance company/car dealer/ flourist/whateer… and I dont tell you how to insure/sell cars/arrange flowers/whatever…” is a little arrogant way of telling them to let you do your job.

  15. Like others have said, this seems to be the same discussion that designers of all kinds have had for years. Desktop publishing apps opened the door to non-layout experts, Photoshop and digital cameras made everyone think they could be commercial photographers, and there are endless stories of clients trying to design their own logos. The way we should view any new, accessible tools do is that they enable more communication.

    Having clients use wireframing/prototyping tools is a good thing because wireframes and prototypes are not end products. They are a means by which to engage in a discussion. One of our mantras is “prototype early, share often.” You want to avoid assumptions and misunderstandings. These tools help you do that.

    Whether it be Balsamiq, pen and paper, or our product, ProtoShare, wireframing helps save time and confusion. These new apps allow wireframes to be created quicker than ever. If your client proudly brings you a stack of wireframes, you’ve now got a place to start. If your client is unwilling to budge on any details of their wireframes, or is going to be hurt if you offer your professional opinions, the wireframes are going to be the least of your problems.

  16. I actually work at Boeing where I’m a supply chain analyst by day ordering parts for the Stowbins on the 737 & 777. I’m totally gonna try and fix that major oversight. I can’t say that I’ll be successful or even know where to start, but since we build the stowbins, I think we may also be in charge of the overhead console. It will be a fun adventure.

    As an aspiring web designer, I am quickly realizing the process that is UX. I’m building my own site and I find myself frustrated when people don’t navigate the way I do or how I want them too. It’s been very eye-opening, and I’m excited to do more research as I continue to develop my site and sites for future clients.

    Thanks for the great read.

  17. Well said dude!

    I often come across major usability fails and have a good laugh. One major one is this piece of accounting software I have to support at #thedayjob.

    If you accidentally click on the icon, you get the login splash screen. However, you cannot just close this and carry on. You have to log in to the app, wait for it to load all the front page information and then log out and close the app. WTFOMGBBQ!?

    Anyway, I fully agree. I’ve seen clients get handed a brand spanking new, standards compliant e-commerse solution that cost them thousands only to paste in information straight from Microsoft Word and think they’re all clever. (Like we would have charged you all that money if it was as easy as copying and pasting, you bloody pleb!)

  18. Good article, in fact I was thinking about something similar the other day.

    I was sat at Euston station and in front of me was a row of people sitting on seats (as you do), behind them was a large map of ‘Travelling from Euston’ only you couldn’t read it because all these people were sat in front of it. Doh!

    Especially odd when you’ve got a big empty space on the wall with no seats in front it. Anyway, next time you’re in Euston take a look…… and try and read the map with people sat in front of you (I’m sure they find it off putting with someone staring at the top of their heads too.)

  19. Pingback: links for 2009-03-11 « Brent Sordyl’s Blog

  20. Hey

    I know that this is really a post about usabilility… but I think we have to give Boeing their dues.

    My guess is that the engineers at Boeing lit the buttons. But the skinflints at R**nair (Dublin + Boeing connection) wouldn’t pay for them. In the same way they don’t buy pockets for your mags or the hook to hang your jacket.

    Usability aside… next time to Dublin check Aerlingus.com. Low fair competition + union legacy = low prices and flag carrier trimmings.

    I’m off to try Balsamiq.