Carsonified

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:

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.

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.

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:

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.

Hey there Carsoni-reader, it’s me again, bringing you another weekly dose of excellence. This week’s assault on your readerly magnificence comes in the form of Open Source advocation. Recently, yours truly released his first open-source plugin - a jQuery plugin, no less.

In December last year, I built my own personal site to advertise my new-found employability - www.elliottkember.com. Then, looking at my twitter background, I figured it’d be cool to have a similar image on my own site - a bit of continuity. Then, I was talking to Greg Annandale when a thought occurred to me:

Why not turn that sexy curl into an adjustable feature?

Well, about 20 minutes later I had it working, pending a few tricky bits:

But nonetheless, I had a working curl. You can check it out on my site.

Even Ryan was impressed:

The code wasn’t very elegant, or configurable, and I hadn’t made it very easy to implement, but the thing worked. I went ahead and linked it to everyone I could find to get them to check it out, and I got a little bit of traffic:

At the time, the wonders of relative scale told me that this was a good thing. But as it turns out, it was nothing to write home about. Yet.

My good friend Rey Bango had an idea:

Why not make my fold into a plugin? I sat on the idea for a while, but decided that I didn’t want anyone else having my cool effect. I wanted it all to myself. On one hand, I use many open-source products day-to-day. My job wouldn’t be nearly as fun or as easy as it would if everything were closed-source. The shared contributions of many contribute directly to my own personal gain. On the other hand, I reasoned, why should I let everybody else profit from my hard work, and share my effect?

I agreed with open-source, I decided, but only when other people were releasing things - in other words, I only agreed with open source when I was the one profiting from it.

A bit later, I was cruising around the internets when I found, in a list of javascript effects, a link to this: a page curl jQuery plugin! After checking the source, and discovering that it wasn’t a copy of mine at all, I pondered how he’d made it onto this list. After all, lists are the backbone of the internet. Get on a list, and you’re set for life. #naiveté.

The answer was simple: This dude release the script as a plugin.

Yes, that says 2AM. That’s the last timestamp I’m going to show. Incidentally, I was wrong when I said “copycat” - that URL clearly shows a date of the 15th of December - two days before I made my page curl. Great minds, etc. I reconsidered my stance on a jQuery plugin.

Should I do it, I asked myself? Should I release this into the wild, destined to be my glory or my shame? Am I releasing the next useless gimmicky, showy, tacky Javascript effect for people to complain about?

Hell yes. Let’s do it. First off, though, I had to refactor my code. I wasn’t having my sloppy mess of javascript sitting around cluttering up the web. So I cleaned up my code, and with the help of a few articles, I turned it into a plugin. This is not a difficult task: I can’t remember which I used, but there are 527 Google results for “your first jQuery plugin“. Pick one - it doesn’t matter which. If it sucks, pick another one. Welcome to Google. If you’re actually reading this article, leave a comment with the code words: “rock you like a hurricane“. That way I’ll know.

Now for the important bit: what should I call it? Adam Cooke and I pondered the issue:

Clearly, this name wasn’t awesome enough.

And with a GitHub repository, the Sexy Curls jQuery Plugin was born.

I spewed some of my trademark absurdity into HTML form:

And I passed it on:

Now, Rey tweeted it from @jquery - and here’s that tweet preserved for posterity:

Instantly, some 3,000 hard core jQuery nerds heard the word about my plugin. RT after RT, FWD >> FWD, and so on. Quietly, my plugin propagated around the internets like W32.Blaster. You can watch the tweet stream - it’s still going. I graced the front pages of Ajaxian, YCombinator News, hit #9 on Del.icio.us, and countless other aggregators. Help even came from other GitHub users - Cheeaun was nice enough to give me a hand.
I also surreptitiously included a link to my Twitter page in the first line of the page. As usual, the internet is just my big race for followers.

What did that do to my analytics?

That’s insane. My pageviews were up by about 2,000%. That’s not all Sexy Curls traffic, either - although it pretty much mostly is.

That’s wa-hay above normal - which means people are clicking through. My name is getting out there.

That’s the content for sexy_curls.html - loads of pageviews, a strangely high time-on-page, and somehow I have made 8 cents. I look forward to receiving it.

As usual, a high Firefox/Safari split. I’m proud of my visitors! Somebody also tried to use their PlayStation:

