5 FAH-8 H-520
usability
(CT:WEB-31; 07-10-2024)
(Office of Origin: DT/BMP/GRP/GP)
5 FAH-8 H-521 USABILITY
(CT:WEB-8; 04-16-2013)
Usability is the measure of the quality of a user's experience when viewing a Web site. It is a subjective measurement of a user's satisfaction and varies from one user to the next. A usable site is accessible, appealing, informative, easy to navigate, and error tolerant. In addition to the following mandatory and recommended practices, http://usability.gov/ describes other usability concepts.
5 FAH-8 H-522 Planning and DESIGNing
(CT:WEB-31; 07-10-2024)
5 FAH-8 H-522.1 Reduce Download Time
(CT:WEB-8; 04-16-2013)
a. Main pages should download in 10 seconds or less. Links to subordinate pages that are known to take over 10 seconds to download will be annotated to indicate the expected time.
b. Download times are impacted by factors including:
(1) (Too many graphics;
(2) Improperly optimized graphics;
(3) Inappropriate use of applets;
(4) Slow server performance; and
(5) Network data congestion.
While there is little the Web designer can do about slow server performance and network congestion, graphics and applet use are within his or her control. The goal is to minimize the number of bytes per page.
c. Users become impatient when faced with slow page downloads. Display main or top-level pages quickly and provide links to more detailed information. If a user elects to view a larger, more complex page, he or she is more willing to wait for the page to download. Use of a Web Proxy tool (e.g., Fiddler) in combination with ENM network bandwidth and latency metrics can provide insight into performance expectations of complex Web pages.
d. Allow the user to alternatively select a lightweight Web page experience for the site. The lightweight alternative will include similar functionality, but without the added weight of images and large script files so as to minimize wire footprint and download time. Set and read a browser cookie to maintain the state of user preferences and allow the user to re-select the standard, rich-featured Web page experience.
e. Optimize the use of AJAX (Asynchronous JavaScript and XML) and “Partial Page” rendering techniques to improve user experience and response times. Consider using lightweight JavaScript AJAX libraries and removing modules that are not required.
f. Explore placement of “deferrable” JavaScript at the bottom of the page and style sheets in the HTML Document head as this may improve the user experience during page rendering. (Generally, though, it is best that JavaScript and CSS files be stored external to the document.) Also explore preloading script files.
g. Internet Explorer defaults to optimize browser caching; also explore the use of Expires and Cache Control Headers for dynamic and static content and consider using ETags for fine-grained control of caching.
h. Use server side compression. Most browsers are capable of using Deflate and GZIP but, if possible, configure Deflate as the default as it offers superior compression ratios relative to GZIP.
i. Bundle JavaScript and CSS files (i.e., use one JavaScript file and one CSS file to minimize HTTP requests) and use a minification tool to decrease the weight of the files.
j. If the site provides functionality to upload files, configure the server and/or application to use Message Transmission Optimization Mechanism (MTOM), which will improve efficiency and reduce the wire footprint of uploaded files.
5 FAH-8 H-522.2 Design for Department of State’s Common Display Size
(CT:WEB-8; 04-16-2013)
a. Design Web pages to work at any resolution, from 800×600 to 1280×1024 and beyond.
b. Consider (as of this writing) designing for a resolution of 1024×768 and ensure it transforms gracefully to the 800×600 setting.
c. Web pages should be designed to avoid the necessity to scroll horizontally to view the entire page.
d. Assess the tradeoffs of using a Liquid or Fixed Layout for the target device.
e. Optimize for mobile Web environments with a targeted service designed specifically for that mobile device.
5 FAH-8 H-522.3 Use Readable Font Size
(CT:WEB-8; 04-16-2013)
a. In style sheets, the font-size attribute must be specified in points (pt), not pixels (px). Point sizes are fixed regardless of monitor resolution where pixels are a function of monitor resolution.
b. Font size affects the ability to read and understand text. 10-point or larger font is recommended for most users while a minimum of 12-point or 14-point is recommended for people over 65. Font size 3 is roughly equivalent to a 12-point character and font size 2 is the minimum that should be used on the Department Web sites.
c. If it is necessary to use font size 1, use a style sheet to increase the line spacing.
d. Font size examples:
8-point
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.
10-point
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.
12-point
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.
14-point
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.
e. Text and background colors affect the user’s perception of font size. Dark text on a light background is easy to read. Light text on a dark background, regardless of the level of contrast, is more difficult to read. When using a dark background, the font size should be increased.
f. Text/background examples comparing 12-point and 14-point type:
 |
|||
 |
|||
g. A solid background is usually preferable to a background image. In the case of a watermark or faded image, the background may contribute to Web site branding (see 5 FAH-8 H-431).
|
|
|
|
|
|
|
Complex image background |
|
Watermark or faded image background |
|
Light solid color background |
h. A watermark image can be kept stationary while the page content is scrolled by including the background-attachment parameter in the style sheet.
<STYLE type="text/css">
BODY {
background: url("dos_seal.jpg");
background-attachment: fixed;
}
</STYLE">
5 FAH-8 H-522.4 Use Familiar Fonts
(CT:WEB-31; 07-10-2024)
5 FAH-8 H-522.4-1 Font vs. Typeface
(CT:WEB-8; 04-16-2013)
a. Fonts are specific variations of a typeface. "Times" is a typeface while "Times Roman" and "Times Italic" are fonts. Through common use, the word font has come to mean both typeface and font.
b. Fonts are divided into two general categories: "serif" and "sans-serif". Serif fonts have short lines added to the ends of the strokes that make the letters while the ends of sans-serif letters are straight and unadorned.
c. When creating a Web site, you can use any font that is installed on your computer and it will display correctly during the design process. When the Web page is displayed on another computer that does not have the same set of fonts, the computer will substitute a default font for any fonts that are unidentifiable. The resulting page will not necessarily look the way you expected.
d. All Department Web sites using English or Romance language (Spanish, French, etc.) alphabets must be created using fonts from the following "universal" list:
(1) Sans-serif family: Arial, Verdana, and Tahoma; and
(2) Serif family: Times New Roman, Garamond, Century Schoolbook, and Courier.
e. Department Web sites using other than English or Romance languages (Greek, Russian, Chinese, etc.) may use the alphabet appropriate to the language.
5 FAH-8 H-522.4-2 Readability
(CT:WEB-1; 09-29-2005)
Font legibility is the speed and ease with which individual letters can be recognized. The spacing and density of the letters determines the ease with which a passage can be read.
Example: 12-point type with varied density and spacing.
5 FAH-8 H-522.5 Path Indicator
(CT:WEB-1; 09-29-2005)
a. To assist users in maintaining their perspective within the Web site, each page must contain a path showing where the user is relative to the entry or home page. A convenient location for the path indicator is immediately under the top of page banner or graphic.
<p>Home > Org Chart > Office Page > <b>List of References</b></p>
is displayed as:
b. For more convenient navigation, the elements of the path should be created as links. This will allow the user to go directly to a previous page rather than clicking the "Back" icon several times.
<p><a href="./index.html">Home</a>
> <a href="./the_organization.html"> Org Chart</a>
> <a href="./this_office.html"> Office Page</a>
> <b>List of References</b></p>
5 FAH-8 H-522.6 Page Layout and Consistency
(CT:WEB-1; 09-29-2005)
The purpose of a Web site is to present information with each page of the site covering a small part of the overall content, not to present a totally new design for each new topic.
5 FAM-8 H-522.6-1 Align Page Elements
(CT:WEB-1; 09-29-2005)
Users are conditioned by experience to expect information in neat rows and columns. When creating lists of items, align them vertically. When creating tables, use <tr> tag parameter valign="top" to align text at the top of table rows.
5 FAM-8 H-522.6-2 Be Consistent
(CT:WEB-8; 04-16-2013)
a. Put office logos at the same place on each page.
b. Establish levels of importance for each page:
(1) Locate the most important information at the top of the page;
(2) Locate less important information further down the page;
(3) Locate repeated information (e.g., navigation bars) at the same place on each page; and
(4) Use the same style for identifying titles and headings on each page: The same location, text color, background, font, size, and weight.
5 FAM-8 H-522.6-3 Limit the Amount of White Space on the Page
(CT:WEB-8; 04-16-2013)
White space is necessary to separate design elements and give the Web page a pleasing look; however, too much unused space requires additional time for the user to scan the page.
5 FAH-8 H-523 OPTIONAL DESIGN CONSIDERATIONS
(CT:WEB-31; 07-10-2024)
5 FAH-8 H-523.1 Page Length
(CT:WEB-8; 04-16-2013)
The length of a Web page should be consistent with the purpose of the page:
(1) Short pages typically will not require scrolling to view the entire page. They are appropriately used for home pages and navigation pages where you want the viewer to grasp a concept without interruption or interference. Short pages should pique the user's interest to find out more on successive pages; and
(2) Long pages will require the viewer to scroll down/up the page to access all the information. Long pages are appropriate when imitating a printed document, especially where continuity of subject is required. They are also more effective when creating a page that is intended for printing.
5 FAH-8 H-523.2 Standard Link Colors
(CT:WEB-1; 09-29-2005)
Through frequent use of default colors for links, users have learned that underlined blue links are those that the user has not seen and underlined purple links are those that the user has previously visited. This is one of the few conventions that are standard among the various Web browsers.
5 FAH-8 H-523.3 Use of Color
(CT:WEB-1; 09-29-2005)
Colors have different meanings in different parts of the world. Bureaus/posts should respect cultural differences when choosing colors for their Web pages.
5 FAH-8 H-523.4 Limit Use of Graphics
(CT:WEB-1; 09-29-2005)
a. Graphics should be used to enhance understanding of the Web page topic or make the page more readable. Many small image files can be just as aggravating to the user as a few large image files by increasing the time required to download a Web page.
b. Avoid using graphics as links. Users may not identify a graphic as a link and miss finding desired information. If using a graphic as an image map, include text instructions so users understand where the sensitized areas are located.
5 FAH-8 H-523.5 Use Short Sentence/Paragraph Length
(CT:WEB-8; 04-16-2013)
Web pages should be used to present information. To keep text focused on the intended topic, sentences should be limited to 20 words and paragraphs should be no longer than five sentences. Consider using lists to avoid long sentences.
5 FAH-8 H-523.6 Set Performance and/or Preference Goals
(CT:WEB-8; 04-16-2013)
a. Performance goals include how often users find information and how long it takes to accomplish the task. Preference goals are related to how satisfied a user is with a Web site.
b. Performance goals are objective and easier to measure. Examples of performance goals include finding information within three mouse clicks, finding information at least 80 percent of the time, and finding information within a maximum time.
c. Preference goals are subjective and measure a user’s personal opinion about a Web site. When measuring preference goals, offering choices ("Was your experience good, bad, or not sure?") or asking for a rating scale (1 = exceptional, 10 = needs improvement) can help quantify user reactions.
5 FAH-8 H-524 Through H-529 Unassigned