AVH Interface Design

From Hiscom
Jump to navigation Jump to search

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


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:

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:
  • 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.


  • Reserved for AVH logo (redesign?)
  • Size

Centre title

  • Page title

  • 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

Data results page(s)

Map results page(s)

Email results page(s)


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