- HTMList.com, A Web Development Blog by Synapse Studios - http://www.htmlist.com -

Highlighted Links and Improving Web Readability: People are lazy

Posted By Chris Cardinal On May 20, 2008 @ 12:19 pm In Design | 6 Comments

Sometimes, people ask us about our decision to highlight our non-link text. You’ll notice that whenever there’s bold text on the site, it’s accompanied by a light green background. The reason for this is simple: People are exceptionally lazy.

The Problem: The eye is intimidated, to put it simply, by large, unwavering blocks of text. This can present a bit of a problem when you have a lot of information you want to convey to someone while trying to limit their tendency to skim.

Skimming is the enemy of basic reading comprehension. When a user is presented with a large block of text, it presents a few challenges: It’s incredibly difficult to keep your place once a block of text extends past, say, four lines of text. So people skim. They read the first sentence, they read the last sentence and they try to determine if the content within warrants a closer look.

The solution: So what do we do to make sure our content is read?

  1. Prioritize: Determine what elements within a large block of text you most want your readers to take in. Identify which points within your content can serve as anchor points that will encourage users to read the text nearby for further context.
  2. Bold It, Highlight It: Bolds work because the eye is naturally drawn to something that stands out so clearly from the rest of a block of text. We soften ours a bit with the aforementioned light green background because we think it will evince feelings of nature and flowers and environmental consciousness. (Not really, but you’re probably just skimming here anyway.) I think I first saw this in use at 37 Signals [1] and it’s caught on quite nicely.
  3. Break It Up: I used to run a journal site in a former life. When my whiny friends would make a long, rambling post about how they just couldn’t go on anymore, I found that I’d only read it if it weren’t an enormous block of bitchy text. And even then… Point being, use many, many paragraphs. People will typically read the start and end of each smaller block of text. Use breaks to make sure your readers are giving each block of text a chance.
  4. Size It Up: Use a decent font size. When your reader has to squint, you’re just discouraging them from going any further. Remember, once again, that people are exceptionally lazy. Requiring them to exert absolutely any physical effort past the finger flick required to scroll down is asking too much. A larger font in the 12-14px range will make for a more comfortable read.
  5. Consider Serifs: Serifs are those neat little curls at the edge of the letters on certain fonts, like the kind you see in newspapers all the time. Serif fonts include the classics like Times New Roman and Georgia. Most body text on our site is in Georgia, which I consider something of a rich man’s Times. Serifs are useful for body text because the curly-cues actually help the eye track their position in the text and identify the glyphs (individual font characters) with more distinction and ease. It’s almost magical, really. (Edit: There’s some dissent about serif fonts being more screen readable; I’ve seen people argue both ways but I think that at a slightly larger size, serif fonts work real well for body font. Smaller sizes, you’re clearly better off with a fresh sans serif.)
  6. Sans Serifs Have Their Place: We’re seeing a big shift towards sans serif in a lot of “web 2.0″ installations because they’re typically considered “cleaner” and more modern. But for readability, I prefer to write my body text with a serif font and to do the daring: blend, using a sans serif for headings. When writing a proposal recently, I used this strategy. We won the contract and I have to believe it’s in large part due to my serif decisions.
  7. Use Convenient, High-Tech Bulleted Lists: People love lists. LOVE them. It compartmentalizes everything they need to see in a simple format where they can see the progress they’re making. They’re really quite fantastic. I’m using one as I speak and loving it.

I’d love to hear from the community on other strategies people use to try to ensure as much of your content is absorbed as possible.

  • email [2]

Article printed from HTMList.com, A Web Development Blog by Synapse Studios: http://www.htmlist.com

URL to article: http://www.htmlist.com/design/highlighted-links-and-improving-web-readability-people-are-lazy/

URLs in this post:

[1] 37 Signals: http://www.37signals.com/svn/

[2] Image: https://mail.google.com/mail/?view=cm&fs=1&to&su=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy&body=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&ui=2&tf=1&shva=1

[3] Image: http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&t=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy

[4] Image: http://www.myspace.com/Modules/PostTo/Pages/?u=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&t=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy

[5] Image: http://twitter.com/intent/tweet?text=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy%20-%20http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F%20 SHARETAG

[6] Image: http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&title=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy&source=HTMList.com%2C+A+Web+Development+Blog+by+Synapse+Studios+A+Web+Development+Blog+by+Synapse+Studios&summary=Making%20sure%20people%20read%20and%20absorb%20as%20much%20of%20your%20content%20as%20possible%20is%20a%20challenge%20on%20the%20web.%20Fortunately%2C%20there%20are%20some%20easy%20strategies%20we%20invoke%20to%20trick%20people%20into%20reading%20more%20of%20our%20words%20than%20they%27d%20ever%20do%20normally.%20%20More%20after%20the%20jump...

[7] Image: http://delicious.com/post?url=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&title=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy&notes=Making%20sure%20people%20read%20and%20absorb%20as%20much%20of%20your%20content%20as%20possible%20is%20a%20challenge%20on%20the%20web.%20Fortunately%2C%20there%20are%20some%20easy%20strategies%20we%20invoke%20to%20trick%20people%20into%20reading%20more%20of%20our%20words%20than%20they%27d%20ever%20do%20normally.%20%20More%20after%20the%20jump...

[8] Image: http://digg.com/submit?phase=2&url=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&title=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy&bodytext=Making%20sure%20people%20read%20and%20absorb%20as%20much%20of%20your%20content%20as%20possible%20is%20a%20challenge%20on%20the%20web.%20Fortunately%2C%20there%20are%20some%20easy%20strategies%20we%20invoke%20to%20trick%20people%20into%20reading%20more%20of%20our%20words%20than%20they%27d%20ever%20do%20normally.%20%20More%20after%20the%20jump...

[9] Image: http://reddit.com/submit?url=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&title=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy

[10] Image: http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&title=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy

[11] Image: http://www.google.com/bookmarks/mark?op=edit&bkmk=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&title=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy&annotation=Making%20sure%20people%20read%20and%20absorb%20as%20much%20of%20your%20content%20as%20possible%20is%20a%20challenge%20on%20the%20web.%20Fortunately%2C%20there%20are%20some%20easy%20strategies%20we%20invoke%20to%20trick%20people%20into%20reading%20more%20of%20our%20words%20than%20they%27d%20ever%20do%20normally.%20%20More%20after%20the%20jump...

[12] Image: http://news.ycombinator.com/submitlink?u=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&t=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy

[13] Image: http://reporter.es.msn.com/?fn=contribute&Title=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy&URL=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&cat_id=6&tag_id=31&Remark=Making%20sure%20people%20read%20and%20absorb%20as%20much%20of%20your%20content%20as%20possible%20is%20a%20challenge%20on%20the%20web.%20Fortunately%2C%20there%20are%20some%20easy%20strategies%20we%20invoke%20to%20trick%20people%20into%20reading%20more%20of%20our%20words%20than%20they%27d%20ever%20do%20normally.%20%20More%20after%20the%20jump...

[14] Image: http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&Title=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy

[15] Image: http://sphinn.com/index.php?c=post&m=submit&link=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F

[16] Image: http://posterous.com/share?linkto=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&title=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy&selection=Making%20sure%20people%20read%20and%20absorb%20as%20much%20of%20your%20content%20as%20possible%20is%20a%20challenge%20on%20the%20web.%20Fortunately%2C%20there%20are%20some%20easy%20strategies%20we%20invoke%20to%20trick%20people%20into%20reading%20more%20of%20our%20words%20than%20they%27d%20ever%20do%20normally.%20%20More%20after%20the%20jump...

[17] Image: http://www.tumblr.com/share?v=3&u=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&t=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy&s=Making%20sure%20people%20read%20and%20absorb%20as%20much%20of%20your%20content%20as%20possible%20is%20a%20challenge%20on%20the%20web.%20Fortunately%2C%20there%20are%20some%20easy%20strategies%20we%20invoke%20to%20trick%20people%20into%20reading%20more%20of%20our%20words%20than%20they%27d%20ever%20do%20normally.%20%20More%20after%20the%20jump...

[18] Image: http://www.google.com/reader/link?url=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&title=Highlighted%20Links%20and%20Improving%20Web%20Readability%3A%20People%20are%20lazy&srcURL=http%3A%2F%2Fwww.htmlist.com%2Fdesign%2Fhighlighted-links-and-improving-web-readability-people-are-lazy%2F&srcTitle=HTMList.com%2C+A+Web+Development+Blog+by+Synapse+Studios+A+Web+Development+Blog+by+Synapse+Studios

[19] Tweet: https://twitter.com/share

Copyright © 2008 HTMList. All rights reserved.