Smashing Magazine Lists 10 Web Usability Guidelines

by Tom Johnson on Sep 27, 2009
categories: technical-writing • web-design

Smashing Magazine recently posted 10 Useful Usability Guidelines and Findings. The 10 guidelines are as follows:

1. Form Labels Work Best Above The Field
2. Users Focus On Faces
3. Quality Of Design Is An Indicator Of Credibility
4. Most Users Do Not Scroll
5. Blue Is The Best Color For Links
6. The Ideal Search Box Is 27-Characters Wide
7. White Space Improves Comprehension
8. Effective User Testing Doesn't Have To Be Extensive
9. Informative Product Pages Help You Stand Out
10. Most Users Are Blind To Advertising

It's good information, though nothing too surprising. In looking at my site, I don't have many forms or faces. The quality of the design is mostly invisible to the content. Users do have to scroll to see all the recent post titles (sidebar ads took a priority with real estate). My links are blue. My search box is 42 pixels wide, mostly because it looked better in the sidebar that way.

The whole theme emphasizes white space, and paragraphs and images have plenty of padding. I haven't done any user testing, but I do receive positive feedback now and then. I don't have product information pages, and as for users being blind to ads, I set the ad order to mix with every page reload (this is supposed to increase visual attention).

At the end of Smashing Magazine's usability guidelines, they also offer some interesting tips on typography. According to a study of about 50 popular websites, Smashing Magazine concludes the following about the optimal typography:

• Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
• Line length (pixels) ÷ line height (pixels) = 27.8
• Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
• Optimal number of characters per line is 55 to 75
• Layouts usually have a fixed width (pixel-based) (92%) and are usually centered (94%). The width of fixed layouts varies between 951 and 1000 pixels (56%).
• The home page shows excerpts of 10 to 20 posts (62%).
• 58% of a website's overall layout is used to display the main content.

I had to check my stylesheet for some of this information. For the most part, my typography isn't too far off from what Smashing Magazine recommends:

• My line height, 20px,  ÷ 13px font size = 1.54
• My line length, 620px, ÷ 20px line height = 31
• My space between paragraphs, 14px, ÷ 20px line height = .70
• My characters per line is about 85
• My layout has a fixed width and is centered. The layout width is 1,000px.
• The home page shows the latest 15 posts (I just increased that from 10 to 15)
• At least 75% of my website's overall layout displays the main content (I moved the "What I'm reading section" into the main feed).

The only part where I deviate outside of Smashing Magazine's recommended typography is with my characters per line. I set my post width at 620px specifically so that I could show HD videos, which look best when shown at 620px because the minimal dimensions of an HD video are 1280 x 720px. Cut that in half to keep the ratios proportional, and you end up with 640px in width. Subtract 20px for padding, and you end up with 620px. (Perhaps you thought I hadn't calculated this before?) The sad part is that I've haven't posted nearly as many videos as I planned, but that's another discussion.

For more details on Smashing Magazine's typographical study, see Typographic Design Patterns and Best Practices. Here's what they cover in that study:

1. Serif vs. Sans-serif (most use sans)
2. Which Typeface Is Most Popular?
3. Light Or Dark Background?
4. Average Font Size For Headlines
5. Average Font Size For Body Copy
6. Optimal Line Height For Body Copy
7. How Many Characters Per Line?

I'll give you a short summary of that post. Most people use sans-serif fonts for both headlines and body, although it's more common with the body. The most popular typefaces are Georgia, Arial, and Verdana. Almost invariably, the more popular sites have light backgrounds. The average font size for headlines is 18-20 or 24-26px. The average font size for body copy is 13px. The optimal line height is the equation above, line height ÷ font size =1.48 (if your font-size is 13, then your line height would be about 19px). The optimal characters per line is somewhat in conflict with their findings. They write,

According to a classic rule of Web typography, 55 to 75 is an optimal number of characters per line. Surprisingly, our study shows that most websites have a higher number. We counted how many characters could fit on one line using the design's default font size. The result, which is an average of 88.74 characters per line (maximum), is extremely high. Of course, this maximal number is different from the average number of characters per line, which in general ranges between 75 and 85 characters per line. Still, the range is way above the conventional range — quite peculiar.

Aha! So my wider post width is actually similar to the post widths of the popular blogs included in their study. I think part of the reason is that popular blogs usually have a lot of images, and you need a decent post width for images to look attractive. Hence the wider width.