Reflecting today’s more complex issues, today’s search engine results pages can have many possible complex layouts, and users don’t always process search results sequentially. Their attention on a page tends to jump around more across the page than in the past, and has been compared to the pattern in a pinball game. A traditional pinball machine arcade game (left in the image) is a glass-covered cabinet using an angled play field with various bumpers, obstacles, and targets. The player uses flippers to shoot and bounce a metal ball around the play field, receiving points for hitting different targets. In a web page eyetracking analysis, a pinball pattern (right) is apparent – the user’s gaze similarly ‘bounces’ around between visual elements and keywords in a search engine results page. (Image: From NN/g research.)
Assumptions about page visitors can be misleading
Assumptions about visitor attention on web pages can be misleading, especially the assumption that visitors are going to be captivated by the brilliance of your website! It is much wiser to assume:
- Every visitor knows nothing about your organization.
- Visitors will merely want a low involvement with your website (it is just one of millions of websites).
- Visitors will have a low level of concentration and commitment.
Compare writing for print and writing online
Print design is based on letting the eyes walk over the information, selectively looking at objects on the page and noting the difference between various elements on the page that stand out to the eye. In contrast, web design functions by allowing the information to be scrolled or clicked in a manual motion. Interactivity of the site and physical user movement are integral to the web-page experience.
Print currently offers several advantages over web pages, but these differences are reducing over time. Key differences include the fact that screen resolution is not as good as a newspaper page; apart from desktop monitors, the screen is smaller than a newspaper page; and a printed page is easier to read.
Therefore web design should include:
- fewer graphics (graphics slow the downloading time, although download speeds are much higher than they used to be);
- smaller graphics (ditto);
- shorter text (since it is not as easy to read online);
- a smaller font range (since the host doesn’t know what fonts the user has installed on their computer);
- simpler layouts.
Looking ahead, it will continue to be necessary to limit the word count since users will continue to be more impatient online and will be motivated to move on. It will also be necessary to design web information for small layouts because tablets, laptops, mobile phones (cell phones) will retain small screens even if larger screens are used at home and office.
Greater user engagement on web pages will be possible by using non-static design elements such as moving images under user control. Pointing to objects will generate explanations or expansions of information to be made using pop-ups, overlays and voiceovers.
Many design problems are so simple, yet they persist. For instance, one of the main user complaints is the use of too-small font sizes. This may allow more words to fit into the available space, but it riles readers, especially baby boomers whose days of 20:20 eyesight are long gone. The other main complaints are about the low contrast between text and background, and using text (white or colored) on a black/dark background, which makes reading much more difficult.
Poorly designed corporate websites cost millions
At present, far too many design obstacles prevent users from easily navigating within websites. Recent studies confirming this give cause for concern about the extent of lost sales and information for users.
In one US study of large commercial sites, users could only find information 42% of the time, even though they were taken to the correct home page before they were given the test tasks. A further study found that half the 20 major sites examined violated simple design principles. You may say: “So what?”
Well, research shows that bad web design can lose about 50% of the potential sales from a site, and it causes lost repeat visits from 40% of the users who don’t return when their first visit resulted in a negative experience. This can cost millions of dollars on a large website with an e-commerce function and can cause the reputation to suffer on sites designed mainly to provide stakeholder information.
What about government departments? They wouldn’t have to worry much about things like losing sales, and therefore the website design wouldn’t matter much…or would it? An example: poor design means that people trying to pay license fees online would leave the website frustrated and would have to telephone or pay over the counter instead. This means that more staff would be needed to handle these disgruntled customers – creating a budget drain. So, apart from any reputation effects, a poorly designed government website would cost more staffing dollars.
Why web users scan instead of read
People are scanning for clues, depending on the context and the person’s goals. The specific ‘clues to what’ will depend on the context, and on the user’s goals. Usually the clue is intended to answer the eternal question, “Am I in the right place?” or “How can I find what I’m looking for?”
People only read word-by-word on the web when they are really interested in the content. They usually skim the pages looking for highlighted keywords, meaningful headings, short paragraphs, images and scannable lists. People will not read content that is not easily scannable or relevant. Therefore blocks of long text, promotional writing and jargon should be avoided.
Almost 80% of visitors scan web pages instead of reading them – because:
- Reading from computer screens is tiring on the eye and about 25% slower than reading from paper due to the nature of the medium.
- The web is a user-driven medium where users feel they have to move on and click onto things rather than wade through a whole article. Observation shows that people want to feel active when they are on the web.
- Each page has to compete for the user’s attention against millions of other pages. Users don’t know whether this page is the one they need or whether another page would be better, so the user moves on.
- Modern life is hectic and people simply don’t want to work too hard for their information. At work they already receive too many emails and voicemail messages. They won’t want to spend unnecessary time on the Web page.
Writing for the web
Image: An investor engaged with this company profile when testing it in an eyetracking study. The bold headings and concise paragraphs kept his attention, as the gaze plot shows (blue dots indicate fixations).
Since 80% of users always scan pages rather than read in detail, and reading from computer screens is 25% slower than reading from paper, therefore web content should have half the word count of its paper equivalent.
In print, the document forms a whole and the user is focused on the entire set of information. In contrast, each web page needs to be almost stand-alone in structure. Since users aren’t willing to read long pages, most documents need to be split into multiple hyperlinked pages.
Users can enter a site at any page and move between pages as they choose, so every page needs to be independent and its topic explained without assuming the previous page has been seen by the reader. Links should be provided to background or explanatory information to help users.
Navigating documents when writing a document for the web, use links to guide the reader through the document to access the most relevant information. Whenever possible:
- state conclusions first and link to supporting details
- show categories and link to lists
- summarize information and follow links to obtain the rest of the information.
All this allows the user to scan the contents of a page and select relevant and useful information.
Since readers use links as guideposts in scanning, only the most relevant should be part of the document – they shouldn’t be a distraction. Position less relevant, but meaningful links of additional information in the web page’s margin or at the end of a document under a ‘See also’ label.
Concise writing style
Credibility is important on the web, where users often know nothing about the organization. The user’s trust needs to be earned. It is quickly lost if hype and ‘puffery’ is used. A low-key, objective style is required.
Hyperlinks to other sites that carry supporting information increase the credibility of your pages. If possible, quotes from other sources should be linked to the page.
Web users are impatient and critical. They have accessed the site because they need to. Writing should be in a concise, informal style to allow users to quickly find the information they want.
Similar to a journalistic style, start the page with the conclusion and a short summary of the remaining contents (‘inverted pyramid’ style). Users don’t like to scroll through masses of text to get to the main points, so the most important information should be put first.
Each paragraph should only contain one main idea; use a second paragraph for a second idea, since users tend to skip any second point as they scan over the paragraph.
Use simple sentences; anything complicated is even harder to understand online.
Pages should be updated over time to reflect all changes. Statistics, numbers and examples all need to be recent or credibility suffers, especially when ‘forthcoming events’ have already happened.
Headlines should be easy to scan, but usually they are not very long. Therefore you can use a more creative font for headlines and subheadings. Lowercase letters are easier to read than all-caps, especially if a headline or subhead contains formal words or acronyms that require capital letters. This can be confusing to the reader.
For longer blocks of text, you should use clear sans-serif fonts. Although serifs help the readability in printed material because they support the reading flow, it does the opposite on the web. On screen, the little serifs easily blur together, making it more difficult to read the text. Standard serif fonts that are easily readable on screen are for example: Arial, Helvetica, Trebuchet, Lucida Sans, and Verdana. Verdana has actually been designed specifically for the Web.