Some sample styles found on FEMA.gov
Back to Celeste's HCI Design Work
This is a case study for the development process of a usable, accessible, and visually pleasing style for links of files on the Federal Emergency Management Agency (FEMA) website.
With newly defined goals for usability and accessibility, steps were taken to begin improvements on the website. Display of file links may be a small part of the design, but is one of the most inconsistent features on FEMA.gov. Some of the styles were extremely inaccessible and very difficult to understand using a screen reader.
The current FEMA website (www.FEMA.gov) is inconsistent in the way it displays hyperlinks to downloadable files. Many of the links are not accessible for a variety of reasons. Some styles used cause issues with page size and readability when linked in a paragraph or in a long list. Inconsistency throughout the website creates problems for users and makes the site look out-of-date, incomplete, and not visually pleasing.
There were several goals involved in this project: usability, accessibility, and design. In order to promote usage and understanding, the solution had to be user-friendly and usable. Since FEMA is a government agency, they are required to provide information in an accessible format (Section 508). It was also important that the solution was visually pleasing.
In a 50,000+ page website, it is sometimes difficult to maintain consistent style. The FEMA website has over nineteen (19) different ways (that were found) file links were being displayed and multiple ways lists of files were organized.
Some sample styles found on FEMA.gov
Almost all of the designs use a single line for each file, sometimes listing the same document several times in a row. This can be confusing to the user and makes them doubt the accuracy of the information and their ability to search for information. These lists are very difficult to scan because the same document name must be read several times before the user finds a different document. This could lead a user to miss important files that may be named similarly or think identical documents are different because of inconsistencies.
Typical situations in which multiple file types would be available for download include brochures, pamphlets, or guides, made available by the agency. Both Adobe Portable Document Format (PDF) files and text files (for accessibility) are made available for download. On older pages Microsoft Word documents may still be available.
There is often more than one way to effectively display information. Through evaluation and testing, the most successful solution was developed. As with any design process, it took many iterations of design and failure to develop what would work best for FEMA.
A table is sometimes a good way to list data. This was considered as a possible solution, but dismissed for several reasons. There were an unknown number of file types documents could be submitted. In most situations, documents will be provided in both PDF and text formats. But the style had to be flexible enough to be able to provide other file types without changing the style. Tables are also high-maintenance and have some accessibility issues if not properly defined.
Icons and images were eliminated from the design. For a list of only a few items, an icon could provide pleasing decoration to a bland design. The FEMA website however provides an enormous amount of information. This project was cosmetic and did not try to change the actual architecture or information on the existing pages. In a long list of files, sometimes 50 or more, icons only distract and make the page look cluttered or messy.
The list bullet style was not addressed. Three styles of bullets are currently used on the FEMA website: yellow arrow, small grey dot, and default black dot. The temporary solution is to use the default bullet on new pages, and maintain the current bullet style on updated pages.
The current FEMA style displays links without an underline. Since the size of the link was reduced (as well as the visibility), the underline was incorporated back in to the style
The new style is versatile. No matter how many formats are made available for a document, it maintains the look and feel without adding to the size of the page. Almost all of the older styles used a single line for each file to be downloaded. The new style uses one line per document.
Example of multiple formats in one of the old styles:
- Submission Worksheet (HTML version)
Submission Worksheet (PDF version) -- 56KB
Submission Worksheet (Text version) -- 3KB
Submission Worksheet (DOC version) -- 50KB
Submission Worksheet (XLS version) -- 14KB
Example of multiple formats in the new style:
- Submission Worksheet (PDF 56KB, TXT 3KB, DOC 50KB, XLS 14KB)
By keeping the list organized by document instead of by file, it is much easier to scan and find documents by name or topic. Links to web pages were applied to the title of the file. Users will not click on links they do not trust. By following the standard of a normal link pointing to a web page, users will feel more free to explore. This is especially true in a document rich site such as FEMA.gov. Users could easily become frustrated and intimidated if they are constantly linked to external files through undocumented links.
External file links are ordered by the most accurate and available file formats. Almost all FEMA publications are in PDF format, and most users prefer to download and print files in this format. This format is not always accessible, can become large in size, and requires a plug-in. A text equivalent provides an accessible, smaller file. Sometimes conversion from PDF to text file can remove formatting and the document is not as attractive. Files in other formats are rare, but are sometimes made available.
Accessibility is an important factor in the new style. Not only did the new style have to look good to the average user, it had to also make sense to those who do not have the most up to date browser and those using assistance software.
Images used as decoration, content, and links can complicate the content screen readers present to their users. In the example of an image acting as a link to a plug-in, and then a link to the actual document, a lot of information needs to be described to a user who has a visual impairment.
Example of an inaccessible link:
"... link [pause] download adobe acrobat reader [pause] image [pause] pdf icon [pause] link [pause] submission worksheet [pause] pdf version dash dash 56kb ..."
One of the requirements for the new design is an effective title tag. Inside the anchor tag (the HTML link), the attribute "title" can be used to describe the link. Most screen readers (including JAWS) read the title tag in place of the text in between the anchor tag. This helps keep links in context for users who may have a hard time following the content audibly. A link which looks like PDF to someone who can visually reference the link now sounds like PDF version of submission worksheet to someone who can not look back and reference the context.
Example of the new accessible link:
- Submission Worksheet (PDF 56KB)
"... submission worksheet [pause] link [pause] pdf version of submission worksheet [pause] 56kb ..."
The improvement can be noticed just by reading the difference in the interpreted HTML.
Example of solution with a link to a web page:
In a paragraph
If you have a "Best Practice" story to tell, please print the submission worksheet and use it to help assemble your story.In a list
Example of solution with links to document files:
In a paragraph
If you have a "Best Practice" story to tell, please print the submission worksheet (PDF 112KB, TXT 3KB) and use it to help assemble your story.In a list
Example of solution with web page and document files:
In a paragraph
If you have a "Best Practice" story to tell, please print the submission worksheet (PDF 112KB, TXT 3KB) and use it to help assemble your story.In a list
- Submission Worksheet (PDF 112KB, TXT 3KB)
Case study of the new file link style applied to the Environmental Historic Program (EHP) document archives page. This page had other usability and content issues which were addressed during the redesign.
Case study of the new file link style applied to the Environmental Historic Program (EHP) open assessments documents page. This page major usability and content issues and the information was reorganized during the redesign.
The EHP archives page had several issues.
Screenshot of EHP archives page before applying new style
Applying the new style eliminated all of the additional problems found in the original site. The links can be grouped together by topic instead of separating by file type. Additional information about the file is no longer needed and makes naming consistent. The icons no longer distract or take away from the page. The new compressed style displays almost twice as much information as the original in the same amount of space.
Screenshot of EHP archives page after applying new style
The conversion of this page was successful and addressed many problems found in the original layout.
The EHP documents page was long, unorganized and difficult to scan. The pages had inconsistent and missing information.
Problems addressed in the redesign (including the file links) were:
Issues with this page included more than just the file links. Content should be revised and reorganized to make it more searchable and readable. The information on the page was time sensitive, yet important dates were missing. The order the projects appeared did not have a logical order. They were added in the order updated, not necessarily by date.
Screenshot of EHP documents page before applying new style
The new file link style was applied and the content was reorganized so the information made more sense.
Screenshot of EHP documents page after applying new style
Changes to the page include:
The new file link format meets all of the expected goals. It helps display information more effectively and is more usable. Improvements in the display and HTML have made it more accessible for impaired readers. The cleaner style is also visually pleasing.
This style has the most benefit in pages that contain long lists of documents to be downloaded. Alternative designs may work better if additional information needs to be incorporated in to displaying file links, such as date, contact, publishing numbers, or any other information. This style would not be as effective. Its strengths are the tight and fluid display of the title and download formats available.
A style like the one developed could be successfully ported to a new template or style, however it is based on the fundamental architecture pages are currently written in. If organizational or writing style changes, the current style may not be as effective as another solution.
Additional improvements to this style would to make the links underlined by default and to include the file size in the link in order to increase visibility and ease to click.