Ensure that your site downloads quickly. Within 10-15 seconds at an absolute maximum, preferably 8 seconds or less. Assume that your user is on 56k dial-up and NOT on broadband aDSL or Cable. Therefore the total file size of a page (including graphics) should never exceed 30k.
To decrease file size and increase download speed - use as few graphics as possible, optimize the graphics you do have and create clear, concise HTML. Always include width and height attributes in the <img> tag so the browser can download the rest of the page while waiting for graphics to download. Include alt text in the <img> tag so that the page makes sense before the graphics download or if the user has graphics switched off.
Server side “includes” speed up download times as the included file only needs to be downloaded once to be used on several pages. This happens "server side" so that download time to the user is negligible. Style sheets also only need to be downloaded once. Using one means you don't have to specify style within the HTML page, which makes for a smaller html file size.
If your web site is not user friendly, visitors will not be able to use it and they will become frustrated and will not return to it. It is return users who will buy your product or service, not a unique user who merely visits your site just once. The key to good usability is found in easy to follow navigation and simple site structure.
Poor navigation is where most unusable sites fall down. At any one time, the user should be able to reach any level of the site and clearly see where they are in the site's hierarchy. A well designed site should have a logical hierarchy of more detailed information as the user delves down into the site.
The main home page to a site should have links to a variety of levels, usually in the form of a navigation panel. On subsequent pages, the user should be able to reach other pages of the same level as well as be able to go up to the previous level and always be able to get immediately back to the home page.
Make sure the page title, located in the head information of your HTML, shows the page title and where the page is in the site. This is the title of the page that is visible at the very top of the browser window. This is useful to users who bookmark your site and ensures its name makes sense in a whole list of bookmarked sites.
Never use horizontal scrolling, users find it annoying - check your site on machines with smaller screens and with other browsers just to be sure. Avoid vertical scrolling, especially on the home page. Only 10% of users will scroll down further than they can initially see, so keep the important information and navigation at the top of a page. This is beneficial to search engines too, as they often only index the first portion of a page. What you put at the top of the page can entice users to scroll down to read further. If your most important content is hidden "below the fold", most users will never even see it.
Keep your site simple. Use white space carefully - don't waste it by having fixed width tables so that much of the screen is blank in a wide browser window. However, make sure you don't have more than 12 words to a line of text - it is difficult to read if there are more. Don't have gratuitous animated graphics, scrolling text or other moving items all over the place - they draw attention away from the content. If an animated graphic is used, only loop it once so it doesn't distract the user from the rest of the page.
Don't overcrowd a page with too much information and too many links, the user won't know what to look at first. However, one exception to this is when the information is technical and extremely useful to your visiting surfer.
Don't ever create sites that rely entirely on new technology, such as Flash, Java Script or Java. Many users won't spend the time or know how to download the plug-in to view the site. You can't guarantee all users will have, or want, the plug-ins, and you will "scare off" potential customers. It's more important to have people actually use your site, rather than simply ooh and ahh at its special effects. Use new technology sparingly, especially because it increases loading time dramatically and because it often causes browser crashes.
Most use of frames on the web is unnecessary, especially when it's been used simply to separate the screen into content and navigation. This is often confusing for users, can create unnecessary scroll bars, destroys the URL for people to email the current page to someone, or bookmark it for future use. The URL they save ends up being the top of the frameset, not the one they wanted. This could lose you customers/visitors who don't want to trail through the site finding the particular page all over again.
Frames are also detrimental to search engine listings. Search engines can't spider a frameset, directories often look on them as bad practice for the above reasons.
Keep the content on your site current. Most good sites are constantly updated, so if yours is out-of-date, users won't return. Encourage people to come back with "news" or "highlights" sections on your home page which have the most up-to-date content. If your site has outdated material, users won't need to return as it appears they saw all there was to see the first time. This is true even for large sites. However, don’t make every page a nightmare to update. Keep the majority of information pages static (no maintenance) and change only a small number of very important “newsworthy” pages.
Maintain your company's (or site's) branding across all pages of your site. If there is no branding on a page, users won't necessarily know they are still in the same site. This is especially important for users who have entered the site from an external site and will need to know which site they are in. This is also relevant for printer friendly pages where site navigation is less important. These still require at the very least a company logo or site name which is a link to the home page, preferably in the top left hand corner.
To a user, links are the structure of the world wide web. A user doesn't care whose site they are on, just the information they require. Standardise your links to make user's lives easier. Always use blue for unvisited links and red/purple for visited ones and always underline them (unless in an obvious link bar at the side or top of the page). Don't underline any text which isn't a link. Make your company logo or site name a link on every page. If you're linking to an external site, display the name so that a user knows they are being taken off to a different site.
Users have become accustomed to these attributes and while your site may look prettier with different colored links etc, it can be confusing in that it's not obvious where they have been before. Going to a previously visited page is frustrating and time consuming. Most users don't have the time to go to every relevant link in your site, make it easy for them to browse through to the information they require. Don’t create circular links where your user gets stuck in a page and can’t get out again.
Finally, don't move links! By this we mean don't change the URL of a page. People bookmark pages which are relevant to them for a long time (sometimes years). If you move pages, you could lose a valued customer. If a site clean up is necessary, then activate a re-direct for that URL to the new page location. In addition, for sites with constantly changing home pages with news stories or press releases, always produce a permanent location for the whole story at the same time. Place a link from the abstract to the full story so people can link to this. Changing the URL of a page causes havoc in search engines, giving people searching for your product or information the frustration of thinking they found just what they wanted on Google and then finding that it has disappeared because you moved it.
Don’t use gaudy colour schemes.
There are plenty of terrible examples of this on the web. A lot of them hinge around using black backgrounds for their pages.
Don’t use large text.
When large text is used, it might be nice for those more senior in years, but it creates a very un-professional look and makes it look like you’re shouting! Large text should only be used in titles.
Don’t use weird fonts
Most windows machines come with about 100 fonts. If you have installed others on your machine and then use them in a web page, the receiving computer doesn’t know anything abut that font and will substitute, normally, Tahoma font (because it is the Windows default font used on the desktop icons, etc.).
Test your web page at any early stage of design.
Test and test often – after every upload of code. Test using different connections, but always test using 56k dial-up. Test with different screen resolution settings. Above all, test with Internet Explorer, Netscape, Opera and Mozilla Firefox and make sure that everything works and renders OK. If you can, test with MAC OS-X and Safari and test under Linux with Konkeror or similar browser.
Use a relevant & tasteful background.
Backgrounds are very difficult indeed to design and test. Keep them simple. Fade them out much further than you would first imagine, otherwise your content will be overwhelmed by the background. Keep them small and highly repetitive. Test on several different types of screen – 15” CRT, 17” CRT, TFT standalone screen and a TFT and LCD notebook. You’ll be amazed at how the background takes on different appearances on each type of screen. Most of all, don’t go for a dark background, it makes the surfer think they’ve entered the black hole of Calcutta!
Here are some other useful tools and tips: