Website and Usability Design

Required Resources:

• Yale Style Guide: Process http://webstyleguide.com/process/index.html
• Yale Style Guide: Interface Design http://webstyleguide.com/interface/index.html
• Nielson: mental models for search are getting firmer http://www.useit.com/alertbox/20050509.html
• Usability first: methods (read all links methodologies) http://www.usabilityfirst.com/methods/index.txl
• NPR: Google (Audio clip; appx. 20 mins): http://www.npr.org/templates/story/story.php?storyId=1421546
• PowerPoint: Usability.ppt (2.5Mb)

Outline:

1. Project Management (Discussion)
2. Visual design
3. Content Management
4. Forms, Searching and Google (Discussion)

1. Project Management: know your audience

• formulate a statement of purpose: E.g. "The Web site will reduce demands on office time by providing answers to questions frequently asked about courses."
  Every decision made in the process of designing the site will be informed by this statement of purpose. A shortened version of this statement --or of your unit's mission-- should be on the homepage of your new site.
  
  
• define your audience: Your class, students in general, faculty and staff? Who are the people that must be able to get something out of your Website? What needs can be satisfied by your Website? Don't try to design your site to be useful to absolutely everyone (remember that you can't please everyone).
  
  
• know your limits (re: time and money): Make sure that the time and money available for your Web site is in keeping with the audience you wish to reach and the purpose of your Web site. Also, ensure that there are resources available to support your site's ongoing requirements.
  
  
• know your site's ongoing requirements: Your site will require continuous server support to remain accessible to your users. Also, chances are that one of the purposes of the site will be to inform users of changes, not just provide the same information year in and year out. Consequently, you'll need to recognize that your site will require ongoing maintenance (usually in the form of continuing content management).
  
  
• set measurable goals (e.g. desired number of visits per month): To find out if your site is meeting its purposes, and is meeting the needs of your audience, elicit their feedback and analyze their use of your site. See the section on content management for more information.
  

2. Visual (Page) Design: (facilitate navigation)

• consistency: where there is variation or change in page layout or design, it should be predictable. "Repetition is not boring; it gives your site a consistent graphic identity that reinforces a distinct sense of 'place', and makes your site more memorable." (Lynch & Horton)
  
  
• self-sufficiency: because it can and will be accessed without a preamble, each page should be able stand on its own and link to the homepage and other main pages. Use a consistent header and footer: "The basic elements of a [Web] document aren't complicated, and have almost nothing to do with Internet technology. It's just like highschool journalism: who, what when, and where." (Lynch & Horton)
  
• page length: no scrolling on the home and main pages; 2-3 screen lengths otherwise. If scrolling is required, make sure the essentials are at the top) "less than 10% of Web readers ever scroll beyond the top of Web pages" (Lynch & Horton)
  
• Minimize Graphics and Colours:
  Graphical content will slow download times for your site: "Traditional human factor guidelines indicate 10 seconds as the maximum response time before users loose interest". (Jacob Nielson)
  "Don't set out to develop a style for your site, and [don't] simply import the graphic elements of another Web site or print publication to 'decorate' your pages. The graphic style of your Web site should evolve as a natural consequence of consistent and appropriate handling of your content and page layout." (Lynch & Horton)
  
  • What NOT to do: Jim Jacobson's Homepage (http://jimjacobson.com/)
    
    

3. Content Management (remember the user)

• create a concise hierarchical outline: Sketch out the hierarchical structure of your site.
  
  Your outline should include:
  • single (home) page at the top
  • up to 7 sub-pages on the under it (depending on your content)
    "Interface studies have shown that users prefer menus that present a minimum of five to seven links, and that users prefer a very few dense screens of choices over many layers of simplified menus." (Lynch & Horton)
  • site should move from general and important information (top) to specific and optional (bottom)
  • lowest levels may vary in structure (see sub-site structure)
  • mirror hierarchy in directory structure and page titles:
    • each section should be located in a directory that uses the same label
    • the main page of each section should be the directory default (i.e. with an "index.html" or "home.htm" file name)
    • page titles should indicate both the section title and the site title; it will often have to stand alone (in a printed page or bookmark list)
      
      
• label sections clearly:
  • employ your users' vocabulary and concepts; approaches to organization include:
    • topically-oriented: most common
    • task-oriented: used in interactive sites; e.g. for tests, registration
    • format-oriented (e.g. essays, journals, databases): used for sites dealing with one topic
    • Not organized according to a "learned" structure; e.g. classifications to be learned in your course, or your organization's internal structure
  • use terms carefully:
    • should be mutually exclusive of one another but inclusive of content
    • should group together what's similar, but separate what's different
    • links to the same material should sometimes be included in more than one section
    • avoid ambiguous and redundant labels: "resources", "materials", "stuff", "click here for..."
      
      
• write/edit for the web or for print:
  • decide whether information can be read on screen or should be printed out.
  • Every site will contain material for on-screen reading:
    • break it into modular chunks (minimize scrolling)
    • use point form wherever possible
    • be simple, clear and concise, but don't dumb-down
  • Information for printing (optional print versions of some info can be included):
    • include entire document on a single page
    • consider omitting any HTML table structures used for the whole document
    • do not set fonts
      
      
• sub-site structure often contains the real "content" of the web site; often uses a nonhierarchical organizational logic
  • linear: most common format; useful for documents
  • listing or index (usually alphabetical): useful for links or alternative organization of larger sites
  • grid: useful for large, uniform information sets, like an expanded table. Can be combined with a hierarchy.
  • database: for searches on large information sets. Requires special server software.
    
    
• feedback: include a "site manager" email address on each page, and (optionally) an easily accessible feedback form to ensure you users are able to find information, and are understanding your organizational scheme.

Discussion: Forms, Searching and Google Read / Listen to: Nielson: mental models for search are getting firmer http://www.useit.com/alertbox/20050509.html NPR: Google (Audio clip; appx 20 mins): http://www.npr.org/templates/story/story.php?storyId=1421546 Standard practices and expectations have arisen around Web forms and searching. As the audio clip on Google suggests, these practices are being reinforced and changed by Google's innovative use of its very simple Web form. (E.g. to produce input-sensitive search results such asnames and addresses for telephone numbers, or suggested spelling corrections for mis-spelled words). These innovations, and the practices and expectations they produce seem to be having an impact on the Web interfaces for library catalogues, and also on library search behaviour. Are you inclined to agree with Neilson's characterization of the "firmness" of mental models for searching? What does this mean for boolean searches? Should library interfaces follow suit? Why (not)?