Web Page DesignWeb Page DesignUniversity of WollongongUniversity of Wollongong

IACT303 – INTI 2005 World Wide Networking

A Bit of History• Prior to 1980s

– publishing required printing presses and large design staff

• Beginning Mid 80s – Publishing revolution - desk-top

publishing (DTP)– Tools to create documents now more

widely available

Desk Top Publishing (DTP)

• The Web is passing through a similar phase almost identical to DTP.

• Developers often (though less often these days) do things to pages because they can, not because they need to.

Design • Design is the thought process comprising

the creation of an entity (Miller 1997) • Design is about understanding the nature

of human thought and the study of the psychology of materials and things.

• The result of successful web design of a usable and understandable resource for people.

Approaches to Web Site Design

• Artz (1996) offers two approaches– Evolutionary

• exploratory and appropriate for learning about the technology and the domain

• Can lead to complex applications that are often difficult to use and maintain.

– Top-down • organises the complexity of applications and

produces material that meets business objectives• can be maintained by people other than developers.

Web creators goals• Provide

– a uniform interface to the Internet’s existing services

– a simple medium for cross-platform information exchange between members of a community.

• The simplicity of the hypertext model accomplishes both goals.

Hypertext (1)• A person navigating an information space tends

to develop a mental structure for the information

• This structure helps relate pieces of information to each otherE.g.A book is highly linear space,

• But a hypertext document is highly non-linear.– Information can branch outward form many locations

within the text.– May not always be clear how the new information

relates to the document as a whole

Hypertext (2)• The model the user may form of the web

sites structure may be ‘chaotic’.• Chaotic design is too often the only model

that applies to many hypertext systems.• The problem is exaggerated and aggravated

on the Web as– a link can lead to anywhere including a

completely different site on a different server.– the situation is then out of the original author’s

control.

General principles• Have consistency in interface design

– should be applied at all levels from design to page layout and imagery

– helps the user to relate to the site and now when they have entered another site.

– Have the same banner on top of all pages.• To establish a visual identity for the site and• as an aid to navigation.

– Include consistency with buttons or images to links

• Use cascading style sheets to simplify the process of applying consistency.

General principles– No control over other designers

linking to any page within your site– Yahoo is an excellent example of

consistent look and navigation links.– Other methods include making text

as meaningful as possible and keep file size small

Multimedia• Digitized sound and video files are

very large.– Page design should include an indication

of size, download time and running time near the link.

– Also include width and height of images.

• Bandwidth is still a problem to many in the world.

Design Conventions (Artz, 1996)

• Colour can be used for background or to convey information– need to know the environment as not all

monitors display colour the same

• interesting backgrounds can make pages aesthetically appealing, but– can take time to load– Not supported by all browsers

Design conventions (2)• Browser Specific Formatting

Conventions– be careful when overriding

formatting conventions (eg. <br> &<centre> tags)

– need to be careful using tags not supported by all browsers (eg <centre>)

Design conventions (3)• Images

– take much longer to transfer than text– not all users have high bandwidth connections\

• Anchors– should always occur as naturally as possible in

the text– images can make attractive links and buttons

with icons often make traversal easier– must be weighed against the increased

download time

Design conventions (4)• Conventions

– should be established and followed as closely as possible on each page (more on that latter)

– each page should have a date last updated and mailer link

– homepage should have mailer link to ‘Webmaster’ and a ‘more info’ link

• Printing– page designers should print all pages to see

how they look on paper

W3C Content Accessibility Guidelines

2.0• W3C has recently released a draft

documents for web accessibility guidelines. They are asking for feedback (by August 2005)

• You will give this document a “road test” as part of your major project

W3C Content Accessibility Guidelines

2.0The four principles of accessibility are as

follows: 1. Content must be perceivable. 2. User interface components in the

content must be operable. 3. Content and controls must be

understandable. 4. Content must be robust enough to work

with current and future technologies.

W3C Content Accessibility Guidelines

2.0Three levels of conformance are defined:• Level 1 success criteria: 1.Achieve a minimum level of accessibility

through markup, scripting, or other technologies that interact with or enable access through user agents including assistive technologies.

2.Can reasonably be applied to all Web resources.

W3C Content Accessibility Guidelines

2.0Three levels of conformance are defined:• Level 2 success criteria: 1.Achieve an enhanced level of accessibility

through one or both of the following:a.markup, scripting, or other technologies that

interact with or enable access through user agents, including assistive technologies

b.the design of the content and presentation

2.Can reasonably be applied to all Web resources.

W3C Content Accessibility Guidelines

2.0Three levels of conformance are defined:• Level 3 success criteria: 1.Achieve additional accessibility

enhancements for people with disabilities.

2.Are not applicable to all Web resources.

1. Content Must be Perceivable

• Examples• Guideline 1.1 Provide text alternatives for

all non-text content.• Guideline 1.2 Provide synchronized

alternatives for multimedia.• Guideline 1.2 Provide synchronized

alternatives for multimedia.• Guideline 1.4 Make it easy to distinguish

foreground information from background images or sounds.

2. User interface components in the content must be

operable• Examples• Guideline 2.1 Make all functionality operable

via a keyboard interface.• Guideline 2.2 Allow users to control time

limits on their reading or interaction.• Guideline 2.3 Allow users to avoid content

that could cause seizures due to photosensitivity.

• Guideline 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it.

3. Content and controls must be

understandable.• Examples• Guideline 3.1 Make text

content readable and understandable.

• Guideline 3.2 Make the placement and functionality of content predictable.

4. Content must be robust enough to work with current and future

technologies.

• Examples• Guideline 4.1 Use technologies

according to specification.• Guideline 4.2 Ensure that user

interfaces are accessible or provide an accessible alternative(s)– If content does not meet all level 1

success criteria, then an alternate form is provided that does meet all level 1 success criteria.

W3C Content Accessibility Guidelines

2.0• Your final project will need to conform to

Level 1 and Level 2 of the (Draft) Web Accessibility Guidelines 2.0 available at:

• • Guidelines: http://www.w3.org/TR/2005/WD-

WCAG20-20050630/• Checklist: http://www.w3.org/TR/2005/WD-

WCAG20-20050630/checklist.html• .

Exercise• Spend time reviewing the

Guidelines check list in order to determine what factors need to be taken into account when design your web site for the major project.