Home
Project description
The Guideline
Training model
Briefing notes
Project Partners
Links
 
Home
Search

III. DESIGN /DEVELOPING

This chapter stresses different aspects of web design and it depicts the most important things that what one has to think about when designing web pages. It starts with the interaction between human and computer and continues with the issue of usability, of which most known aspect is represented by the “user friendly” (or not?) concept. It then follows a discussion about the use of language (verbal and text design), colours and help functions. The learning styles are just another aspect to be aware of in the context of web guidance. The chapter ends with a portrayal of useful web design and finishes with a checklist.

 

III.1. The importance of web design in guidance

During the past decades, the application of computers and information technologies has made an explosive breakthrough in both working life and private life. When the Internet came into existence, so did the phrase “net present”. This meant that if you are not on web, you don’t exist. (Tallmo, 1999). Web design has become more and more important and is now an essential activity for companies and organisations. “Design is solving problems that cannot be formulated until they have been solved. The shaping of the answer is part of the question.” (Cato, 2001: p 12). Design of well functioning and effective web systems with human-computer dialogue is therefore a matter of importance for many companies and public authorities. Web design supports the contents of web pages, the user understanding of a text, learning styles and inspiration.

 

Modern computer techniques offer new possibilities to make guidance more efficient and easier. The task of guidance is to support the individual’s choice of education and professional career. When an individual gets support from the web with analysing one’s own qualifications and information on possibilities of education and employment, the work of guidance has got a pedagogical characteristic. To develop the applicant’s personality is important in the guidance context.  Information technology shall therefore make contribution to increase the applicant’s awareness on himself/herself and the surrounding world (Nordiska arbetsmarknadsutskottet, 1984: p.17).

 

While referring to web design it is important to have in mind, both as practitioner and developer, the clear agenda that stays behind the creation of tool as such and the purpose a particular website is serving. In this respect, Sampson’s distinction (Sampson, 2003) between need-based and resource-based websites is relevant in identifying corresponding design strategies. According to the author, resource-based sites usually contain lists of resources and/or links, are mainly targeting expert or experienced users and assume they have knowledge, skills and critical judgement that makes it easier for them to connect resources to their needs. By contrast, the needs-based websites are designed around user needs and learning principles, addressing specific categories of users and offering in depth guidance and direct and specific links to appropriate resources.

 

Thus, from the user’s angle, web-based guidance creates a new useful learning situation. With the high awareness of web design, it will support the user to acquaint himself/herself with contents of web pages. 

 

III.2. Human-Computer Interaction in web design

Human-Computer-Interaction studies the relationship between a user and a computer system (HCI). Of late in HCI, the human aspect has become the focus, in contrast to earlier technique-centred approaches. The aim of a user-centred approach is to increase the usability of a computer system. The task of HCI is to design for people, for tasks and for environments. (Meggerle and Steen, 2002). It is important to understand human limitations and conditions in order to adapt the technology to meet user needs. HCI is an interdisciplinary subject, which supports the design of user-friendly systems.

 

The quality of user interface is a critical factor. As Hägglund et al show, quality can be improved by a better understanding user’s conditions and needs. The report showed that there are four kinds of interactive systems:

Administrative routine system, such as in banking;
Life-critical system, such as a weapons system;
Qualified tool, such as Computer Assisted Design (CAD).
Individual formed system, web-based guidance.

The latter system demands that the user finds it attractive and easy to use.  It is therefore very important for individual formed systems to have a good user interface. Web-based guidance is one of the new public web services, where the user chooses to use the system, or not. A web-based system which anticipates infrequent usage should be designed to be easily learned, even by a novice.

 

III.3. The human system

The knowledge on human eyesight, memory and thought is of great importance in the user interface design.

 

III.3.1. Eyesight and reading from the computer screen

According to Berndtsson and Ottersten, to see or perceive is the result of a complex adaptation of the brain, partly controlled by experience and interest. It is therefore important to eliminate anything unnecessary, anything that doesn’t provide any information. (Berndtsson and Ottersten, 2002).

 

