Peculiarities SocioSite Subject Areas Society Search About us Contact

Structuring the
Learning Experience

Web Design

Connie Menting

Principles of Design

Forms of Design


"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]


Principles of Design

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.

  1. Consistency
    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].

  2. Set standards and stick to them
    To ensure consistency within your website you have to set design standards and then stick to them.

  3. 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.

  4. Visualise position in web structure
    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.
    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.

  5. 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.

  6. 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.

  7. 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.

  1. 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.

  2. 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.

  3. 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.




Peculiarities SocioSite Subject Areas Society Search About us Contact

13 September, 2013
Eerst gepubliceerd: May, 2000