Website Design Tips

I make my living from websites  — at first designing for others, and now running my own sites. Over the years I've compiled my very best tips on web design, and I'm sharing that with you here. This is important because it's all too easy to create pages that frustrate your visitors even though that's not what you intended at all. And visitors who are annoyed are likely to click off of it quickly without seeing what you have to offer.

Fortunately, the most common website mistakes are very easy to prevent or fix.  My big list of website design tips below will help you do just that.

(Gray letter-number codes for each tip are for the benefit of college professors, who requested an easy way to refer to each tip.)

Provide compelling content / something of value

C1.   Make sure each page in your website has somethingvaluable to offer.

Though this doesn't really relate to design, it's actually more important than design, which is why it's the very first tip.  I know many people reading this page are trying to find out how to make useless pages look pretty, because they think that style is all that really matters. So let's step back a minute and realize that fundamentally a web page exists to provide something that's useful or  interesting to visitors. If your page doesn't have that, then you must fix that problem before you worry about how to present it. If you throw mud at a canvas, then even if it's in a gold frame, it's still just a canvas of mud. What are you offering to your visitors? Why is it worth their time to visit your site? Please focus on that before you move on to how it should look.

If your plan is to make money from advertising, then go for a ratio of not less than 75% editorial to 25% advertising.  Amazingly, I see some sites that are almost nothing but ads. We know that no one would turn on the TV if it were just commercials, and no programs, or buy a magazine if it were just ads, and no articles. By the same token, a website also has to have more than ads if it's to be successful.

Avoid Sleazy Elements

Z1.   Don't distract your visitors with blinking or scrolling text, animated GIFs, or auto-loading sound.

Animation and sounds are distracting.  How can anyone concentrate on reading what's on your site when there are things flying around the page? It's like trying to read a newspaper when someone's poking you in the shoulder repeatedly. Also, visitors who have slow connections may resent that you wasted their time by forcing them to load animations and sound files against their will. Conventional wisdom is that people will be drawn to an animated ad, but it's actually the opposite: Readers who are assaulted by blinking ads are more likely to leave the site immediately without clicking on anything, and are far less likely to bookmark the site, return to it, link to it, and recommend it. That's why  research shows that animated banner ads may be no more effective than static ads , anyway. That's been my experience too: When I switched the ads on a friend's site from animated to static, click-through didn't suffer at all. (That site pulls in nearly $400,000 in advertising revenue, by the way.)

Another problem with scrolling text is that the reader can't read it at their own pace.  They're forced to read it at whatever speed you deliver it. They might have preferred to read those two sentences quickly and then move on, but because it's scrolling they have to sit there and wait for the text to slowly appear.

This brings up an important point:  Always keep your visitors' interests in mind. Make sure you try to please them, not yourself. Scrolling text does nothing to serve the visitor. If it's on a site it's because the site owner thought, "Let me show how cool I am." Do you see the difference? Don't design the site for yourself, design it for the people who will actually use it.

Z2.   Don't annoy your visitors with pop-up windows.

Nobody likes popups.  Here again, the only reason a site would have popups is because the site owner is thinking of his/her own interests rather than the readers. We all know that when we're browsing we hate popups, but suddenly when we switch hats and become the site owner, we lose our ability to see through the users' eyes. So let's remember to put ourselves in their shoes. Which of these reactions to popups is a visitor is more likely to have?

(a)  "A popup window, oh goody! I love sites with popups! I will make certain to bookmark this site and visit often. I will also certainly click the ad or links in the popup because I love them so much."

(b)  "@#&$! Whoever made this website obviously has no respect for me as a visitor. When I leave here I will never come back."

Z3.   Don't use image backgrounds.

Image backgrounds scream "amateur", because it's mostly amateurish sites that use them.  Quick, can you name a single professional, respected site that uses image backgrounds? Not Google, Yahoo, eBay, Amazon, the New York Times, Webmaster World, or any others.

One reason that backgrounds scream "low quality" is because sites that use them are often user-hostile in many other ways as well.  For example, when I visited a site recently and saw that they used an image background, I wasn't surprised to find that the site also has extremely slow page-loading times, internal links that pop up into brand-new windows, links that are the exact same color as the surrounding text, cheap animated GIFs, blatant keyword stuffing, and numerous embarrassing misspellings. [As further proof, I had to remove my link to that site from this article, because they went out of business.]

Unfortunately, just as people were finally starting to clue in to the fact that background images are cheap and garish, along came MySpace to repopularize a bad idea. It's not surprising that MySpace is a poster child for bad design in other ways, with obtrusive advertising, force-loading music, distracting animations, and super-slow-loading pages. I'm not the only one who feels that way. Here's how the world-famous  Dan Piraro put it: "Badly designed, impossible to navigate, ugly, loud, depressing, reeking of death. How did this beast that is eating the fabric of our civilization and puking it up on the shoes of our future achieve such popularity?"

But back to image backgrounds, another problem with them is that they take longer to load.  One site I checked had a whopping 144k image background. Its home page takes sixteen times as long to load as the one you're reading now -- even though it has far less useful information.

That said, image backgrounds are fine if you know what you're doing. They can work if you make sure the contrast is very high (e.g., Heartland Country Inn), or you don't put any text over them (e.g.,  Uncommon Wedding Gifts).

Make it Easy to Find Stuff

F1.   Put some thought into organization.

Think about what content you have and how it should be organized.  This is at least as important as what your pages look like, so actually spend some time on it. You do your readers a disservice if they can't easily find what they're looking for if everything is thrown up on your site in a haphazard fashion.

F2.   Minimize clicking!

Put as few clicks between your visitor and your information as possible.  This is so important I'll repeat it: Put as few clicks between your visitor and your information as possible. The more you force your visitors to click around your site the more likely they'll abandon it. Even if they don't leave they might get annoyed, or not view as much of your content — either of which is bad for you.

Is your home page a splash page (a page with no meaningful information on it, that simply "welcomes" visitors to the site, along with an "Enter Site" link)? If so, get rid of it. After someone takes the effort to visit your site, give them your site right away!  Don't make them knock on two different doors.

A related idea is to put meaningful amounts of information on each page. If a page doesn't have at least 400 words, you probably should combine that page with another short page.

Along with minimizing clicking, minimize scrolling, too.

F3.   Limit page length to 2 screenfuls, or 6-7 screenfuls for articles.

While you should put a lot of info on each page to minimize clicking, don't go too far in the other direction by putting too much info on a page. You should normally limit a page to no more than two screenfuls of info. Articles (like this one) are exceptions, because articles are longer by nature. But even so, very long articles (more than about 6-7 screenfuls) should usually be chunked into separate pages.

F4.   Include a way to get back to the home page, on every page.

When users get lost they like to start over from square one.  Make it easy for them to do so. If you're including a clickable logo on the top of every page, make sure to also include text that says something like "Home", because some users don't realize that logos take you back to the home page.  [Example site]

Also remember that users might not be able to hit the "Back" button to go back to your home page, because they might have entered the middle of your site after clicking a link to it from a search engine or from some other site.

F5.   Include a menu on every page.

While you should provide a way for users to get back to your home page quickly, you shouldn't force them to go home before they can go somewhere else. Include a menu on the left or the top of each page. [example of menu at left]  [example of menu at top]

Don't put navigation links only at the bottom of pages, because then users will have to scroll down to the bottom to get to them (unless your pages are very short).  Users clearly dislike links at the bottom of long pages . On long pages, you'll want navigation elements on BOTH the bottom and the top or left, so that users who have read a lengthy page don't have to scroll back up to get to the menus.

F6.   Don't use frames.

You might be tempted to use frames because it makes it easy to have the same header or menus appear throughout the site. And  usability studies do show that users find sites with frames "Easy to Comprehend", "Easy to Navigate", and "Easy to Find Info". But there are two serious downsides to frames: First, the address bar doesn't change as you go from page to page. That makes it impossible for anyone to bookmark or link to a specific page in your site, or to share that page with a friend by emailing them the link. Second, when a page within your site other than the frameset shows up in a search engine, a visitor clicking over to that page will see just that subpage without the surrounding frame.

There are clunky Javascript tricks that can overcome these problems, but once you hassle with that to get your frames to work properly then you're defeating the purpose of using frames because you wanted a quick & easy solution in the first place. The preferred way of having the same elements on a page throughout a site is to use server-side includes.

Don't bog your website down

B1.   Compress your image files.

Nothing is more annoying to readers than waiting for a 200k graphic to load when it should be only 20k instead.  Graphics software can compress files so they take up less room on your disk, and therefore take less time to load into your visitors' browsers. Get some graphics software and shrink those file sizes! GifBot is quick and easy, and shrinks your graphics right on a webpage. Or you can download graphics software: Windows: HVS GifCruncher and JPEG Wizard. Macintosh:  GraphicConverter.

And as mentioned earlier, don't bog your site down with auto-playing sound files, either.

B2.   Don't let flashy multimedia ruin your site.

Flashy graphics and multimedia controls may look nice, but they're bad when they make it hard for visitors to get the information they want from your site.  Nobody wants to be annoyed by having to use a cumbersome Java scroller to see all the text in a field, much less wait for all the doodads to load — if they even work at all. Stay away from sitebuilders like Moonfruit.com. (The exception, of course, are sites whose content is about creative things such as art or music.)

Website Readability

R1.   No line of text should be more than about 600 pixels wide.

The reason that newspapers and magazines are printed in columns is to make the lines short, so after you read one line, it's easy to find the start of next one.  The page you're reading now shows one approach to making line length manageable: put the text in a fixed-width table in the center of the page. Here's an example of a bad page with no limits on line length.

Here's another example of a good page, with sidebars to the left and right of the content. A potential problem with that layout is that the content will be too wide for visitors with really large screens, since the content is fluid and expands when the window is bigger. A way around that is to make the content a fixed width, but that poses another problem: Pages should be designed to work on screens as small as 800x600, which means no more than 770 pixels wide to account for scrollbars and such. The two sidebars on the page in question take up about 175 pixels each, or 350 pixels total. That leaves 770-350 = 420 pixels for the content, which is really thin and ugly on the larger 1024x768 monitors, which are the most common. So if I want two 175-pixel sidebars, I can either:

(a)  make the content 420 pixels wide, which will look crappy on 800x600 screens,

(b)  or I can make the content fluid, which will look okay on both 800x600 and 1024x768 screens, but worse on even larger screens.

I chose (b), because that gives the best result for the majority of web visitors.

R2.   Don't make your page too wide.

Most users have 1024x768 monitors, so pages should be completely visible at 1000 pixels wide without horizontal scrolling. As of 2009, about 10% of users has a screen that's 800x600 pixels or less, so many designers make their pages work at sizes as small as 770 pixels wide. The tradeoff is that if you design for 770 pixels, you're wasting the space available to the other 90% of your visitors. You could use a "fluid" design that's wide as the user's window, whatever that may be, but it's hard to make fluid designs that look good at any resolution. What size to format your pages for is a tough decision full of tradeoffs and beyond the scope of this article, but you can still take one important point from this paragraph:  If your page doesn't work at 1000 pixels, it's too wide.

R3.   Use contrasting colors or simple backgrounds to make your text easy to read.

It's hard to read light text on a light background, or dark text on a dark background.  There are also some color combinations that don't work. And if this tip is so obvious, then why did I run across this page today?

Also, it's hard to read text on background images that have a wide mixture of light and dark; any background images should be simple and mostly dark or mostly light. You can improve readability of text on a background image by increasing the text size and/or making it bold.

You should almost never put text on an image or textured background. Unless you really know what you're doing, such text is usually difficult or annoying to read — if not impossible.

R4.   Make the text large enough to read.

Don't yell at me for stating the obvious, because it's not obvious to everyone: Just today a webmaster referred me to his site which I had to squint to read. Don't punish your visitors if you want them to actually read your content. With CSS rules, go for 12 or 13px Arial, and 11 or 12px Verdana.

R5.   Increase the line spacing (leading) to improve readability.

Putting some space after each line gives it some breathing room and makes it a lot easier to read.  If you don't specify the leading, you don't get any — you get the default of cramped lines. I set this article to 160%, which you can see adds some attractive space between the lines and makes the text appear less daunting. But I kept this particular paragraph at the default, so you can see how it's much less attractive and harder to read. Add spacing by using CSS commands. To set the leading for a table cell, use something like <td style="font:11px/160% Verdana">. For a long block of text put all the text between div's:  <div style="font:11px/160%>(long block of text)</div>. That's enough to get you started, but to really master CSS you'll want tolearn how to create CSS rules.

R6.   Don't type more than a few words in ALL CAPS.

Words that are in ALL CAPS draw attention to themselves because they seem different from the small letters around them. But if you type  everything in all caps, then you completely lose the effect, since everything looks the same, so none of it looks important. If you want to draw readers' attention to something, make the headlinestand out — bold, bright color, maybe a little larger — but keep the text that follows it normal.

R7.   Never use more than one exclamation point!

Typing several (or worse, a gazillion) exclamation points does not make your text seem any more important than just one. In fact, rather than conveying urgency, what multiple exclamation marks really scream is "Amateurish!". Actually, what they really scream is "Desperate!" The writer is desperate to get the reader to believe something. But think about it: Do exclamation marks really impress you when you read them? Are you more likely to believe something because it has a screaming mark at the end? It's probably the opposite: You're used to desperate marketers trying to sell you something with their exclamation marks, so when you see lots of them you sense that desperation and tend to discount what they're trying to convince you of. So when you switch hats and you're the one giving the message, don't let your desperation show by using lots of exclamation marks. Play hard to get. :)

R8.   Use a spelling checker.

Yes, people who spell poorly may not notice or care that your site is badly misspelled, but literate people may notice and care, and they're in the majority.

