Wednesday January 21, 2009

Making Websites that Don’t Suck

By Colin Lieberman

If you’re keeping up with Jakob Nielsen or similar research, you know that web users are the savviest they’ve ever been. Today’s average Joe is 2002’s power user.

This is a good thing, but requires the professional site creator to stay on his toes.

Here are three protips for making sure your websites appeal to savvy users (in jargon: making sure your site doesn’t suck).

Links & Scripting

Even if you’re going to do some kind of Javascript whizbang when a user clicks a link (like open up a lightbox, for example), the href element should still be a url where that content can be located.

Doing this, as opposed to href="javscript:popUpHelp('foo')" means that users can still use their browser’s feature for opening the link in a new tab.

When savvy users try to do this with your links, and it doesn’t work because of your javascript shenanigans, they think your website sucks.

This is just one aspect of a broader heavy-handed scripting problem that many sites suffer from. Try installing the noscript extension for Firefox (lots of us use it to cut down on obnoxious ads, tracking scripts, and flash), and see how well your site holds up.

It’s 2009, and reasonable to expect users to have scripting enabled to get all the functionality of your site, but it’s not reasonable to give them a completely unusable pile of suck in the absence of scripting.

When scripting is disabled, your site should degrade cleanly, providing some basic functionality. Most of the links should still work. And even with scripting enabled, the browser’s open-in-new-tab feature should work.

Input Validation

If you are collecting a phone number, ZIP code, or — God help you — social security numbers, there is no reason except laziness for text like

“Please enter your phone number in the format (123)/456-7890”
It’s obnoxious, lazy, and unprofessional.

The non sucky way is to allow me to put in my phone number however I choose. Your input validation code can use a regular expression to trim away anything you don’t want.

You should be doing this anyway as part of sanitizing your input for security purposes.

For example, in PHP (using the filter functions available in 5.2.0 and later) you could do this:

$clean_phone = filter_input( INPUT_POST, 'phone', FILTER_SANITIZE_STRIPPED );
$clean_phone = preg_replace( '/\D/', '', $clean_phone );

Simple as that. No matter what format phone number the user entered, you now have a string like “1234567890” that you can do whatever you like with.

Naturally, your Javascript input checker can do this too.

Having to fight to figure out what format is required totally sucks, and makes your site look unprofessional.


Don’t make up complicated password rules. Just choose a minimum length, say 5 characters. If people want insecure passwords, that’s their business.

Don’t tell your users how many upcase characters, numbers, etc., or what a password needs to start with. It’s really annoying. It sucks.

And while we’re at it, why on earth would you tell people they can’t use +-)(*&^%$#@! or even UTF-8 characters in a password if they want to? There shouldn’t be any reason to modify password input in any way before you salt and hash it.

Your job is simply to slow down and stop excessive repeat guesses.

When I try to sign up for an account, and I’m told my password may not contain $, has to be minimum 9 characters, and must start with a number, I think I’m dealing with a website that sucks.

The Solution: User Testing

Lots of people have different pet peeves; the three above are mine. Ask a non-English speaker, and you’ll probably hear something about websites that can’t deal with UTF-8 characters properly. Ask your grandmother, and you might hear something about the news headlines scrolling too quickly.

The responsible maker of non-sucky websites knows that there are all kinds of little things like this that make the difference between an engaging experience and a lousy one. The way to avoid these and other pitfalls is, as always, to do user testing.

Start small. Ask people in the hallway: other engineers, the receptionist, Bob in accounting. Once you’ve got something that works well for your officemates, hire people off the street (where by “street” we mean “Craig’s list”). Offer them 30 or 50 bucks to come in for half an hour (one at a time, of course).

Have the smilingest, easiest to get along with person in the office lead the session.

Make small talk for 5 minutes to warm them up and get them talking, then ask them to do small, well defined tasks, like this:

Don’t interfere, and don’t say anything except to encourage them to think aloud through every step.

Use screen recording software to capture their actions, and the computer mic to get their speech. Don’t use a camcorder, it makes people nervous.

After 2 or 3 sessions like this, you’ll have a huge list of what works, what doesn’t, and what little pet peeves you need to address.

It’s simple, it takes a day, it doesn’t cost much, and results in a website that doesn’t suck, and that makes lots of money.


  Textile Help