eScience Lectures Notes : COMP1710: Good and bad Web Design

Slide 1 : 1/10: From New Media to The Web

COMP1710 Tools for New Media and Web

 

Good and bad Web Design

Click here to start or press 's'tart or 'i',

then 'n'ext or 'b'ack

Click here for the 't'able of Content

Slide 2 : ToC : COMP1710: Good and bad Web Design

Table of Contents (10 slides) for the presentation :

COMP1710: Good and bad Web Design

Slide 3 : 3/10: New Media and Web

In this session: Good and bad Web Design

Slide 4 : 4/10: Some elements of Design for NewMedia

Some elements of Design for NewMedia

How the Information is presented / organized (user side / internal organisation)

What buttons and functions are available to the user and when they are available to be used

What the underlying behaviour of the system is

What information and controls are available to other users, such as the admin. staff, super-users, supervisors, executive overview, editorial correspondant etc

The content and layout of standard printouts available from the system

The printed material accompanying the system (e.g. CD cover)

 

 

Slide 5 : 5/10: Why bother (1)

Why bother

Because common sense is not always shared - and because it saves money

in Production

It is good to know your client to satisfy their need

(NB. at least 2 clients!)

Detailed Requirement Specification phase: so you know what you have to do

Adaptation to future development

in Marketing

Quicker Adoption by users (e.g. Shareware)

Source of differentiation from competitors

Slide 6 : 6/10: Why bother (2)

Why bother (2)

in Use

Less support (Courses, Help Desks, etc)

N.B.: some companies make money from support / Real cost of a system

More efficiency

Fewer errors or undo-able interaction

Improved Safety (submitting mail, booking plane)

Make them return

Sticky web sites: users stay longer and return more frequently (!)

 

Slide 7 : 7/10: The well designed web site

The well designed web site ...   "Less is More"

  1. Lets the users accomplish their goals

  2. Makes its purpose clear

  3. Follows conventions

  4. Loads and updates quickly

  5. Displays well in different environments

  6. Has some style

Slide 8 : 8/10: BAD example of Backgrounds

This is the title

And here is a table

Example of Table with Backgrounds in the <th> elements

This is a Header Cell

 normal cell ... normal cell ...normal cell ...normal cell ...normal cell ...normal cell ...normal cell ...   normal cell ...normal cell ...normal cell ...normal cell ...
   

And there is some content in this one too

  

This is another Header Cell With a very long long long long text in it

      
       

 

Slide 9 : 9/10: Text readability

A Matrix look and feel: green text on black background.

Where does that come from ?
From monochrome displays: green, orange, and sometime white on black background

The defaut configuration on first web browsers was black text on light grey background

One of my colleagues says a lecturer (in Maths) used to explain to his students that after years of marking exams, he realised that statistically, exams written in black on a yellow background get better scores :-)