Let me set the scene: You’ve just called a certain major utility company (who shall remain unnamed) because you want to switch to online billing. They set up your account, but when you try to log in, it fails. You try again, even try the password recovery option, but still no luck. Your account doesn’t exist.

So, you call the company back and wait on hold for 52 minutes (you time it). The customer service agent can’t find your account either, and after being passed from agent to supervisor to manager, you’re told they couldn’t find your account because—wait for it—whoever set it up didn’t capitalize your first name.

Website fail. And sadly, a true story.

This is an extreme example of web usability gone awry, but the principle remains the same. You can do all the tweaking you want to your website design, but you won’t know it actually works until people start using it.

As with any business, it’s tough to watch customers repeat the same, simple mistakes over and over again. So in a most recent newsletter from UserTesting.com, they compiled a “Critical Mistakes of 2011” list, accompanied by video evidence. The videos lack the fiery frustration of real user experiences (keyboarding throwing, mouse slamming, cursing, etc), but they do a great job of showcasing the common mistakes made by websites.

Most companies would be hesitant to send out the year’s highlights in May, but something like this can’t wait. These usability flaws might seem minor, but to real users, they’re frustrating, annoying and a great reason to leave the site and shop somewhere else.

For more info, the US government has a neat site (Usability.gov) that’s intended for government web designers, but it’s the best one-stop usability resource I’ve found. It has great tips, methods and stats and goes in-depth on things you might not think about, like how colour-blindness affects usability.

If you’re more of the visual type, you can always check out UserTesting.com’s “Worst of the Web” YouTube channel, which contains a seemingly endless number of web bloopers. There are some funny ones, like when a woman did a Google image search for “Mexican lowriders” (don’t ask me why) and found a photo of an evil-looking snowman cookie labeled “EBay.com animated low-rider Christmas motorcycle dachshund.” She clicked on it (who wouldn’t) and was taken to a “Reported Attack Page.” Amusing.

But my personal favourite is the one about creating a new private message in Facebook, and how you can’t move the message box out of the way if you want to copy and paste what’s behind it, or even just read the open inbox message.” It’s so true, and until I saw the video I thought I was the only one bothered by this.

I’m not going to boycott Facebook over this because that would put me in the “high maintenance” category, but it’s nice to know someone else cares.

Written by Stacey Santos ­čÖé (THANK YOU)