Differences between web and print

Objective

• The web is not a linear medium but a non-linear hypertext (a “connected” text): we only look for the information or action that interests us moving across different sections.
• We build our personal experience without necessarily following what the author proposes → active user.

Consultation mode

• Reading is mostly skimming (80%) rather than word-by-word (20%).
  • The first 3 words of a title are key to gaining the reader's interest.
• On average we read 20% of the content of a web page and very quickly.
• Reading is on average 25% slower than with print.
• Reading is easily interrupted/broken (e.g., by visuals and CTAs that take up a lot of space).
• The entry point can vary (not necessarily via the homepage).

Medium

Users access the website via different devices (mobile, tablet, desktop with variable screen width) and with different connection speeds.

• Users have no overview of the page: only 22% of them scroll to the footer.
• Users might have issues with their connection or with the display of content on their screens.

Information findability

• In order to easily find information, keywords must be well placed in the page (see SEO).

• Have an introduction that summarizes the rest of the page and a conclusion that invites users to take an action.
• Start with essential information and then continue to details (inverted-pyramid structure).
• Define text hierarchy (different kinds of titles and paragraphs) and use it consistently to let users skim through the page easily.
• Adds as many hyperlinks as necessary.
  • Elements in the same page.
  • Elements or whole pages elsewhere in the same website.
  • Other language versions.
  • External websites (of references, partners, etc.).
• No FAQ section - distribute content where it is most relevant.

Alternate different kinds of blocks:

• Short and long paragraphs.
• Callouts, quotes.
• Images, videos, graphs.
• Small tables (avoid large tables that need horizontal scrolling on mobile).

Make content more dynamic through good formatting:

• Bullet lists.
• Bold text.
• Italics to indicate a title (e.g. of a paper) or to emphasise a word.
• No block capitals (difficult to read).
• No underlined text (might be confused with links).
• Left-align text, never center or right-align.

Make content visually appealing:

• Use icons (when pertinent).
• Highlight elements through hierarchy and colours (according to the graphic charter).

Avoid abusing any of the elements above, otherwise the page will look too dense.