For usability, site design is often more important as the user will be unable to get to the correct pages if the site is not structured for user’s needs. A navigation system should be provided to allow users to find what they want.

Screen Real Estate
Content of interest to the user should dominate web pages and not navigation facilities. White space should be used to separate content rather than heavy lines as it guides the eye, clarifies the grouping of information and also contributes to faster download times.

Content should account for at least half of a page’s design and preferably closer to 80%. Navigation facilities should be kept below 20% of the space. This will be higher for home pages. If advertising needs to be used it must be considered part of the overhead of the navigation facility.

Simplicity always wins over complexity especially on the web where every 10 bytes saved is 2 milliseconds less download time. To predict user’s monitor sizes is virtually impossible, so it is necessary to use a single page design to work with all the different display devices.

Cross-Platform Design
Web designers need to accommodate and support user-controlled navigation. Sites that force users through set paths or prevent them from linking to certain pages can feel strict and domineering. Design for freedom and movement. A logo linked to the home page on every page will help users who have gone straight to an internal page.

Where are users coming from?
Users access the web from many different devices. On the web a factor of 100 in screen area between hand-helds (PDAs) and workstations needs to be accommodated and a factor of 1000 in bandwidth between modems and T3 connections.

Because of the different size monitors, pages need to be designed to work on small screens. Any web design will look different on this variety of devices. Designers should specify pages in terms that enable browsers to optimise the display for each individual user’s circumstances. Style sheets would help.

Resolution-Independent Design
Design resolution-independent pages, which adapt to whatever size screen they are displayed on. Use percentage based layout instead of a fixed pixel-width for any design element. Icons should continue to work when they are displayed at 100dpi resolution or better.

Try not to include any text in graphics. Resolution-independent pages will work well as printouts. Provide a separate printed version for any long documents even though users are known to print out pages directly from the browser.

When is it safe to upgrade?
HTML 1.0 is the only format you can use with complete confidence. Don’t let any beta-phase web technology any where near your site. It is recommended to hold off from using any new web technology on your website until 1 or 2 years after it is officially launched in a non-beta version.

In the first year, avoid new versions of HTML or other specs, any browser-specific features, plug-ins or other software components, or new data formats.

Three reasons to be conservative in using new web technology in your site...
1. With an upgrade speed of approximately 1% per week, it will be two years before everybody has it.
2. There will be bugs that need sorting out within the first two years.
3. Trial and error is involved when determining the best way of using new technology, which can harm users rather than help them. Sit back and watch how it takes off.

Provide content in an alternative format for those users who have not yet upgraded if you decide you cannot wait a year.

Separating Meaning and Presentation.
Originally web design was based on encoding the meaning of information and not its presentation. Web design is now reverting back to encoding the meaning of information due to the many different display devices.

With the meaning of information being encoded, speech browsers can know how the information is structured and relay headlines etc to the user much easier. Information relating to the presentation of the information should be kept in a separate style sheet file that is linked to a content file that contains only semantic mark-up. Style sheets are a solution and in the future a page could be linked to 3 different style sheets. One for desktops, one for small screens and one for television screens.

Response Times
Robert B. Miller presented a classic paper on the topic at the Fall Joint Computer Conference in 1968:
· One tenth of a second (0.1). This is the limit where the user feels the system is reacting instantaneously. No special feedback is required. This is also the response time limit for any applets that allow users to move, zoom, or manipulate screen elements in real time.
· One second (1.0). The user will notice the delay but their flow of thought will remain uninterrupted. No special feedback is required.
· Ten seconds (10.0). This is about the limit for keeping the user’s attention focused on the job at hand. After this, users start doing other tasks while waiting.

Predictable Response Times
Users come to expect certain actions to take a certain amount of time and their behaviour changes if this alters. They can be pleasantly surprised or feel that it has not been done correctly if the task finishes earlier than their expectation and get annoyed or abandon a site if a task takes longer than expected. Stabilising your response times will result in a usability improvement.

Help users predict response times by giving some indication of what’s happening, the size of the download or how long more it will take if the response time will be more than 10 seconds.

The response time from server to browser determines the user’s experienced response time.
· The throughput of the server: Machines should be upgraded as traffic increases.
· Server’s connection to the Internet: Upgrade your connection; don’t leave until current connection is saturated.
· Internet: During peak hours and cross-continent connections the Internet still has bottlenecks.
· User’s connection to the Internet: Connection speeds are extremely low for the majority of users.
· The speed of the user’s computer and browser put together: Complex tables can take significant time to render on low-end machines.

Fast Downloads and Fast Connections
The most popular sites are fast. Keep graphics to a minimum. Coloured table cells can work just as well. If it is necessary to use graphics, try using multiple occurrences of the same image, as they will render quickly as the image will be in the user’s cache. The following table shows the maximum allowable page size required to achieve desired response times for various connection speeds. Half a second in latency is assumed.

1 Second Response Time 10 Seconds Response Time
Modem 2 KB 34 KB
ISDN 8 KB 150 KB
T1 100 KB 2 MB

The above table and figures were taken from Jakob Nielsen’s book “Designing Web Usability”

The page size limits above may seem strict but the penalty sites pay is loss of users when they exceed these.

Faster URLs
Links to a directory should include the final slash (‘/’) in the URL when embedded in web pages. Leave the slash out when writing the URL for human consumption.

First Screen
Give users some information to act on while the rest of the page loads. Guidelines for fast initial loading include the following.
· Top of the page should be meaningful: More text and fewer images.
· Use ALT text attributes for images so users can understand what the image will be about.
· For the browser to draw the top of the page quickly it requires layout information such as the WIDTH and HEIGHT attributes on all images and table columns.
· Cut down on complexity of tables. Possibly split information into several tables.

