Outline

• Web Page/Site Design Basics
• Usability
• Navigation
• Standards
• Expectations

• First - content! NOT technology
• What are you trying to convey?
• What are the users going to be looking for?
  • How can you make sure they find it?
  • Navigation Information
    • Where am I?
    • Where else could I be?
    • How do I get there?
    • Where have I been?
• Technology is no substitute for language skills
  • Get help - get it proof read
  • Spell Check!
• Don't use technology for the sake of using technology
  • only use it where it can really enhance your content

• accessibility
  • platform/browser assumptions
  • physical assumptions (sight/hearing)
  • font sizes
  • colour schemes - remember:
    • colour blindness (~8% of male population)
    • contrast
  • The web allows the user to customize the display
  • Don't take that away:
    • No text in images (can't be resized, or handled by a screen reader)
    • Tables should be relative, not fixed size
    • Fonts should be relative sizes, not fixed
• readability
  • Basic Psychology - what do you want users to focus on?
  • Minimize Distractions such as:
    • Animation next to text
    • Unrelated images or sound
    • Page clutter
    • Changing styles (fonts, colours, backgrounds, etc)
• download speed
• spell-checking & proofreading
• Standards
  • Only use non-standards when you absolutely have to
  • eg. Link colours (new links, visited links), button design...
• Answer the fundamental questions:
  • What does the user want from your page?
  • What do you want the user to get from your page?

• Every page must answer basic questions
  • Where am I?
    • Heading
    • Title
    • Relativity
  • Where do I want to be?
    • Clear structure
    • Good naming scheme
    • From the user perspective
  • How do I get there?
    • Links to other top-level parts of the site
    • Links to Site Map/Contents pages
    • Links in a consistent location and format
  • Where else can I go from here?
    • Make the options clear
    • Make it obvious when a link leaves your site
    • Lead your users down a logical path
  
  
• Provide the user with a "story board" - a clear path to follow
• But don't assume that they will follow it
  • So try to keep content context-free
  • If you rely on content in another page - link to it!
  
  
• Breadcrumbs
  • Tell you where you are relative to the top level of the site
  • Let you travel back up the chain easily
  • Have a small footprint
  
  
• Navigation Bars - text
  • Tell you the main categories on the site
  • Should tell you which one you're on
  • Can give some of the same information as breadcrumbs (when arranged hierarchically)
  • Contain more information
  • Resizeable fonts
  • Have a larger footprint
  
  
• Navigation Bars - Buttons
  • As above - but fonts not resizeable
  • Should always use alt tags
  
  
• Site Maps
  • Last Resort Navigation
  • Must be easily located from anywhere in the site
  • Quick way to find out what a site covers
  • Need a very clear and logical structure
    
    
  • David Suzuki Foundation
    • Hierarchical list of topics
    • Too long to be viewed all at once
    • Probably better broken into expandable links
    • Hierarchy doesn't match topic list on the navigation bar
    • Some elements repeated
    
    
  • Australian Conservation Foundation
    • Clear structure
    • Good breakdown of topics
    • Organised by user needs
    • Some information accessible multiple ways
    • Depends on users' perspective
  
  
• Balance between provision of information and good use of space

• Standards are crucial to web usability.
• Make the site predictable
• How it is used
• Where to find information
• An unpredictable site means users must spend more time working out how to use the site.

• Breadcrumb trails are found at the top of a page
• Navigation is found on the left
• Buttons are button shaped or somehow visually distinct
• Content-bearing images used as buttons are relevant images
• Links are underlined (and anything underlined is therefore a link)
• Visited links are a darker colour than unvisited/new links
• Headings will match, or at least relate to, link titles