The right and wrong way to use links

L1.   Don't underline words if they're not links.

On the web, something that's underlined is supposed to be a link. If you underline gratuitously, readers will be annoyed when they try to click those underlined words only to discover that they're not really links. If you want to emphasize something, useitalics instead (or  boldface, or another color).

L2.   Make links blue or underlined, or both.

Users expect links in body copy to be blue and underlined, because that's the way they appear on 99% of other websites.  If you use a different color then at least the underline is a clue that a link is a link. Likewise, if you remove the underline but keep the link blue, then the color is the clue that a link is a link. So it's best to use both blue and underlined, but using at least one or the other is acceptable.

What's wrong is doing neither -- having links that aren't blue and aren't underlined.  How are users supposed to know what's a link at that point? I ran across one page (no longer up) whose main link is red with no underline. To make matters worse, elsewhere on the page they use blue text, which looks like a link, but which isn't. So users had no clue that the link was actually a link, and there was other text that looked like a link, but wasn't. (I tried to bring this to the attention of the site owner but he bragged that nobody else had ever complained.)

Links in menus don't have to be blue or underlined, as long as they're clearly menu items. The blue/underlined tip is for links that are in the middle of the page.

L3.   Explain what you're linking to.

When you're able to provide more information about what a link points to, do so. For example, if your site has a Links page, include a short description of each site you link to, say 1-5 sentences. That way visitors have an idea of what's on those sites, which will help them make their decision on whether to visit those sites, and help them find what they're looking for, while avoiding what they're not looking for.

Nothing is less useful than a whole bunch of links to other sites when those links consist of nothing more than the names of those sites (or worse, the urls). Without any description of what you're linking to, readers are forced to visit each and every site to get an idea of what's there. Imagine 100 of your visitors all repeating that same laborious surfing, needlessly. You could have told them what's on those sites, because you (presumably) visited those sites yourself, so you know what's on them. Do your readers a favor and share your knowledge with them.  [Example site]

L4.   Don't open internal links in a new window.

The owner of a site I just ran across thinks it's a good idea to pop up a brand new window when a visitor clicks a link within his site, but that only annoys users when they suddenly have a gazillion windows open on their screen.  Opening new windows for external links to other sites is fine, but links within a site should always open in the same window. Visitors can still get around your site just fine when links open in the same window, because you did include a good navigation menu at the top or the left of the page as in tip F1 above, right? Opening new windows means that after five clicks within your site, your visitor's screen is cluttered with six different windows.

L5.   Use descriptive link text.

The text of a link should describe what's being linked to.  You should never, ever use words like "link" or "here" or "click here" as the link text. Readers prefer to scan web pages rather than read every word, and you make that impossible if you use generic, non-descriptive words as the link text. Compare the following:

Right way Check out our product specials,  best sellers, and gift ideas.

Wrong way For product specials click here. For best sellers click  here. For gift ideas click here.

Be Accessible

A1.   Put your contact info, or a link to it, on the top and/or bottom of every page.

Don't waste your readers' time by making them hunt around your site for how to contact you. Make your contact info easy to get to. Put your contact info (or a link to it), on the top of every page. [Example] 

If you're not printing your phone and/or email anywhere because you don't have the resources to handle inquiries, then do your readers the courtesy of letting them know that, so they don't spend forever hunting in vain for contact info that doesn't exist.

Unfortunately you can't link up your email address with a simple mailto: link, unless you want lots of spam.  That's because spambots are good at stealing such addresses from web pages. We have a separate article about  how to hide your email address from spambots.

Make sure it works, and that it keeps working

W1.   Test your links.

Make sure your site works! Load your site in a browser from the Internet (not from your hard disk), make sure all the images appear correctly, and click on all the links. This may seem obvious, but if it's so obvious, then why do I constantly find sites whose images and internal links don't work right? If you're using a link checker that's built in to your web editor and your site is framed, then you can't depend on the link checker, because it can't check for framing problems (e.g., pages load into wrong frames, clicking a link results in frames within a frame, etc.). Check it yourself.

W2.   Remove dead external links periodically.

If you link to any external sites, some of those links will almost certainly stop working at some point as the sites move or become extinct. Don't waste your readers' time by forcing them to follow broken links. Check your links at least once every few months. You can use software to automatically check your links to external sites to see if any of them have gone dead.  [Here's a link checker for Windows.]

W3.   Include a "Last Modified" date on the top or bottom of your pages.

If your site contains information that could become outdated, then do your visitors the courtesy of letting them know when the information they're reading was written. That way, visitors won't have to wonder whether the info was written last week or five years ago.

If your content by its very nature can't become outdated. (e.g., poetry, stories, art, website design tips), then a date isn't absolutely essential,, but readers may still appreciate knowing when a page was authored anyway.

Other webmaster tips

O1.   Don't steal content.

It's not acceptable to copy text from another site and place it on your own, unless you get permission from the site owner. It's not legal to do so, either. Just because it's easy to do doesn't mean it's not sleazy or against the law. Copying content is also a good way to get the search engines to make your page or site rank a whole lot lower.

O2.   Don't hotlink to other sites' images or MP3's.

Any image you link to should be on your own server. That is, your code should look like<img src=/images/pic.gif> and not  <img src=http://SomeOtherSite.com/images/pic.gif>. Embedding images into your pages from other sites is called hotlinking, and is considered a theft of bandwidth from the other site (and possibly a violation of copyright). It also screws up the other site's visitor stats, because every time someone visits your page with a hotlinked image, that counts a a visit to the other site, although there was no actual visit to the other site. Hotlinking images can also come back to bite you, if the webmaster of the other site changes the image you hotlinked to be something very offensive (like hardcore porn, or a message specifically insulting you).

O3.   Don't ask for "permission" to link to a site.

I don't know how anyone got the idea that you have to ask another site owner whether you can link to their site, but it's not just unnecessary, it's annoying.  If the thousands of people who linked to my pages had asked permission first then I'd be drowning in an avalanche of email. The whole point  of putting a page on the web is toshare it and give it an audience, so why would a page author not want more people to see that page? Imagine someone writing the following letter:

Dear Mr. Lyman:

    I read your book  No More Bull!  and enjoyed it immensely. I would like to recommend it to several of my friends, so I am writing to ask your permission to do so. I realize that in writing your book you did not in fact want it to have the widest possible audience, and that you want strict control over who has the authority to recommend the book to others, so I will not mention your book to anyone else until you tell me that it's okay to do so. Just a Yes or No is fine, I'm sure you don't have anything better to do than to respond to messages like this one.

Thank you,

A reader

O4.   Don't ask to exchange links with other sites.

Link exchange requests are only a little less annoying than "permission to link" requests — and completely useless.  Link to other sites if you think they'll be of value or interest to your readers — not because the other site links back. If you want links to your site, make your site worthy of being linked to, link to other worthy sites, and then ask those other sites for a link (not a link  exchange). Don't make your link to them contingent on whether they link back or not. If they're worth linking to, they're still worth linking to even if they don't link back. Here's more on why link exchange requests fail.

Other Resources

The Best Damn Web Marketing Checklist, Period!  Alex offers a breathtaking list of important site characteristics for anyone trying to do business on the web.

Coding Style

Revision number: 13

Status: release

Revision History

Date	Revision	Description
30.05.2001	1	Draft version compiled from multiple sources
30.05.2001	13	Added some corrections
31.05.2001	20	Added some corrections
31.05.2001	21	Merged modifications, release version
31.05.2001	22	Minor modifications
07.06.2001	27	Maximum line length increased
07.09.2002	50	Updated for Microsoft.NET
05.12.2002	80	Changes based on vast experience with coding in VS.NET.
10.04.2006		Added SQL Code and RDBMS objects naming requirements

Table of contents

1. Introduction

1.1. Purpose

1.2. Scope

2. General principles

3. C# Code

3.1. Formatting

3.1.1. Spacing

3.1.2. Maximum line length

3.1.3. Indentation

3.1.4. Methods

3.1.5. Cycles

3.1.6. If statement

3.1.7. Switch statement

3.2. Commenting

3.2.1. Beginning of file

3.2.2. Classes

3.2.3. Methods

3.2.4. Code

3.2.5. Temporary comments

3.3. Naming

3.3.1. Variables

3.3.2. Constant names

3.3.3. Method names

3.3.4. File names

3.4. Contract based programming

3.5. Notes in code

3.6. Use regions

3.7. QA

3.8. Example

4. SQL Code and RDBMS Objects

4.1. Naming

4.1.1. Tables

4.1.2. Views

4.1.3. Functions

4.1.4. Stored procedures

4.1.5. Indexes

5. OLAP Objects

5.1. Cubes

5.2. Dimensions

6. Security Considerations

7. VS.NET 2005 settings

8. References

Message Exchange Technology

Document Scope

The Internet project [1] is built on the top of of modern technology for client-server applications. This document lists required components and describes available technology options.

Requirements

• Scalability. The core technology should scale up to the loads handled by the best solutions available on the market. This is because a common B2C service consumes a lot of traffic and we aggregate all popular services.

• Reliability. The service should be available always up. No data loss. The service up-time and reliability project to customer satisfaction and loyalty.

• Performance. The core technology is able to dispatch web pages to a user not slower than the best solutions available on the market. B2C field mandates this.

• Maintenance. The technology should include automation of routine maintenance and monitoring tasks. We are advanced technology company, and not a call center.

• Low costs. The technology should not rely on the performance or other specific features of particular hardware. It should work well on cheap hardware and should be easily portable to the new hardware. Here we take advantage of our software development experience and competence.

• Law enforcement. The service and technology are developed and maintained in a documented way which explains any concerns.

Data Center

Requirements

The project [1] requires the following configuration available at the data center provider:

• Dedicated servers.
• Scalable bandwidth.
• Remote monitoring and administration.

Comparison

Most B2C applications are limited by server bandwidth.

Data Center	Service	Cost, $ per month
http://iweb8.com/dedicated/unmetered-servers/	A reply in four hours	$349
http://www.redplaid.com/	A quick reply	$359
http://www.cologuys.com/services/dedservers/pentium	A quick reply	$650
http://www.webhosting.cx/dedicated.html	No reply to a probe email	$759
http://www.lighthousehosting.com/	The outdated service web page, a quick reply	$1300

Conclusion

The article [1] tells that the good price for a dedicated server with a redundant 10 Mbit bandwidth is approximately $350/mo.

Server Standards

Requirements

The core technology is a background for a high quality service in a production stage. A simple server get a request from a user, searches a database for response and generates a web page as a result. More complex models includes session maintenance and asynchronous communication to a user.

• Scalability. Adding new services is a joy, programmers get a convenient API.
• Interoperability. Services share data and analytic resources.
• Performance. An average user request is served in less than 0.5 sec. This includes processing of complex data base requests.
• Reliability. The user data is replicated through network.

Usually it is a good idea to use the whole stack from one sponsor. This mandates a choice of operating system and a database.

Standard	Sponsor	Server	Client	Performance	OS	Database	Note
Java 2 Enterprise Edition	IBM, BEA, others	WebLogic, WebSphere, open source stack	JavaScript	See [6]	Linux or other UNIX	DB2, Oracle	Encourages participation of third parties
.NET	Microsoft Corp.	IIS/C#	VBScript	Published last results on 2002	MS Windows	MS SQL Server	Private
ColdFusion	Adobe Systems Inc.	ColdFusion, Flex	ActionScript	Never competed	MS Windows		Private

Conclusion

Commercial Java enterprise stack gives the best performance in the market which could be bought. While the loads increase we invest into distributed cluster based infrastructure to be ready for future challenges.

Java Server

Web Server + Servlet Container	SPECweb2005 Score
Zeus Web Server v4.3r2 (x86-64), Apache Tomcat 5.5.11	2277
Sun Java[TM] System Web Server 6.1 SP5 (64 bit)	16407
Rock Web Server v1.4.1 (x86_64), Rock JSP/Servlet Container v1.2.0 (x86_64)	30261

Server + Database	SPECjAppServer2004 Score
WebSphere 6.1 Application Server on IBM System p 570 (4.7 GHz, 4 core)	1197.51
Oracle Application Server 10G Release 10.1.3.2 - Java Edition on Rackable Systems C2002	1871.13
BEA WebLogic Server 10.0 on Sun Blade 6000 Modular System using Solaris Containers	8253.21

Conclusion

We may use BEA WebLogic since it comes free of charge for development. Open source stack is an interesting investment to contact fellow travellers.

Prototyping

Open source solutions [3] should be used for quick prototyping of functionality to test project analytics. There is a number of for loads less than 30,000 customers per day. For example, Yandex uses Django [5] for prototyping which is the best solution from performance point of view: serves loads of 30000 customers per day, dispatches a web page per 0.5 seconds.

References

1. Social Network with Grading Messages and Rating Calculation.
2. Common Data Center terms and definitions, http://en.wikipedia.org/wiki/Data_center.
3. Web Tech Comparison, http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks
4. Offshore Hosting Provider for $150, http://www.clickpress.com/releases/Detailed/32110005cp.shtml
5. Django @ Yandex, http://softwaremaniacs.org/blog/2007/08/13/%d0%b2%d0%b8%d0%b4%d0%b5%d0%be-%d1%81-%d1%80%d0%b8%d1%82-2007/
6. SPEC benchmarks, http://www.spec.org/

Client Request Lifecycle

Basics

The document describes a typical data flow in the system. A web server gets HTTP request from a user, and reports results back. Asynchronous communication models add communication based on a user input.

Scalability

A scalable system requires load balancing during different stages of request processing:

1. Incoming request is forwarded to one of several frontend servers using simple heuristics like request IP-balancing a number of requests for one frontend.
2. A frontend server is a lightweight, configurable http server. It parses incoming requests and contact in parallel a number of backend service instances needed to process this request. Less loaded service instances are chosen.
3. A backend service redirect a request to a database and report XML back to the frontend via HTTP.
4. The frontend server caches backend results based on result timestamps and input parameters.
5. The frontend server reports XSL-transformed page to the user.

Reference number

ISO 9241-151:2008(E)

Draft

2008-05-15

Ergonomics of human-system interaction

Part 151:

Guidance on World Wide Web user interfaces

Ergonomie de l'interaction homme-systeme

Partie 151: Lignes directrices relatives aux interfaces utilisateurs Web

Contents

Foreword

Introduction

1 Scope

2 Normative references

3 Terms and definitions

4 Application

5 A reference model for human-centred design of World Wide Web user interfaces

6 High-level design decisions and design strategy

7 Content design

8 Navigation and search

9 Content presentation

10 General design aspects

Annex A (informative) Overview of the ISO 9241 series

Annex B (informative) Sample procedure for assessing applicability and conformance

Bibliography

Foreword

ISO (the International Organization for Standardization) is a worldwide federation of national standards bodies

(ISO member bodies). The work of preparing International Standards is normally carried out through ISO

technical committees. Each member body interested in a subject for which a technical committee has been established has the right to be represented on that committee. International organizations, governmental and non-governmental, in liaison with ISO, also take part in the work. ISO collaborates closely with the International Electrotechnical Commission (IEC) on all matters of electrotechnical standardization.

International Standards are drafted in accordance with the rules given in the ISO/IEC Directives, Part 2.

The main task of technical committees is to prepare International Standards. Draft International Standards adopted by the technical committees are circulated to the member bodies for voting. Publication as an

International Standard requires approval by at least 75 % of the member bodies casting a vote.

Attention is drawn to the possibility that some of the elements of this document may be the subject of patent rights. ISO shall not be held responsible for identifying any or all such patent rights.

ISO 9241-151 was prepared by Technical Committee ISO/TC 159, Ergonomics, Subcommittee SC 4,

Ergonomics of human-system interaction .

ISO 9241 consists of the following parts, under the general title Ergonomic requirements for office work with

visual display terminals (VDTs):

• Part 1: General introduction
• Part 2: Guidance on task requirements
• Part 3: Visual display requirements
• Part 4: Keyboard requirements
• Part 5: Workstation layout and postural requirements
• Part 6: Guidance on the work environment
• Part 7: Requirements for display with reflections
• Part 8: Requirements for displayed colours
• Part 9: Requirements for non-keyboard input devices
• Part 11: Guidance on usability
• Part 12: Presentation of information
• Part 13: User guidance
• Part 14: Menu dialogues
• Part 15: Command dialogues
• Part 16: Direct manipulation dialogues
• Part 17: Form filling dialogues

Guidance on software individualization is to form the subject of a future part 129.

ISO 9241 also consists of the following parts, under the general title Ergonomics of human-system interaction:

• Part 20: Accessibility guidelines for information/communication technology (ICT) equipment and services
• Part 110: Dialogue principles
• Part 151: Guidance on World Wide Web user interfaces
• Part 171: Guidance on software accessibility
• Part 300: Introduction to electronic visual display requirements
• Part 302: Terminology for electronic visual displays
• Part 303: Requirements for electronic visual displays
• Part 304: User performance test methods
• Part 305: Optical laboratory test methods for electronic visual displays
• Part 306: Field assessment methods for electronic visual displays
• Part 307: Analysis and compliance test methods for electronic visual displays
• Part 308: Surface-conduction electron-emitter displays (SED) [Technical Report]
• Part 309: Organic light-emitting diode (OLED) displays [Technical Report]
• Part 400: Principles and requirements for physical input devices
• Part 410: Design criteria for physical input devices
• Part 920: Guidance on tactile and haptic interactions

Framework for tactile and haptic interaction is to form the subject of a future part 910.

Introduction

It is widely accepted that usability is a key factor in successful website design but until now there has been no internationally agreed standard that specifically addressed the usability of World Wide Web (WWW or Web) user interfaces.

World Wide Web user interfaces pose particular usability problems:

• their users are diverse in knowledge, capabilities, language and other factors - for example, a World
• Wide Web user interface that works well for subject-matter experts may be sub-optimal for ordinary users;
• users' goals vary considerably - for example, a site optimized for one set of tasks (such as e-commerce transactions) could be sub-optimal for users whose tasks are different (such as information gathering);
• different Web browsers or user agents often render Web content in different ways - for example, the layout of individual pages can change, sometimes quite dramatically.

Users of the World Wide Web will have experienced the problems of inconsistency between websites and often even within the same website. For example, something as straightforward as a link may be denoted by underlining on one page, by a mouse-over on a second page and by nothing at all on a third page.

A number of guidelines for good practice exist, many on the Web itself, but these guidelines sometimes conflict and can also be difficult to put into practice. While not addressing Web user interfaces specifically, a number of International Standards are available that provide useful guidance on usability and the design of user interfaces: ISO 9241-11 to ISO 9241-17 and ISO 9241-110 provide ergonomic guidance on the design of software user interfaces in general, ISO 13407 on achieving usability by incorporating user-centred design activities throughout the life cycle of interactive computer-based systems, and the ISO 14915 series of standards on the design of multimedia and hypermedia aspects of user interfaces.

The recommendations and guidelines provided in this part of ISO 9241 apply primarily to the design of the content of a website or, more generally, a Web application, the user's navigation and interaction, as well as the presentation of the content. The user interface of different types of user agents (such as Web browsers) or additional tools such as Web authoring tools are not the subject of this part of ISO 9241, although some guidelines could apply to those systems as well. Aspects of the technical implementation of the recommendations are also not within its scope.

An important objective for developing Web user interfaces is to make them accessible to the widest possible range of users, including persons with disabilities. While some guidance provided in this part of ISO 9241 is also important for the accessibility of Web user interfaces, it does not aim at covering accessibility in a comprehensive manner. Common guidance on securing and improving accessibility to ICT (information and communication technology) equipment, software and services can be found in ISO 9241-20, and detailed guidance on the accessibility of software user interfaces in general can be found in ISO 9241-171, while the

World Wide Web Consortium's Web Accessibility Initiative provides guidance specifically for Web content, user agents and authoring tools.

ISO 9241 was originally developed as a seventeen-part International Standard on the ergonomics requirements for office work with visual display terminals. As part of the standards review process, a major restructuring of ISO 9241 was agreed to broaden its scope, to incorporate other relevant standards and to make it more usable. The general title of the revised ISO 9241, "Ergonomics of human-system interaction", reflects these changes and aligns the standard with the overall title and scope of Technical Committee

ISO/TC 159, SC 4. The revised multipart standard is structured as series of standards numbered in the

"hundreds": the 100 series deals with software interfaces, the 200 series with human centred design, the

300 series with visual displays, the 400 series with physical input devices, and so on.

See Annex A for an overview of the entire ISO 9241 series.

INTERNATIONAL STANDARD

ISO 9241-151:2008(E)

Ergonomics of human-system interaction -

Part 151:

Guidance on World Wide Web user interfaces

1 Scope

This part of ISO 9241 provides guidance on the human-centred design of software Web user interfaces with the aim of increasing usability. Web user interfaces address either all Internet users or closed user groups such as the members of an organization, customers and/or suppliers of a company or other specific communities of users.

The recommendations given in this part of ISO 9241 focus on the following aspects of the design of

Web user interfaces:

• high-level design decisions and design strategy;
• content design;
• navigation and search;
• content presentation.

The user interfaces of different types of user agents such as Web browsers or additional tools such as Web authoring tools are not directly addressed in this part of ISO 9241 (although some of its guidance could apply to these systems as well).

Web user interfaces are presented on a personal computer system, mobile system or some other type of network-connected device. While the recommendations given in this part of ISO 9241 apply to a wide range of available front-end technologies, the design of mobile Web interfaces or smart devices could require additional guidance not within its scope; neither does it provide detailed guidance on technical implementation nor on issues of aesthetic or artistic design.

2 Normative references

The following referenced documents are indispensable for the application of this document. For dated references, only the edition cited applies. For undated references, the latest edition of the referenced document (including any amendments) applies.

ISO 9241-11, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 11:

Guidance on usability

ISO 9241-12:1998, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 12:

Presentation of information

ISO 9241-13, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 13: User

guidance

ISO 9241-14, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 14: Menu

dialogues

ISO 9241-15, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 15:

Command dialogues

ISO 9241-16, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 16: Direct

manipulation dialogues

ISO 9241-17, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 17: Form

filling dialogues

ISO 9241-20, Ergonomics of human-system interaction - Part 20: Accessibility guidelines for

information/communication technology (ICT) equipment and services

ISO 9241-110, Ergonomics of human-system interaction - Part 110: Dialogue principles

ISO 9241-171, Ergonomics of human-system interaction - Part 171: Guidance on software accessibility

ISO 9241-303, Ergonomics of human-system interaction - Part 303: Requirements for electronic visual

displays

ISO 13407, Human-centred design processes for interactive systems

ISO 14915 (all parts), Software ergonomics for multimedia user interfaces

WCAG 1.0, Web Content Accessibility Guidelines 1.0, W3C Recommendation, World Wide Web Consortium

(W3C) (MIT, INRIA, Keio)

WCAG 2.0, Web Content Accessibility Guidelines 2.0, World Wide Web Consortium (W3C) (MIT, ERCIM,

Keio)

1)

3 Terms and definitions

For the purposes of this document, the following terms and definitions apply.

3.1

boolean search search formulation using logical operators

3.2

browser user agent allowing a person to retrieve and read hypertext, to view the contents of hypertext nodes (usually

Web pages), to navigate from one node to another, and to interact with the content

NOTE

A browser also offers a set of operations, e.g. for navigating websites or for changing the visual appearance of the content displayed.

3.3

conceptual content model abstract model describing the concepts of an application domain, the relationships among those concepts and the operations to be performed on the concepts or relationships

1) Working draft. Intended to supersede WCAG 1.0 in its final published version.

3

3.4

content

web content

?Web user interface? set of content objects

3.5

content object interactive or non-interactive object containing information represented by text, image, video, sound or other types of media

3.6

dynamic navigation link

computed link link that is computed dynamically by the system based, for example, on the content of a database

3.7

frame mechanism for dividing a browser window into independent windows, each displaying a different document, or different parts of the same document

3.8

frameset collection of frames and a corresponding layout structure that is presented in the same browser window

3.9

global navigation set of navigation links available on all pages of a website

3.10

home page start page top page main page through which users typically enter a website and whose URL is typically published or linked as the main Web address of an organization or an individual

NOTE

The term home page can be used differently in different contexts. Some groups will call a complete website a home page.

3.11

interaction object component of the Web user interface accepting user input

EXAMPLE

Links, buttons, input fields, check boxes or selection lists.

3.12

Internet worldwide interlinked computer systems and computer networks connected via gateways that enable the transfer of data between them

3.13

intranet computer network using Internet standards, the access to which is limited to members of a particular organization such as a company

3.14

landmark page

landmark main page in the navigation structure that can be directly accessed from many other pages

3.15

link

hyperlink

?World Wide Web? reference from some part of one document to (some part of) another document or another part of the same document

NOTE

Links are also called hyperlinks because hypertext and hypermedia systems make extensive use of this concept. Links are used for activating navigation. They are represented, for instance, as element tags in the hypertext markup language (HTML). The concept of links is also described in ISO 14915-2 in the context of multimedia user interfaces.

3.16

link cue textual or graphical presentation of a link showing information about the link target

3.17

media object component of a Web document that is implemented by a single media type

EXAMPLE 1

A text object presenting a discussion about some topic.

EXAMPLE 2

An image object presenting a picture of some person.

EXAMPLE 3

A sound object presenting a song.

NOTE

Adapted from ISO 14915-2:2003, definition 3.3.

3.18

navigation component group of navigation elements placed together

3.19

profile

user profile set of attributes used by the system that are unique to a specific user/user group

3.20

predefined user profile profile based on a stereotype or combination of stereotypes

NOTE 1

Stereotypes used as the basis of a predefined user profile could include a role, a job function or a group membership.

NOTE 2

Predefined user profiles are often used to define access privileges to specific Web content.

3.21

rendering act whereby the information in a document is presented

NOTE

This presentation is done in the form most appropriate to the environment (e.g. aurally, visually, in print).

3.22

navigation

Web navigation

?World Wide Web? movement between or within Web pages or the movement within some presentation segment presented on a page (e.g. the movement within a particular media object) that users perform to find a specific function or piece of information

NOTE 1

In this part of ISO 9241, navigation is used as a convenient short form for Web navigation (see also

ISO 14915-2).

NOTE 2

Navigation steps are often initiated by activating some link.

5

3.23

navigation structure

Web navigation structure

?World Wide Web? structure composed of elementary or composite presentation segments (such as Web pages or media objects contained in a page) and links, determining all possible paths on which users can move around in a Web user interface

3.24

screen reader assistive technology that allows users to operate software without needing to view the visual display

NOTE 1

Output of screen readers is typically text-to-speech or Braille.

NOTE 2

Screen readers rely on the availability of information from the operating system and applications.

3.25

site map textual or graphical overview of the complete navigation structure of a website

3.26

splash screen temporary page shown prior to the homepage when a website is first accessed

3.27

tool tip small pop-up window that appears when the mouse pointer is moved over an interaction object and that shows explanatory text or help information

3.28

transaction action that involves inserting, updating or deleting information

3.29

Web user agent

user agent front-end software that enables users to interact with a remote system through Internet protocols

NOTE

A browser is a specific type of user agent.

3.30

uniform resource locator

URL mechanism for identifying resources on the Internet (such as Web pages) by specifying the address of the resource and the access protocol used

