Marketing Technology Blog

Readability is the capacity to which a person can read a passage of text and understand and recall what they just read. Here are some tips for improving the readability, presentation, and expressiveness of your writing on the web.

1. Write For The Web

Reading on the web isn’t easy. Computer monitors have a low screen resolution, and their projected light quickly makes our eyes fatigue. Plus, many websites and applications are built by people with no formal training in the art of typography or graphic design.

Here are some pointers to consider during the writing process:

• The average user will read at most 28% of the words on a web page, so make the words you use count. The guideline we suggest to our clients at Tuitive is to cut your copy in half, and then cut it in half again. We know this makes your inner-Tolstoy cry, but your readers will appreciate it.
• Use clear, direct, and conversational language.
• Avoid “marketese”, the exaggerated boastful text that fills bad advertisements (“Hot New Product!”). Instead, provide useful, specific information.
• Keep paragraphs short, and limit yourself to one idea per paragraph.
• Use bullet lists
• Use the inverted-pyramid style of writing, keeping your most important information at the top.

2. Organize Your Content With Sub-headers

Sub-headers are very important in allowing the user to disseminate a page of content visually. They divide the page into manageable sections and declare what each section is about. This is important to a user who is scanning the page trying to find what is most important.

Sub-headers also create a visual flow that allows users to move their eyes downward across the content.

Try limiting the main body of your web page (excluding navigation, footer, etc.) to three sizes: page title, sub-header, and body copy. Make the contrast between these styles clear and effective. Too little contrast in size and weight will make the elements clash rather than work together.

When writing, make sure sub-headers condense the point of the text they represent to a handful of words, and don’t assume the user has fully read the section above or below. Avoid overly cute or clever language; clarity is critical. Meaningful and beneficial sub-headers will keep the reader engaged and invite them to continue reading.

3. Communicate With Formatted Text

• Italics: Italics can be used for emphasis, and give your sentences a more conversational tone by implying vocal inflection. For example, the phrase “I told you I saw a monkey” has a different meaning than “I told you I saw a monkey”.
• All Caps: People read by making out the shapes of words rather than computing words letter-by-letter. For this reason text in ALL CAPS is more difficult to read because it disrupts the shapes of words we are used to seeing. Avoid using it for long passages of text or full sentences.
• Bold: Bold can make portions of your text stand out, but try not to overuse it. If you have a large blob of text that needs to be emphasized, try using a background color instead.

4. Negative Space Can Be Oh-So-Positive

The appropriate amount of space between lines of text, between letters, and between blocks of copy can greatly improves reading speed and comprehension. This white (or “negative”) space is what allows people to distinguish one letter from the next, associate blocks of text with each other, and keep track of where they are on the page.

As you’re looking at the page, squint and blur your eyes until the text becomes indecipherable. Does the page divide neatly into sections? Can you tell what the header for each section is? If not, you may need to rework your design.

Learn More

• How Little Do Users Read? by Jakob Nielsen
• How To Write Exquisite Subheads by Brian Clark
• 10 Principles For Readable Web Typography by Matt Cronin

Justin Garrity is an amazingly talented User Experience expert. He did a fascinating speech at Webtrends Engage 2010 on data visualization, prototyping and user experience (UX) – both explaining the teams’ inspiration and Webtrend’s process. For those of you who remember the Webtrends of old, you really do need to look at their new interfaces – both on the web and via iPhone.

My belief is that Webtrend’s concentration on User Experience will grow and retain their low and mid-tier clients who simply require an advanced Analytics program with robust reporting that’s easy to use. Their concentration on enabling data flows in and out of their datamart is key to growing platform integration and getting enterprise market share.

Once an enterprise client integrates and automates their analytics solution – it’s difficult to turn them… even if it’s a better platform. Webtrends has that challenge now that a couple of the big boys are embedded at larger corporations. Don’t count them out, though… they have some incredible products like Optimize that should open sophisticated marketers’ eyes and make them second guess their investment.

Anyways, on to the short film. Sorry about the quality, I was back a few rows and it’s tough to pick up! I think my eigen values are off and my enhance button didn’t work!

Click through to the post if you don’t see the Hollywood User Experience Video.

What do the Washington Post, BBC News, and New York Times have in common? They’re enriching the content presentation for links on their websites, using a tool called Apture. Rather than a simple static text link, Apture links trigger a pop-up window on mouse over that can display a wide variety of contextually related content.

On the publishing side, Apture makes it very easy for authors to find, link to, and display related content in their blog posts. Simply highlight the text you want to link, and with one click, the Apture plugin – which is available on just about any popular online publishing platform – searches the internet for a variety of different forms of contextually related content, and turns your text into a slick, helpful rich media link.

One of the benefits to your readers is quick access to additional bits of information. Mousing over links will display a little pop-up window that shows content directly related to the term. This could be a YouTube video, a Wikipedia entry, or even real-time Twitter search results.

Ordinarily, these links might take users away from your post, even if they just wanted to find a quick bit of information. Instead of potentially sending your user to another site, Apture quickly and efficiently displays the content the user might be interested in exploring, and in effect, tries to address their interest or their inquiry within your post itself.

The idea behind Apture is to make your posts more sticky, and should, theoretically, increase time on site – a critical engagement metric for many brand marketers.

And for all the analytics junkies out there, you can track the links through Apture’s analytics service in the paid version. Note that while the publishing platform plugins for Apture generate links that Google sees as regular old links, the browser plugin does not produce links that are recognizable by search engines.

We are using the WordPress version of Apture on the current iteration of our blog, and as a company that just makes content – all day, every day – so far, we really like it.  All of our content producers have had positive things to say. It helps make for interesting and relevant posts, and helps out quite a bit with generating new content ideas – and making the ideas we already have more engaging to the user.

Try out a demo of Apture on their site – it makes making the content fun, and your blog more effective.

An important, but unfortunately too-often overlooked, aspect of web design is usability. Most experienced web designers understand the basic concepts and principles of usability, but the more complex a website, the more important usability testing becomes. E-commerce websites are especially important to test because one small bump in your checkout process or design could substantially decrease your profits. Typically, I recommend some form of testing if there is any process or series of steps necessary on the website.

There are many ways to conduct usability tests, but I think UserTesting.com is an extremely affordable way to quickly start testing. For just $29 you can start a testing by submitting a set of testing instructions. Then a tester will take a video of their test and create a written report. It’s cheap and fast.

That said, you do tend to get what you pay for. This obviously won’t provide the same results as a $20,000 usability study with a eye-tracking nor will it turn your average web designer into a usability expert (Tuitive is fellow MTB blogger Jon Arnold’s company). But it gets you started in the right direction. If budget or time are a concern, try UserTesting.com. If nothing else, it should be able to tell you “hey, we have a problem” or “we seem to be ok”.

I had a tester take a look at my web design firm directory and attempt to advertise on the directory. I’ve embeded the video from my review below. Just by looking at the video of the website’s real use, I’ve identified several key changes I should be making in my upcoming redesign. Take a look: