Discover Yahoo! With Your Friends

Explore news, videos, and much more based on what your friends are reading and watching. Publish your own activity and retain full control.

To get started, first

YOUR FRIENDS' ACTIVITY

    7 Best Practices for Improving Your Website's Usability

    The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

    Writing content for web users has its challenges. Chief among them is the ease with which your content is read and understood by your visitors (i.e. its readability).

    [More from Mashable: 10 Ways to Make Your Design Portfolio More Appealing to Employers]

    When your content is highly readable, your audience is able to quickly digest the information you share with them -- a worthy goal to have for your website, whether you run a blog, an e-store or your company's domain.

    Below are a handful of dead-simple tips and techniques for enhancing the usability and readability of your website's content.

    [More from Mashable: Why Mobile Design Should Never Be an Afterthought]

    These tips are based on research findings and suggestions by well-regarded usability experts such as Jakob Nielsen.

    This list is not exhaustive, and is meant merely to arm you with a few ideas that you can implement right away. If you have additional tips to add, please share them in the comments.


    General Goals of User-Friendly Web Content


    Usable, readable web content is a marriage of efforts between web designers and web content writers.

    Web pages must be designed to facilitate the ease of reading content through the effective use of colors, typography, spacing, etc.

    In turn, the content writer must be aware of writing strategies that enable readers to quickly identify, read and internalize information.

    As we go through the seven tips below, keep these three general guidelines in mind:

    • Text and typography have to be easy and pleasant to read (i.e. they must legible).
    • Content should be easy to understand.
    • Content should be skimmable because web users don't read a lot. Studies show that in a best-case scenario, we only read 28% of the text on a web page.

    What simple things can we do to achieve these goals? Read on to see.


    1. Keep Content as Concise as Possible


    It's pretty well known that web users have very short attention spans and that we don't read articles thoroughly and in their entirety. A study investigating the changes in our reading habits behaviors in the digital age concluded that we tend to skim webpages to find the information we want.

    We search for keywords, read in a non-linear fashion (i.e. we skip around a webpage instead of reading it from top to bottom) and have lowered attention spans.

    This idea that we're frugal when it comes to reading stuff on the web is reinforced by a usability study conducted by Jakob Nielsen. The study claims a that a 58% increase in usability can be achieved simply by cutting roughly half the words on the webpages being studied.

    Shorter articles enhance readability, so much so that many popular readability measurement formulas use the length of sentences and words as factors that influence ease of reading and comprehension.

    What you can do:

    • Get to the point as quickly as possible.
    • Cut out unnecessary information.
    • Use easy-to-understand, shorter, common words and phrases.
    • Avoid long paragraphs and sentences.
    • Use time-saving and attention-grabbing writing techniques, such using numbers instead of spelling them out. Use "1,000" as opposed to "one thousand," which facilitates scanning and skimming.
    • Test your writing style using readability formulas that gauge how easy it is to get through your prose. The Readability Test Tool allows you to plug in a URL, then gives you scores based on popular readability formulas such as the Flesch Kincaid Reading Ease.


    2. Use Headings to Break Up Long Articles


    A usability study described in an article by web content management expert Gerry McGovern led him to the conclusion that Internet readers inspect webpages in blocks and sections, or what he calls "block reading."

    That is, when we look at a webpage, we tend to see it not as a whole, but rather as compartmentalized chunks of information. We tend to read in blocks, going directly to items that seem to match what we're actively looking for.

    An eye-tracking study conducted by Nielsen revealed an eye-movement pattern that could further support this idea that web users do indeed read in chunks: We swipe our eyes from left to right, then continue on down the page in an F-shaped pattern, skipping a lot of text in between.

    We can do several things to accommodate these reading patterns. One strategy is to break up long articles into sections so that users can easily skim down the page. This applies to block reading (because blocks of text are denoted by headings) as well as the F-shaped pattern, because we're attracted to the headings as we move down the page.

    Below, you'll see the same set of text formatted without headings (version 1) and with headings (version 2). See which one helps readers quickly skip to the sections that interest them the most.

    What you can do:

    • Before writing a post, consider organizing your thoughts in logical chunks by first outlining what you'll write.
    • Use simple and concise headings.
    • Use keyword-rich headings to aid skimming, as well as those that use their browser's search feature (Ctrl + F on Windows, Command + F on Mac).

    3. Help Readers Scan Your Webpages Quickly


    As indicated in the usability study by Nielsen referenced earlier, as well as the other supporting evidence that web users tend to skim content, designing and structuring your webpages with skimming in mind can improve usability (as much as 47% according to the research mentioned above).

    What you can do:

    • Make the first two words count, because users tend to read the first few words of headings, titles and links when they're scanning a webpage.
    • Front-load keywords in webpage titles, headings and links by using the passive voice as an effective writing device.
    • Use the inverted pyramid writing style to place important information at the top of your articles.


    4. Use Bulleted Lists and Text Formatting


    According to an eye-tracking study by ClickTale, users fixate longer on bulleted lists and text formatting (such as bolding and italics).

    These text-styling tools can garner attention because of their distinctive appearance as well as help speed up reading by way of breaking down information into discrete parts and highlighting important keywords and phrases.

    What you can do:

    • Consider breaking up a paragraph into bulleted points.
    • Highlight important information in bold and italics.

    5. Give Text Blocks Sufficient Spacing


    The spacing between characters, words, lines and paragraphs is important. How type is set on your webpages can drastically affect the legibility (and thus, reading speeds) of readers.

    In a study called "Reading Online Text: A Comparison of Four White Space Layouts," the researchers discovered that manipulating the amount of margins of a passage affected reading comprehension and speed.

    What you can do:

    • Evaluate your webpages' typography for spacing issues and then modify your site's CSS as needed.
    • Get to know CSS properties that affect spacing in your text. The ones that will give you the most bang for your buck are margin, padding, line-height, word-spacing, letter-spacing and text-indent.

    6. Make Hyperlinked Text User-Friendly


    One big advantage of web-based content is our ability to use hyperlinks. The proper use of hyperlinks can aid readability.

    What you can do:


    7. Use Visuals Strategically


    Photos, charts and graphs are worth a thousand words. Using visuals effectively can enhance readability when they replace or reinforce long blocks of textual content.

    In fact, an eye-tracking study conducted by Nielsen suggests that users pay "close attention to photos and other images that contain relevant information."

    Users, however, also ignore certain images, particularly stock photos merely included as decorative artwork. Another eye-tracking study reported a 34% increase in memory retention when unnecessary images were removed in conjunction with other content revisions.

    What you can do:

    • Make sure images you use aid or support textual content.
    • Avoid stock photos and meaningless visuals.

    Series Supported by join.me

    The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.

    Image courtesy of iStockphoto, Kontrec

    This story originally published on Mashable here.

    What do you think?

    Do you think making Facebook public was a good business decision for the company?

    No way Definitely
    58%

    244 people have answered this question.

    42%
    Loading...
     

    There are no comments yet

    [ [ [['A picture is worth a thousand words', 5]], 'http://news.yahoo.com/why-facebook-bought-instagram-4-theories-160400376.html', '[Related: Why Facebook bought Instagram: 4 theories]', ' ', '630', ' ', ' ', ], [ [['He was in shock and still strapped to his seat', 9]], 'http://contributor.yahoo.com/join/yahoonews_virginiabeach', '[Did you witness the jet crash? Share your story with Yahoo! News]', ' ', '630', ' ', ' ', ], [ [['A JetBlue flight from New York to Las Vegas', 3]], 'http://yhoo.it/GV9zpj', '[Related: View photos of the JetBlue plane in Amarillo]', ' ', '630', ' ', ' ', ], [ [['Dick Clark', 11]], 'http://news.yahoo.com/photos/dick-clark-dies-at-82-slideshow/', 'Click image to see more photos', 'http://l.yimg.com/a/p/us/news/editorial/c/21/c217c61aa2d5872244c08caa13c16ec5.jpeg', '500', ' ', 'Reuters', ], [ [['the 28-year-old neighborhood watchman who shot and killed', 15]], 'http://news.yahoo.com/photos/white-house-stays-out-of-teen-s-killing-slideshow/', 'Click image to see more photos', 'http://l.yimg.com/cv/ip/ap/default/120411/martinzimmermen.jpg', '630', ' ', 'AP', ], [ [['Titanic', 7]], 'http://news.yahoo.com/titanic-anniversary/', ' ', 'http://l.yimg.com/a/p/us/news/editorial/b/4e/b4e5ad9f00b5dfeeec2226d53e173569.jpeg', '550', ' ', ' ', ], [ [['He was in shock and still strapped to his seat', 6]], 'http://news.yahoo.com/photos/navy-jet-crashes-in-virginia-slideshow/', 'Click image to see more photos', 'http://l.yimg.com/cv/ip/ap/default/120406/jet_ap.jpg', '630', ' ', 'AP', ], [ [['xxxxxxxxxxxx', 11]], 'http://news.yahoo.com/photos/russian-grannies-win-bid-to-sing-at-eurovision-1331223625-slideshow/', 'Click image to see more photos', 'http://l.yimg.com/a/p/us/news/editorial/1/56/156d92f2760dcd3e75bcd649a8b85fcf.jpeg', '500', ' ', 'AP', ] ]
    [ [ [[' the 28-year-old neighborhood watchman who shot and killed', 4]], '28924649', '0' ], [ [['because I know God protects me', 14], ['Brian Snow was at a nearby credit union', 5]], '28811216', '0' ], [ [['The state news agency RIA-Novosti quoted Rosaviatsiya', 6]], '28805461', '0' ], [ [['measure all but certain to fail in the face of bipartisan', 4]], '28771014', '0' ], [ [['matter what you do in this case', 5]], '28759848', '0' ], [ [['presume laws are constitutional', 7]], '28747556', '0' ], [ [['has destroyed 15 to 25 houses', 7]], '28744868', '0' ], [ [['short answer is yes', 7]], '28746030', '0' ], [ [['opportunity to tell the real story', 7]], '28731764', '0' ], [ [['entirely respectable way to put off the searing constitutional controversy', 7]], '28723797', '0' ], [ [['point of my campaign is that big ideas matter', 9]], '28712293', '0' ], [ [['As the standoff dragged into a second day', 7]], '28687424', '0' ], [ [['French police stepped up the search', 17]], '28667224', '0' ], [ [['Seeking to elevate his candidacy back to a general', 8]], '28660934', '0' ], [ [['The tragic story of Trayvon Martin', 4]], '28647343', '0' ], [ [['Karzai will get a chance soon to express', 8]], '28630306', '0' ], [ [['powerful storms stretching', 8]], '28493546', '0' ], [ [['basic norm that death is private', 6]], '28413590', '0' ], [ [['songwriter also saw a surge in sales for her debut album', 6]], '28413590', '1', 'Watch music videos from Whitney Houston ', 'on Yahoo! Music', 'http://music.yahoo.com' ], [ [['keyword', 99999999999999999999999]], 'videoID', '1', 'overwrite-pre-description', 'overwrite-link-string', 'overwrite-link-url' ] ]
    Should Bill and Donna take on more risk to boost their business? Join the conversation.
    Remake America celebrates moms everywhere.
    Wounded veteran Kyle lost his hand during an explosion in Iraq.