Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use...
-
date post
20-Dec-2015 -
Category
Documents
-
view
215 -
download
1
Transcript of Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use...
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