Content design Users visit web-sites for their content. The design is there to allow people access to the content. Usability studies indicate a strong content focus on the part of users. When they get to a new page, they look immediately in the main content area of the page and scan it for headlines and other indications of what the page is about.

Users visit web-sites for their content.

The design is there to allow people access to the content.

Usability studies indicate a strong content focus on the part of users.

When they get to a new page, they look immediately in the main content area of the page and scan it for headlines and other indications of what the page is about.

Writing for the Web Be succinct. Write no more that 50 percent of the text you would have used to cover the same material in a print publication. Write for scannability. Don’t require users to read long continuous blocks of text; instead, use short paragraphs, subheadings, and bulleted lists. Use hypertext to split up long information into multiple pages. Hire web editors.

Be succinct. Write no more that 50 percent of the text you would have used to cover the same material in a print publication.

Write for scannability. Don’t require users to read long continuous blocks of text; instead, use short paragraphs, subheadings, and bulleted lists.

Use hypertext to split up long information into multiple pages.

Hire web editors.

Value of web editor For a company with 10000 employees, the cost of a single poorly written headline on an intranet home page is almost 5000$ . All employees spend five seconds more than necessary reading and analysing the headline. It causes 10% of employees to click on the headline. People spend on average 30 seconds reading the story before they decide to back out. The company has 10000 employees. The value of an employee’s time is 50$/hour.

For a company with 10000 employees, the cost of a single poorly written headline on an intranet home page is almost 5000$ .

All employees spend five seconds more than necessary reading and analysing the headline.

It causes 10% of employees to click on the headline.

People spend on average 30 seconds reading the story before they decide to back out.

The company has 10000 employees.

The value of an employee’s time is 50$/hour.

Web attitude Web text should be short, but with personality. Users appreciate some amount of humor and attitude. “ Attitude” does not mean screaming at readers. What is respected is the presence of a clear voice, perspective, and personality in the exposition. Users also have a distinct dislike for anything they deem marketing rubbish. The Web is a rather “cool” medium that encourages the use of facts.

Web text should be short, but with personality.

Users appreciate some amount of humor and attitude.

“ Attitude” does not mean screaming at readers.

What is respected is the presence of a clear voice, perspective, and personality in the exposition.

Users also have a distinct dislike for anything they deem marketing rubbish.

The Web is a rather “cool” medium that encourages the use of facts.

Short texts Reading from computer screens is about 25% slower than reading from paper. People don’t want to read a lot of text from computer screens. You should write 50% less text (not just 25%) because it’s not only a matter of reading speed but also a matter of feeling good. We also know that users don’t like to scroll: one more reason to keep pages short.

Reading from computer screens is about 25% slower than reading from paper.

People don’t want to read a lot of text from computer screens.

You should write 50% less text (not just 25%) because it’s not only a matter of reading speed but also a matter of feeling good.

We also know that users don’t like to scroll: one more reason to keep pages short.

Text editing Starting a web page with the heading “Welcome” should be a warning signal. All web pages should be run through a spelling checker. Typos have a tendency to pop up where they are most embarrassing. Proofread the text for grammatical mistakes and for words that may be in a dictionary (e.g., affect and effect) but are not the ones intended by the author. High-end web organization should also employ professional editor.

Starting a web page with the heading “Welcome” should be a warning signal.

All web pages should be run through a spelling checker.

Typos have a tendency to pop up where they are most embarrassing.

Proofread the text for grammatical mistakes and for words that may be in a dictionary (e.g., affect and effect) but are not the ones intended by the author.

High-end web organization should also employ professional editor.

Scannability Users tend not to read streams of text fully. Instead, users scan text and pick out keywords, sentences, and paragraphs of interest while skipping over those parts of the text they care less about. According to the research by J.Nielsen and J.Morkes, about 79% of users always scan any new page, and only very few users would read word-by-word. Scanning instead of reading is a fact of the Web, and it’s been confirmed by countless usability studies. Those who write for the Web must acknowledge this fact and write for scannability.

Users tend not to read streams of text fully.

Instead, users scan text and pick out keywords, sentences, and paragraphs of interest while skipping over those parts of the text they care less about.

According to the research by J.Nielsen and J.Morkes, about 79% of users always scan any new page, and only very few users would read word-by-word.

Scanning instead of reading is a fact of the Web, and it’s been confirmed by countless usability studies.

Those who write for the Web must acknowledge this fact and write for scannability.

