Designing Web Sites

Introduction

Internet is not a digital book, magazine or newspaper but it is a medium of its own. Thus the rules of traditional media are not valid when making a good web site. One thing is still same: information is the most important thing. But it is not completely indifferent how the information is introduced in the Internet. It must be very clearly introduced. Users feel themselves busy when surfing and they do not spend time reading through pages if they are not sure the pages has something important information.

There should always be a good reason why to make a web site. "But everybody else is doing it" is not a particularly good reason. The reason should be thought about whether the pages are for a large company or an individual person. A web site without information is needless and only a waste of time and bytes. It should also be taken into consideration what kind of information the users expect to find, what they are looking for.

However my report is not considering what a web site should contain. There is not a single answer to this question. This is not a HTML-guide either, dozens of these can be found in Internet or in the libraries. I am writing about the site design, page design and content design in general and how web site can be made userfriendly and also attractive. I will only deal with the basic elements like navigation, graphics, text and page layout and the structure of the site.

1. Site design

The structure of the site is not as clearly seen as is the page design and content. That is the reason why the design of the site structure is often forgotten in the design process. If the site contains vast amount of documents, the structural design of site becomes more and more important, or the user gets easily lost. A small site (less than 20 documents) does not need very careful structure design.

1.1 Structure models

The site structure can be described with 3 different models: linear model, tree model or net model. In most cases none of these models are purely used. Usually a site is a combination of all models mentioned before and the result is somehow net-like.

1.1.1 Structure model

The linear model is like a book: the user is forced to move on from one page to another in the same order as the author has designed. In most cases, this is not a recommendable model. The model does not utilize the opportunities of hypertext at all and the user is not capable to look for the information he or she is interested in.

The good aspect in the linear model is simplicity. The user is not given a possibility to get lost. [Metsämäki 1996]

1.1.2 Tree model

According to its name, tree model diverges into different branches. Theoretically it is nothing more than an advanced linear model, but in practice it is considerably better than the linear model. The user can look for the information he needs and ignore the rest. It is also very simple too; it is easy to the user to identify his current position in the site structure.

However, there should not be many sub-levels in the tree model, 2 or 3 or in some cases 4 is an appropriate number. [Metsämäki 1996]

1.1.3 Net model

The net model is theoretically the perfect model for a web site: the user has an opportunity to go from one page to any other page of the site, which has something to do with the same matter with the current page. The net model is used widely, nearly all web sites has at least some characters from the net model. [Metsämäki 1996]

On the other hand, the design of a net model-based web site is difficult. Usually it is far better first to do a strictly tree model-based web site and then add "branch-crossing links" to it. This is the way how most of the web sites are made, whether it is consciously designed or not.

1.2 Main page

The main page (home page, index) is perhaps the most important individual page in the whole web site. This is the reason why it should be designed with extra care. A badly designed main page can be fatal for the rest of the site if users go away after the first glance. However, the main page is supposed to share the same style as the sub-pages.

The main purpose of the main page is to give user an idea of the site and what it contains. Based on the main page the user can evaluate whether the site is useful and if it is worth to spend more time looking around.

There should also be the links to the sub-page in the main page, of course. The main page is the central point of the navigation. But when designing navigation the designer should remember, that all users do not see the main page first, because if the user arrives to the site via search engines and links they can be lead straight to some sub-page. Every sub-page should contain a link to the main page. [Nielsen 2000]

The following information is supposed to be found from main page in addition to the links and the description of the content:

• The name of the site or the company. It is surprising how many web sites do not tell user whose site it is
• The site or company logo if there is any
• The date of the last update is recommendable
• Link to contact information page
• Link to copyright information page if needed
• Link to Search-page if there is any

1.3 Navigation and search

Navigation is a very important thing on the Internet. Without it, the Internet would be only a pile of documents, not a network. The navigation design is like the structure design: the bigger the site is, the more important is designing of the navigation. Without a good, clear navigation users do not find what they are looking for they get frustrated and may not visit the site ever again in the future.

When designing the navigation, the following things should be taken into consideration:

• The link text should clearly describe what user finds behind the link. Use meaningful texts rather than "cute" texts or metaphors
• Avoid using Click here-links, they are not informative
• The link must look different than a normal text. Most users are used to bluish links with underline. If the link does not look like it, the user may not find it
• The navigation must work without Java Script or some other more advanced technique than HTML (Hyper text mark-up language). The user must be able to navigate even if he is using some older browser that does not support the newest technique

Navigation should not dominate the screen. It is recommended that only 20% of screen is used to navigation, the rest should be for the most important thing: the content. [Nielsen 2000]

