Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,

Web Design

Plundered from Lynch and Horton

© 2004 the University of Greenwich 2

10 x don't use• Frames• Leading edge technology• Scrolling text, marquees, animations• Complex URLs• Orphan pages• Long scrolling pages• Lack of navigation support• Non-standard link colours• Outdated information• Long download times

© 2004 the University of Greenwich 3

Layout, avoid tables?• Use CSS for position

• Often difficult to maintain• Inflexible

• % width vs specified width• Browser differences

• Nesting takes longer to render• Search engine optimisation• Accessibility• Printing

© 2004 the University of Greenwich 4

Interface Design Issues

• Web pages versus conventional documents

• Page independence• Author – validity of information• Title• Revision date• Home page/site reference• Target audience needs

© 2004 the University of Greenwich 5

• User centred• Navigation• Direct access• Bandwidth• Consistency• Sitemap feedback• Accessibility• Organisation of information

Interface Design Issues

© 2004 the University of Greenwich 6

Navigation

How does page 6 in this sequence deal with this situation?

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 7

Consistency in Page Layout

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 8

Use of Tabs

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

Direct Access - Dead Ends

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

Graphics as Navigational Aids

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 11

Site Structure• File and folder structures• Hierarchy

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 12

Site Elements

• Home page• Menu based• News based• Path based• Splash screens

• Page templates• Site guide/map• Search facility• Contact• Feedback

© 2004 the University of Greenwich 13

Intranet Use/Cost

• Sun Microsystems Intranet – mid 1990’s• Employees accessed average of 12 pages

per day• Redesign: saving of 5 minutes per week per

employee = 10 million dollars per year

© 2004 the University of Greenwich 14

Page Design

• Visual hierarchy• Consistency• Dimensions• Length• Layout• Frames• Cross platform issues• Accessibility

© 2004 the University of Greenwich 15

Typography

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 16

Justification

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 17

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 18

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 19

Case

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 20

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 21

Anti-aliasing

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 22

Style

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 23

Balance

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

Gutters

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 28

Visible Area

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 29

Browser Screen Size

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 30

Links

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 31

Link to Homepage?

© 2004 the University of Greenwich 32

Graphics

• Is it a picture?• Is it a map with links?

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 33

Bandwidth – Page Load Time

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 34

Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001

© 2004 the University of Greenwich 35

Multimedia

• Audio• music• speech

• Video• streaming• format (plug-ins)

© 2004 the University of Greenwich 36

Accessibility• Guidelines

• WWW Consortium W3C standards

• User tools• e.g. Large Print Viewers

• Authoring tools• A-Prompt, Web Accessibility Verifier, see:

http://aprompt.snow.utoronto.ca/• WebXACT Web Page Accessibility Verifier, see:

http://webxact.watchfire.com

• Browsers with Built-in Voice Feature• Home Page Reader – IBM, see: http://www-3.ibm.com/able/

• Government initiatives• section 508

© 2004 the University of Greenwich 37

References• Patrick J. Lynch, Sarah Horton, 2001, Web Style Guide 2nd Ed, Yale

University, see: http://www.webstyleguide.com

• Accessible Web Page Design, 2003, see: http://www.makoa.org/web-desin.htm

• Web Content Accessibility Guidelines 1.0, 1999 and 2.0 (working draft), 2003, see: http://www.w3.org

• Designing More Usable Documents, 2003, see: http://www.trace.wisc.edu/world/doc_access/index.htm

• Designing More Usable Web Sites, 2003, see: http://www.trace.wisc.edu/world/web/index.htm

• Websites That Work (video – 15 mins), RNIB, see Web Accessibility Initiative (WAI): http://www.w3.org/WAI