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.
- 1 Background
- 2 Design principles
- 3 Design technical considerations
- 4 Page regions and elements
- 5 Links
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.
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:
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
- Raw data
- Email data
- Help pages
- Topic help
The design intent is to reuse design elements across as many AVH web pages as possible to reduce maintenance overhead.
- 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
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?)
- Page title
Right hand logo
- Reserved for institutional logo
- AVH institutions
- Home > there > here
Left Hand Column
- Navigation menu
- Introduction / background
Right Hand Column
- Not used?
This where the substance of background, query and report pages will appear. The layout and appearance will vary with context.
- Navigation tabs
- H1-H6 headings
- 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
- Data use agreement
- Logo farm