NOTE

The official technical term as specified by the IETF is uniform resource identifier (URI), of which URL is a subset.

3.31

Web page coherent presentation of a content object or set of content objects and associated interaction objects through a user agent

3.32

Web service

Web resource providing content and/or functionality that can be accessed remotely through standardized protocols and software interfaces

3.33

website

site coherent collection of interlinked Web resources (for example, Web pages or Web services) that is located on one or several computers connected to the Internet, and that can usually be accessed through the same domain specification part of a URL

3.34

Web application

World Wide Web application application providing functionality to the user through a browser or other type of user agent using Web formats and protocols

NOTE

Web applications in the sense of this part of ISO 9241 comprise websites that only deliver content, that combine content delivery with application-specific functionality or that provide only specific application functionality such as a particular Web service.

3.35

Web user interface

World Wide Web user interface all aspects of a website or Web application related to content, functionality, navigation, interaction and presentation that are relevant for using a website or Web application

3.36

within-page link link leading to a target on the same page

4 Application

4.1 Intended user groups

The following groups are intended users of this part of ISO 9241:

? developers and designers of Web user interfaces who will apply it during the development process;

? content providers who generate and maintain the content of a website or application;

? developers of content authoring tools who will integrate the mentioned recommendations into their authoring tools;

? usability evaluators who will check that Web user interfaces meet its recommendations;

? buyers who wish to ensure the ergonomic quality of a software product or development.

4.2 Applying the recommendations

Each individual recommendation in this part of ISO 9241should be evaluated for its applicability and, if judged to be applicable, should be implemented, unless there is evidence that to do so would cause deviation from the design objectives or would result in an overall degradation in usability. In some cases, the designer may need to trade off one principle or recommendation in favour of another to achieve an optimal design.

4.3 Conformance

If a claim of product or application conformity with this part of ISO 9241 is made, the procedure used in establishing requirements for developing and/or evaluating World Wide Web user interfaces shall be specified.

The level of specification of the procedure is a matter of negotiation between the involved parties. Annex B provides a basis both for determining and recording the applicability of all the recommendations and a means for reporting that they have been followed. Other, equivalent, forms of reporting are acceptable.

5 A reference model for human-centred design of World Wide Web user interfaces

The usability of a World Wide Web user interface is dependent upon many different but strongly related factors. Giving structure to the complexity of Web user interface development, the reference model shown in

Figure 1 distinguishes between design, process and evaluation aspects. Addressing these three aspects in an integrated manner is necessary to achieve human-centred Web user interface design. Since process and evaluation aspects are covered in other International Standards, this part of ISO 9241 focuses on the design aspects, with design guidance and recommendations.

Figure 1 - Reference model

In the reference model shown in Figure 1, Web user interface design is structured in five major areas or levels, which have been used to structure this part of ISO 9241:

? high-level design aspects;

? conceptual content model;

? content objects and functionality;

? navigation and search;

? content presentation.

These areas can be seen as representing different levels in the overall design. While the levels do not imply a particular sequence or process, higher-level issues should usually be addressed before lower-level design decisions are made.

In addition, the following International Standards shall be consulted:

? for guidance related to software user interfaces, ISO 9241-110, ISO 9241-11, ISO 9241-12, ISO 9241-13,

ISO 9241-14, ISO 9241-15, ISO 9241-16 and ISO 9241-17;

? for guidance related to multimedia user interfaces, ISO 14915.

The other two parts of the model representing the process domain and the evaluation domain constitute important additional aspects for the user-centred development of Web user interfaces. They are, however, not elaborated in this part of ISO 9241.

The process domain represents the procedural aspects of developing Web user interfaces. The design of

Web user interfaces - as for the design of interactive software systems in general - should follow a human-centred design process, including an appropriate analysis of the intended user groups and their tasks or goals. ISO 13407 shall be consulted for guidance on human-centred design processes.

The evaluation domain refers to methods and criteria for assessing the usability of Web user interfaces. In addition to perceptual and cognitive factors, emotional and belief-related issues such as the attractiveness or trustworthiness of a website can be important when evaluating a Web user interface. Similarly, it can be important to assess the organizational and social effects of an application. Specific evaluation criteria and procedures will have to be specified for each of these different aspects, but are outside the scope of this part of ISO 9241.

6 High-level design decisions and design strategy

6.1 General aspects

Websites take on an increasing variety of forms, ranging from conventional websites as collections of interlinked Web pages to specialized Web services, possibly accessed through specific devices. Content provision is frequently integrated with application functionality that is potentially delivered by a variety of remote resources. These developments often blur the distinction between websites and conventional applications, leading to the more general notion of Web applications. Web applications serve a wide spectrum of purposes, such as, for example, public information websites, e-commerce applications, intranet applications, location-adaptive services and many others. A clear definition of the purpose and strategic goal of the Web application to be developed is therefore a critical high-level design decision that influences many other design aspects.

Web applications and their context of use often have specific characteristics, which differentiate them from conventional software applications. While conventional applications, for example, are frequently developed for specific user groups, tasks or organizational contexts, public websites address a wide range of users with different interests, information needs and tasks. Also, users are no longer bound to one specific system, but may freely move to other websites with similar offerings.

In the process of designing a website, there are typically a large number of different stakeholders who eventually will have to agree upon the purpose and design of the website. For this reason, issues such as defining the target audience, selecting appropriate business models or the definition of a suitable genre and design style for the site need to be explicitly stated and discussed among the stakeholders. When analysing and defining the target user groups, it is critical to consider the diversity of the users expected and the range of capabilities and disabilities they may have. An important design goal is to make Web user interfaces accessible for the widest possible range of users, particularly taking into account potential user limitations in perceiving, operating or understanding the Web user interface.

Depending on the purpose of a Web application, different design goals may be prioritized. For instance, design goals such as "fun" or credibility may have different relevance for a banking website compared with an entertainment website. Prioritizing these goals with respect to the prospective users and their needs constitutes an important aspect of designing a Web user interface.

6.2 Determining the purpose of a Web application

The purpose for which a Web application is developed should be explicitly defined in order to provide a clear basis for developing appropriate content and functionality and for determining further design objectives.

NOTE

Defining the purpose can involve, for example, developing the company image, promoting products or supporting e-business. The purpose of a website could be narrowly defined as, for example, in an online ticket-sales system, or more open-ended, a web site providing a platform for a community of users. Websites are often developed to serve a number of different purposes at the same time. In such cases, aspects such as the ability of users to easily obtain an overview of the scope of the content and functionality provided are important.

6.3 Analysing the target user groups

In the process of defining the purpose of a Web application, the target user groups should be identified.

NOTE

General guidance on considering users and their tasks can be found in ISO 9241-2 and ISO 9241-11.

6.4 Analysing the users' goals and tasks

The goals and tasks of the intended users should be analysed.

6.5 Matching application purpose and user goals

The purpose of the Web application (determined according to 6.2) should be compared and, if necessary, matched with the users' goals and tasks to ensure that users can accomplish their goals.

Frequently, there are conflicts between the goals of the provider of a website and user goals, for example, if advertizing is one of the purposes of a website at the same time as users desire to use an information service efficiently. In such cases, it is important to design the system so that the user is not negatively affected by the goals of the provider.

6.6 Recognizing the purpose of a Web application

The intended purpose(s) of a Web application should be easily recognized by the user.

EXAMPLE 1

An online shopping website is recognizable by the title, description and graphical visual design of the home page.

EXAMPLE 2

A short descriptive sentence (tagline) is used on an e-commerce website to convey what a company does and how it differs from its competitors.

If a website has more than one purpose, it is important that the site's content and navigation support users to discriminate among the purposes.

Web applications have over time evolved into different types, e.g. online news channels, electronic shops or educational websites. These application types or genres often use specific, recurring forms and structures for delivering content that may be tailored to different user groups. Employing these design patterns can be valuable for making the purpose of a Web application easily identifiable and for providing consistent Web user interfaces. However, it should also be noted that the boundaries between different genres are not well defined, that they may overlap and that new genres can rapidly evolve due to the flexibility of the online medium.

6.7 Prioritizing different design goals

If there are different competing design goals they should be prioritized with respect to the most likely frequent and/or critical tasks and needs of the users.

Different design goals, such as, "present detailed information", "design attractive pages" and "keep users engaged" can conflict with one another. If that is the case, it is important that these design goals be prioritized with respect to the user's most frequent or critical tasks and to find suitable trade-offs.

6.8 ICT accessibility

ISO 9241-20 shall be consulted for guidance on ICT accessibility. Web user interfaces should meet its requirements and recommendations.

6.9 Software accessibility

ISO 9241-171 shall be consulted for guidance on software accessibility. Web user interfaces should meet its requirements and recommendations.

6.10 Web content accessibility

WCAG 1.0 and, superseding this, WCAG 2.0 when published in its final version, shall be consulted for guidance on web content accessibility.

6.11 Identifying the website and its owner

The identity of a website and the website owner should be presented clearly and accurately and should be displayed on all relevant pages. If the site owner is a business entity, appropriate information about the company or organization should be provided.

EXAMPLE

A corporate logo is available on all pages as a link to the home page where further information on the website owner is presented.

NOTE 1

Identifying the website can include elements to both define and contact that organization, including business name and contact channels that are open (address, e-mail, fax, phone, messenger, etc.).

NOTE 2

Adding suitable metadata is an additional means for making a website identifiable.

6.12 Coherent multi-site strategy

If the information or services provided by an organization or different parts of that organization are distributed over different websites or subsites, a coherent strategy should be developed and implemented that allows users to navigate consistently between the different sites and to locate relevant information or services without prior knowledge of the purpose, interrelationship and content of the different sites.

NOTE

A style guide might be of assistance to the user interface designer or developer in multi-site situations in implementing a coherent strategy.

7 Content design

7.1 Conceptual content model

7.1.1 General

A conceptual model of the Web user interface describing the concepts and relations of the application domain is an important basis for defining the content and the navigation structure. Such a conceptual model can be developed by analysing the tasks and mental models of the prospective users, as well as existing information structures such as subject hierarchies (taxonomies). Also, different user roles (e.g. consumer vs. business customer) or expectations resulting from using other systems can influence the design of an appropriate conceptual model.

7.1.2 Designing the conceptual model

The conceptual model should be based on the tasks and mental models of the expected users or user groups, using suitable task analysis techniques and taking into account the communication goals of other stakeholders such as the information or service provider.

EXAMPLE

In the conceptual model of an online shop, red wines from Bordeaux are a subcategory of red wines, which are a subcategory of wine and so on. Due to the high popularity of Bordeaux wines, the category is shown at the top level in the navigation structure to attract customers' attention.

A conceptual model can be developed by a variety of methods such as card sorting or drawing affinity diagrams and can be expressed, for example, in an information model using appropriate modelling techniques, e.g. unified modelling language (UML) or topic maps.

Conceptual models can be conveyed through appropriate metaphors, for example, when using a newspaper layout to indicate the importance of different articles.

7.1.3 Appropriateness of content for the target group and tasks

The content provided should be suitable for the purpose of the Web application, the target audience

(characterized by different goals, previous knowledge, preferences, etc.) and their tasks (see also

ISO 9241-11).

EXAMPLE

The Internet presentation of a company provides an overview of the company's competencies and products relevant for prospective customers. The intranet of that company, however, focuses on the description and support on internal processes and on the exchange of knowledge among the employees.

In order to provide appropriate content, a number of analysis and design techniques can be employed, such as writing scenarios of the intended use, collecting and organizing topics in participative design sessions involving prospective users, or developing information models with different degrees of formality (such as thematic networks or class models).

7.1.4 Completeness of content

The content of a website should be sufficiently complete with respect to the purpose of the site and the typical information needs of the user.

Users expect a website to contain all or most of the content relevant for their particular task and information needs. For established types or genres of websites, such as the home pages of a computer supplier or travel agency, presenting the range of topics and the level of detail typically associated with the genre are important factors that contribute to the perceived completeness of the site.

Relevant content can also be provided by presenting links to other websites containing that content.

7.1.5 Structuring content appropriately

In order to achieve usable navigation structures, content should be structured based on the user's tasks and information needs as well as their mental model.

EXAMPLE

In an online newspaper, brief summaries of current news are presented at the top-level of the website with links to the detailed articles. The decomposition of an article into summary and detail allows the user to quickly select those news items that are of particular interest, while obtaining an overview of all current news.

7.1.6 Level of granularity

Units of content should have an appropriate level of granularity (level of detail), especially if a unit of content is to be used in different parts of the website or reused for different purposes.

EXAMPLE

A news article is represented as a short headline, an abstract several lines long, or a multi-page in-depth description of an event.

7.2 Content objects and functionality

7.2.1 General

Based on the conceptual content model, concrete content objects are developed that can be represented as text, images, animations or other media types. Content objects can be non-interactive, only providing information to the user, or interactive, allowing the user to provide input and use the functionality of the Web application.

7.2.2 Independence of content, structure and presentation

Content should be developed to enable easy adaptation of its presentation or structure to changing user requirements in order to allow delivery in different contexts (e.g. internationalization, user mobility or specific devices). This can be facilitated by keeping the content, its structure and presentation independent of each other. Keeping content and functionality, structure of the content and presentation independent of each other helps to improve accessibility.

EXAMPLE 1

The content of a news site consisting of article abstracts, pictures and in-depth news stories can be navigated and presented in many different forms, e.g. pictures can be embedded in the text or accessed through links shown with the abstract. Detailed text can be shown permanently or only on demand. Text styles are different for displays of different sizes.

EXAMPLE 2

Using HTML (hypertext markup language) tables to control the layout of a Web page can make it difficult to navigate and understand the content of the page when viewed on a cell phone or presented with a screen reader (by a user with a visual impairment).

