Online vs. Print Design

When it comes to designing, print and web (online) designs have very different interfaces, people read them differently.

In print, the reading pattern is from left to right and from top to bottom, line by line, because they have been designed to be read this ‘linear’ way (Kress and van Leeuwen, 2006).

In web pages, users read in an F-Shaped pattern, where the page is read in a horizontal movement and then move down the page a little bit and reads in a second horizontal movement that covers a shorter area than the previous movement. Finally users scan the contents on the left in a vertical movement (Nielsen, 2006).

Jakob Nielsen (2006) – F Shaped Reading Pattern

Take for example GameAxis’ magazine and website layout:

GameAxis - Magazine Pages

GameAxis - Web page

According to Kress and van Leeuwen (2006), readers of magazines may flick through magazines, stopping now and again to look at a picture or read a heading, and perhaps later return to some articles, while websites are specifically designed to allow multiple reading paths.

“Anything that is a great print design is likely to be a lousy web design” – Jakob Nielsen, 1999.

Therefore when writing on a blog, it must not be in a story telling form like in print. Web users read slower than in print and want actionable content, it must be brief and to the point (Nielsen, 1997 & 2008).

In brief (Nielsen, 1997):

• Print design is based on letting the eyes walk over the information, selectively looking at information objects and using spatial juxtaposition to make page elements enhance and explain each other
• Web design functions by letting the hands move the information (by scrolling or clicking); information relationships are expressed temporally as part of an interaction and user movement.

----------
References

Kress, G & van Leeuwen, T 2006, Chapter 6: The meaning of composition, Reading Images: Grammar of Visual Design, Routledge, London.

Nielsen, J 1997, Be Succinct! (Writing for the Web), Jakob Nielsen’s Alertbox, Useit.com, viewed 9 November 2008, <http://www.useit.com/alertbox/9703b.html>.

Nielsen, J 1999, Differences Between Print Design and Web Design, Jakob Nielsen’s Alertbox, Useit.com, viewed 9 November 2008, <http://www.useit.com/alertbox/990124.html>.

Nielsen, J 2006, F-Shaped Pattern for Reading Web Content, Jakob Nielsen’s Alertbox, Useit.com, viewed 9 November 2008, <http://www.useit.com/alertbox/reading_pattern.html>.

Nielsen, J 2008, Writing Style for Print vs. Web, Jakob Nielsen’s Alertbox, Useit.com, viewed 9 November 2008, <http://www.useit.com/alertbox/print-vs-online-content.html>.