5.1 Common Page Elements
PSG Number: GM-14-005
Topical Area: Web Design and Development
Issue Date: 11/1/2013
Effective Date: 11/1/2013
Document Type: Guideline; Published (approved by Web Standards Group and GTA)
POC for Changes: Georgia.gov Interactive
Synopsis: Usability guidelines for Common Page Elements for State of Georgia sites.
5.1.1 Standard Page Elements and Locations
Common elements of your site should be placed in standard locations, and follow standard rules for behavior, simply because it’s where your users expect to find this information.
- Logo - should be in the top left corner of every page. It should also link back to the homepage of your website.
- Menu - should be horizontal, below the logo, if possible. If the site will not accommodate a horizontal menu, then the menu should be left-aligned on the page. Menus should have as few top-level items as possible (5-7 is ideal), and the overall menu should not be more than 4 levels deep.
- Search - should be near the top right of every page.
- Breadcrumb navigation - should be located near the top of the page, below the horizontal menu. Breadcrumbs are a navigation aid that allows users to keep track of their locations within programs or documents.
e.g.: Home page > Section page > Subsection page
- Contact Information - should be easy to find, typically as a main navigation item in a menu. The Contact link in the menu should NOT link directly to an email address (as a mailto: link). It should link to a page that contains all contact details, including email when appropriate. When possible, include a simple web contact form in lieu of an email address.
- Links - should be a different color from all other text on the site, and should be a noticeable color. Text links should not be the same color as header text that is NOT linked. Links should also contain a hover state change to make it obvious when a user had hovered over a link. (e.g. changing the link color, highlighting it with a different background color)
- Titles - should use a consistent header style (<h1> <h2> <h3> etc., as appropriate) and should be located in the same place on each page. Page titles should also be unique and accurate according to the content of each page.
- Animation - Avoid animated graphics and other animation elements, as they distract users from the other content on the page.
* Note to Portal customers: Logo, menu, search, and breadcrumb placement are standardized automatically, and the default stylesheets maintain link styles and title styles.
5.1.2 Search
Ensure your website includes a search function, to help the public easily locate government information. Follow industry standard best practices to ensure your search function is as effective as possible. (See 3.3 Search Engine Optimization guidelines for examples of ways to make content search engine friendly).
* Note to Portal customers: Google search functionality is a built-in feature of portal websites that requires no additional setup. Non-portal customers will have to set up their own website search area and meta tagging practices.