It is easier to read and search for information on the screen if the eye can follow a line. Normally it is 20-30 % slower to read text on screen than on paper. So web design should:

Design text and links for skimming to help the user can get an idea of relevant contents;
Show clearly what links are and give a clear description of them;
Use a large font and avoid italic type for links;
Use grouping to create affinity. This means that the related information and functions should be presented in groups to help the user reduce overwork at the interpreting of what he/she reads from the screen. (See Annex 2).

 

III.3.2. The psychology of human memory

Human memory and memory process mean a great deal for interaction between human and computer. (Allwood, 1998). The human use of computer depends on the property of human memory system. The human thought can be described more or less as conscious process in the memory. According to Berndtsson and Ottersten, there are three kinds of memory: 

Sensory memory receives information from five senses (eyesight, hearing, touch, smell and taste);
Short-term memory/working memory receives selective perception, which can resembled that we call “the consciousness”;
Long-term memory stores selective information, which can be recalled gradually and can continue work on the impression.  (Berndtsson and Ottersten, 2002).

 

In connection with the learning and recollection/ oblivion, there are three phases: encoding, storing and compiling. Encoding occurs when information from surroundings is received by the memory; storing means that information is kept in the memory; compiling means that information in the memory is activated and reported or used in another way (Allwood, 1998).

 

Sensory memory, first and foremost, comes up under the encoding phase, while short-term memory/working memory and long-term memory are activated under all these three phases. Short-term memory/working memory is very limited and can only manage a small number of information units (Allwood, 1998). It is considerably easier to recognize information than recall/remember information. Long-term memory uses associations to recall things, which provides user with eligible options in a list instead of an empty input field. (Berndtsson and  Ottersten, 2002) There is a large amount of scientific knowledge about psychology of computer use and memory is one of the most important areas. So is cognition/thought.

 

III.3.3. Cognition/thought

Cognitive psychology[2] is about understanding how human beings handle information and through which mechanism processed information becomes lasting knowledge. Because cognitive psychology considers the learning process, it is therefore important for interface design. To some degree, our thought is affected by consciousness. We are good at judging information, analyzing and managing text and numbers. However the problem is that we manage information sequentially and can’t manage particularly much at a time. As Berndtsson and Ottersten mention, it is to judge and find the pattern that we are effective. A good interaction design requires making the best use of the user’s existing knowledge.

 

Without our consciousness, the brain tries all the time to find the pattern so that the process is activated automatically, which lead to the reduced work load. Thus it is important to design a homogeneous interface. That is why the same word should be used for the same thing everywhere and the same colour for the same thing. To help the user find the pattern for how the system works is very important in the interface design. The user learns faster if the system stimulates the user’s exploration. The relevant feedback on the user’s acts is important so that  the user is able to understand the structure and behaviour of the system to any great extent. Feedback is as well an important element to create pattern. (Berndtsson and Ottersten, 2002).

 

III.4. Usability

III.4.1. About usability

Usability is one of the central concepts in HCI field. Usability is a property of interactive products/systems that reflects their quality (Berndtsson and Ottersten, 2002). Many important questions of usability are only marked in the real situation. That is why usability should include at least four different aspects: the user, the task, the system and the environment (Hägglund & Vainio-Larsson., 1989). Four different factors determine together the usability of a system. Those four factors are: adaptation, user-friendliness, satisfaction/acceptance and user-competence.

    

 

Adaptation: The functions of program are designed in a way to follow the structure of the task optimally, which the user tries to deal with.

 

User-friendliness: The term user-friendliness is often used in an unspecified way but according to Allwood, it contains several different aspects. One of important aspects here is availability of the system. The other important aspect is that the program makes demands on the user and at the same time the user has to be compatible with the program. It needs some knowledge on memory system and thought of the user to give support for the user’s mental process. (See III.4 The human system,). The user is different, so that individualization is important as well. Another aspect of user-friendliness is the quality of the “help” resource. When the user runs into trouble, there should be an effective “help” resource at hand.

 

