Website Design, Readability and Usability

Mention the concept of readability and most of us think of things like Flesch-Kincaid scores and grade levels. But there’s another side to readability that is too often overlooked: design. Here are a few points to consider when you are guiding your design team or evaluating their content-related work.

Mention the concept of readability and most of us think of things like Flesch-Kincaid scores and grade levels. But there’s another side to readability that is too often overlooked: design.

As a new website is being designed, layouts are typically created for all page types. Even if dummy or “greeked” content is used, that content is styled to match the overall design and with the intention that content on the site will match.

That’s a good first step toward ensuring solid usability, but placeholder text rarely has the same range of elements as real text — the headlines and subheadlines, bullet points and pull quotes, and most critically, the links that are an important part of any website.

To combat the problem — and to keep coders from making design and usability decisions as they build out the site — here are a few points to consider when you are guiding your design team or evaluating their content-related work.

Readability: Content vs. Control

If a website does not create a distinction between editorial content and navigational controls, you will sense a problem. You may not notice it in the way a design or UX expert would, but you will notice it because the site will make you stop and think, perhaps just momentarily, about whether what you’re looking at is information to be processed or a way to move around the site.

This is rarely an issue for the main menu on a site, which are set apart from page content quite plainly and is usually consistent on nearly every page of a site. You’re more likely to run into issues with submenus and, especially, with content that doesn’t quite fit the site’s overall structure.

The latter occurs when a site wasn’t built with, say, a third level of pages in mind, and there is one small area of the site that needs that extra depth. Hardly ever will a content manager want to be bothered with calling in the designers for so small an issue, so the extra level is created as an afterthought.

Without a designer and with the inevitable focus on speed, it’s no wonder you can wind up with content that looks like navigation and navigation that looks like content.

Linking Properly

Menus always make links obvious, but there are times when it is necessary — and more appropriate — for links to appear as text within the page content. How you set these links apart is an important part of usability and a key design consideration. That said, this is a place where a designer can sometimes get in the way.

While nobody wants to see text links that look like they came straight out of 1996 — except maybe Craigslist — but from a usability standpoint, that’s a far better alternative than links that are designed to “match” the page design to the point that they are nearly undetectable. Yes, a dark gray link will match black text better than bright blue, but nobody is going to know it’s a link — especially if it’s not bold, underlined, or a different typeface.

Craig's List Screen Shot - High Readability?

There’s a lot of ground in the middle between these two options. Be sure to maximize usability first and design second.

Does It Scan?

There are hundreds of resources that will offer opinions about how long each line of text should be on your website, how large your type should be, and even whether serif or sans serif fonts are more readable. You can drive yourself mad trying to find rules to follow. Your best bet is to keep it simple.