#1. Form elements without a label tag. It really bothers me when check boxes don’t have an associated label tag and you can’t click the text next to the check box. While its not the biggest usability faux pas one can make, it goes a long way to demonstrate someone’s attention to detail and their comprehensive knowledge of HTML. Since HTML/CSS is one of those skills that’s very easy to understand the basics, yet has a huge impact on usability, Googleability (a.k.a. SEO), and accessibility, its very important to be able to discern high quality HTML from someone who just hacks away until it looks fine in IE6. Here are examples of check boxes from two companies I respect; Shopify does it correctly, while 37Signals does not.
Shopify
37Signals’ Basecamp
The code for a proper checkbox is simple:
<input type="checkbox" id="tos" name="tos" /> <label for="tos">I agree to the Terms of Service</label>
#2. Hover over pop up windows. When the Internet was first invented by Al Gore, pop up windows were a huge source of advertising. Nowadays every modern browser has pop up blocking and only the least scrupulous sites (viarga pushers, porn poppers, “health and fitness” tips subscriptions) still utilize pop ups. Yet today there are entire companies dedicated to “in text” or “contextual” advertising. They create fake links out of keywords on your site and annoy you with a javascript pop up window when you hover over the link. Snap.com calls it a “user experience upgrade” by providing a tiny preview thumbnail of the page the links goes to in addition to an advertisement. I would call it a waste of bandwidth that just slows down your site and causes annoying unexpected pop ups when users move their mouse around.
One way AnandTech “monetizes” its content is by annoying its users.
When Xanga first implemented this, there were tons of users asking how to turn it off. Luckily there’s a setting in your preferences, but its unfortunate for all the people who find it annoying and don’t try to see if you can turn it off.
those 10,000 monkey pounding on a keyboard until it looks right in IE6 coders make me so angry
Holy moly. You’re so right about the clickable checkbox labels. And even though I’ve been bothered by this on other sites before, I never really thought about implementing it on my sites. Duh. Adding it right now. Thanks!!!
And those dang hover pop-ups are a major pain in the backside. Forcing readers to watch where they put their mouse pointer while reading is just nuts.