10 Usability Guidelines

The 10 Usability 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).

According to a study of about 50 popular websites, we conclude 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 guidelines 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).

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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s