AVH Interface Design
From HISCOM
This page outlines the design parameters for the AVH web pages. It is a work in progress and is open for discussion.
Contents |
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:
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.
Header
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
Data results page(s)
Map results page(s)
Email results page(s)
Footer
- Footer text
- Footer link Bar
- Participants
- Copyright
- Disclaimer
- Data use agreement
- Logo farm
