How to Design a Functional Website - Part I

Copyright (c) 2008 Adam Nowak

The combination of functionality and aesthetic qualities is difficult, but possible. Although achieving this balance requires a lot of work and compromise, it will surely result in the satisfaction of Internet surfers.

Designing and creating websites require thorough knowledge of Web specificity as well as an ability to adapt to existing solutions of Internet reality. It is not sufficient to hand in WWW materials, which have functioned in paper form until now, to website designers. Very often, the way designers and graphics think differs from the way users think and act. It is not enough to know a lot about programming, graphic design or to have good taste. First of all, you should set objectives of a realized project and acquaint yourself with the needs and habits of addressees of the website as well as with the way they move around Internet resources. Familiarizing yourself with the research and observations concerning users' behaviour and preferences, as well as their proper application, is a giant step towards the creation of functional web pages.

Functionality and cohesion

First of all, in order to design a web page, you should take into account not only its aesthetic qualities, but its functionality (ergonomics). Internet users insist mainly on quick access to information gathered on a website. Jakob Nielsen, a mentor of functionality, describes a usable website in the following way: "Simplicity with the smallest number of supplements, a clear layout of information and adjusted navigation tools." Sub-websites need to be coherent. Particular elements should be chosen in such a manner that a user has no doubts as to whether they are still on the same page or if they have moved to another website. In a perfectly designed website, the main part of the page occupies about 80% of the screen, the remaining part is destined for navigation elements. In practice, it is difficult to achieve "a happy medium", especially with additional elements, e.g. advertisements. That is why, it would not be wrong if we managed to squeeze the main part into 2/3 of the screen. Except for main pages, which play a key role in enhancing navigation on the website.

Good navigation

The system of navigation should be simple and intuitive - users do not like acquainting themselves with non-standard ways of moving around a website. Tips and instructions concerning navigation will not solve problems of a website containing non-standard mechanisms. Easiness with which Internet users move around Web resources makes them exceptionally impatient, and if they do not know how to use a given website in several seconds, they type in another address or close the browser window. The aim of navigation is to provide necessary information to the user, which will let them answer the following questions: Where am I? Where was I? Where could I go? Some elements such as a company's logo or other signs identifying the website, being at the same time a link to the main page, may help the user determine their current position. So-called information paths play a vital role as well, what place a given sub-website occupies on a website structure.

Home | NewsRoom | Software | Mass storage

Marking the option in the menu of the website, which a particular web page belongs to is a solution which helps Internet users determine their position. Furthermore, it is important to provide the subject of the page, as well as titles in the heading of HTML file. The title should be coined in such a way so as to be understood by the user, which entered a web page by means of a browser or any other reference placed outside the website. References to web pages already visited are marked with a lighter colour than those used in references to web pages not visited yet, which will ensure their unambiguous identification. Although browsers possess a return icon, it is better to place on each page a reference to the previous one. The user will focus on the part presenting the information and there they will look for the possibilities of returning. Only when they do not find it on the web page, will they look at the toolbar of the browser. It is recommended (if possible) to give the name of the target page, e.g. "return to product list." Pages "without exit links", or in other words, pages which we can leave only by means of a back button in the browser window. The best way to suggest the user what page they can go to is a careful design of the website structure, as well as an appropriate look of references (see also: "References"). In the case of complicated websites, it is more convenient for the user to introduce two types of navigation ' vertical ' enabling the user to jump quickly to the higher level of the website ' and horizontal ' giving the possibility of choosing a web page at the same level, e.g. the most current news about ink-jet printers. Links enabling access to subject-related pages, e.g. "see also" play a key role as well. It is a mistake to place a reference to the website displayed at the same time. Reloading the website will stir up negative emotions, especially in the case when it lasts for several seconds. Maps of websites allowing for quick access to its structure are now a standard. However, we should remember about an update of the website "scheme" or even design something which will ensure its automatic change simultaneously, together with the update of the website structure. Solutions based entirely on colour should be avoided in navigation. Not only do they make the user learn the meaning of particular colours, but they may turn out to be useless for people who are colourblind.

References

Text references should be formulated in such a way that an Internet user has no doubt as to where it leads to. Not only does it have to encourage to enter, but it should be a keyword. It is not advisable to use general expressions like "click here". Instead of using the expression "In order to see brand-new digital cameras, click here.", it is better to use: "Brand-new digital cameras". The text should not be too long (maximum four words). Underlined text is commonly used for references. Apart from coloured, it is additionally highlighted. Titles of references are a great facilitation for an Internet user. They let surfers predict what kind of information is on the website to which they refer, and simultaneously save time of loading the web page which does not meet the needs of the surfer. The title of the reference should not exceed 80 characters. In case the text in a precise manner describes resources it refers to, there is no need to add another element requiring the user's attention. The standard colour used for references is blue (pages not visited yet) and purple for pages visited. This principle can be boiled down: visited reference should be in lighter colour than not visited one. Especially on web pages with a great number of references, a few of which require additional highlighting, red is acceptable instead of blue. We can use any shade of these two colours. The application of a different colour will make navigation functionality worse and make it impossible for the users to decide what web pages they have already visited. While highlighting a simple text and headlines, we cannot use colours reserved for references and the other way round.