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.

1. Logo - should be in the top left corner of every page. It should also link back to the homepage of your website.
2. 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.
3. Search - should be near the top right of every page.
4. 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

5. 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.
6. 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)
7. 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.
8. 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.

5.1.3 References

• Universal Usability

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 describing the appropriate use of PDF and alternate file formats on State of Georgia sites.

5.2.1 When to use a PDF or alternate format

Portable Document Formats (PDF), such as Adobe Acrobat files, should be used only as an alternate format to native web pages when there is a clear business need to use this format.

1. Presentations (such as a PowerPoint presentation) may be saved as a PDF and posted as-is, so the viewer can get the full experience of the presentation.
2. Press Releases should NOT be posted as a PDF. They should be posted in full as web page content to facilitate search and ease of access.
3. Documentation and reports that must follow a formatting standard not supported by your website can be posted as a PDF files.
4. Files larger than 5 megabytes should be sectioned into smaller files and labeled accordingly.
5. Annual Reports, and other large reports that can also be displayed as web pages, may be posted online in both an online format and a single PDF document.

5.2.2 Guidelines for linking to PDF files

1. DO provide a link to download the free Adobe Reader software at http://get.adobe.com/reader/.
2. DO also provide an HTML version of the document whenever feasible.
3. When linking to a non-HTML document, DO include a text description of the file, including the name, file type, file size, and effective date.
   e.g.: Fiscal Management Objectives (PDF) 1.2MB, effective 07/20/2022
4. DO NOT provide documents that are only available in proprietary formats that require the user to purchase commercial software (for example, MS Word, MS PowerPoint). Many document types can be saved as a PDF for inclusion on a website.
   1. In Microsoft Office 2007 and above, choose Save As > Adobe PDF
   2. If you have Adobe Acrobat software, you will be able to convert any file to a PDF.
   3. Many free PDF converters are available online.

* If you must use a proprietary format, ensure that the intended audience is known to have ready access to the appropriate software or provide a link to download the software.

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 on how to handle link targets for State of Georgia websites.

5.3.1 Links should open in the Same Window

In most instances, links should open in the same window as the existing page. This applies to both internal links (links to pages on your domain) and external links (links to pages outside your domain).

This allows the user to maintain control of their browsing experience, providing a better overall user experience. Many web content managers want external links to open in a new window as a way to keep users from leaving their website. However, studies show that opening a page in a new window can frustrate and disorient users.

5.3.2 Opening Links in a New Window

The following are appropriate instances to open links in a new window (adding a target=”_blank” attribute to the <a> tag).

• Links to documents such as PDF, Word, and other attachments should open in a new window so that the document can load without disrupting the browsing experience.
• Link to assistance or Help documentation should open in a new window, as the user is looking for help with the existing page.
• Links while a user is filling out a form (such as a full Terms of Service or Privacy Policy) should open in a new window so as not to disrupt the ongoing process and lose the information the user has typed in.

When opening a link in a new window, it can help to provide text indicating that the link opens in a new window, either using the title attribute <a href=”...” title=”Opens in a New Window”> or adding text that follows the link: Terms of Service (opens in a new window).

Alternately, you can append a “new window icon” to the end of a link, in conjunction with a title attribute that explains the icon (example above). In this case the site must remain consistent in showing the icon each time a page opens in a new window.

e.g. Terms of Service

5.3.3 References

• Beware of Opening Links in a New Window
• Should Links Open In A New Window?

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 on making website content readable on State of Georgia websites.

5.5.1 Scan-ability

Space text out with headlines, segments, and bullet lists to increase scan-ability. This allows viewers to find what they want quickly, and allows for some visual rest and interest on the page.

5.5.2 Acronyms

Spell out all acronyms at their first reference on each Web page.

e.g. “Office of the Inspector General (OIG)”

Nothing destroys context as quickly as having to try and decipher “alphabet soup.” Avoid acronyms if possible, and consider your audience when using them. If an acronym is not used shortly after it is defined, the reader must stop and review what has already been read to understand the acronym. Unless the acronym will be used more than two times throughout a page, don’t use an acronym. When using any acronym within the page, use the <abbr> tag in the HTML code to provide a mouse-over of the definition.

e.g. <abbr title="Office of Inspector General">OIG</abbr>