But I haven’t heard back on whether the curl worked. Even the Googlebot is rendering Javascript these days:

So I guess it’s been checking out my curl, too. Hope it liked it.

What did I learn? Open Source isn’t just kernel-hackers in their parents’ basements. Open Source is everywhere. Anything you do can be open-source. So, if you aren’t already, release stuff. Release good code, release bad code, it doesn’t matter. It’ll end up being better than you could ever have intended. Use other peoples’ code - FIX other peoples’ code.

So far, there haven’t been many reports of sites using the Sexy Curls plugin. But that’s okay - it did what I intended it to do. It sparked ideas, made a few gaze in wonder, touched the corners of the internet far and wide, and maybe - just maybe - it inspired someone to start writing code.

Code is like a magic penny - write it once and you don’t get any. Lend it, send it, give it away, and it comes right back to you.

Mike (mikekus) and I (ryancarson) have been working really hard on the design for the front-end site for Orchestrate, Andy Wright’s new web app. We’ve been brought in to design the ‘public’ site that explains what the application does and (hopefully) gets you to sign up to try it out.

Read the rest of this entry »

A few years ago I came across a link to an article about a report a New York based graphic designer called Nick Felton had published outlining in his year in numbers. Inspired by the design I dropped him a quick email asking if it was possible to get a copy as a PDF. To my delight a few hours later a copy dropped in my inbox. I have been following the reports ever since.

Read the rest of this entry »

YouTube has added a really nice touch to their site that encourages people to explore and view other videos. This has the obvious financial benefit to them of increasing video and page views, thus increasing advertising revenue.

Read the rest of this entry »

Recently, we’ve been compiling a few of our websites together. This is a really cool idea, because it allows us to use more of our data in more intelligent ways, and to keep a cleaner, more DRY codebase. It also means we can start to replace some of the parts of our systems that possibly aren’t as helpful as they could be. Case in point: the 500 page!

Now, don’t get me wrong - this page is pretty informative. It clearly shows you that something’s gone wrong. However, it’s not very helpful. It’s simply a message. So I thought to myself, “What would I like to see on an error page? Clearly this error isn’t my fault - so I should have some options here.”

Changing this error page was, in my mind, a big thing. This error message has been at the company longer than I have. Does it get a severance package? I mean, it doesn’t take Fridays off. It never turns up late. It always stays behind and works while we have parties. It doesn’t even play Guitar Hero. Short of monit, it’s probably one of our most diligent employees. Even if it stopped working, I’m sure it’d show itself as its own error page. That’s commitment… or, possibly, infinite and fatal recursion.

So what could replace this trusty workhorse of a page? I put myself in a user’s shoes. Well, I thought to myself, I’d really like to notify the  developer directly. That would mean that this might get fixed, stat. Does that mean a phone number on the page? An anonymous email address? Both of these things seem far too difficult. For instance, I cannot work the Carsonified desk phones correctly; they have many, many buttons. Once, my particular unit started typing letters instead of numbers. And OSX seems to enjoy stalling whatever I’m doing by opening Mail.app every time I click a mailto link.

Nah, let’s put a FORM on it. One that sends the message to an independently-hosted site to process. That way, if the site were to go down, Dreamhost-style I’ll still be able to get hate-mail from all our users.

That’s not going to be enough, though. If I’m clearly not to blame for this evident failure, I’d like to know who is… so there should be some sort of backup contact details. Details that clearly aren’t just a blatant ploy for fame, admiration and Twitter followers.

Now, the worst part about making a 500 page is that, if you do your job right, nobody will ever see it. But things do inevitably go wrong, and a good 500 page is a useful tool to have around for when they do. This is 2008 - hiding behind a blank error page just isn’t enough. If you care about your users, and your application, you need to know when stuff goes wrong.

Current number of 500 page emails: 2

We’re for a better web.

So we’re about to launch the brand new FOWA Miami 2009 site and we thought is was about time we got our arses into gear when it came to making accessible and easy to use websites.

That’s why we’ve created the “For a Better Web” badge. Sporting the badge means we’ve done our best to make our sites as accessible and easy to use as possible.

We’re also teaming up with www.abilitynet.org.uk who are going to help us keep on top of producing accessible sites and projects in the future.

“For A Better Web” is going to be an ongoing and evolving project. We’ll keep learning and we’ll always do our best to make our sites easy to use for everyone.

We’ll be posting more about this in the coming months :)