Satisfaction/acceptance: The user is favorably disposed to the system and has motivation to use it. Without the necessary motivation and goodwill towards the system, there is an obvious risk that the user will not learn to use it. Furthermore, there is a risk that the user will not use the system even if he or she knows how to use it.

 

User-competence: The user has enough understanding and skill to be able to interact with the computer in an effective way. (Allwood, 1998: p.11-13)

 

III.4.2. Another aspect of usability

Usability is related to the interaction between the user and the computer on a special occasion in time and space. In order to understand the complexity in interaction between the user and the computer, usability should be looked at in certain context. There are three main categories of usability: learnability, flexibility and robustness.

 

Learnability: a novice should understand the system. This makes it possible for the user for maximum effect of the performance. It is important for the user to predict what is going to happen in the system while the performance is in action. It should be possible for the user to reuse the experience of some result in another situation, which makes the learning easier (Meggerle and Steen, 2002)

 

Flexibility: The user is in charge of more initiative and can change the task, which ought to be dealt with. There are possibilities to be able to adapt to the interface: input and output can be better adapted to see to that the needs of the user and settings in the system will be automatically adjusted, depending on which user it is.

 

Robustness: The system is protected from incorrect and unacceptable using so that the system will be kept in a definable state when an error occurs. There shall be chance of restoring an error.

 

Usability is of primary importance for web design. Usability in a web-based guidance context is often connected with individual formed system (See paragraph Human-Computer-Interaction in web design), which means that users have to take responsibility for learning how to use the system by themselves. Web design should therefore start from every user’s perspective and need. We should be aware on usability and support every individual to achieve the result.

 

III.4.3. The user influence and user-centered web design

An important condition for acceptable results and sheer activity benefit is that the users are represented under the process of web design (Nielsen, 2001). Under time pressure, it is not unusual that the user influence is regarded as time-consuming. It is not unusual either that many decisions are made without making use of the experience and knowledge of the users. When the system is ready-build, it shows that the accrued time cannot compare with the time used on changing and correcting faults (Pettersson, 1994). According to Nielsen, 85 % usability problem will be found with the help of 5 users in a usability test. (See paragraph Evaluation).

 

The human view, which today is comprised of the modern research in psychology and other behaviorism, provides one of the most important foundations for user-centered design. (Hägglund et al, 1989). Human strives to control the machine, but not to be controlled by the machine. User-centered design stresses the computing system’s part as a tool for humans. And the tool makes it possible for humans to use their experience, knowledge, skills and occupational competence instead of the system controlling them. For a good Human-Computer-Interaction, the emotional environment has the same importance as the physical one. User-centered design should lay stress on the aspects of motivation and the aesthetic illustrations etc. One of fundamental demands of design is to start from the human ability, limitations, needs and the interactions with computing technique.

 

III.4.4. User interface

Interface is the aid that makes a system available. It is used to interact with the system. There are two kinds of interfaces:

System interface is the interface (technically) between two systems[3].
User interface. The user interface is the interface dealing with the user (Mathiassen et al, 2001). 

Today there are lots of good and simple guidelines for user interface design, for example Apple’s “Human Interface Guidelines” and “The Windows Interface Guidelines for Software Design” from Microsoft, but the problem is that they seldom or never focus on the task that should be performed. (Sandred, 1996).  Many systems are difficult to use. That is due to the fact that there are not available methods to design user interface. The quality of user interface, i.e. usability, should adapt to the range of uses (see “Usability”). A good user interface is based on knowledge on the future user and on how the system will be used. (Mathiassen et al, 2001). A user interface has complicated interactions and should be experimented and iterated.

 

It shows in the report (Hägglund et al, 1989) that design of messages, first of all instructions to the user, help texts and messages of errors are important for the user’s reception and experience. Information ought to be correct, consistent, complete and comprehensible; at the same time, you will avoid informing the user too much by dividing up and structure the information in an appropriate way.

 

Different measures should be taken in order to tackle the approach to the problem (Hägglund et al, 1989: p. 64-65):