Why users scan? Reading from computer screen is tiring for the eyes and about 25% slower than reading from paper. People are trying to minimize the number of words they read. The Web is a user-driven medium where users feel that they have to move around and click on things. Each page has to compete with hundreds of millions of other pages for the users’ attention. Users move between many pages and try to pick the most tasty segments of each. Some people simply don’t have time to work too hard for their information.

Reading from computer screen is tiring for the eyes and about 25% slower than reading from paper.

People are trying to minimize the number of words they read.

The Web is a user-driven medium where users feel that they have to move around and click on things.

Each page has to compete with hundreds of millions of other pages for the users’ attention.

Users move between many pages and try to pick the most tasty segments of each.

Some people simply don’t have time to work too hard for their information.

Suggestions for writing Structure articles with two, or even three, levels of headlines. Use meaningful rather than “cute” headings. Reading a heading should tell the user what the page is about. Bulleted lists and similar design elements should be used to break the flow of uniform text blocks. Use highlighting and emphasis to make important words catch the user’s eye. Any highlighting or background colors must be chosen to look distinct from the link colors.

Structure articles with two, or even three, levels of headlines.

Use meaningful rather than “cute” headings.

Reading a heading should tell the user what the page is about.

Bulleted lists and similar design elements should be used to break the flow of uniform text blocks.

Use highlighting and emphasis to make important words catch the user’s eye.

Any highlighting or background colors must be chosen to look distinct from the link colors.

Example: original text, usability 0% Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). Example from J.Nielsen, “Designing Web Usability”, p.105

Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).

Example: concise text, usability 58% better In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park. Example from J.Nielsen, “Designing Web Usability”, p.105

In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park.

Example: scannable layout, usability 47% better Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were: Fort Robinson State Park (355,000 visitors) Scotts Bluff National Monument (132,166) Arbor Lodge State Historical Park & Museum (100,000) Carhenge (86,598) Stuhr Museum of the Prairie Pioneer (60,002) Buffalo Bill Ranch State Historical Park (28,446) Example from J.Nielsen, “Designing Web Usability”, p.105

Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were:

Fort Robinson State Park (355,000 visitors)

Scotts Bluff National Monument (132,166)

Arbor Lodge State Historical Park & Museum (100,000)

Carhenge (86,598)

Stuhr Museum of the Prairie Pioneer (60,002)

Buffalo Bill Ranch State Historical Park (28,446)

Example: objective language, usability 27% better Nebraska has several attractions. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). Example from J.Nielsen, “Designing Web Usability”, p.105

Nebraska has several attractions. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).

Example: combined version, usability 124% In 1996, six of the most visited- places in Nebraska were: Fort Robinson State Park Scotts Bluff National Monument Arbor Lodge State Historical Park & Museum Carhenge Stuhr Museum of the Prairie Pioneer Buffalo Bill Ranch State Historical Park Example from J.Nielsen, “Designing Web Usability”, p.105

In 1996, six of the most visited- places in Nebraska were:

Fort Robinson State Park

Scotts Bluff National Monument

Arbor Lodge State Historical Park & Museum

Carhenge

Stuhr Museum of the Prairie Pioneer

Buffalo Bill Ranch State Historical Park

Language It is important to start each page with the conclusion. Present the most important material up front, using the “inverted pyramid” principle. Users should be able to tell in glance what the page is about and what it can do for them. Users who are scanning the text read only the first sentences of each paragraph. Topic sentences are very important, as is the rule of “one idea per paragraph”.

It is important to start each page with the conclusion.

Present the most important material up front, using the “inverted pyramid” principle.

Users should be able to tell in glance what the page is about and what it can do for them.

Users who are scanning the text read only the first sentences of each paragraph.

Topic sentences are very important, as is the rule of “one idea per paragraph”.

Inverted pyramid principle This principle of “inverted pyramid” is commonly taught in journalism schools. Start with a short conclusion so that users can get the basic ideas about the page even if they don’t read all of it. Then gradually add detail. The guiding principle: the reader can stop at any time and still have read the most of important pieces of information. This principle is also widely used to write for the Web.

This principle of “inverted pyramid” is commonly taught in journalism schools.

Start with a short conclusion so that users can get the basic ideas about the page even if they don’t read all of it.

Then gradually add detail.

The guiding principle: the reader can stop at any time and still have read the most of important pieces of information.

This principle is also widely used to write for the Web.

Language (continued) Use simple sentence structures. Humor should be used with great caution on the Web. Because users scan the text, they may not realize when you are being humorous or sarcastic, and they may take statements at face value. Often, goal-driven users prefer just facts. But a light touch of humor can work, if done carefully.

Use simple sentence structures.

Humor should be used with great caution on the Web.

