Understanding HCI

language & Text Content

When evaluating the language used in an interface it is not just the actual text on the page which it is necessary to look at. It is also the fonts used, the tone used, the readability level of the text, the scannability of the text and the order in which it is written.

Inverted Pyramids

The order the text appears in is very important in an online environment, particularly where there is a lot of it. The Inverted Pyramid is also used in newspapers for similar reasons - in summary put the important stuff first!

  • Paragraph 1 - First write a lead that summarizes the most important information - the "what," "where," "when," "who," "why," and "how" of the story -
  • Paragraph 2 - Pick up on some element of the lead and elaborate on it
  • Body of piece - Present more detail
  • Final Paragraphs - Wrap up the remaining details

Exercise - Inverted Pyramid

Working in pairs, rewrite the story below using the Inverted Pyramid format

An accident occurred. It happened yesterday. Today is Wednesday. The accident was a traffic accident. It happened in Ballyfermot where Le Fanu and Ballyfermot Road intersect. One person was killed. The person was Mary White. She was 63 years old and lived in Ballyfermot at 54 Drumfinn Court. She was driving a red 1997 Nissan Micra. She was driving on Le Fanu at about 8 p.m. She lost control of the car. It was raining, and the road was slick. She was also driving about 20 mph over the speed limit. She was the only one in the car. The car smashed into a telephone pole along Le Fanu. The impact crushed the whole front of the car. White was thrown through the car's windshield. She landed on the pavement some 7 metres away. She wasn't wearing a seat belt. She was killed instantly.

Type of Fonts

Serif v’s Sans Serif

Most fonts can be split into two categories - Serif & Sans Serif.

  • Serif means 'tail', so serif fonts are those with flicks or tails at the extremities of each letter. Well known serif fonts include - Times New Roman, Garamond, and Georgia. Serif fonts are thought to be easier to read in print, but harder to read on a computer due to the pixelation of the lines.
  • Sans means without. So Sans Serif fonts have no tail. Common examples include - Arial, Verdana, Hattenschweiler, and Comic Sans. These are thought to be easier to read online due to their clean edges.
  • More recently, studies have suggested that there is no actual difference in reading speeds, but users do actually percieve a difference: A Comparison of Popular Online Fonts: Which is Best and When?

Also keep in mind that some fonts have more natural white space than others and this can be used for graphic design purposes.

Readability

The readability of a piece of text can be measured using readability algorithms, which approximate the required reading level necessary to read and understand the text. There are many versions of this - Gunning Fog, Flesch-Kincaid Grade Levels and Flesch Reading Ease.

  • The Gunning Fog and the Flesch-Kincaid Grade Levels both give an indication of how many years of school a user should have to understand the text. The average population has a reading level of 8th grade - approximately 13-14 years of age. However disability research experts suggest that a reading level of not more than 5th grade should be used in most websites which target a wide audience.
  • The Flesch Reading Ease gives a figure between 1 and 100. The higher the score, the easier the text is to understand. A score of 60-70 is recommended.

To create readable content:

  • Use short sentences
  • Use short words - single syllable or double syllables are ok
  • Use phrases instead of a long word - places to stay, instead of accommodation.

Exercise - Readability

Use the Readability Test to examine the readability of the sites below. What are their readability levels? Are readability levels matched to the expected audience?

In general, websites should use the users words, and/or the jargon of the task, as opposed to the jargon of IT.

Line Lengths

The length of a line of text was thought to have an effect on readability, with many people suggesting a optimum line length of 12 words per line. A recent study has discovered, however, that there is no significant difference for users of full screen, medium and narrow width texts: The Effects of Line Length on Children and Adults’ Online Reading Performance

Text Size

Always allow your users to pick their own text size if they choose. This can easily be achieved online simply by not setting the font size in pixels. Use ems or % or small/medium/large instead. This allows users to adjust the browser settings to their liking.

  • In Internet Explorer this is 'View > Text Size > Largest'
  • In Netscape & Firefox this is 'View > Text Size > Increase'

Scannability

Most users do not actually read much of the text they come across online. A much more common occurance is that they scan the text, searching for keywords which relate to their search. Pages which facilitate scanning will therefore be more usable and therefore useful to the reader.

To make your pages more scannable do the following:

  1. Use bullet points to highlight important points
  2. Use internal links to highlight keywords and facilitate information retrieval of more detailed information.
  3. Use meaningful headings & subheadings
  4. Use the inverted pyramid format
  5. Use less text

Punctuation

It is not that punctuation increases the credibility your site has, but lack of punctuation can reduce confidance in your message. While blog sites might be able to carry lack of punctuation without penalty, the same is not true for a business website or an educational multimedia dvd. An interesting treatment of punctuation can be seen here: Is Punctuation Important? Decide For Yourself!

Screen Reader Users

One element not often considered by web and multimedia designers is the length of time it takes a person using a screen reader to read the page content. The recommended maximum time on page for blind users is ideally less than 120 secs, or 2 minutes. You can test webpages for this using ADesigner, a software tool which calculates in seconds, the time it would take a screen reader user on an average reading speed to access various parts of your page. You can reduce the time by using access keys, a logical heading structure and internal page links.

Further Reading