NOTE

A variety of techniques is available for achieving independence, including cascading style sheets (CSS), semantic mark-up such as XML (extensible markup language) - possibly in conjunction with XSL (extensible stylesheet language) or CSS - and functions provided by a content management system.

7.2.3 Selecting suitable media

7.2.3.1

Selecting appropriate media objects

Media objects should be selected based on the type of content to be presented, the user's tasks and the communication goal to be achieved. Detailed guidance on selecting and combining media objects is to be found in ISO 14915-3.

EXAMPLE

A video is used for illustrating a continuous action such as skiing to convey essential aspects of the movement.

Applying this recommendation helps users understand the content, for example, when showing a continuous action through a video. Web pages are often composed of different media objects, such as text, images, video or animation. Selecting appropriate media and combining them in a suitable manner is critical for the user's perception and understanding of the content.

NOTE 1

The use of dynamic media just for the purpose of attracting the user's attention to the website or page could overload the user's perception.

NOTE 2

When selecting appropriate media, it could be necessary to make trade-offs, for example, with respect to download time.

7.2.3.2

Providing text equivalents for non-text media objects

All non-text media objects, such as graphical images or video, should be provided with alternative equivalent textual descriptions and/or with equivalent text-based functionality.

Providing equivalent textual alternatives for non-text media objects facilitates use on devices with small screens. Furthermore, it facilitates text indexing and searching, as well as auditory presentation of content. It is also a critical component of accessibility.

7.2.3.3

Enabling users to control time-dependent media objects

When time-dependent media objects such as animations or moving text are presented, users should be provided with functions to pause or stop the presentation of those media objects.

There are many time-dependent, dynamic media objects, including video, music, other auditory content, animation blinking, scrolling and auto-updating of objects or pages. Users might want to control time-dependent content for a variety of reasons: They might, for example, wish to avoid distraction from their task or view single static images of an animated presentation. Users with cognitive or visual disabilities might need to slow down or pause dynamic content. More detailed guidance on controlling dynamic multimedia is given in ISO 14915-2.

NOTE

Not all time-dependent media objects can be stopped, particularly if the temporal aspect is inherent to the task or if the time-dependency relates to data processing that is being carried out.

7.2.4 Keeping content up to date

When the validity or relevance of content is time-dependent, no out-of-date content should be shown to the user, since users expect the content of a website to be up to date.

EXAMPLE

A weather forecast included on a website is updated at least daily.

It is often useful to provide quick access to information that has been recently featured on a site, for example, in the last two weeks or month, by providing a history.

7.2.5 Making date and time of last update available

The date and (if important for the user's task) time of the last update should be available for all Web pages or content objects.

This allows users to judge the relevance or applicability of the information for their respective goals. Date and time information can be displayed either permanently or on demand.

7.2.6 Enabling communication with website owner

A means of communicating with the website owner should be provided, for example, in order to request further information or to resolve a problem.

EXAMPLE

E-mail, postal address and a phone number, as well as a contact person, are indicated on a company website.

It is useful for users to be additionally informed when to expect a reply, and it is good practice to make contact information easy to locate from the homepage or a specific "contact us" page.

7.2.7 Accepting online user feedback

Users should be provided with an online feedback mechanism that they can use for sending comments, questions or ratings related, for example, to the content or products offered.

Feedback can be communicated by a variety of techniques, including e-mail, feedback forms or other suitable techniques. It is useful if some indication is provided on how and when user feedback will be taken into account. It is also useful that users receive an automated reply stating that their message has been received.

7.2.8 Privacy and business policies

7.2.8.1

Providing privacy policy statements

If a website requires personal information to be entered, an explicit and easy-to-understand privacy policy statement should be provided, one that is readily available from those parts of the site where information is entered or transactions are initiated.

The following types of information are usually included in the privacy policy statement: a) the nature of the information gathered/tracked; b) how the information will be used; c) with whom the information is shared.

NOTE

A number of countries have specific legislation or regulations addressing provisions for collecting user data.

This can involve, for example, displaying a specific statement concerning the collection and use of customer data.

