Web Page Design University of Wollongong

1. IACT303 – INTI 2005 World Wide Networking Web Page Design University of Wollongong

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17. W3C Content Accessibility Guidelines 2.0 The 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.

18. W3C Content Accessibility Guidelines 2.0 Three levels of conformance are defined: • Level 1 success criteria: • Achieve a minimum level of accessibility through markup, scripting, or other technologies that interact with or enable access through user agents including assistive technologies. • Can reasonably be applied to all Web resources.

19. W3C Content Accessibility Guidelines 2.0 Three levels of conformance are defined: • Level 2 success criteria: • Achieve an enhanced level of accessibility through one or both of the following: • markup, scripting, or other technologies that interact with or enable access through user agents, including assistive technologies • the design of the content and presentation • Can reasonably be applied to all Web resources.

20. W3C Content Accessibility Guidelines 2.0 Three levels of conformance are defined: • Level 3 success criteria: • Achieve additional accessibility enhancements for people with disabilities. • Are not applicable to all Web resources.

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

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

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

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

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

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