Because users scan the text, they may not realize when you are being humorous or sarcastic, and they may take statements at face value.

Often, goal-driven users prefer just facts.

But a light touch of humor can work, if done carefully.

Error messages Error messages should always be written in plain and user-centered language, and they should not expose the system’s dirty laundry. Error messages should always be constructive and help users overcome the problem instead of simply pointing out that there is trouble.

Error messages should always be written in plain and user-centered language, and they should not expose the system’s dirty laundry.

Error messages should always be constructive and help users overcome the problem instead of simply pointing out that there is trouble.

Splitting text You can shorten the text by splitting the information into multiple nodes connected by hypertext links. Long and detailed background information can be relegated to secondary pages. This information could be made available through a link. Hypertext should not be used to segment a long linear story into multiple pages. Instead, split the information into coherent parts that each should focus on a certain topic. The guiding principle: to allow readers to select those topics they care about and only download those pages. Hypertext structure should be based on an audience analysis.

You can shorten the text by splitting the information into multiple nodes connected by hypertext links.

Long and detailed background information can be relegated to secondary pages.

This information could be made available through a link.

Hypertext should not be used to segment a long linear story into multiple pages.

Instead, split the information into coherent parts that each should focus on a certain topic.

The guiding principle: to allow readers to select those topics they care about and only download those pages.

Hypertext structure should be based on an audience analysis.

Scrolling Many users will make their selection from whatever options are visible “above the fold” if they see one that looks promising. Try to make pages relatively short and make sure that the most important links will be visible on most common monitors without any scrolling. Scrolling navigation pages are bad for users because they make it impossible to see all the available options at the same time.

Many users will make their selection from whatever options are visible “above the fold” if they see one that looks promising.

Try to make pages relatively short and make sure that the most important links will be visible on most common monitors without any scrolling.

Scrolling navigation pages are bad for users because they make it impossible to see all the available options at the same time.

Within-page links HTML provides a special type of link to scrolls within the current page. Within-page links may seem a solution to the problem of long scrolling pages, but their have also usability problems. The worst usability problem of within-page linking is that users expect links to take them to a different page. This can cause much confusion, especially when the user clicks the Back button and still stays on the same page.

HTML provides a special type of link to scrolls within the current page.

Within-page links may seem a solution to the problem of long scrolling pages, but their have also usability problems.

The worst usability problem of within-page linking is that users expect links to take them to a different page.

This can cause much confusion, especially when the user clicks the Back button and still stays on the same page.

Page titles Writing for the Web is often writing to be found. For people using a search, your website exists only in the form of the page title shown on the search results page. In HTML, every page has a title that is specified in the header section of the page. Page titles are also used in many navigation menus such as bookmark lists and history lists. The title should have enough words to stand on its own and be meaningful when read in a menu or a search listing. Overly long titles slow down users, so it is best to aim at titles between two to six words, or 40 to 60 characters.

Writing for the Web is often writing to be found.

For people using a search, your website exists only in the form of the page title shown on the search results page.

In HTML, every page has a title that is specified in the header section of the page.

Page titles are also used in many navigation menus such as bookmark lists and history lists.

The title should have enough words to stand on its own and be meaningful when read in a menu or a search listing.

Overly long titles slow down users, so it is best to aim at titles between two to six words, or 40 to 60 characters.

Page titles (continued) Unless the title makes it absolutely clear what the page is about, users will never open it. Different pages need different titles. Otherwise, you might get usability problems trying to get back from the history list; and bookmarks. Optimize titles for quick scanning. Move information-carrying terms toward the beginning of the title. A classic mistake “Welcome to MyCompany”. Instead, it would be better “MyCompany”. To further facilitate scanning, eliminate the articles A , An , and The from the beginning of the title. Titles do not need to be grammatical sentences.

Unless the title makes it absolutely clear what the page is about, users will never open it.

Different pages need different titles.

Otherwise, you might get usability problems trying to get back from the history list; and bookmarks.

Optimize titles for quick scanning. Move information-carrying terms toward the beginning of the title.

A classic mistake “Welcome to MyCompany”. Instead, it would be better “MyCompany”.

To further facilitate scanning, eliminate the articles A , An , and The from the beginning of the title. Titles do not need to be grammatical sentences.

Headlines The requirements for online headlines are extremely different from printed headlines. Online headlines are often displayed out of context. Even when a headline is displayed with related content, it might be difficult to learn enough from the surrounding data. The headline text has to stand on its own and make sense when the rest of the content is unavailable.

The requirements for online headlines are extremely different from printed headlines.

Online headlines are often displayed out of context.