Linking
There are three types of links:
1. Structural navigation links: e.g. home page buttons and links to pages that are subordinate to the current page.
2. Associative links within the content of the page: Underlined words or image maps and bring users to pages with more information.
3. ‘See Also …’ links: If current page is not the right one these links can help users to find what they want.

Link Descriptions
The words should not be more than two to four words long as users will not be able to pick up on its meaning by scanning. Avoid using “Click Here” as they are not information carrying words. It is also recommended to use additional verbiage to explain the link.

Link Titles
Internet Explorer 4.0 and newer browsers have the capability to pop up a short explanation of a link before user selects it. This provides a preview of where link goes to and improve their navigation. This explanation is called a link title. These do not affect users with older browsers.

www.useit.com shows a link title when the user’s cursor moves over the link.

Guidelines for Link Titles
Information to include in a link title can be:
· Name of the site the link will lead to.
· Name of the subsite the link will lead to.
· More detail about the kind of information to be found on the destination page.
· Warnings about possible problems at the other end of the link. E.g. registration required.
Link titles should rarely exceed 60 and never 80 characters. If link is obvious then there is no need to use link titles.

Colour of Links
Links to pages not seen by the user are blue whereas link to pages visited by the user are displayed in purple or red.

www.useit.com’s website show how the colours work for links. Blue for links that have not yet been visited. Purple and red for already visited. The red coloured link is the last one visited.

Link Expectations
Always use the same URL to refer to a given page. A hypertext link has a departure page and a destination page. There are two principles links should follow to increase their usability. For departure there is a need to explain to users why they should leave their current context and what they will get at the other end of the link and for arrival place the user in the new context, which is relative to where they came from.

Outbound links
You don’t own users so do not try to keep them within your site by not providing links to external sites. Select good external links as whatever value the user gets from the external site will partly rub off on your site because you led them there.

Incoming Links
Incoming links are valuable ways of generating traffic to your site so support these links as best you can. This can be done by having permanent URLs for each of the pages in your site. If a page has a temporary and a permanent URL both should be made available to incoming links. Also ensure the content of your site is so great that others will want to link to it. This can be helped by not having too many topics on each page.

Linking to Subscriptions and Registrations
If you require subscriptions or user registration you may as well kiss goodbye to new users coming from incoming links as authors will not link to you. An option would be to make certain pages at special URLs available for free linking so that users who arrive at those URLs are let in without seeing a login screen.

Advertising Links
Because you control the links yourself if you pay for the ad, it is a special case of incoming links. It is recommended that you link directly to payoff pages that follow up on the message in your ad instead of linking directly to your home page. Advertisement banners should be designed as a hypertext link.

Style Sheets
As your content will be presented on a large variety of devices, pages should be designed to specify the meaning of the information. Rather than a single device requiring that you modify thousands of content pages, it would be better to create a single style sheet file.

There are two ways of implementing style sheets:
1. Embedded style sheet: This style sheet is included as part of the web page using extra lines of code
2. Linked style sheet: This style sheet is kept in a separate file and each page that wants to use that style has a hypertext link in its header that points to the style sheet.

Always use linked style sheets. A single style sheet for the entire site will mean that a single download will be required once and for all. A single change can update the look of the entire site.

Standardising Design Through Style Sheets
All style sheets should be designed by a single, central design group, this will help with consistency and ensure that good style sheets are written. Style sheets should come with a manual that explains the styles and when and how to use them. Provide plenty of examples. Screenshots should be made into clickable links, which will allow users get to the effect they want to achieve.

Ensuring Style Sheets Work
If the end user or browser disables styles sheets, pages must continue to work. This will also apply for users with older browsers. Disabling style sheets in the browser and reload the page can check the presentation of your page. Keep the next few guidelines in mind when working with style sheets.
· Do not use more than two fonts.
· Do not use absolute font sizes.
· Do not use ‘!important’ feature. This is where CSS allows style sheets to specify that certain settings should override those in other levels of the cascade.
· Use the same ‘CLASS’ names for the same concept in all style sheets if you have multiple style sheets.

Frames
We have 3 words of advice here - just say no (!)

Is It Ever Acceptable to Use Frames?
To ensure URLs keep working when using frames, all hypertext links should have a TARGET=”_top” attribute in their anchor tag. This makes the browser clear out all the frames and replace the entire window with a new frameset. An exception would be where frames were used as a shortcut for scrolling within a single page. Frames are also useful for “meta-pages” that comment on other pages. Inline Frames which come with HTML version 4.0 nest as part of their host page and do not interfere with the user’s navigation.

Credibility
To establish your credibility as a professionally run operation is one of the main goals of good web design. Avoid heavy backgrounds and amateur junk. Good-looking visuals have a high impact on usability and an opportunity for establishing credibility.

The future might see a credibility rating system for Internet services ...

Printing
Users need to print out information as they see it, as it may not be there when they return and it can be uncomfortable to read large amounts of text from computer screens. Try to provide two versions of all long web documents. One can be optimised for online viewing by using hypertext links and chunking and the other version should keep the entire document in one file with a layout that is optimised for printing.

PostScript and PDF formats should be used for printable files. Supplement them with links to the same content in HTML for online viewing. Printable files must accommodate two page formats: A4 and 8.5 “x11”. Ensuring the width of the page fits on an A4 sheet and the height of the page must fit on an 8.5 “x11” sheet can do this. Leave a margin of at least half an inch for all four sides.