|"Design isn't only what you see,
it's also what you think and feel
as you navigate a web site"
[Alan Richmond, More than Meets the Eye]
The designers job is to structure the learning experience. Effective websites combine design elements of speed and style with organised, focused content to grab and hold attention. And they are easy to navigate.
Let's try to identify some general rules.
Make sure that your user interface works consistently. Put your buttons in consistent places on all of your windows, use the same wording in labels and messages, and use a consistent colour scheme throughout. "Consistency in your user interface allows your users to build an accurate mental model of the way that it works, and accurate mental models lead to lower training and support costs" [Ambler 1998:3].
- Set standards and stick to them
To ensure consistency within your website you have to set design standards and then stick to them.
- Explain the rules
Your students need to know how to work with the site that you built for them. When a website works consistently it means you only have to explain the rules once. This is a lot easier than explaining in detail exactly how to use each and every feature in a website step by step.
- Visualise position in web structure
Students need a sense of context, of their place within an organisation of information. The design of your navigation structure should ensure that students always know (a) where they are, (b) where they can go from here, and (c) get an overview over their environment. Orientation of students in the virtual learning environment is as important as orientation for travellers in the local world. Distance students have to develop a new kind of virtual orientational ability.
In paper documents the sense of "where you are" is a mixture of graphic and editorial organisational cues supplied by the graphic design of the book, the organisation of the text, and the physical sensation of the book as an object. Electronic documents provide none of the physical cues we take for granted in assessing information. A hypertext link on a web page gives few cues to where we will be led, how much information is at the other end of the link, and exactly how the linked information relates to the current page.
- Don't let graphics fight content
Make sure the graphical treatment of your pages (background images and colours, large graphics, alternate colours of text, animated images) doesn't interfere with the readability of content-bearing text and graphics. Web publishing is not an opportunity to show off your graphic art skills. Use the graphical aspect to support and enhance, but don't let it overpower the other aspects of your work. Use graphics to create a visual identity and sustain it throughout the site.
- Thou shalt not stimulate mouse arms
Try to keep the number of clicks required to get from your main page to any other page on your site down to four. If it's more than that, you may have to reconsider your navigation scheme.
- Never be afraid to break the rules or redefine boundaries [Josh Feldman, Prophet Communications]
Always question design tips. There are a lot of sites with design tips, but tips and arbitrary rule-making are less significant than the overall learning experience.
Forms of Design
Web design is the synergy and synthesis of three aspects of a web site: sensory, conceptual and reactive.
- Sensory Design
The sensory aspects are what users encounter first, it largely determines their first impression of an educational site. The most important sensory aspects are: page layout, typography, use of colours and use of (animated) images. Educational sites typically contain much text that students are supposed to read. Designers have to be aware of the fact that the muscles controlling the eyes during reading (i.e. scanning left to right or vice versa) can get tired. They tire sooner when the angle subtended by the text being read exceeds a certain threshold. This typically corresponds to a few inches of text such as normally found in books and other printed media. Nowadays many browser windows are open to a much greater width. If you constrain the text to a few inches width - using tables with columns or margins - it is less strenuous to read text-heavy pages.
- Conceptual Design
"One of the commonest mistakes of web designers is to not take the conceptual foundations very seriously" [Alan Richmond]. The conceptual aspects concentrate on question such as:
- What purpose is the website supposed to serve?
- Who is the target audience and what do they want?
- How are the pages clustered and interrelated?
To answer these questions you need a detailed profile of your intended audience.
- What are the expectations of the students?
- How much webbased learning experiences do they have?
- And what web access facilities are they likely to have?
It is critical to match the design and implementation of your web site to your target audience's needs, expectations and capabilities. Educational web designers must look at the site from the user's point of view, not just from the information manager's perspective.
Educational sites will not function well without a solid and logical organisational backbone. Organising your information implies four basic steps:
- Divide the information into logical units.
- Establish a hierarchy of importance and generality.
- Use the hierarchy to structure relationships among information units.
- Analyse the functional and aesthetic success of your system.
The navigation excurs illustrates that there are many ways to structure an educational web site.
- Reactive Design
Students validate educational sites on their 'look and feel'. Reactive design is decisive for the 'feel' half of 'look and feel'. Many educational designers want to build creative and inspiring courses. Although they may indeed have created a wonderful online course, students can be very critical about the usability of the site. When students find it to be unusable or perceive it to be so then it's unlikely they'll get far enough to discover just what's so wonderful about this course. The reason for this might be that these students don't possess all the characteristics you have assumed. Or they might not possess the browsers which are equipped with the technology you are depending on. And last but not least: the conceptual structure of your online course might be insolid, inconsistent and contra-intuitive. In the worst case you might have made all these errors. Making errors isn't good, but most of them can be corrected. Experienced designers know that they always make some mistakes in the construction of telecourses. The most important correction mechanism is the feedback designers receive from the students who actually follow the course. And therefore it is vital for educational designers and telecoaches that students can reach them if they want or need to.
Style: Aesthetics and Functionality
In choosing styles for navigational elements you should try to reach a balance between aesthetics and functionality.
Creating distinctive visual style and applying it rigorously is the best way to hold a series of related, or disjointed, web pages together. Like any corporate image or magazine house style, it created its own identity - and boundaries. In navigation terms, you know when you are within it and when you have left it.
- Good typography depends on the visual contrast between one font and another, and the contrast between text blocks and the surrounding empty space. Nothing attracts the eye and brain of the viewer like strong contrast and distinctive pattern, and you only get those attributes by carefully designing them into your pages [Yale Style Manual].
- Text needs air around it, to breathe. Don't run text the full width of the screen. This creates long lines of text that are difficult to read.
- Don't use long paragraphs of text. It's hard to read these in printed form and even harder on to read on a computer screen. Try to keep paragraphs to four sentences or less. Studies of how users read on the Web found that they do not actually read; instead they scan the page, picking out individual words and sentences. If a page does not appear relevant to the user's current goals, then the user will ruthlessly click the Back button after two or three seconds. However, this statement should not be generalized too strongly. If you are trying to attract new, casual surfers, you centainly need to catch their attention, but if you have an intelligent audience that respects you, careful reading is no problem.
The use of tables gives you a better control on the look of your web pages. Tables let you break your page into precise segments and control the placement of text and graphics. Tables can be used as templates or style sheets to impose a uniform look on a web site. Tables can also give you some of the functionality of frames, but without the problems which are connected with frames [see Jakob Nielsen 1996-2000: Why Frames Suck (Most of the Time)].
|David Siegel has written a great tutorial on creating 'killer' tables. He discusses the thrills and dangers of using tables to do real typography. And he shows how you can control where everything is on your page by pouring text and images inside tables with borders turned off.
- Don't put animated images on your page unless it's absolutely necessary or you're working on a funny page. Animated images are the closest thing the web has to computer viruses.
13 September, 2013
Eerst gepubliceerd: May, 2000