The search-function is ought to be in every big site (more than 100 documents). Jacob Nielsen’s usability studies show that about a half of all users are search-oriented, they usually go straight to Search-button and they are not interested in looking around. [Nielsen 2000]

1.4 URL

The URL (Uniform Resource Locator) needs to be designed, too. It is not indifferent what kind of string of characters it is. The URL should be short; it decreases the possibility for errors. The usage of special characters and uppercase characters is not recommended. The URL is supposed to be in common language and descriptive, so that users can expect what they are going to find behind an unfamiliar URL. And the last thing: URL should look good in e-mail addresses. [Nielsen 2000]

2. Page design

2.1 Using screen space

The screen space is always limited and the navigation takes some part of the screen space. The web page is ought to be dominated by the content, not by navigation. It is just a necessary evil that is not a goal itself. However, this does not mean, that the page is supposed to be overly compact with no white space. White space is not wasted when it is part of content or navigation design. There is said in chapter 3 “Content design” that the texts are ought to be easy to scan through, easy to read, and the paragraphs ought to be clearly separated from each other. White space helps with these goals. The easiest and fastest way to separate paragraphs is two blank rows. And it is not easy to read screen-wide text but the text is better in a narrower table and the side or sides are white.

Sometimes one can see some very trendy layouts with extremely complex frame schemes, it is called sometimes an inline frame. The empty frames surround the little window in the middle of them. The window is maybe 20% of the screen space and all the information is introduced in it, the rest is empty or for navigation. This kind of website is a total disaster, most of the screen space is just wasted. [Nielsen 2000]

2.2 Different browsers

One page can look very different when viewed by different browser or by the different version of the browser. Sometimes the page may not be working at all. This problem often can be avoided by using only standard HTML -language but even when used standard HTML page can look different though it is working properly. [Nielsen 2000]

Yet, the page is supposed to be working well with both leading browsers: Internet Explorer (IE) and Netscape Navigator (NN). If it works somehow with less known browsers, like Mozilla, Opera etc. it is fine, but there is no need to configure the site especially for Opera or another not widely used browser. It can cause some not wanted effects when viewed by IE or NN. Usually there are enough problems to make the pages work with NN and IE, in my experience when pages are fine with IE, they work with Opera and Mozilla, too but optimising for Navigator results most of the problems.

2.3 Different displays

The designer does not know what kind of display the user has, what is the size of display, what is the resolution or the colour quality. Despite of that the page should work with different kind of displays. In most cases it is enough if the page looks tolerable in 14-inch monitor with 800*600 resolution and in 21-inch monitor with 1152*864 resolution. Most users still use traditional table CRT’s (cathode ray tube) or LCD (liquid crystal display) with laptops though different kind of PDA’s (personal digital assistant) are becoming more common.

The first way to take into consideration the different displays is not to use exact size attributes with tables, pictures, fonts or frames. It is recommendable to use proportional attributes. When using frames they are ought to be resizable.

Not recommendable: FRAMESET COLS="200,*"
Recommendable: FRAMESET COLS="20%,80%"

Some web authors have solved the display problem by creating two separate sites: one for smaller resolution and another for bigger resolution. Sometimes it is a good and working solution but it doubles the updating work. [Nielsen 2000]

2.4 Response time

The users hate waiting. Pages should be made so, that the download is as fast as possible. The HTML-code is very quick to download, but the graphics take most of the bandwidth. That is the reason why pages with heavy graphics should be avoided.

There are some tricks to make page download faster:

• Keep pictures and photos small, it is recommendable that single piece of graphic should not be bigger than 30kb, downloading bigger graphics should be optional or at least it should be warned
• Animations and audio should be avoided if possible
• No Java Scripts or other program scripts if they are not essential
• Avoid banners and pop-ups if possible
• Tables slow downloading, use few little tables instead of one big table

[Nielsen 2000] [Iiskola 2003]

2.5 Frames

Many, if not all usability experts say: never use frames. The frames have their disadvantages and they are ought to be considered carefully before making framed page. The most important troubles with frames are:

• Printers do not work with framed pages very well, they usually print only one frame
• Search engines have trouble with frames
• Book marking is not always working properly
• It is a copyright violation to display the contents of another web site within your frames
• Older browser do not support frames at all
• It is very easy to make mistakes with frame codes [Nielsen 2000]

However, I would not be so strict with frames. When the author really knows what he does, frames are not a problem. In many cases frames make updating much easier and many of the problems can be solved. I am saying: use frames if you know exactly how it is done properly.

2.6 Colours

Colours are important part of web page, but they should not be used excessively. The best way is to choose one or two colours that are used throughout on the site. If more colours are used the result looks like a cartoon or a circus advertisement. When planning colours, the author should think also how the colour-blind users see the page.