Even when a headline is displayed with related content, it might be difficult to learn enough from the surrounding data.

The headline text has to stand on its own and make sense when the rest of the content is unavailable.

Writing headlines Clearly explain what the article is about in terms related to the user. Write in plain language: no “clever” headlines. Avoid teasers that try to entice people to click to find out what the story is about. Skip leading articles such as A , An , and The. Make the first word an important, information-carrying one (e.g., the name of the company, person, or concept). Do not start all pages titles with the same word. It will be hard to differentiate when scanning a list.

Clearly explain what the article is about in terms related to the user.

Write in plain language: no “clever” headlines.

Avoid teasers that try to entice people to click to find out what the story is about.

Skip leading articles such as A , An , and The.

Make the first word an important, information-carrying one (e.g., the name of the company, person, or concept).

Do not start all pages titles with the same word. It will be hard to differentiate when scanning a list.

Legibility Legibility is a term used in software engineering. It stands for readability. Use colours with high contrast between the text and the background. Optimal legibility requires black text on a white background (so-called positive text ). White text on a black background ( negative text ) is almost as good. The worst are colour schemes like pink text on green background.

Legibility is a term used in software engineering. It stands for readability.

Use colours with high contrast between the text and the background.

Optimal legibility requires black text on a white background (so-called positive text ).

White text on a black background ( negative text ) is almost as good.

The worst are colour schemes like pink text on green background.

Legibility (continued) Use either plain-colour backgrounds or extremely subtle background patterns. Background graphics interfere with the eye’s capability to resolve the lines in the characters and recognize word shapes. Use big enough fonts that people can read the text, even if they don’t have perfect vision. Make the text stand still. Moving, blinking, or zooming text is much harder to read than static words.

Use either plain-colour backgrounds or extremely subtle background patterns.

Background graphics interfere with the eye’s capability to resolve the lines in the characters and recognize word shapes.

Use big enough fonts that people can read the text, even if they don’t have perfect vision.

Make the text stand still. Moving, blinking, or zooming text is much harder to read than static words.

Legibility (continued) AVOID THE USE OF ALL CAPS FOR TEXT. USERS READ TEXT LIKE THIS PARAGRAPH ABOUT 10% SLOWER THAN THEY READ TEXT IN MIXED CASES. It is harder for the eye to recognize the shape of words and characters in the more uniform and blocky appearance caused by uppercase text.

AVOID THE USE OF ALL CAPS FOR TEXT. USERS READ TEXT LIKE THIS PARAGRAPH ABOUT 10% SLOWER THAN THEY READ TEXT IN MIXED CASES.

It is harder for the eye to recognize the shape of words and characters in the more uniform and blocky appearance caused by uppercase text.

Online documentation It is always preferable to design user interfaces that are so easy to learn that nobody will ever need the documentation. In most cases, the Internet users are so impatient that they won’t be willing to read any documentation. It’s just not acceptable for websites to come with manuals. Although some web applications may include online help and documentation. People don’t read documentation voluntarily. In fact, the only time users touch the manual is when they are in trouble and cannot use the system.

It is always preferable to design user interfaces that are so easy to learn that nobody will ever need the documentation.

In most cases, the Internet users are so impatient that they won’t be willing to read any documentation.

It’s just not acceptable for websites to come with manuals.

Although some web applications may include online help and documentation.

People don’t read documentation voluntarily.

In fact, the only time users touch the manual is when they are in trouble and cannot use the system.

Use of multimedia Multimedia provides more design options but also requires design discipline. Uncontrolled use of multimedia results in user interfaces that confuse users and make it harder to understand the information. When using video clips indicate: the length of the clip to allow to estimate the download time; the file length in megabytes. Users will like your site better when they are given support for selecting those videos they would find interesting.

Multimedia provides more design options but also requires design discipline.

Uncontrolled use of multimedia results in user interfaces that confuse users and make it harder to understand the information.

When using video clips indicate:

the length of the clip to allow to estimate the download time;

the file length in megabytes.

Users will like your site better when they are given support for selecting those videos they would find interesting.

Response time Whenever you point to a file that would take more than 10 seconds to download with the bandwidth available to most of your users, it is recommended that the file format and size be indicated in parentheses after the link. Provide preview of all multimedia objects on plain HTML pages. In the case of videos, it is often a good ides to include one or two still photos. Also, for both audio and video, write a short summary of what the user will get to hear or see.

Whenever you point to a file that would take more than 10 seconds to download with the bandwidth available to most of your users,

it is recommended that the file format and size be indicated in parentheses after the link.

