|
Home | Uniquely NZ | Travel |
|
| The Secrets of Successful Web Site Design |
Introduction
The "Secrets of successful web site design" covers the strategy and techniques required for creating a small business site with impact. It contains a set of guidelines to help the design process and tips on making sites easily found and user friendly. The second part is now outdated but led one through the stages of producing a successful web site by example - it employs a "template" with a detailed rationale for every component.
Note twenty years on: The design concept in the template was used for my first sites for small businesses ~1999 and was advanced in having an early "responsive" approach to users equipment although the term had not been thought of then. It however can not adapt far enough to handle mobile devices with very small screens with a single template but is left available as it has some interesting ideas as well as historic interest.
Priorities
|
1. Getting Visitors
Getting Visitors must be the first priority, without visitors the site is without purpose. There are basically only three ways that anyone can reach your site, firstly they have followed a link, secondly because they have read the address somewhere and noted it and entered it into the browser, or thirdly they have used one of the many Searches available and found your site. Searches bring new visitors and business to your site, and unless your site is properly designed and registered with the major Search Engines you are invisible to potential customers searching the web.
Search Engines and Directories are a therefore a critical factor which must be taken into account in the design of a web site for a Small Business. This is cover much more fully in the Search Engines and Directories page in this series which covers how to optimise the design of the site so it will be found and ranked highly by all the most important Search Engines and Directories. It is essential reading before you start even the outline design.
2. Keeping Visitors
Keeping Visitors is perhaps not as simple as it sounds as you have to convince a visitor surfing for information that they have come to where they expected and that it is worth their time to stay and look more deeply. First impressions matter a great deal - studies show it is often only 10 seconds before a visitor decides to move on. It is therefore very important that there is something available quickly to catch the attention and hold the visitor - we have all been to web sites where nothing appears for many seconds, sometimes minutes, or you get a mass of empty graphics which you hope will turn into links and images. I have always believed that most people like to have text to read and selectively used images have far more impact - there are plenty of places where a good image can replace hundreds of words but it is seldom they alone can replace words. The first items to appear will inevitably be text and, of course, Search Engines only deal with text.
Many people however feel that it is essential to have a lot of flashy graphics to interest a browser but my prejudices seem to have been confirmed by the results of recent research by Stanford University and The Poynter Institute. The Stanford-Poynter Eyetracking Study has revealed that text may be a more immediate entry point than images. The study looked at on-line news sites and summarises that "overall, during the entire on-line reading session, graphics and photos did less well than text. Of all graphics, aside from banner ads and photos, available to a subject throughout a session, only 22 percent were looked at. Banner ads, which were broken out separately from other graphics, did somewhat better: 45 percent were looked at. And photos did best: 64 percent were looked at. These figures did not stack up at all well against briefs and text articles, which were looked at 82 and 92 percent of the time, respectively."
The lesson is clear, have good text near the top of your pages to attract the visitor, restrict your graphics to high quality pictures and avoid banner ads which will only distract from your message. Text displays first in the Browser and with the average dwell time of a surfer being only about ten seconds they only have time to read your best 50 - 80 words during which your graphics can be downloaded to build interest. The Heading of the page should stand out and immediately tell the visitor he has reached the destination he was looking for. This all matches well with the way Search Engines work and in many ways a Search Engine friendly site is also a user friendly site.
The above paragraphs have concentrated on keeping visitors for the critical initial period but there is another risk which needs to be overcome. You need to make sure once Visitors have entered your site that they do not follow any of your external links and not return. New Windows can be a useful tool in designing a Web Site to avoid your visitors getting lost when following links - the disadvantage is that the size can not be specified and they quickly get hidden behind the main Window or maximised so the visitor ends up with lots of Windows open. I will cover in a future article how to use a bit of Javascript to enable the size to be specified and the Window made more accessible. This is particularly useful for enlarging images, providing short clarifications of points on page or help in filling in forms - I am not in favour of too much Java but it does have some uses.
3. Getting the message across
The Message you want to get across needs to be clear in your mind before you start. Much of it will have come through in the initial text but you still need to fill in the detail with clear concise text and appropriate pictures. All the usual requirements for literacy apply, sentences should be short and to the point, the first few words in every paragraph have the most impact. The main points should be visible on the first screen and if the entry page covers more than a few screens you are almost certainly try to get too much over and the Message needs refining. Think in themes, ask yourself whether each and every sentence and picture contributes to the theme of the page - keeping to a single theme for a page avoids confusion. Limited use of colour, fonts and other forms of emphasis are acceptable but do not over do it, fancy graphics for titles and banners usual detract from the Message you are putting over.
A good check of text, whether for the Internet or a document is to read it aloud - if it is easy to read out it will be easily assimilated and without ambiguity and reading helps show up the need for punctuation and reveals bad grammar. Try it out on all sorts of people, it is best if a school child or a Minister can get appreciate Message, they are rather similar. A good web page is a bit like a short presentation - you start by telling people what it is about and what you will cover, you make your points and you briefly summarise again at the end - the difference is that you can not answer questions but must provide a natural link or links for them to follow.
4. Making Sure it Can be Viewed on all Systems
It is important to design your site so that it can be viewed on the majority of visitors machines in the way that you intend. Not every potential customer is going to be using the latest computer and software and the way they use their system may well be different. Considerable changes have taken place in the last five years and many people in the UK may still be using machines that old which are not capable of supporting the latest software - others may chose to maintain stable environments or be limited in what they can do by their use of machines at work or for work.
Browsers: The majority of visitors will be using various versions of Internet Explorer and Netscape Navigator. Both have gone through a number of generations and have progressively supported more and more HTML features and proprietary extensions some of which have been incorporated into the HTML standards. HTML has also gone through considerable development in the last few years. Java is another story as the various browsers implement Java in different ways and you will find that some complex sites actually carry out checks in Java to find which browser is in use and use different pages. There are a number of ways of checking that your site will be correctly displayed, the simplest being to have both Internet Explorer and Netscape Navigator installed. This does not help for visitors with earlier versions and the best thing to do is to make use of one of the various sets of free services to check sites which are available on the web.
Utilities for checking Browser compatibility: The most useful general set of utilities I have found are those of Netmechanic - they can be accessed at http://www.netmechanic.com. These include Browser Compatibility checks and HTML checks where you can chose the version to check again. The also provide a Search Engine submission to 12 popular engines and a number of other Utilities including estimates of download times. The more complex tasks are done off-line and when they are complete you are notified by an email which provides a web page address linking to the results which are held for 2 days. Another very useful utility takes a .jpg file and shows you what happens if you reduce the memory size - each reduction swops back and forth to the original when you move the cursor over it so you can accurately choose how much degradation you can tolerate.
Screen resolution Screen resolutions vary widely - visitors with laptops and older machines may still be using 640x480 whilst the latest 19 inch screens may be using 1280x1024 or even higher. Most people however use 800x600 with use of 1024x768 now increasing. I believe that one must design for at least a range of 640x480 to 1024x768 without use of scroll bars or waste of screen space. See the last section for figures on Screen resolution etc for visitors to our own site. The use of Tables allows the display to adapt easily and the text to wrap to such a range without too much problem provided the nominal size of text is used by the visitor. If the screen size and resolution is greater than 1024x768 the chances are that the user will not be working full screen but within a Window. It is easy to check how the site displays by changing the screen resolution on ones machine to various values and displaying the site within a window and varying the size to see how it scales. This is easily seen in part 2 of this article using the demonstration template with the borders of the Tables displayed. it is worth trying this on some of the commercial sites - you will find many of them are extremely inflexible and are virtually impossible to use on a 640x480 screen and waste space on anything over 800x640.
HTML was designed to allow the user to determine how content was displayed, quite unlike normal publishing, because of the variety of equipment available for display - many modern packages and authors conveniently try to forget this and you will give a much better impression and increase business if you take the customer into account.
Colour depth Again this varies considerably from machine to machine. You are unlikely to have many visitors these days with monochrome displays but many laptops and older machines will still be using 256 colour depth. At the other end many modern machines will be using 16, 24 or 32 bit colour depth. The big change is from 256 to 16 bit (65K) colours. You should check what your site looks like in 256 colour depth by adjusting your display properties and you may well find that backgrounds and images look very different to what you expect and even ordinary text and backgrounds will look odd. There is a set of colours which are supposed to display the same in all Browsers at 256 and upwards colour depth and it is worth using them where possible. Colours still tend to be specified in Hexadecimal and the set is #xxyyzz where xx etc have the values 00, 33, 66, 99, cc and ff giving 216 discrete values. Many web editors allow you to pick them using a colour palette. There is little you can do about pictures other than look to see the effects. GIFs will be little effected since they only have 256 colour depth in any case but JPGs will often look very odd in 256 colour depth so it is best not to depend on them alone to convey any important message.
Java Most modern browsers support Java however there are security risk associated with Java and many users turn it off through choice or have it disable as a policy at work and on business machines. HTML has the facility to detect if Java is enabled and JAVA and NOJAVA tags should be used. It is best to restrict the use of JAVA to where it is essential especially as different Browsers have subtle differences in implementation.
Frames Frames are disliked by most users despite their being widely used. Some older browsers no not implement them which is yet another reason to restrict their use. HTML can again respond to their presence and one should make use of the FRAMES and NOFRAMES tags if one has to use Frames. If one does want to use frames various techniques can be used to make sure that Search Engines and Bookmarks end up pointing to an acceptable place.
An excellent site to get further information on how to use Frames correctly is http://www.gooddocuments.com - a site run by Dan Bricklin (who was one of the writers of the first spreadsheet Visicalc) on good writing for the web.
5. Allow visitors to easily and quickly reach what they need
Intuitive and consistent navigation is required throughout a site. Most visitors understand convention underlined hyperlinks so they have many advantages over clever techniques using image maps or Java and images which change when on hovers over them etc. A conventional hyperlink is available as soon as the text loads whilst I am you will have already suffered sites where you have to wait for 50 or more tiny images to load before you can find the link to the page you want. This is especial frustrating when you return often to the site for perhaps Internet Banking. If you have to use clever techniques then also set up conventional hyperlinks at the bottom - you will see this on many of the better sites because they can also be easily followed by Search Engines.
The conventional places to set up Navigation Links are across the top, often now as a set of tabs, as a list on the left and as a list on the right. There are usually duplicates of important links across the Bottom. For business sites I favour my main Links at the Top left with secondary level links on the Right. This avoids them being found by Search Engines before the main text. I keep the Left hand list identical on the sub pages with the page in use being grayed out so the visitor always knows where they are. Second level down pages do the same using links on the Right. I currently have a set of links across the Top of my own site providing navigation to the main sections although this gives problems with Search Engines - there is a case for using graphics if you have navigation at the top which aids the appearance of tabs, a well understood icon giving good "affordance" to use the jargon of the trade. Once the
6. Help them return
It is important to make sure that visitors can find their way back to you and to the pages they were studying. This means that you must make sure that any page on the site can be bookmarked. This is again a strong incentive to avoid frames because the page can either not be bookmarked or added to your favourites lists accurately - there is a high probability that the bookmark will either point to the frame so you still have to find the page or it will bring you back to page without the frame so you can not Navigate to anywhere else.
7. Make sure that contact information, maps etc can be printed
Use predominantly black on white text for pages that need to be printed for reference or provide a link to a version that can be printed from a separate Window. This takes little time and is appreciated by your visitors - such little things may well make the difference to you or a a competitor being selected.8. Provide ways for them to communicate
I like to put some contact information (email link, phone, fax and even the address) at the bottom of every page so an impulse to contact one is never inhibited. I also like a simple contact page which should ideally have some pictures of the contact points to make it all more personal to the visitor - it is easier to make contact when you have a mental picture of the person you are ringing or mailing. A map is and instructions on how to get to you by road or rail is also useful but make sure that your visitors can print it and other contact information easily and without emptying their colour ink cartridges - see above.
Forms are not very popular - I certainly prefer to use email which I can produce visitors and at my leisure. They are however essential if you want to take on-line orders or deposits as they provide a secure way of communication. See the page on Secure Transactions - SSL and all that and HTML Forms - my guide to adding Forms to your web site for enquiries, orders etc.
9. Have a way to assess effectiveness
It is important to have a way of assessing the effectiveness of ones site in attracting visitors. The simplest way is to have a counter - it does not have to be displayed prominently if it is tool for your use. The more recent counters have some associated code on your page which allows them to also gather a lot of useful information for design purposes. This is covered more fully on the Counters Page. Many commercial hosting services will provide access to detailed log files which offer an alternative to an intelligent counter and do not slow down the entry page
Summary
The "Secrets of successful web site design" covers the strategy and techniques required for creating a small business site with impact. This part has analysed and prioritised the factors which have to be considered when designing a site, and provides guidelines and tips to help the design process.