There are listed some meanings and associations of different colours in the table 2.1

Table 2.1 Colours and associations [Sinkkonen & Kuoppala 2002] [Peltonen 2000]

COLOUR	ASSOCIATION
Red	Love, fire, danger, warmth, stimulating
Orange	Warmth, fire, stimulating, joyfulness
Yellow	Sun, dynamic, attention
Green	Nature, calmness
Blue	Cold, water, sky, calmness
Purple	Royalty, mystery, dignity
Violet	Festivity, coolness
White	Cleanliness, innocence, modesty, emptiness
Grey	Conservative, ordinariness
Black	Death, night, darkness, mystery

3. Content design

3.1 Writing for the web

3.1.1 Writing for the web

Writing for the web is not like writing for a newspaper or magazine or any other printed media. The first problem is that reading from a monitor is about 25% slower than reading from the paper. As a result, users do not feel comfortable to read a lot of text from computer screens. Therefore, the web author is supposed to write 50% less text, just the facts. It is not enough to write only 25% less text because it is not only a matter of reading speed but also a matter of feeling good. And most users do not like scrolling. [Nielsen 2000]

3.1.2 Scannability

As the users are not willing to read lot of text, they merely scan the text than read it. The text is supposed to be easy to scan through and the main idea of the text should be clear after scanning. It is not a good idea to use long continuous text blocks.

How the pages are made easier to scan?

• Use two, or even three, levels of headlines
• Use meaningful headings. The heading ought to tell the user what it is been found under the headline
• Use short paragraphs
• Use bulleted lists to break the text blocks
• Use highlighting to make important words catch the user’s eye. Also, links are working as highlighting. Make sure the highlighted words do not look like links
• Only one subject per paragraph. Users usually catch the first sentence of each paragraph. Thus, the main idea of the paragraph ought to be in the first sentence

[Nielsen 2000]

3.1.3 Readability

The designer is supposed to check the readability of the text. Reading from a monitor is not too easy; the design should not to make it any harder. The text should differ clearly from the background. The best combination is black text on a white background. The background should not make text too difficult to read even if white background is not used. Multi-coloured backgrounds are ought to be avoided. [Nielsen 2000]

The font should be clear and big enough with any resolution. It seems to be highly fashionable to use extremely small font, but it certainly is not recommendable. Luckily, the user can change the font size in his browser when using Internet Explorer.

The Sans Serif fonts (Arial, Verdana etc.) are better for web page than Serif fonts (Times New Roman etc.). The Sans Serifs do not have finishing strokes, thus they are clearer than Serif fonts. Times New Roman is often the default font of the browsers and if some other font is used, it is recommendable to specify more than one font, for example: [Nielsen 2000] [Nielsen 2002] [Fontmenu.com 2002]

Example: font face="Arial, Verdana, Helvetica"

3.2 Graphics

As it is said in 2.4, all pictures, photos and other graphical elements are ought to be quite small and quick to download. But graphics always take more time to download than text and that is why they should be used sparingly. It is true that one picture is worth of thousand words, but the web author should think whether these thousand words are important or not. If not, the photo should not be used. There are not supposed to be any needless graphics on the web site. Photos and pictures should always strengthen the text content; any decorations are not needed. [Nielsen 2000]

3.3 Animations

Animations catch user’s eye very effectively. For that reason using the animations should be minimized. In some cases it can be useful when it is illustrating change or visualizing three-dimensional structures, but in most cases animations are needless, even annoying. Moving texts should be used very sparingly though they are very effective to catch attention. The moving text should be short enough to see at one glance. According to Jacob Nielsen’s usability studies, users seldom read a long, moving text. [Nielsen 2000]

References

Fontmenu.com 2002: Sans Serif, http://www.fontmenu.com/site/sans-serif.html, 2002

Iiskola 2003: Antti Iiskola, Viritä kotisivusi tiukkaan kuntoon. MikroBitti 3/2003. Sanoma Magazines 2003.

Metsämäki 1996: Markku Metsämäki, Elektronisen julkaisun suunnittelu. Edita, Helsinki 1996

Nielsen 2000: Jacob Nielsen, Designing Web Usability. New Riders, USA 2000

Nielsen 2002: Jacob Nielsen, Let Users Control Font Size, http://www.useit.com/alertbox/20020819.html. UseIt.com, 2002.

Peltonen 2000: Teija Peltonen, Värisymboliikka, http://sinuhe.jypoly.fi/~tpeltone/mater/varit.htm, 2000

Sinkkonen & Kuoppala 2002: Irmeli Sinkkonen, Hannu Kuoppala, Jarmo Parkkinen, Raino Vastamäki: Käytettävyyden psykologia. IT Press, Finland 2002