It is advisable to provide the policy statement in a standardized format (such as the W3C's P3P document format) that supports processing the policy statement by user agents.

7.2.8.2

Providing a business policy statement

If relevant in the context of the application, a business policy statement should be readily available on the website.

EXAMPLE

The website contains a business policy statement including, among other regulations, information on how to return goods.

NOTE

Some countries have specific legislation or regulations concerning the availability of business policy information on websites.

7.2.8.3

User control of personal information

If personal information is entered on a website, users should be provided with mechanisms for specifying whether and how personal information is used.

It is preferable to require users to actively agree ("opt in") that their personal information may be used rather than having an option to disagree ("opt out").

It is advisable to provide functions that allow users to view, change, give or revoke their consent at any time.

NOTE

A number of countries have specific legislation or regulations regarding user ownership of personal information.

7.2.8.4

Storing information on the user's machine

If the Web application stores data or executable programmes on the user's local machine (e.g. by using cookies), the policy for using those data or programs should be made explicit.

It is important that this policy be able to be clearly discriminated from other policy material such as the privacy policy as specified in 7.2.8.1.

7.2.9 Individualization and user adaptation

7.2.9.1

General

Adapting the content and the navigation of a Web user interface to individual users or user groups can be a useful mechanism for providing information that is of interest to the users and for making access to relevant information more efficient (see also the dialogue principle suitability for individualization in ISO 9241-110).

User adaptation can also be important for making a Web user interface more accessible. Different approaches can be used for achieving these goals, including the following:

? providing users with means for customizing the website themselves to their personal needs

(individualization), designing content and navigation differently for varying user groups or roles (such as private consumers vs. business customers), with either the users identifying their roles or by having the system select a role for the user based on some criteria;

? monitoring the user's behaviour and adapting to the user's goals that are inferred from the behaviour observed;

? recommending information that is potentially more relevant or interesting to the specific user, based on the behaviour of all users or a user group.

7.2.9.2

Taking account of the users' tasks and information needs

When providing different access paths or navigation structures for different user groups, the tasks and information needs of these user groups should be taken into consideration.

EXAMPLE

In a corporate intranet, users from the financial department find links to currency exchange rate information directly on the home page, while developers are provided with links leading to technical news on that page.

7.2.9.3

Making individualization and adaptation evident

It should be made evident to the user when individualization and/or adaptation are used.

7.2.9.4

Making user profiles evident

If predefined user profiles or user-specified profiles are used for individualizing or adapting content, the profile currently used should be made evident.

If profiles are used, it is important to provide users with information about this concept and its implications.

7.2.9.5

Allowing users to see and change profiles

If user-specified profiles are used, users should be able to see, modify and delete that profile on demand.

EXAMPLE

A website provides users with a profile page on which they can check a number of product types in which they are interested. When a new product becomes available matching those preferences, it is displayed on the homepage once the user enters the site. The user can access the profile page at any time and change his or her preferences or delete this information completely.

7.2.9.6

Informing about automatically generated profiles

If user profiles are automatically generated to adapt the Web user interface to the user, it should be made evident what kind of information is used and how it affects using the Web user interface.

EXAMPLE

Based on a user's navigation actions a news website generates a user profile to recommend topics that are likely to be of interest to this user. The user is informed that these recommendations are made because of his previous interest in the topics recommended.

NOTE

In some cases, profiles are dynamically constructed while the user is navigating a website.

7.2.9.7

Switching off automatic user adaptation

If a Web user interface is automatically adapted, based on, for example, user profiles or behaviour monitoring, it should be possible for the user to explicitly switch off the automatic adaptation or switch to another user profile provided they are authorised to do so.

NOTE

Automatic adaptation or individualization may be confusing for users, for instance, if they have to use a different navigation path to access information than the one used in a previous visit. It is therefore important to design automatic adaptation mechanisms with care, taking into account the user's mental model and other relevant factors.

7.2.9.8

Providing access to complete content

If user-specific or profile-based navigation is used, users should be able to explore the complete content of the website, provided they are authorized to do so.

NOTE

Users may not be aware that some information is not visible to them or is not at the location where they expect it to be, as a consequence of an individualized system-adapted navigation structure.

8 Navigation and search

8.1 General

Navigation involves the set of activities a user performs in a Web user interface to move from the currently visible (or otherwise perceivable) output of the system to another. This change can result in jumping to a different position on the same Web page, in the displaying of a different page, in showing changed content in a navigation frame, or some other change of the information displayed. Designing navigation involves finding a suitable mapping from the structure of the content to the navigation structure. General guidance on mapping content onto presentation segments and on designing navigation structures is provided in ISO 14915-2.

In contrast to navigation, which often requires the user to move to the desired content through several navigation steps, search functions offer direct access to the content, provided that content was retrieved in the search. Navigation and search are often used in combination.

NOTE

In some cases, navigation actions can also be triggered by the system if, for example, a start-up page ("splash screen") is automatically closed after a certain time.

8.2 General guidance on navigation

8.2.1 Making navigation self-descriptive

Navigation should be designed to help users understand where they are, where they have been and where they can go next.

General guidance on achieving self-descriptiveness is given in ISO 9241-110.

8.2.2 Showing users where they are

Each presentation segment (page or window) should provide the user with a clear and sufficient indication of where he or she is in the navigation structure and of the current segment position with respect to the overall structure.

EXAMPLE

The user has moved through three levels in a product catalogue. The current page has a heading that clearly indicates the product category described on this page. In addition, a row of labels at the top of the page shows the current category as well as the levels above, which allows the user to see the current position in the overall structure and to quickly return to higher levels (this technique is often called a "breadcrumbs" history).

Providing sufficient navigational information on each page is also important in cases where users have arrived at that page via a search function. In such a case, users have no context for deriving the meaning and position of the page in the navigation structure and are dependent on the information provided on each page.

8.2.3 Supporting different navigation behaviours

Users can exhibit different navigation behaviours depending upon their goals. They might know what they are searching for or might simply follow links that appear to lead to useful or interesting information. When designing navigation structures, the different user goals and navigation strategies should be considered by analysing the different behaviours that users are likely to exhibit and by allocating priorities to them.

Navigation behaviours include the following.

? In goal-driven navigation, users decide rationally about the link to follow next, remember their path and backtrack as soon as they realise that they are not approaching their target. This behaviour is supported by efficient navigation paths, task-related design of navigation links, history and backtracking functions.

? In heuristic navigation, users avoid planning and memorization, and navigate based on the information and links currently visible. Implications for the design are that pages need to be comprehensible as individual units, that links need to clearly describe their target, and that important information ought to be placed in higher levels of the navigation structure.

? In the mental map strategy, users infer the navigational structure of a website and use this map for accessing the content. To support the development of mental maps, well-organized navigation structures and overview techniques, such as site maps, are helpful.

? Other strategies are, for instance, memorization of frequently used navigation paths or cost-benefit considerations trading off navigation effort against the expected value of the content.

8.2.4 Offering alternative access paths

Alternative access paths for navigating to a specific unit of content should be offered to support different navigation strategies.

EXAMPLE

A page containing legal regulations to be followed when exporting a product to other countries can be accessed either through a content-based category, "export regulations", or through a step-by-step procedure used when shipping a product.

8.2.5 Minimizing navigation effort

The number of navigation steps needed to reach a certain piece of content should be minimized as long as different mental models, navigation strategies and tasks of the user are taken into account.

NOTE

In some cases, less effort is expended by the user when he or she makes more highly confident choices of navigation links (i.e. because the choices are specific and match their expectations), rather than fewer, less confident choices (i.e. because the choices are vague or confusing).

8.3 Navigation structure

8.3.1 General

The navigation structure determines all potential paths on which users can move around in the Web user interface. For a given content structure, different navigation structures can usually be designed.

NOTE

The term information architecture is used by some authors as a synonym for navigation structure.

8.3.2 Choosing suitable navigation structures

Navigation structures should be designed both on the basis of the structure of the conceptual content model, and on the basis of the tasks and navigation strategies of the user. Navigation structures are typically hierarchies, networks or sequences of presentation segments or combinations thereof. General guidance on designing navigation structures is provided in ISO 14915-2.

EXAMPLE 1

A website can be explored based on a hierarchical decomposition of the topic and subtopics the site presents. In addition, some important or new pieces of information are presented at the top level of the navigation structure although they belong to topics positioned at lower levels of the conceptual hierarchy. In this case, a specific piece of information can be reached through the top level as well as through the specific topic the information is associated with.

EXAMPLE 2

An e-commerce site offers a menu based on product categories (e.g. shoes) as well as a menu based on user activity (e.g. hiking).

8.3.3 Breadth versus depth of the navigation structure

If the navigation structure is complex, broad navigation structures offering a larger number of links on one page should be preferred over deep ones requiring a large number of navigation steps, provided that the links on one page are logically grouped, meaningfully labelled, and that their number does not exceed the user's perceptual capabilities.

Guidance on breadth vs. depth in menus is to be found in ISO 9241-14.

8.3.4 Organizing the navigation in a meaningful manner

The navigation structure should be organized on the basis of the concepts that are meaningful and relevant for the user. This includes content-based, task-based, frequency-based and other forms of organization, as described in ISO 14915-2.

EXAMPLE 1

An e-commerce site offers a content-based navigation that maps a product classification to a catalogue that can be browsed using links clearly labelled with the product category names.

EXAMPLE 2

In a Web-based business application, a navigation menu is offered based on the different user tasks such as "enter new order", "change customer data" or "cancel order".

EXAMPLE 3

In the intranet of an organization, relevant documents are linked with the single steps of a procurement procedure. Users can navigate to these documents from each single step in a task-based navigation. Additional content- based access may be available for the same documents.

EXAMPLE 4

In an online shop, users can navigate to frequently purchased items from a list shown on the homepage.

8.3.5 Offering task-based navigation

For well-defined user tasks such as purchasing a product, the navigation structure should offer clearly identifiable links to the page related to that task and should guide the user through the sequence of pages for multi-step tasks.

Frequent tasks can be supported by offering "quick links" to those tasks on the homepage. Within a task, users can be guided from step to step with appropriate options, such as "Back/Next", which are separate from the browser back button. It is important to give users a clear indication of their current position within the task as well as appropriate data processing feedback, for example, whether information which has been entered in a form is saved and/or processed when moving backwards.

8.3.6 Offering clear navigation within multi-step tasks

If users navigate between different pages (or presentation segments) belonging to the same multi-step task, they should be supported by appropriate techniques. Appropriate techniques comprise, in particular:

? providing step-by-step instructions;

? providing clear indications of the user's position in the task at all times;

? allowing users to move to previous steps and correct their entries;

? providing feedback on the status of the data processing.

NOTE

Feedback on the status of the data processing concerns, for example, whether data entered in a form have been saved, whether a financial transaction has been performed or whether a response by e-mail has been sent.

Support for navigation between different task steps is critical both for usability and accessibility.

8.3.7 Combining different ways of organizing navigation

When more than one navigation path is available, offering, for instance, task-based and topic-based access to information or function in parallel, the navigation structures should be designed so that they support the different user goals and are easy to understand.

EXAMPLE

In a customer relationship management system, customers and their orders can be found by navigating between different customer groups and browsing in customer lists. Orders can be accessed from the page displaying the respective customer's data. To directly change customer data or to enter new orders, links labelled "change customer data" or "new order" are also available on the home page. This supports both flexible browsing through customer data and efficient invocation of specific business functions.

8.3.8 Informative home page

A home page represents the top level node in the navigation structure of a website. Home pages should provide sufficiently self-contained information so that the user can understand the purpose, and anticipate the content, of the site, and show important or new pieces of content and provide access to all relevant navigation substructures.

EXAMPLE

The home page of an e-commerce site displays information concerning the purpose of the site and current special offers. It also shows groups of links for accessing the catalogue (these can have a complex substructure), for viewing and changing customer account information, for joining a discussion forum on specific product groups and other relevant areas of the site.

Home pages that are rich in information content are often preferable to "empty" home pages showing only a few links, provided that the perceptual capabilities of the user are not overloaded. Overloading can be avoided, for example, by organizing the content into different groups and by showing these groups in a suitable layout.

8.3.9 Directly accessing relevant information from the home page

The homepage should provide direct access to particularly relevant or frequently used information or functionality.

Providing direct access to relevant or frequently used information from the homepage is useful, provided the user's perceptual capabilities are not overloaded.

8.3.10 Splash screens

8.3.10.1 Avoiding unnecessary splash screens

Splash screens should be avoided unless they provide useful content or feedback about the application state to the user.

8.3.10.2 Skipping splash screens

If a splash screen is used, a navigation option to skip it should be offered.

EXAMPLE

A navigation option to skip a flash-based splash screen is provided as a standard HTML link and not as part of the flash animation.

8.3.11 Avoiding opening unnecessary windows

Additional windows such as new browser windows or pop-up windows should only be opened if this supports the user's task.

Opening new windows can distract, confuse or impede users for a variety of reasons. They can superimpose the primary window, hiding relevant information. They could make it cognitively more difficult to understand the navigation structure with negative effects on both usability and accessibility. They also require additional user actions for closing unwanted windows. User agents that allow users to block opening new windows are helpful for avoiding such problems.

An additional window supports the user's task when it will be used to perform a subtask tangential to the primary task in the main window (e.g. select a date) or when the information in the pop-up window needs to be used in conjunction with the main window (e.g. help content).

8.4 Navigation components

8.4.1 General

Navigation components are groups of navigation elements (such as groups of links or tabs), allowing users to move in the conceptual navigation structure introduced in 8.3. There are a large variety of different navigation components, such as single or multi-level menus, a row of tabs, or trails ("breadcrumbs"), showing the path from the top node in the navigation structure (e.g. the home page) to the current position. Navigation components help users, for example,

? to gain an overview of the navigation structure,

? to get an idea of where to go next,

? to obtain direct access to relevant nodes in the structure ("landmarks"),

? to proceed through the different steps of a complex task,

? to facilitate moving from one task to another, especially if the tasks are typically done in sequence, or

? to go back to previously visited nodes.

8.4.2 Providing navigation overviews

A website should normally provide overviews of the navigation structure. These can be removed or simplified if the user is focussed on a specific task, e.g. the check-out on an e-commerce site.

EXAMPLE 1

A permanently visible, expandable navigation menu is shown as a navigation component on the left side of the window.

EXAMPLE 2

In a process requiring a sequence of steps, such as buying a product on an e-commerce website, the overview shows the steps needed to complete the transaction.

The use of expandable navigation menus is inconvenient when the number of total links (even if hidden) is high. In this case, users of non-visual and non-standard user agents will directly access all of the links, which may generate a cognitive overload. When dealing with a large number of links, a levelled navigation scheme is preferred.

Navigation overviews can be provided by using one or more suitable navigation components.

8.4.3 Maintaining visibility of navigation links

The main navigation links should either be permanently visible, or it should be easy for the user to make them visible if they have been scrolled out of view.

EXAMPLE 1

On a long Web page that needs to be scrolled, links are provided after each section for going directly to the top and/or the bottom of the page.

EXAMPLE 2

On a long Web page that needs to be scrolled, a set of navigation links is shown both at the top and at the bottom of the page.

NOTE

Within-page links are mainly useful for pages showing a longer list of different items or sections. However, while they are useful for navigation, within-page links can also break up the flow of text.

8.4.4 Consistency between navigation components and content

If navigation components (or overviews) are shown in conjunction with associated content, consistency between the navigation component and the content shown should be maintained by indicating in the navigation component (e.g. highlighting) the topic currently visible in the content area.

EXAMPLE

A navigation component on the left-hand side of the page displays the navigation structure as a hierarchical menu with the current selection indicated. The right-hand content area of the page shows the corresponding content. If the user activates a link in the content area leading to another content page, the navigation component is automatically updated, highlighting the new topic that is displayed in the content area.

Maintaining presentational consistency can be difficult due to technical restrictions or high implementation effort. In this situation, it is important to avoid at least incorrect highlighting in the navigation frame.

8.4.5 Placing navigation components consistently

Navigation components should be placed consistently on the pages or in the framesets of a website.

8.4.6 Making several levels of navigation visible

If the navigation structure comprises several levels, the navigation component should be designed to show more than one level of navigation at the same time.

EXAMPLE

A hierarchically expanding menu is used for accessing the content.

NOTE

Seeing several levels at the same time supports users in understanding the navigation structure and in accessing desired content more quickly, as long as they are not cognitively or perceptually overloaded.

8.4.7 Splitting up navigation overviews

For deeply nested navigation structures, navigation overviews may be split into several independent navigation components that are shown in different parts of the page or browser window. If split navigation overviews are used, the partitioning of the overall structure should be semantically meaningful and the placement of the navigation components should be consistent throughout the website so that users can understand the relationship between those different parts. It is critical that users not be perceptually or cognitively overloaded by splitting up navigation overviews into too many components.

EXAMPLE

On a company website, an overview of top level topics such as "company profile", "products" or "investor information" is placed as a row of links at the top of each page. The further decomposition for each topic chosen at the top level is shown in a second navigation menu placed at the left-hand side of the page.

8.4.8 Providing a site map

A separate navigation overview such as a site map should be provided for websites showing the structure of the site in an overview form.

NOTE

For small websites - those, for example, having only one level of navigation - a site map is not needed.

8.4.9 Providing cross linking to potentially relevant content

Cross links to potentially relevant pages in the navigation structure should be provided if they can be included without overloading the user with too many links.

EXAMPLE

In addition to a navigation overview, links are provided within the content part of a page, pointing to related information.

8.4.10 Making dynamic navigation links obvious

Users should be enabled to distinguish dynamically created navigation links from permanent links.

EXAMPLE

A list of products is shown in a navigation overview. Since the corresponding links are created dynamically from a database, they can change from one visit to another. This is made clear to the user by organizing all product links in a coherent submenu.

The user's ability to form an appropriate mental model of the navigation structure depends on recognition of the structure and purpose of the different parts of the navigation structure. While dynamic links are useful for accessing changing content, it is advisable to keep the static navigation structure in place or easily reachable.

8.4.11 Linking back to the home page or landmark pages

Each page should contain a link leading to the home page of the website or to a landmark page that is easy to recognize for the user.

8.4.12 Going back to higher levels

For multi-level navigation structures in complex websites, each page should show links to higher levels that make it apparent to the user how to return to those levels. For deeply nested structures, only a subset of the superordinate levels may need to be shown.

EXAMPLE

A "breadcrumbs" display at the top of the content page shows a sequence of links leading to previously visited levels. The last entry in this sequence refers to the current page and is shown without link functionality (as static text). This allows users to get a clear indication of where they currently are and how to go back to higher levels in the structure, for example, in order to explore other branches of the structure.

8.4.13 Providing a "step back" function

If a task requires a sequence of steps, a meaningful "step back" function should be provided on the page.

EXAMPLE

A "Back" button is provided in a wizard guiding the user through a sequence of steps, because the standard browser functionality would cause data entered by the user to be lost.

8.4.14 Subdividing long pages

If pages are long, they should be subdivided into meaningful sections. These may be directly accessed by a set of within-page links on the top of the page.

For large amounts of content, splitting the content up into several pages or dividing it into sections with headers can be the preferable way of organizing because it helps the user scan the content. Adding suitable metadata is an additional means of producing identifiable sections of a Web page.

8.4.15 Explicit activation

Navigation steps that require the selection of a setting or option should be explicitly activated by the user in a consistent manner, unless it is evident that the selection will trigger a navigation.

EXAMPLE 1

Before accessing the content of a tourist website, users need to select their language from a drop-down list. The navigation is only activated after clicking an additional link or button. This allows users to see their selection prior to leaving that page.

EXAMPLE 2

A submit button is consistently used to confirm the option selection (e.g. from a drop-down list) before going to a new page.

NOTE

Users could confuse the selection of an option with the activation of a navigation step.

8.4.16 Avoiding "dead links"

Links that do not lead to an existing target ("dead links") should be avoided, especially if the target is on the same website and under the control of the designer or operator of that site.

8.4.17 Avoiding incorrect links

Links not leading to the intended target or links that are not functional should be avoided.

This is particularly important when modifications to a website are made.

8.5 Search

8.5.1 General

Providing search mechanisms is an important technique for making the user's access to required information more effective. If specific terms are already known, users could prefer searching to navigating a website so that the overall number of steps needed to find the information is reduced. Search mechanisms are particularly important for large sites that cannot be explored to a sufficient degree within an acceptable number of steps.

Search mechanisms can be based on a large number of different techniques that can have different implications for specifying queries and for interpreting the search results. When providing search functions, it is therefore important to observe the users' knowledge and experience concerning search and to anticipate the different information needs that users will have when using a search function.

8.5.2 Search function

8.5.2.1

Providing a search function

A search function should be provided, unless the Web user interface can be explored exhaustively with acceptable effort.

Providing a search function is important because in many cases users will know either exactly or at least in part (e.g. a keyword) what they are looking for. In those cases, searching can be more efficient than navigation.

EXAMPLE

A search option is provided for books (e.g. title, author) because navigating a hierarchy would require much effort, whereas the user likely knows some information about the book they are interested in.

8.5.2.2

Providing appropriate search functions

Search functions should be appropriate for the user's goals and experience.

Search functions can vary considerably with respect to their logical properties (e.g. Boolean search vs. keyword search) and the resulting complexity and cognitive demands for the user. It is therefore important to consider the user's prior experience with search functions. When different levels of user experience or different user goals are to be expected, providing several search functions with different characteristics and complexity is advisable.

8.5.2.3

Providing a simple search function

A simple search function should be provided.

Simple search techniques do not force users to observe specific operators and syntax for specifying or combining search terms and in many cases allow the user to enter arbitrary words or phrases as search terms.

8.5.2.4

Advanced search

If suitable for the task, advanced search functions should be provided in addition to a simple search, offering the user sufficient descriptive information or help to use those features.

NOTE

Frequently, advanced search functions will be provided to allow the user to specify more precisely how search works. The use of Boolean operators or setting the scope of a search are typical means for advanced search.

8.5.2.5

Full text search

When searching for text on large websites, full text search functions should be offered.

8.5.2.6

Describing the search technique used

If relevant for the user's task, the system should provide sufficient information concerning the search technique used for the user to formulate his or her queries correctly.

NOTE

The kind and level of explanation given for a search technique can differ with the type and complexity of the search technique used.

8.5.2.7

Availability of search

The search function should be available from all pages of the website, unless the current context or task does not allow or require searching.

EXAMPLE

On an e-commerce site, all pages either directly show a search area, or a link leading to a search page, except for those pages the user has to sequentially step through in order to buy a product.

8.5.2.8

Search field size

The field for entering the query should be sufficiently large to entirely display a typical query.

8.5.2.9

Shortcut to search function

If the main entry on the page is one or more search fields, a shortcut for activating the search by a default activation key (typically, the Enter key) should be provided.

8.5.2.10 Error-tolerant search

The search function should return useful results in spite of imprecise or incorrect terms entered in the query.

EXAMPLE

When a misspelled word is entered in a query, the system presents both the results of searching for the incorrect term as well as a suggestion to search again with the corrected term.

8.5.3 Search results

8.5.3.1

Ordering of search results

Search results should be ordered in a way that is meaningful to the user and that corresponds to his or her information needs.

EXAMPLE 1

In a document retrieval application, the documents found are ordered by their relevance to the search term entered.

EXAMPLE 2

In a news feed system, search results are ordered by their time and date.

NOTE

A wide variety of methods exist for determining document relevance for a given query and these can differ in the way in which they support the information needs of the user.

8.5.3.2

Relevance-based ranking of search results

If the results of a search are ordered according to pre-defined internal ranking mechanisms, users should be provided with sufficient information for understanding the effect of this ranking with respect to their tasks and information needs.

A search mechanism offering the user a simple means of entering search terms or phrases can use complex technical search and ranking mechanisms. Though users are usually shielded from this complexity, a sufficient understanding of its effects is important for understanding the relevance of the items found by the search. This can be achieved, for example, by providing appropriate explanations and help.

8.5.3.3

Descriptiveness of results

The search results should be described in sufficient detail for a user to understand their relevance.

If different levels of details are available, the user may be given the option to select the level of detail or the components shown in the listing of the search results.

8.5.3.4

Sorting or filtering search results

If appropriate to the task, users should be given the option to sort or filter search results by different criteria.

The most flexible technique is to allow users to re-sort search results after they have been produced. If the search is complex and time-consuming, specifying sorting criteria in advance is an acceptable alternative. In many cases, both techniques will be useful and may be offered in parallel.

8.5.4 Using search functions

8.5.4.1

Scope of a search

If different scopes for performing the search are applied, the scope used should be made explicit.

Users could confuse a search function operating on the particular site from which the function is activated with a general Web search. This can be avoided by clearly describing the scope of the search.

EXAMPLE

On a company site, a search normally operates on the complete information contained in the site. In the product section, however, the search is limited to products only. This is indicated by labelling the link activating the search

"search in products".

8.5.4.2

Selecting the scope of a search

If appropriate to the task, selecting the scope of the search should be possible.

8.5.4.3

Providing feedback on the volume of the search result

Users should be provided with feedback on the number of results found. It is often helpful to allow users to specify the number of results shown on a single page.

8.5.4.4

Handling large result sets

A consistent technique for handling large result sets should be used for all pages showing search results.

EXAMPLE

The search results are broken up into equal pages and the user is given a means to navigate between pages.

It may be necessary to limit the number of results shown to the user at one time to avoid problems in reading the page (e.g. due to scrolling), or when technical limitations require it.

8.5.4.5

Showing the query with the results

On the results page, the query entered should be shown. This allows users to check their query against the results obtained and to detect errors or problems in the query formulated.

8.5.5 Repeating and refining searches

8.5.5.1

Giving advice for unsuccessful searches

If no results were obtained based on the query entered, search tips should be provided for specifying queries more effectively.

EXAMPLE

If a Boolean search for the terms "cat" AND "dog" returns no results, the meaning of that query is explained and an alternative query using the OR is suggested to the user.

8.5.5.2

Repeating searches

The page showing the search results should contain an option to search again with a changed query on the same page unless the search requires a specific search page.

EXAMPLE

If the search returns no results, the search field is shown again in conjunction with an appropriate message. This allows users to immediately repeat the search with a new or modified query.

Providing a search history is also a useful technique, enabling users to keep track of what they have done already in the process of repeating searches or refining them.

8.5.5.3

Refining searches

If the volume of the search results is large, users should be provided with a mechanism for refining their search within the result set obtained by the first query.

EXAMPLE

A search that results in a large number of items is accompanied with a "search within results" option.

9 Content presentation

9.1 General

This clause provides guidance on the presentation of content in a Web user interface. As developing content objects independent of their presentation (see Clause 7) is recommended, many aspects of content presentation can be specified separately, using, for example, style sheets.

9.2 Observing principles of human perception

When designing Web pages, the general principles of human perception should be taken into account. The

International Standards mentioned below shall be consulted for guidance.

Practical guidelines for presenting information to the user are to be found in ISO 9241-12. Guidance on selecting and using different forms of interaction techniques is to be found in ISO 9241-14 to ISO 9241-17.

ISO 9241-14 gives guidance about menus, ISO 9241-15 about command dialogues, ISO 9241-16 about direct manipulation and ISO 9241-17 about forms. In addition, when designing multimedia information presentations, the design principles and recommendations described in ISO 14915-1 to ISO 14915-3 should be taken into account. Appropriate content presentation also plays a key role in accessibility.

9.3 Page design issues

9.3.1 General page information

Every page should display a descriptive title and, if relevant, ownership and last update.

9.3.2 Consistent page layout

Pages should be designed using consistent layout schemes, supporting the user in finding similar information at the same position on different pages.

Overall layout schemes apply to all Web pages and are preferable when all pages have a similar structure.

Frequently, however, different pages have different purposes and types of content. In such cases, pages can usually be grouped in different categories, using one layout scheme for each category consistently.

9.3.3 Placing title information consistently

Page titles should be placed in a consistent location on the different pages.

9.3.4 Recognising new content

Appropriate means should be used for drawing the user's attention to new or significantly changed content if this is relevant to the user's task.

It is important to select techniques that have no distracting or detrimental effect to the user. Guidance is provided in ISO 14915-3 and ISO 9241-171.

9.3.5 Visualizing temporal status

If the content of a page is only valid for a certain period of time, the period of validity should be indicated by appropriate means.

9.3.6 Selecting appropriate page lengths

The length of a page should be selected so as to support the primary purpose and use of the page. Short pages are generally more appropriate for homepages, navigation pages, or overview pages that need to be read quickly. Longer pages can be more appropriate when users want to read the content without interruptions or when the page needs to match a paper counterpart.

9.3.7 Minimize vertical scrolling

Vertical scrolling should be minimized. This may be done by placing important information at the top and providing links to information that is further down the page.

9.3.8 Avoiding horizontal scrolling

Horizontal scrolling should be avoided wherever possible.

NOTE

The need for horizontal scrolling can be caused by the use of images and tables that are wider than the width of the window.

9.3.9 Using colour

Colour should be used with care, taking into account human capabilities and restrictions in perceiving colour, and not as the only means of conveying information.

EXAMPLE

Error messages displayed with red text are also shown in bold face.

ISO 9241-303 shall be consulted for guidance on using colour. Important design considerations when using colours include

? limiting the number of colours used for coding purposes to not more than ten, and preferably to not more than five,

? maintaining sufficient foreground-background contrast, and

? avoiding certain foreground-background colour combinations that could impede reading text shown in the foreground colour, such as red text on blue background.

NOTE

According to ISO 9241-12:1998, 7.5.1, colour should never be the only means of coding. Some users may have difficulties in perceiving certain colours or colour combinations (colour-blindness). Therefore, colour is only used as auxiliary coding and is made redundant with some other coding techniques.

9.3.10 Using frames with care

If frames are used, care should be taken to avoid possible problems, for example, those involving the use of the back button, bookmarking of pages, or scrolling of information.

When frames are used, it is important to title each frame, and to describe its purpose and how frames relate to one another other, by using, for example, appropriate HTML markup. This will facilitate frame identification and navigation for persons using small screens or screen readers.

9.3.11 Providing alternatives to frame-based presentation

If frames are used on a website, an alternative way of presenting relevant information without frames should be provided.

EXAMPLE

Floating elements such as are provided for in CSS 2.1 (see Bibliographical reference [17]) are used to show a permanently visible navigation component.

NOTE

Some user agents such as cell-phone-based browsers might not be able to present frames.

9.3.12 Providing alternative text-only pages

When style sheets and/or frames are turned off it should be possible for the user to read and understand the

Web page; alternatively, the user should be provided with an equivalent alternative text-only page.

9.3.13 Consistency across related websites

If an organization maintains several websites addressing the same audience, the overall design should be consistent and the different parts should be easy to access.

EXAMPLE

Coherent navigation and page design for different business units within a company.

9.3.14 Using appropriate techniques for defining the layout of a page

The layout of a page should be defined using appropriate techniques to accommodate varying characteristics of the presentation devices or software.

EXAMPLE

Instead of using an HTML table for producing the layout of a page, a CSS (cascading style sheet) is used.

9.3.15 Identifying all pages of a website

All pages or windows belonging to a specific website should be easily identifiable as parts of that site.

EXAMPLE

All pages of a company site are marked with the logo of the company.

Frequently, users are unaware that they have moved to a different website. Logos are an effective way to ensure that a user is aware of the identity of the page at which he or she has arrived. For this, it is also useful to place the logo consistently on each page.

9.3.16 Providing printable document versions

If a document is either too long, dispersed over several pages or in a specific layout that is not suitable for online reading, a printer-friendly version of the document should be provided that prints the content in a form acceptable to the user (e.g. in the expected layout, paper format, or orientation).

Printable document versions are useful both for online viewing and for printing. Depending on the task, consider providing a coherent printable online page showing the document content or a downloadable version of the document.

9.3.17 Use of "white space"

"White space" on a page (space filled only with the background colour) should be used in such a way that it does not impair the visual skimming of the page. While white space is an important means of visually organizing the different content elements on a page, if the distance between the blocks of information displayed becomes too large, rapid skimming of the page can be impeded.

9.4 Link design

9.4.1 General

Links can be presented by different means, such as text or buttons. Using appropriate technologies, arbitrary multimedia objects such as moving objects in an animation or film can also be used as link anchors. General guidance on link design is to be found in ISO 14915-2.

9.4.2 Identification of links

Links should be easily recognisable by the user. Identification of links can be supported by a variety of techniques, such as underlining and colour-coding text, highlighting the link or by positioning the link in a group of navigation elements. It is important that such techniques be used in a consistent manner.

It is important that links not be recognisable only by their colour (see ISO 9241-12).

It is also important to avoid designing visual elements that appear to be links but which are not.

9.4.3 Distinguishing adjacent links from each other

When several textual links are shown in one section of text or in a single line, the links should be visually separated from one another - for example, by non-link printable characters.

9.4.4 Distinguishing navigation links from transactions

Interaction objects shown on a page should be chosen so that users can easily distinguish between navigation and transactions manipulating data.

EXAMPLE

Text links are used for navigating from page to page, while buttons are used for transactions that manipulate data.

9.4.5 Self-explanatory link cues

Link cues (e.g. link labels, icons or tool-tips) presented to the user should be self-explanatory and give a clear indication of the target to which the link leads.

EXAMPLE 1

A link labelled "Product Description" leads the user from an overview list of products to a detailed description of the product selected.

EXAMPLE 2

The destination or action of a link is explained in the "title" attribute of the anchor tag (tool-tip).

Textual link anchors with a clear description of the link target are usually the best technique for conveying the meaning of a link to the user. Graphical symbols are only useful for common and frequently used link types and if they represent a well known metaphor (e.g. a shopping cart symbol in an e-commerce application).

In certain situations, users could be confused by moving to a new site or navigation context. It is helpful to design links to help users distinguish between internal links leading to targets in the same context and external links that lead, for instance, to the website of another company. Some possible means of distinguishing internal from external links are through the wording of the link text, the position on the page or by means of graphical representation.

9.4.6 Using familiar terminology for navigation links

Navigation links - particularly links representing the main navigation structure of a website - should be labelled with terms that are familiar to the user, based on his/her general knowledge, prior experience in the application domain or experience of using other systems.

9.4.7 Using descriptive link labels

The target or purpose of a link should be directly indicated by its label, avoiding generic labels such as "go" or

"click here" except where the purpose of the link is clear from its context on the page or the labels have commonly understood semantics in the particular application domain.

NOTE

Frequently, a list of link parameters (such as country names) in conjunction with a "go" button is used to select from a large or variable number of link targets. This is acceptable if the meaning of the navigation is clearly understandable.

Using appropriate terminology specific to the user's tasks and information needs is important for making the content easy to understand.

9.4.8 Highlighting previously visited links

If the standard browser presentation of links is modified or bypassed (e.g. using graphics as links), links that have been previously visited by the user should be marked by an appropriate technique such as the colour coding of that link.

9.4.9 Marking links to special targets

Links leading to special targets, such as

? other file formats (such as audio or video files),

? exceptionally large files with long download times, or

? pages in different languages, should be clearly marked with an appropriate indication of the special target characteristics.

EXAMPLE 1

A link leading to a document in PDF (portable document format) is labelled with the name of that file preceded by text showing the letters PDF and marked with a "title" attribute that indicates that the file is in PDF format.

EXAMPLE 2

Next to a link to a large, downloadable file is text indicating the file's size.

9.4.10 Marking links opening new windows

Links that open new browser windows or pop-up windows should be clearly marked.

EXAMPLE

A special graphical symbol such as a small arrow is consistently used on a website to indicate links that open new windows. In addition, a suitable text equivalent is provided to support mobile devices and accessibility.

9.4.11 Distinguishing navigation links from controls

Navigation links should be clearly distinguishable from controls activating some action.

EXAMPLE 1

A link using a person's name to open an e-mail window for sending mail to that person includes the word

[e-mail] in parenthesis or a "mail" icon before that person's name (with alt text "e-mail").

EXAMPLE 2

In an e-commerce application, a control labelled "perform payment" gives an unambiguous indication that activating the control results in a financial transaction.

EXAMPLE 3

All links opening a new window are marked with a small arrow before the name of the link.

EXAMPLE 4

In an application in which buttons are used, those performing navigation links are labelled with a noun indicating the target, while those initiating an action are labelled with a verb-noun expression (such as "create new order").

Typical action types in Web user interfaces include

? manipulating application data,

? performing searches,

? communication actions, such as opening a new e-mail window or starting a chat function, and

? presentation-related actions, such as sorting a list of search results.

9.4.12 Distinguishable within-page links

Within-page links should be clearly distinguishable from other links that lead to a different page.

EXAMPLE

Within-page links are shown with dashed rather than solid underlines.

9.4.13 Link length

Textual link names should be long enough to be understood but short enough to avoid wrapping.

EXAMPLE

Where line-wrapping cannot be avoided - in this case, due to window or frame size - links are represented so that they can be recognised as a single coherent link cue.

9.4.14 Redundant links

If more than one link pointing to the same target is provided on a page, the labels of the redundant links should be consistent.

9.4.15 Avoiding link overload

Text pages containing large proportions of links should be formatted so that the presence of links does not impede the readability of the text.

EXAMPLE

Sentences with sets of links are structured using bullet lists.

9.4.16 Page titles as bookmarks

Pages should have appropriate titles, so that they are usable as bookmarks.

NOTE

Titles are used in many situations such as for bookmarks, for window identification or for helping user orientation.

9.5 Interaction objects

9.5.1 Choosing appropriate interaction objects

Interaction objects should be chosen according to the logical properties of the input expected and the user's tasks. Guidance on selecting interaction objects is also provided in ISO 9241-14, ISO 9241-16 and

ISO 9241-17.

EXAMPLE

For selecting a single option from a smaller list of mutually exclusive options, a radio button is used as the interaction object.

The logical properties of the input determining the selection of a suitable interaction object include

? the type of input (e.g. initiating an action, changing a setting, starting a navigation),

? whether the possible input values are predefined or unconstrained,

? the type of input value (e.g. numeric or textual), and

? the number of elements to be selected.

User task characteristics to be considered when selecting interaction objects are, for example, the expected frequency of performing the input action, the frequency of selecting a particular value, or the number of values the user needs to see in parallel. In addition, factors such as the amount of screen space available can be important.

9.5.2 Making interaction objects identifiable and understandable

Interaction objects should be easy to identify and understand.

EXAMPLE

A row of tabs at the top of the page is shown as buttons with clear labels.

9.5.3 Providing keyboard shortcuts

Keyboard shortcuts should be provided for important links and other interaction objects.

9.6 Text design

9.6.1 Readability of text

Text presented on Web pages should be readable taking into account the expected display characteristics and spatial arrangement. ISO 9241-303 shall be consulted for screen text legibility requirements.

9.6.2 Supporting text skimming

Fast skimming of text should be supported by the provision of clear links, bulleted lists, highlighted keywords, logical headings, and short phrases and sentences.

9.6.3 Writing style

The reading and understanding of the textual content on the screen should be supported by suitable means, including the use of short sentences, the division of the text into shorter chunks or the presentation of content items in the form of bullet points.

For websites that aim at conveying content quickly, it may be useful to start the text with a summary conclusion which is subsequently elaborated. Providing summaries in easy-to-understand language will also help users who do not read well.

9.6.4 Text quality

The quality of textual content with respect to spelling and grammar should be sufficient so as not to impede readability.

This can be achieved, for example, by routinely using spell-checking software prior to publishing Web pages.

9.6.5 Identifying the language used

The primary natural language used on a Web page as well as text passages in other languages should be identified by suitable techniques such as HTML markup. This enables, for instance, assistive technologies to determine the language of a text and to render it appropriately.

9.6.6 Making text resizable by the user

Text should be able to be resized by the user, using functions provided by the user agent or other appropriate means (see ISO 9241-171).

10 General design aspects

10.1 Designing for cultural diversity and multilingual use

10.1.1 General

If the users of a Web application are expected to be culturally diverse and/or to use different native languages, the Web user interface should be designed to take the relevant characteristics of the different user groups into account.

Supporting culturally or linguistically diverse user groups may be achieved by providing localized versions of the Web user interface.

10.1.2 Showing relevant location information

If suitable for the task, information should be provided about the geographical context of the website.

EXAMPLE

On a user support site of a company, full country names are shown along with a list of phone numbers users are expected to call, and time zone information is provided to aid in determining an appropriate hour of the day at which to call.

10.1.3 Identifying supported languages

If a website is available in different languages, the languages supported and the links for selecting them should be clearly presented.

In many cases, users will find it helpful if they can switch between languages at more than one point on a website. When reading a technical document, for example, users may want to switch between one language and a second language to quickly check a technical term, then return to the first language for further reading.

It is advisable to identify a language using commonly understood names for it or - if appropriate - a language code according to ISO 639. The use of flags for this purpose is not recommended, since a flag identifies a country, not a language.

10.1.4 Using appropriate formats, units of measurement or currency

When designing Web user interfaces for international use, input and output of information elements such as currency, units of measurement, temperatures, date and time, phone numbers, address or postal codes should be designed so that they are usable by an international audience.

EXAMPLE 1

A Web user interface providing means for financial transactions or information about prices shows the currency applicable.

EXAMPLE 2

The address input fields on an order form are designed to accommodate addresses from all the countries concerned.

EXAMPLE 3

The date "February 3, 2008" is shown in a format that can be easily and unambiguously understood by an international audience, using the standardized format 2008-02-03 (see ISO 8601) instead of, e.g. "02/03/08".

10.1.5 Designing presentation of text in different languages

For multilingual Web user interfaces, the characteristics of the different languages should be taken into account when designing the presentation and layout of text.

NOTE

For users of Asian characters such as Kanji, Chinese, or Hangul characters, styled texts are difficult to read.

For example, bold style makes words unclear and italic style collapses characters because Asian characters are composed of more strokes than Latin characters.

10.2 Providing help

Where the content or functionality provided might not be obvious to all users, suitable help information should be provided (see ISO 9241-13) with clearly identifiable links leading to help pages.

In addition to providing proper help pages, offering an FAQ (frequently asked questions) section is good practice to help users with commonly experienced issues and problems.

10.3 Making Web user interfaces error-tolerant

10.3.1 Minimizing user errors

Potential user errors as well as the effort needed to recover from errors should be minimized.

EXAMPLE

When entering the departure date for an online flight booking, the return date is automatically set to the same or a later date to support the user in specifying a valid trip period.

10.3.2 Providing clear error messages

The content of error messages shown on Web pages or special error pages should clearly state the reason why the error occurred and, if possible, actions the user can take to resolve the error.

NOTE

Users expect error messages to be in the same language as the Web user interface.

10.4 URL names

The name of the URL used for accessing the website should conform to user expectations.

EXAMPLE

The products overview page of company xyz can be accessed by the URL www.xyz.com/products/

NOTE

Users frequently try to navigate to a website's home page or a particular page by either remembering or guessing the URL of that page. A consistent naming scheme which conforms to user expectations supports users when applying this technique. However, dynamically generated Web pages might prevent the use of simple, human readable address names. In this case, there are trade-offs between the benefits of the dynamic generation and those of direct access to a page.

10.5 Acceptable download times

Web pages should be designed and implemented so that there are acceptable download times for the expected range of technical contexts of use (e.g. bandwidth between the website and the user). This is particularly important for frequently accessed pages or pages that are important for user navigation and exploration, such as the home page.

NOTE

Acceptable download times are influenced by user expectation and other usability characteristics of the site.

10.6 Using generally accepted technologies and standards

Generally accepted Web technology standards should be used when appropriate for the purpose of the Web application and the user's tasks, applying them according to specification.

Using widely accepted standards such as XHTML, CSS and others reduces the risk that user agents or assistive technologies are not able to present the Web user interface appropriately. Otherwise, both usability and accessibility of the Web user interface can be negatively affected.

10.7 Supporting common technologies

Web user interfaces should work effectively with different commonly used technologies (such as different browsers) or typical technical characteristics (such as screen sizes).

10.8 Making Web user interfaces robust

Web user interfaces should be designed to be as robust as possible in the face of changing technology. This encompasses being able to present content containing newer technologies by older user agents as well as designing content to be usable with future technologies.

EXAMPLE

A page containing a Java applet is designed such that its content can still be presented and understood when a Java plugin is not available or turned off.

10.9 Designing for input device independence

Web user interfaces should be designed to allow activation of controls by a variety of input devices.

The ability to choose between different input devices for activating controls such as links, fields and buttons is important both for users who prefer a certain input mode, mobile users and users with disabilities. In general, device independence can be achieved if the functionality is operable via a keyboard. This would allow, for example, the use of speech input as an alternative technique for operating the controls. Keyboard input is also important for highly experienced users because it helps them speed up their interaction.

10.10 Making the user interface of embedded objects usable and accessible

When objects such as a Java applet or a media player are embedded in a Web page, the user interface of such objects should fulfil the same usability and accessibility requirements as the Web user interface in which they are embedded.

Annex A

(informative)

Overview of the ISO 9241 series

This annex presents an overview of ISO 9241: its structure, subject areas and the current status of both published and projected parts, at the time of publication of this part of ISO 9241. For the latest information on the series, see: http://isotc.iso.org/livelink/livelink?func=ll&objId=651393&objAction=browse&sort=name .

Annex B

(informative)

Sample procedure for assessing applicability and conformance

B.1 General

This annex provides an example of a checklist (see Table B.1) that can be used to determine whether the applicable recommendations in this part of ISO 9241 have been followed.

The checklist can be used either during product development or for evaluation of a completed product.

The checklist contains all recommendations from this part of ISO 9241, presented in sequence.

It should be noted that the procedure described is itself provided as guidance and is not an exhaustive process to be used as a substitute for the standard itself.

Use of the checklist provides a basis for

• determining which of the recommendations are applicable,
• determining whether applicable recommendations have been followed, and
• providing a systematic listing of all the applicable recommendations that have been followed.

The majority of the recommendations are applicable to all software Web user interfaces and increase usability.

However, usability depends upon the context of use (the users, tasks environment and technology). Where a conditional "if" appears in a recommendation, it is necessary to determine whether or not the context of use in which the software Web user interface is, or is intended to be, used is included within the conditions covered by the "if" statement. For each context-dependent recommendation, information on applicable circumstances is given in the clause/subclause. If the conditional statement does not apply and thus the recommendation is not applicable, this should be noted in the relevant column in the applicability section of Table B.1, and a brief explanation should be provided in the "Reason not applicable" column.

The next step involves determining whether the software Web user interface being evaluated conforms to each recommendation (as applicable). The exact method for making this decision could vary from an inspection-based judgment of whether a feature is or is not present to testing the software with users.

Whatever the method of evaluation considered most appropriate, the proposed checklist provides space to give an indication of the level of conformity as well as observations on the method used or the judgment, which can be entered in the "Comments" column.

The completed checklist can be used in support of statements relating to conformance of software with this part of ISO 9241, providing a list of those applicable recommendations to which conformance applies.

B.2 How to use the checklist

Clause/subclause numbers and titles are presented in the first two columns of Table B.1.

The third column is used to indicate whether the recommendation in each clause/subclause is applicable or not. All those that have no conditions attached to them already have a "Y" (for "Yes") inserted in the third column to show that they are applicable.

All other clauses need to be checked in relation to the design context of the specific software system being developed or assessed. It should be noted that some recommendations for which there is a conditional statement will need to have column three completed.

In addition, the applicability of all the recommendations should be checked and "Y" or "N" entered in column three, as appropriate.

Where a recommendation is not applicable a brief note giving the reasons should be inserted in column four.

When checking whether a recommendation has been satisfied it will be necessary to review all those items which indicated as being applicable in column three.

There should be an entry in the relevant place in column five, six or seven, showing whether each applicable recommendation has been satisfied ("Yes"), partially satisfied ("Partially") or not satisfied ("No"). Any clause/subclause which is either judged to be partially satisfied, or not satisfied should be accompanied by a brief note explaining the reasons why this is the case.

Table B.1 - Example checklist

Bibliography

[1] ISO 639 (all parts), Codes for the representation of names of languages

[2] ISO 5127, Information and documentation — Vocabulary

[3] ISO 8601, Data elements and interchange formats — Information interchange — Representation of dates and times

[4] ISO/IEC 13250, Information technology — SGML applications — Topic maps

[5] ISO/TR 16982, Ergonomics of human-system interaction — Usability methods supporting human-centred design

[6] ISO/TR 18529, Ergonomics — Ergonomics of human-system interaction — Human-centred lifecycle process descriptions

[7] BRINCK, T., GERGLE, D. and WOOD, S. D., Usability for the Web: designing websites that work, San Francisco, CA, Morgan Kaufmann Publishers, 2002

[8] KOJANI, S. J. et al., Research-based Web design and Usability Guidelines, U.S. Department of Health and Human Services, 2003 (http://www.usability.gov )

[9] NIELSEN, J., Designing Web usability the practice of simplicity. Indianapolis, New Riders Publishing, 2000

[10] NOGIER, J. F., Ergonomie du logiciel et design Web. Dunod, 2003 (in French)

[11] DUYNEVAN, D. K.; LANDAY, J. A. & HONG, J. I., The Design of Sites - Patterns, Principles andProcesses for Crafting a Customer-Centred Web Experience , Boston, Addison-Wesley, 2003

[12] SCANO, R., Accessibilita dalla teoria alla realita. Associazione, IWA, Italy, 2004 (in Italian)

[13] STEPHANIDIS, C. (ed.), User Interfaces for All - Concepts, Methods and Tools. Mahwah, NJ. Lawrence, Erlbaum Associates, 2001

[14] TRAVIS, D.S., E-Commerce Usability: Tools and Techniques to Perfect the On-line Experience. London,

Taylor & Francis, 2003

[15] CC/PP, Composite Capability/Preference Profiles: Structure and Vocabularies, World Wide Web

Consortium (W3C) ( http://www.w3.org/TR/2003/WD-CCPP-struct-vocab-20030325/ )

(Working draft, 2003)

[16] P3P1.1, The Platform for Privacy Preferences 1.1, World Wide Web Consortium (W3C) Specification

[17] CSS 2.1, Cascading Style Sheets Level 2, Revision 1, World Wide Web Consortium (W3C)