Lay stress on the verbal design on the basis of the user’s situation and conceptions when choosing formulations. Use a professional writer if it is possible. The programmer, the user and the writer should participate in the quality control, such as approving procedures.
Develop guidelines for how different kinds of texts shall be designed. For example, error-messages are recommended to have a positive manner, use a standardized layout and homogeneous terminology, etc.
Carry out acceptance test, if it is possible, do it by evaluating how texts works in the realistic practical use situation.
Register use problems when the system is in operation, for example by registering usual risk situations and possible difficulties to get out of them.

 

Layout is about how you use colours, fonts, and sizes of letters. At the same time, it is about how data are grouped and placed on the screen. The goal of layout design is legibility, clarity and consequence. An effective layout design on screen is an important task. Colours can be used to strengthen or weaken information. Some proposed guidelines for colour use are:

Limit the number of colours and use colour to support the structure in an illustration and make legibility easy;
Notice the possibility to use colour to convey types of information, for example directions, help, changed data, etc.
Be consistent in colour use everywhere in a system and notice existing meanings and associations for different colour in the current application.

 

To develop a user interface, which is easy to be used, has got considerably increased importance in HCI design. There is a lot of knowledge about design. Design should be consistent and clear. The main criterion for a good graphic design is that the design is not conspicuous but it should bring out the message and its structure. The message should not be disturbed by bad language. Shortcomings in formulation, spelling, punctuation etc. can dettract from the message. The typographical design aims to, among other things, line length, font and different headlines and way to indicate a new passage.  All the initiative from the user ought to be given some form of response.

 

Design of help information can be structured in different way:

General help, of the type of support to go on and use the system or to learn new functions;
Orientation, meaning that the user, for example, gets help to go further or go back in the dialogue to a required state;
Help in error, supporting the user to explain the reason of an error and if it is possible to set it right, without needing to terminate the progressive progress;
Input with guidance, meaning that the system either gives supporting information in advance (for example, in form of directions or presentation of suggestion) or that the user in insecurity can get supplementary assignment as guidance;
Education online, meaning that a computer-based education program gives to the user the possibility to learn the system by himself and it trains his ability by simulated assignments;
Documentation online, meaning that documentation is available from the computer.

 

III.4.5. Evaluation

Evaluation is an activity which tests a design idea or to guarantee that the system works in using. There are different evaluation techniques, which have different purpose and adapt to various situations. The techniques[4] are such as: 

Expert evaluation;
Usability testing with users;
Heuristic evaluation;
Interaction testing;
Lab testing.

Usability testing with users and expert evaluation are the less costly and can be used in different stages. “It is better for usability[5] specialists to be involved with the project, to plan, guide and do user-centred design and usability testing, from the very beginning – from the earliest discovery stages.” (Cato, 2001: p.191). According to Berndtsson and Ottersten, usability testing can be carried out with one user, or two at the same time. Tests should be done in as realistic environment as possible, preferably in the user’s everyday life. With the help of usability testing, the possible causes of the problem will be found. That will lay the good foundations for dealing with problems. With that, the better computer system will be constructed. Tests should be carried out iteratively. “Testing with representative users throughout the development is the only way of finding out the real issues of usability before going live.” (Idem, p.193).

 

An expert evaluation can be carried out on a design suggestion, a prototype or an existing system. Those who carry out the evaluation should rapport on the problem which must/should be attended to.

 

III.5. Individual learning styles

Web-based guidance uses web design to create learning situation and to support learning. Therefore it is important for web design to support different learning styles in its pedagogical approach. (Larsson, 2002: p. 35-41).  Not all individuals learn in the same way: some people learn best by reading and listening, while others learn best by doing things physically. The holistic-analytic dimension states how the individual takes in and organizes information. The holistic approach works for those who want an overall impression sooner in the learning process. The analytic approach, however, assumes that the learner wants to investigate elements and is interested in details. Holistic learners prefer pictures, slides, video and cassette recording to printed material. Analytic learners prefer highly printed material such as books and articles. The verbal-visual dimension describes the individual’s way of representing information in memory during thinking. Four different ways of learning have been identified:

Concrete experience (understand, experience, imitate);
Reflected observation (observe, consider, reflect);
Abstract thinking (analyse, summarize, generalize);
Active experimentation (apply, try out, venture). 

And four domains:

Environment factors (sound, temperature, design);
Emotional factors (motivation, endurance, responsibility, structure);
Social factors (friends, self-image, groups);
Physical factors (ability to observation, time and mobility).

Computers allow information to be presented in different ways, to account for this range of learning styles.  Computer-supported information can be tailored: the same course can be presented differently according to different learning styles.

 

III.6. Useful web design

Nielsen, (2001), argues that: “Usability is Alpha and Omega in web design.” Websites which are easy to use, prioritise simplicity and lay stress on the user’s needs rather than glitzy design are to be prized.

 

III.6.1. Display

When the online-user just skims the text, avoid density by using short pages with all the secondary information placed in subordinate pages. Nielsen considers that empty space is not a waste if it is conscious design for content or navigation help; simplicity always wins over complexity: the web designer’s most important job is to make it easy for the user (Nielsen, 2001).

 

III.6.2. Resolution

Pages should be designed to function independent of screen resolution, and to adapt to all kinds of screens, making sure that design works with various font sizes.

 

III.6.3. Response time

Rapid response time is the most important of all design criteria. Response time from one page to the other should be less than 1 second. Other rules are:

Response time of less than 10 seconds keeps within the limit of typical attention span;
The limit of what the user sees as direct response is around the 10th second;
Beyond 11 seconds, the user loses the feeling of direct contact;
If the user downloads big pages or multimedia files, the delay should be indicated. Longer than 8 seconds reduces confidence.

To optimise response time, investigate fast web servers and be sparing with pictures and graphics. Berndtsson and Ottersten (2002) show users prefer speed to trendy design.

 

III.6.4. Links

Linked texts should not be too long to be understood easily at a rapid perusal. Nielsen (2001) stresses that only key words should be used in the texts of links and the use of colours to show links is important. He also suggests that links to pages, which the user has already visited, be shown in purple or red. But links to the pages, which the user has not visited, be shown in blue. This makes navigation easier, because the user knows what is left to investigate.

 

III.6.5. Design for contents

The golden rule in all web design is that less is more, so remember:

Text should be easy to read through;
Keep pages short;
Use item lists and the like in order to break up dense text;
Emphasize the keywords;
Error-messages should always be constructive.

 

III.6.6. Simple and clear language

It is important to give a summary in the beginning of each web page. The most important thing should be introduced first, so users can see what the page is about and what it has to offer. Introduce the subject in the first sentence of each paragraph and avoid complicated sentences and difficult words. Be moderate with metaphor and be careful with jokes on the web. Long articles shall be rewritten and made shorter or divided up in several pages. Each page of text should be written according to “the pyramid principle” – begin with a short summary and information should be visible without the user needing to roll the page (Nielsen, 2001).

 

III.6.7. Readability

Avoid combinations such pink text against a green background, which is unreadable for the colour-blind. “...Let text be still! Mobile, blinking text is much more difficult to read than static one” (Nielsen, 2001, p.126). Avoid animation as far as possible because most of users regard it as irritating. The quality of contents is one of the most important factors for usability on the web. Content on the web must give direct satisfaction, otherwise the user will leave.

 

III.6. 8. Navigation

“Web is a navigational system.” (Nielsen, 2001: p.188). Three fundamental questions must be answered as far as navigation is concerned: “Where am I? Where have I been? Where am I going to go?”. The users have to know where they are and understand the structure of the web place. It is important to put any logo in the same place on each page. The pages should have clear headlines to give information about the name of the page or the essential contents. A common mistake is the web place reflecting the organization structure of the company rather than the need of the user.

 

III.6.9. Accessibility

It is important to design web pages, which are accessible to everyone, especially for those with disabilities. Remember:

Avoid blinking or rolling text. “This works badly for many screen readers that are used frequently by visually impaired, blind and sometimes by dyslexic people” (Webdesign, 2003: p. 2).  For dyslexic people this “can be very disturbing.”
Avoid using too many photos and graphics;  “It becomes useless for visually impaired people”;
The best is to avoid opening new windows. Blind people using screen readers can be very confused and it makes it difficult for them to navigate;
Use a good contrast between background colour and text in order to make it accessible for people with a vision impairment; 
Colours help dyslexics to navigate;
Avoid the PDF (Portable Document Format) because “PDF is largely inaccessible to visually impaired people” (What is Design, 2003).

 

The solution for how to design an accessible web page is simple: “Use only text and hypertext links with ASCII characters[6], avoid graphics and sounds” (What is Design, 2003). Still, this does not mean that the use of graphics and sounds is not allowed. There are a number of strategies to use graphics and sounds and still maintain accessibility: “A number of Accessibility Guidelines have been developed” to ensure that “that accessibility and usability by people with disabilities is maximized” (What is Design, 2003).

 

III.6.10. Simplicity in the web design

Web design must take the user into consideration, to ensure that what the user wants the website to do can be done as simply as possible. The four characteristics which the user appreciates most and which constitute good web design are:

High quality of contents;
Intensive updating;
Rapid download time;
Ease of use.

 

Earlier design concentrated on functionality and performance at the expense of usability. But usability has grown in importance, and understanding usability has become a principal competence in web design (Nielsen, 2001).

 

There are different kinds of users with different kinds of computers, connections and web browsers in the open Internet-environment. The most important characteristics from the user perspective are: easy comprehensibility and personal satisfaction. To be consistent is an essential characteristic in all user interface design. Simplicity is the guiding star in web design: few distracting elements, a clear information structure and matching navigational tools.

 

III.7. Web design and ethics

Ethics is an important part of web design, and we chose to emphasise it as the conclusion of this chapter.

 

Every organisation should have an ethical policy in web design. While the most important aspect is confidentiality, some other ethical issues that should be included are:

How to handle collection, storing, sharing and delivery of information;
Ownership of information; who is responsible for information;
Protection against intrusions on the integrity of users and organisations;
The use of language in respecting cultural difference;
Widening access by designing web pages which are accessible to everyone.

 

 

III.8. Checklist


 

Criteria

Questions

Notes

1

Design

Is design important for a website?

It is good to ask yourself how you appreciate different websites and how come you prefer one to another.

2

Content

Ownership of content: who is responsible for content?

To be responsible for a website means also responsibility for the content. It can be information, tools, pictures, communication, etc. There must be a plan for the administration and management of the content.

3

Usability

How usable is a website?

What is the relationship between the user and a computer system? Is the website designed for the user and his/her expected purpose? Have you involved the users in the development of the website? Do you have a plan for evaluating the usability?

4

Learnability

Can a website create a learning situation?

If you work with career education and use the web, are you aware about different learning styles? And is the website designed for different learning styles?

5

Language

How do you describe different things?

Is the website accessible for speakers of other languages?

 

The language itself is of importance. How do you write? What words do you choose? Do you create long or short sentences?

Several countries have a multi-ethnic population, how do we support minorities?

6

Colours

Is the website suited to have the optimal colours?

Colours are important in several ways. It can support attention to different things in the content. It can support reading. For those who are colour-blind some colours do not fit together. With the right use it can be very supportive, but without awareness it can be an obstacle.

7

Navigation

Is it easy to navigate on the website?

Navigating on a website is the main task for the users. Navigation has to be logical and transparent.

8

Technical

How to handle collection, storing, sharing and delivery of information?

It is important to have a technical (design) strategy on how to handle information.


 

<< Previous   Next >>



Last update:  15:59 18/06 2004

Foreword
Abstract
I. Users
II. Delivery
III. Design / Developing
IV. Theory
V. Ethics
References
Annex 1
Annex 2
Top top
GRUNTVIG - European Cooperation Projects in Adult Education
This project has been carried out with the support of the European Union in the framework of the Socrates program
The content of this project does not necessarily reflect the position of the European Union, nor does it involve any responsibility on the part of the European Union