Provide preview of all multimedia objects on plain HTML pages.

In the case of videos, it is often a good ides to include one or two still photos.

Also, for both audio and video, write a short summary of what the user will get to hear or see.

Images and photos The amount of graphics should be minimized because of the download time they require. Even so, users do want to see photos of the products they are buying because they can’t otherwise touch and feel them. On a biography page, it is also best to include a photo of the person or text that focuses on an individual. Remember, that often an image is worth a thousand words.

The amount of graphics should be minimized because of the download time they require.

Even so, users do want to see photos of the products they are buying because they can’t otherwise touch and feel them.

On a biography page, it is also best to include a photo of the person or text that focuses on an individual.

Remember, that often an image is worth a thousand words.

Images and photos (continued) The way to resolve the trade-off between these two design guidelines is to use hypertext. Higher-level pages should minimize the number of illustrations. Then, as the user follows links to more specific pages, you can add more images. A top-level product page should usually have a small photo of the product but should still be mostly text and tables. www.sony.com

The way to resolve the trade-off between these two design guidelines is to use hypertext.

Higher-level pages should minimize the number of illustrations.

Then, as the user follows links to more specific pages, you can add more images.

A top-level product page should usually have a small photo of the product but should still be mostly text and tables.

www.sony.com

Animation Anything that moves in your peripheral vision dominates your awareness. It is extremely hard to concentrate on reading text in the middle of a page if there is a spinning logo up in the corner. It is best to minimize the use of advertisement. If your design works well without certain animation element, kill it! Never make animations loop infinitely; have them run a few times and then stop.

Anything that moves in your peripheral vision dominates your awareness.

It is extremely hard to concentrate on reading text in the middle of a page if there is a spinning logo up in the corner.

It is best to minimize the use of advertisement.

If your design works well without certain animation element, kill it!

Never make animations loop infinitely; have them run a few times and then stop.

Video Use of video should currently be minimized. Video can serve as a supplement to text and images. Video is good for: Promoting TV shows, films, or other non-computer media. Giving users an impression of a speaker’s personality. But it is not necessarily a good idea to show “a talking head”. Showing things that move, such as a clip from a ballet, demos of physical products (coin counter).

Use of video should currently be minimized.

Video can serve as a supplement to text and images.

Video is good for:

Promoting TV shows, films, or other non-computer media.

Giving users an impression of a speaker’s personality. But it is not necessarily a good idea to show “a talking head”.

Showing things that move, such as a clip from a ballet, demos of physical products (coin counter).

Video (continued) A major problem with most videos on the web right now is that their production values are much too low. Often, the quality of video does not correspond to the expectations of users. If you use video together with audio, it might cause a difficulty for international users. In general downloadable video is preferred to streaming video.

A major problem with most videos on the web right now is that their production values are much too low.

Often, the quality of video does not correspond to the expectations of users.

If you use video together with audio, it might cause a difficulty for international users.

In general downloadable video is preferred to streaming video.

Audio The main benefit of audio: it provides a channel that is separate from that of the display. Audio can also be used to provide a sense of place or mood. Music is probably the most obvious use of sound. Another use of sound includes voice recordings (also provides a sense of speakers personality). Non-speech sound effects can be used as an extra dimension in the user interface to inform users about background events. E.g., the arrival of new mail, the progress of file download. Good quality sound is known to enhance the user experience substantially. The classical example is the video game study.

The main benefit of audio: it provides a channel that is separate from that of the display.

Audio can also be used to provide a sense of place or mood.

Music is probably the most obvious use of sound.

Another use of sound includes voice recordings (also provides a sense of speakers personality).

Non-speech sound effects can be used as an extra dimension in the user interface to inform users about background events.

E.g., the arrival of new mail, the progress of file download.

Good quality sound is known to enhance the user experience substantially.

The classical example is the video game study.

Conclusions Content is the focus of the web user’s attention. It is the reason they go online, and it’s the first thing they look at when they load a new page. Quality content is one of the two most important determinants of web usability. The main questions asked by the user when judging content include “What’s in it for me?” and “How does this help me solve my problem?” Web users are goal-driven and impatient. Therefore, content needs to be much more oriented toward providing fast answers and being useful to the user.

Content is the focus of the web user’s attention.

It is the reason they go online, and it’s the first thing they look at when they load a new page.

Quality content is one of the two most important determinants of web usability.

The main questions asked by the user when judging content include “What’s in it for me?” and “How does this help me solve my problem?”

Web users are goal-driven and impatient.

Therefore, content needs to be much more oriented toward providing fast answers and being useful to the user.