Principles of good web design





Principles of good web design
The following article is primarily geared to those who are thinking about getting a web site made. A web designer can't do everything. They can assemble a web site, but they can't supply the content. They can't tell you how to best organize the materials or tell you what is most important. It would therefore be prudent to find out as much as you can about what makes a good web site before getting one built. It will save you time and money because well over half the work involved in making a web site is gathering the content and planning how it should be organized. Knowing what makes a good web site will help you decide the web designer you choose. You will be able to look at their portfolio and ask yourself are they using the principles of good web design. For a number of years, I was doing pioneer research at Cambridge University in England about how people best learn from computers. Gleaning information from a web site is a good example of learning from a computer. As a visitor to a web site, you may have some of these attitudes to certain pages: I'm looking for information about ......, but it is not obvious where to look. There are buttons to click on, but I can't tell by their names where they will take me. That graphic took such a long time to download, and there was no point to it any way. I've been all over this web site and I can't find the information I want. If they are going to force me to watch a slow loading flash movie, then I'm leaving! I'm frustrated because many of the buttons are not working. This web site is too busy. Looking at this web page I haven't got a clue what I'm supposed to click on. I hate having to scroll right because the web page is too big for my computer screen. If this web page is going to crash my computer, I'm not going to visit this site again. I can't read the text, it is too small. I was looking for a company near me, not half way round the world. Oh, strange, I've gone to another web site. I really wanted to finish that article on the other web site. Well that is difficult to read, couldn't the designer have chosen colours that are easier on the eyes. Why do some pictures appear on top of the text I want to read? If we truely knew the thoughts of the people who visit the web pages we write, we would have a different approach to web design. So, what are the principles of good web design? What are the things you should be considering when you want to have a web site built? The following article should help.... Should you have a web-site? 1. It is virtually free advertising. It is your opportunity to tell the world your cause. Your challenge is to get people to visit your web-site and to keep them interested once they are there. Suppose you are a builder. You could put your portfolio on your web-site together with photographs of your work and your charges. When you advertise yourself in the newspaper or in the Yellow pages, you can mention that you have a web-site. If someone does a search on the web for builders in your area, then your name should appear in the search results. A web-site could get you a contract as you provide evidence that you are a good builder with reasonable rates. Having an impressive web-site will give you the edge over your competitors. 2. It can save you time and money. Suppose you are a chiropractor. Not long ago, there was a news report that stated how dangerous neck manipulation was. I would expect that chiropractors would have been flooded with telephone calls by concerned patients. They may even lose business with such negative publicity. A way to alleviate the flood of telephone calls would be to provide a statement on your web-site to respond to the news item. Suppose you are a club. If your web-site contained answers to all the frequently asked questions, such as times of meetings, then think of the time you would save by people not 'phoning you, but getting the information from the web-site instead. It is for these reasons, I believe that it is important for every organisation to have a web-site. With more people using the World Wide Web, the more important it will be to have a web presence. Know why you are putting together a web-site If you don't know the purpose of your web-site, you could miss golden opportunities and you may need to build it again. Who do you want to visit your site? potential customers? potential employees? potential business partners? people with a similar interest? What do you want to achieve in having a web-site? Educate the general public about your cause or product. Sell more of your product Get more business Provide answers to customers questions, without having to give long explanations over the telephone or in person. Establish your credibility by providing useful information without the hard sell. To get a good reputation Provide good content because "Content is King". Content is by far the most important part of your web-site. Provide credible, reasonable content. The main reason people visit the Internet is to get information. Use education as a subtle way to market your product or further your cause. Don't do hard sell advertising. Most people don't like this and will leave. Give web users a good reason to stay at your web-site It contains information they want. Make it interesting It is professional, attractive and easy to use. Use education to inform people about the product you want to sell. Make it obvious where you are operating from and who you are writing to as anyone in the world can view your web-site. So, instead of writing "It is against the law to...", qualify it with the country, "It is against US / International law to...". Arrange your content so that people with different levels of interest can benefit. For example, instead of forcing people to view every single photograph in your on-line album, let them see a page of "thumbnail" photos and allow the user to click on any of them to see an enlargement. Figure 2: Click the thumbnail for an enlargement I've seen many web-sites where the content has been overshadowed by the display graphics. That is like displaying a tiny painting in a very large and obtrusive frame. You don't need many graphics to make an attractive and effective display for your content. Figure 3: AT&T Canada's web-site The Designers of AT&T Canada's web-site should have known better (see figure 3): The web-site looks impressive, and it does work, but... The decorative graphics are huge compared with the body of information on this page. This will increase the time it takes to view the page on your screen. The body of information is overshadowed by the decorative graphics People with a small monitor will not be able to see the complete page, because the page width is wider than small monitor widths. The actual size of the text is too small for the main body of information (see figure 4 for actual size) Figure 4: Text that is too small for most people's eyes. Animations, interactivity, bells and whistles Few people exploit the advantages of reading material on screen, and leave you with little more than a written page. When creating a web-page the quality of the page can be greatly enhanced with interactive and moving parts. However, if you use them in the wrong way they can be a nuisance. Weigh up the pros and cons of having these features: Is it essential to have this feature? If it adds nothing, don't have it. Does it really improve the quality of this page? If not, don't have it. Are there simpler ways of producing the same results? Sometimes a simple diagram can do just as well as an animation Will it crash a user's browser? Is it worth risking alienating certain people because your animation has crashed their computer. Does the size of the feature still make it worth while? Size of the video clip v. the importance of the message it carries. Some good uses of multimedia and interactivity: In explaining the geometric proof of Pythagoras's theorem, nothing beats an animation that demonstrates that with a right angled triangle the square of the hypotenuse equals the sum of the squares of the other two sides. Clicking on a button that produces a sound that demonstrates how something is pronounced. A video clip of an experiment to show what happens when you drop sodium into water. A video clip of an experiment to show what happens when a bubble is released through a thick liquid. A calculator that can plot graphs. Have text you can click on to bring up glossary items in a pop up window. Use photographs and diagrams freely and appropriately. Animations and interactivity can have their down sides: They take up space and increase download time. It is a good idea to warn users if they are about to download a video or sound clip, perhaps by using a video or sound icon. Avoid flashing text as it makes pages difficult to read and can give you a head ache. This is really annoying if it flashes at you and difficult to read! Some animations don't work on older browsers, or browsers without the right plug-in. Gimmicks can take away from the real purpose of the page. Sound can be annoying if you are viewing a page in a place where you are supposed to be quiet. Too many animations can cause the hard disc to whirr. Make contact details easily available If you don't, the user may not be willing to contact you and that could mean a missed business opportunity. You could provide your e-mail address or a contact form at the bottom of each page. People can use the contact form to tell you their opinion or inform you of mistakes you have made. Printable pages Ask yourself whether the user may want to print out the information you are providing on the web. If so, Make sure it prints out well: try it with different browsers Ensure users don't have to print out unnecessary information that wastes printer's ink, like graphics. Avoid light coloured fonts on dark backgrounds. Limit table, picture and graphic width sizes to be less than the printed page width otherwise information on the right of the screen may be truncated when viewed on the printed page. Reading content off-line If you have a lot of information to display, it may be a good idea for the user to download the content to read off line. You can provide this features by: Using pdf (portable document format) files which are read only files that can be viewed on any computer containing text, graphics and photos. The pdf can be downloaded and saved on your computer and then viewed using Acrobat reader. Figure 5: Acrobat Reader Allowing the user to download a compacted file (zip, binhex or tar file) which when uncompacted will create a folder on your hard drive with all the pages and graphics so that you can view it all off-line. Keep your page(s) up-to-date and easy to edit Dead links, broken images, no "date last update" are all frustrating things to web users. Keeping pages current and reviewing information consistently goes a long way to show that you're good at what you do and that you care about someone's experience on your site. If you can't keep a web page (site) up-to-date, don't keep it. Building a web-site is like advancing an army, unless you can keep it supplied it can't be effective. Better still, design your site to be low maintenance. When considering the cost of getting someone to design your web-site, you need to consider the cost of maintaining it. You may wish for maintenance of a web-site to be done by someone other than the designer. If so build the web-site so that it is easy to make edits. Make use of style sheets and templates, so that if you want to change the same thing on different pages you can do it without having to change each page individually. Here is an example of one file using a style sheet. Now here is the same file using a different style sheet. There are programs that can check for broken links. Use them. Do not use under construction notices. They make a site look incomplete. Figure 6: Under construction notice Date stamp your pages especially for pages that will go out of date some time: Last updated: 25 / 01 / 01 On your web-pages, ask users to send you their comments and report errors. Make a note of them, and make corrections when necessary. Colour When using colours in graphics, background and text, try only to use the 216 colours that are browser safe, that is the colours that will look the same on whatever computer you use: Many PC monitors still only support 256 colours Colours are sometimes handled differently between Macs and PCs If you use anything outside of these 216 colours, the colour you pick and the colour the user sees may be different. Choose text and background colours so that the combination is easy on the eyes. Bad colour combinations make text difficult to read and can give the user a head ache. Figure 7 :background and text colour combinations Choose backgrounds that enhance the readability of the foreground text. Do not use backgrounds that make the foreground text difficult to read. Figure 8: Choose backgrounds that enhance readability of foreground text - hmmm someone got into difficulty here! Fonts Use native fonts unless there is good reason not to: Basic PC Fonts: Arial Courier New Times New Roman (default) Basic Mac Fonts: Helvetica Courier Times (default) If you must use a fancy font, then give a good alternative font for computers that do not carry that fancy font. Make sure that any font you choose is easy to read. Figure 9: Can you read the text above? Ensure that the user can increase the font size to suit their eyes. Use fewer fonts as it looks neater and more professional. Figure 10: Notice in this news article the same font is used but different sizes. Beware of arbitrary font changes and or arbitrary use of bold, italics, etc. - it's disconcerting. New users sometimes think bold=link CaPs MiXeD wItH lOwEr CaSe. Hard to read, and pointless. Frames A browser window can display more than one document at a time in different regions of the browser window. When this occurs you are using frames. For example, you could have one document containing a menu of buttons down the left side of the browser window. Clicking the buttons in this control panel will cause different documents to appear on the right region of the screen. Figure 11: A web-page that uses frames. It seems a great idea, as you do not have to reload the same information over and over again. However, frames are fraught with problems. Frames can be one of the worst experiences a user can have. The back button doesn't do what they are used to The bookmark/favourite button doesn't work the same Search engines can't handle frames properly Sometimes the print document command doesn't work at all Frames can be a navigation nightmare The number of frames in a browser window will increase if you click on a link in a frame which goes to another site using frames Some browsers don't support frames. A good alternative to frames is using tables with some cells containing information which is common to all the pages in your particular set. Scrolling Don't make users scroll to the right when you can avoid it. It is very annoying having to scroll left and right in order to read the text. Design a web page for users viewing a 640x480 pxl screen then everyone will be happy. Unless someone will be reading a page from start to finish, as in the case of an essay, keep the length of web pages short. Your users are less likely to miss important information, if they don't have to scroll the document Pages appear faster on the user's screen, if they are smaller. Break long lists up over several pages so that your list is grouped into subgroups alphabetical / geographical / numerical / chronological indexing Figure:12: Breaking up a list alphabetically. Each letter's listing is on a different page. Navigation When a web page is displayed on the screen, you can view other pages by clicking certain text or graphics. These pages are said to be linked. You can view more pages by clicking on other links. The order you view the web-pages is known as the navigation. Navigating through web materials successfully is a science. If it is done well your user will not notice anything special, but will be able to navigate through your materials with ease and confidence. If it is done badly users may miss vast chunks of information on your web-site leave the web-site without intending to. Be paralysed not knowing the best way to proceed through the materials because of too many links. Get completely lost. Give up and go somewhere else. Here are some tips to aid navigation: Have a home button that will enable the user to return to the main page of the web-site from anywhere within the site. Give users a sense of direction, so they can be confident they are taking the right path through the materials. Give the user an idea of how big the web-site is: A site showing a photograph album can show thumb nails of every photo in the album on one page. You can immediately get an overview of what there is to see. By clicking on a thumbnail a page with a full photograph will be revealed. The user can confidently click on the next button knowing approximately how many pages there are to view. Use a column in a table on the home page with all the major links within the site. Make all links clearly visible. Use page numbering to link sequential documents: Page 4 out of 12 Keep navigation elements of any page clearly visible but not intrusive, so that they can be seen without having to scroll down or right. Give the user a good idea of where the user will be taken on clicking some 'hot' text. Consider the two statements with the underlined word being hot text that links you to another page. Which example leaves you in no doubt what the hot text will do? This animation was made using flash. This animation was made using flash. Click here to read more about the capabilities of flash. Give clickable elements unambiguous names. Does the button mean find a member of staff or information of interest to Staff? Give users a strong indication what will happen when clicking a clickable element. From the home page you should be able to navigate to any main page on your site with only 3 clicks. You may consider distinguishing the types of links: Links to pop up or glossary information. Links to other pages on the site. Links to other sites This can be done using different colours or small icons. Give users confidence by showing that they haven't bombed out of your site by having distinguishing features on every page. Your logo Copyright notice A consistent style, background or background colour. You may want to display information in a new window particularly if you intend the user to return to the page you are on. It is a good idea to tell the user to close the window to return to the previous page When you have created a site, ask someone who has never seen the site to find a few things on the site in order to show it is easy to navigate. Observing someone navigate through your pages without giving them hints, will demonstrate how good your navigation is. Avoid forcing people to sit through an opening sequence on your main page or anything modal. It can put people off exploring any further. If you want a fancy opening sequence, have a link from your home page entitled "Animated introduction". Better a few credible researched links than a library of unresearched links. There is so much on the Internet that one can be overwhelmed with too much information. If you research your links, you help others find the information they want. Be careful when linking Active Server Pages (pages that are made up automatically from a database when you click a button). These links tend not to last, so best avoid them if you can. In the same vein, if you want people to book mark pages on your site, don't use ASPs. Use metaphors that everyone understands to help you navigate. No harm in using the book metaphor because we all know the structure of books. Good navigation can handle different paths through materials: Standard paths: the path which you want everyone to take. Advanced path: the path which people who want advanced information to take. Remedial path: the path which people can take in order to understand the standard path. You could divide the paths like this: The perusal path for those who don't have much time and just want to get an overview. The detailed path for those who want more information than the perusal path gives. Figure 13: This news article is ideal for those wanting snippets of information or detail. You could just read the headline, view the first video clip or view the lot. Proof read your pages: Check all your documents with a document checker to ensure they are written correctly and can be interpreted properly by different browsers. Some pages I've seen look fine when viewed in Internet Explorer, but look wrong when viewed in Netscape. Check what your page is like if a browser can't load graphics. It is possible to make a label appear describing the graphic if it does not appear. Keep graphics and text separate. Some browsers will cause some pictures to cover up text. Spell check your pages - Bad spelling looks unprofessional Make sure that what you write works on the Web. This means using syntax that is proper for the web. Try not to directly use the text from a print publication. Submit your Web site address to an appropriate news group for a critical peer review. Design your site with the fact that someone half way round the world will be reading it. Ensure fast download times Research has shown that if the time token for a document to fully appear in a browser window is greater than 10 seconds then users will lose interest. Sometimes there is nothing you can do about it, for example if the network is temporarily congested. However, you can ask the web designer to do everything possible to make your web pages appear on screen quickly: Keep your web pages small, that is the total of the text, html code, images - everything (< 60k) Pages need to have excess code removed. Some web-development packages will put in far too much code in any particular page. This usually happens if you take a word processed document and then convert it so that it can be viewed on the web. These pages often look wrong in some browsers and will be slower to appear on a user's screen because their file size is larger than necessary. I re-engineered one web-site to be a third of its original size without losing any functionality. Make sure that all graphics are optimised so that they are as small as possible without losing significant quality. Figure 14: 3 photos: the 1st is uncompressed and is 23k in size, the 2nd is compressed down to 3k and maintains reasonable quality, the 3rd is compressed down to 1k, but you can see that the quality has really started to suffer. It was mentioned earlier that if you want to use large photographs, have a small photograph that the user can click on to produce a larger one in a pop-up window. If there is a large file to download, e.g. a video clip, put a place holder like a camera icon for the user to click on together with a label telling the user what the clip is about and how large the file is. 890k Get the web designer to specify in the code how the height and width of photos and graphics, that way the text on your page will appear as your images load, rather than waiting for the images to go first. It is common practice for web designers to create tables within tables. Ask them not to do this as this slows download time. If there are too many decorative graphics, they will increase download time. You can create very nice effects with just a few small decorative graphics. Figure 15: An example of too many decorative graphics Advertise your web-site If you want people to visit your web-site, include your web address in your contact information letter heads business cards e-mail signatures anywhere you give your contact details If someone does a search on the web, make sure you get a mention by submitting your web site to the search engines and by making sure you use phrases in your text that people will look for. I would recommend that you make a list of possible search terms people might type into a search engine in the hope that they will find you, before you start building your web site. When you have the list of phrases, use one or twoof the phrases frequently on any given page. For example, I would like surfers to find this article if they typed in "principles of good web design" so I have tried to use this phrase frequently on this page. There are companies that are dedicated for getting web sites ranked high in the search engine results for particular search terms. One company I would particularly recommend is Seedegy that does optimization for web sites all over the world. You can visit their web site at www.seedegy.com Whoever is creating your web site, make sure they put in each web document: A fitting title A fitting two line description of the contents A list of key words that are taken from the text. Figure 16 shows a list of the first three results from running a search for "builders" and "Manitoba" on a particular search engine. The text in blue and underlined is the title. The black text may be the description or may be words surrounding the particular keyword. The light grey text is the URL. I would have made a title and description tempting to click on. So, for the first result I may have put: "Manitoba / Winnipeg builders that build beautiful homes." in the title "- Contact Ventura Today!" in the description. "Builders, houses, homes, Winnipeg, Manitoba" in the keyword list. If you are from Manitoba and looking for someone to build you a house, then "Manitoba / Winnipeg builders that build beautiful homes - Contact Ventura Today" would be tempting to click on. Figure 16: Results of a Search Engine search Summary An effective web-site should contain the following elements: Clearly defined goals to why a customer would want to visit your web-site: e.g. a builder may have this goal when planning a web-site: "If someone is looking to have a house built, I want to show them everything I have to offer: house plans, work samples, etc. I also want to demonstrate to them in this web-site that I am a builder worth their consideration. I want to provide enough information on the web-site that the customer will be ready to make a deal." Good content that will entice customers to find out everything you want them to know. Good presentation, so that the web-site is attractive, looks professional, and is easy to read. Good navigation, so that first time users can easily and quickly find what they are looking for on the web-site. A design that will enable someone looking for the sort of things you have to offer, to find your web-site when using a search engine. Small files to allow pages to appear quickly even on computers with a slow connection. The capability to work on as many different computers and browsers as possible. If something in your web-site causes a computer to lock up, then that visitor may never return and you could lose a customer. If you want to be found by anyone, the web-site needs to be designed in such a way to rank well with search engines for particular terms. There you have it. I wish you success! For more information about getting a web-site, please contact the number below.
Home - Web Design - Applets - Database Programming - About Us - Contact