Reading type and text on the web, what research shows us. How you can help to get your message across to your readers.

Size: px

Start display at page:

Download "Reading type and text on the web, what research shows us. How you can help to get your message across to your readers."

Paulina Pearson
5 years ago
Views:

1 Reading type and text on the web, what research shows us. How you can help to get your message across to your readers. Assoc Professor Stephen Huxley, Swinburne University of Technology Research material The following books and web sites were used as a basis for this talk. Access by Design Sarah Horton Designing Web Usability Jakob Nielse n Prioritizing Web Usability Jakob Nielse n, Hoa Loranger Homepage Usability Jakob Nielse n and Maria Tahir Patrick J Lynch and Sarah Horton Gerry McGovern Kevin La rson

2 Recommended reading How do we read In maximising the ability of your reader to understand your message, don t make reading into work. To make your message easy to read we need to understand how we read.

3 How do we read Research has identified three potential ways of how we read either by wordshape, by parallel letter identification saccadic eye movement Parallel letter recognition The model that most psychologists currently accept as most accurate is the parallel letter recognitionmodel. This model says that the letters within a word are recognized simultaneously, and the letter information is used to recognize the words. This is a very active area of research and there are many specific models that fit into this general category.

4 Screen resolution v. paper resolution Originally typefaces were designed for printing on paper. The computer screen has poor resolution compared to paper and the screen is unable to maintain the integrity of a type font compared to paper. 85 ppi v. 1200dpi Screens are brighter than paper, transmitted light compared to reflected light. The screen is less comfortable to read from. Screen resolution Computer screens have improved and now the technology is allowing better screen resolutions which also allow better image and type

5 Screen colourand contrast (Lynch and Horton) Type appearance on screen

6 Information hierarchies and chunks There are five basic steps in organizing your information: 1 Inventory your content: What do you have already? What do you need? 2 Establish a hierarchical outline of your content and create a controlled vocabulary so the major content, site structure, and navigation elements are always identified consistently; 3 Chunking: Divide your content into logical units with a consistent modular structure; 4 Draw diagrams that show the site structure and rough outlines of pages with a list of core navigation links; and 5 Analyze your system by testing the organization interactively with real users; revise as needed. Key words Articles should have large searchable key words at the beginning. Make sure links change colourafter they have been searched. Leading online newspapers are exemplars of this practice. New York Times, Guardian etc

7 Research using eye tracking analysis of web pages (Norman Nielsen)

8 Navigation Use consistent forms of navigation, there are now standardisedconventions that have evolved. Top of page and left side menus are the norm. Right menus are sometimes used.

9 Keep it simple when navigating Let people know where they are on your site using simple navigation and breadcrumbs Reading effectiveness CleartypeFonts such as Verdana, Cambria, Calibri are between 5% and 17% more efficient in reading tests conducted by Lee Gugerty, a psychology professor at Clemson University, in South Carolina,

Reading efficiency The average office worker already spends the better part of the workday at the computer. It makes good economic sense, then, to improve the reading experience.

10 Reading efficiency The average office worker already spends the better part of the workday at the computer. It makes good economic sense, then, to improve the reading experience. JakobNielsen, the Web usability guru, has calculated that boosting a worker s onscreen reading speed by just 10percent would save his or her employer about US$2000 each year, through added productivity. Cascading Style Sheets (CSS) CSS gives consistency across a web site, similar to a defined style in word processing software

In type dense pages control layouts with CSS and use of horizontal

11 Cascading Style Sheets (CSS) CSS allows the control of type over a web site and also over different media devices Typographic layout In type dense pages control layouts with CSS and use of horizontal and vertical elements to create consistency, contrast and relationship.

12 Typographic page structure Effective reading is accomplished with left aligned text and left aligned headings. How do we read, line scanning.

13 Column width Column width is important both in print and screen for ease of reading, the column should not be too short or too long, ideally between a minimum of approximately 30 characters, say one alphabet or six words and a maximum of approximately 60 characters say two alphabets or twelve words. Too long a line length gives poor scanning and makes work for the reader. Leading of type Increasing the space between lines of type, but not by much, gives better reading of type as it improves scanning. CSS controls leading whereas pure HTML does not.

14 Type for computers Fonts such as Verdana, Cambria are designed for the screen. Screen fonts and print fonts Screen fonts have larger x-heights than print fonts to allow for screens poor resolution.

Preferred type size for reading Research of most preferred type size and leading on the web. Although web users can control their type viewing size in the web browser. Most do not.

15 Preferred type size for reading Research of most preferred type size and leading on the web. Although web users can control their type viewing size in the web browser. Most do not. Source: Wheildon, C Type and Layout: How Typography and Design Can Get Your Message Across Or Get in the Way. Adding emphasis and colour to type Long blocks of type can be aided by using typographic devices. Sparingly! Italics Bold Underline (confuses with linking) CAPITALS (thought to add emphasis but ugly) Write as you would in normal written english.

16 Graphic Text In headings and banners, logos etc use graphic text (usually a Photoshop jpeg image) but remember it is not searchable. Know your market

17 Design for your market, keep it simple It might be obvious but know what technology your audience might use. Using Flash and certain video players is OK for teens and techies but you could lose your audience if you have Flash based navigation. Flash content is not searchable (not yet) so you can t Google content in a Flash based site. Keep it simple (KISS) The web is a fast medium, people are impatient on the web. They want to get their targets quickly (shopping, searching etc) Web pages don t have to be boring to look at but they do have to be clear. Simplicity at all stages will get results and deliver effective messages.

18 Questions

Web Design, 5 th Edition

Planning a Successful Website: Part 2 Web Design, 5 th Edition Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step : Specify the s navigation