AVH Interface Design

This page outlines the design parameters for the AVH web pages. It is a work in progress and is open for discussion.

Background
The layout of the AVH web pages are controlled by predefined templates describing the various data elements. The appearance of these elements is controlled by linked stylesheets specifying the appearance of each of the elements. This will enable broad appearance changes to be made efficiently across the AVH application.

The use of consistent or compatible templates and stylesheets can be applied to other AVH products or related applications. The Weed Tracker Early Warning System is an example of this.

Prior discussion
This page builds on a design discussion paper prepared by Ben Richardson.

The design elements will support the draft help pages being prepared by Alison Vaughan. The style of these pages will be consistent with the AVH introductory, query and display pages:


 * Draft general access help pages
 * Draft restricted access help pages

Page classes
There are several classes of web page that make up the AVH application:


 * Welcome page(s)
 * Query pages
 * Public query
 * Registered pages
 * Result pages
 * HTML table
 * Map
 * Raw data
 * Email data
 * Help pages
 * Introduction
 * Topic help

The design intent is to reuse design elements across as many AVH web pages as possible to reduce maintenance overhead.

Design principles

 * The application should be inviting and user friendly
 * Navigation should be intuitive and unambiguous
 * Layout should be clean, minimalist and uncluttered
 * Graphic elements should be purpose oriented and non-distracting
 * Pages should show style and visual consistency
 * Help should be available wherever it is likely to be needed
 * Design elements should be simple for ease of maintenance and update
 * Proprietary elements or software should not be required

Design technical considerations

 * Page HTML should validate with only warnings against the W3C HTML Validator.
 * Page CSS should validate with only warnings against the W3C CSS Validator.
 * Page design should in general follow the principles noted in the Web Content Accessibility Guidelines
 * Pages should be designed to work best in those browsers that best implement the W3C standards, and to deform gracefully in older or less conformant browsers. At present this means designing for:
 * Mozilla Firefox
 * Opera
 * Apple Safari
 * Microsoft Internet Explorer 7 (should work acceptably in IE 6)
 * Google Chrome
 * Use of proprietary object embedding methodologies such as ActiveX should be avoided as this prevents the site from working on operating systems that do not have ActiveX-enabled browsers
 * Pages should be tested on all target browsers
 * Pages should avoid frames as these do not function consistently on all browsers

Page regions and elements
Each page element may appear in one of the following page regions: header; footer; LH column; RH Column; main body.

It is not essential for a page to have all of these regions but most pages will generally have a header, a main body and a footer. Different elements will be defined for each part of these regions.

Left hand logo

 * Reserved for AVH logo (redesign?)
 * Size

Centre title

 * Page title

Right hand logo

 * Reserved for institutional logo
 * Size

Header link bar

 * AVH institutions

Cookie trail

 * Home > there > here

Left Hand Column

 * Navigation menu
 * About
 * Introduction / background
 * Help
 * News
 * Sponsors
 * Acknowledgements

Right Hand Column

 * Not used?

Main Body
This where the substance of background, query and report pages will appear. The layout and appearance will vary with context.

All pages

 * Navigation tabs
 * H1-H6 headings
 * Text

Query page(s)

 * Log in / log out


 * Taxa query
 * Data sources
 * Restrict region
 * Download options
 * Map / data file / etc.
 * Output file format
 * Accept data use agreement
 * Submit / Clear

Footer

 * Footer text
 * Footer link Bar
 * Participants
 * Copyright
 * Disclaimer
 * Data use agreement
 * Logo farm

Links

 * AVH and EWS Interface Design discussion
 * Pre alpha draft design prepared by Ben Richardson
 * AVH Help Page Design Discussions
 * AVH Restricted Help Page
 * CHAH AVH web page
 * SAPAC development AVH web page