Environmental Protection Agency

Environmental Protection Agency

Manos Demetris, Usability AuditorJuly 2013

Usability Audit ReviewContent and Navigation

2Environmental Protection Agency > Usability Audit Review

Agenda˃ Overview of Usability Audit Review

˃ Specifications and Scope

˃ Usability Compliance Rating

˃ Top 10 Critical Usability Issues

˃ Bottom Line


Voice of customer data captured using the American Customer Satisfaction Index (ACSI) is leveraged to determine the portion of the site that the Usability Audit Review will evaluate.

Usability Audit Review


Each ForeSee Usability Audit Review comprises two components; the Audit, which tests compliance against a set of usability best practices, followed by a detailed analysis of the audit data.

Usability Audit Review

UAR


˃ Individual Application

˃ Pass/Fail Metric

˃ Measures Specific Aspect of Usability

˃ Proprietary to ForeSee

˃ Website Analysis and External Research

˃ Best Practice

Usability Indicators


˃ Usability Violation

˃ Localized Negative Implications

˃ Tactical Recommendations

How The Audit Works


Deliverables


˃ History Behind Usability Violations

˃ Independent Perspective

˃ What Visitors Want and Expect

˃ Seamless and Intuitive Online Experience

“There’s A Good Reason We Do It That Way”






˃ Bottom Line


˃ July 2013

˃ 1024 x 768

˃ Iterative Evaluation

Specifications


This audit examines the Region 6 section of EPA’s Border 2020 site to evaluate the organization and categorization of information, the seamlessness and intuitiveness of navigation, and the degree of clarity with regard to labeling and its effectiveness in communicating the nature of content and its structure. This audit focuses on the core components of orientation, labeling, navigation, and organization. The audit begins when customers click to view information about Region 6 on the US-Mexico Border 2020 page, and continues through all subsequent pages within the R6-South Central section of the site.

Content and Navigation






˃ Bottom Line


The Usability Compliance Rating measures compliance with pass or fail metrics that are all weighted equally. The average rating across all Usability Audit Reviews conducted by ForeSee is approximately 55%, so this score is slightly higher than those of other ForeSee clients. Keep in mind that each Usability Audit Review is focused on a specific area, so the compliance rating is not indicative of the usability of the site as a whole. This report exclusively outlines those instances of failure to comply with best practice; instances where www2.epa.gov/border2020 exhibits strong usability are not the focus.

How Content and Navigation Measures Up

Usability Compliance Rating

57%

˃ Number of Indicators Applied: 63

˃ Number of Usability Violations: 27






˃ Bottom Line


>Homepage Linkage

>Link Execution

>Primary Page

>Hub and Spokes Navigation

>Orientation

>Labeling

>Duplicate Links

>Expected Location

>Multimedia Content

>Print and Email Functionality

Top 10 Critical Usability Issues


Homepage Linkage


The US-Mexico Border 2020 page provides the entry point to the Region 6 section, but navigation to that section could be improved. First, the heading and associated thumbnail image are not clickable. This means visitors must target one of the three subcategory links to view Region 6 content. This implementation defies web convention—visitors are accustomed to clicking on headings and thumbnail images to select and browse content. Therefore the headings and thumbnail images should be clickable. Additionally, scope notes should be added to headings to better describe the linked content further within the section.

Homepage Linkage Issue 1 of 10


Subcategories on this website are introduced with a heading , scope notes to describe offerings in more detail, and a thumbnail image . All of these elements are clickable , so that visitors can target any part of the description to access subsequent categories.

Homepage Linkage Issue 1 of 10


˃ Ensure headings and thumbnail images representing subsequent categories are clickable.

˃ Adds scope notes to introduce category content.

Homepage Linkage

Recommendation

Issue 1 of 10


Link Execution


Navigation options on the Border 2020 homepage for Region 6 are organized in a confusing manner. The first link , labeled Texas, New Mexico, Chihuahua, actually presents the Region 6 Workgroups primary page, not the Texas, New Mexico, Chihuahua Regional Workgroups landing page. The second link , does present the Texas-Tamaulipas-Nuevo León-Coahuila Regional Workgroup landing page, as the link indicates. If the intent of these links is to introduce the two Workgroups, then the first link should transport visitors directly to the first Workgroup, not the Region 6 primary page. That path can be followed via a clickable Region 6 heading and thumbnail image.

Link Execution Issue 2 of 10


In a related matter, the Region 6 section exhibits instances of self-referential clickability, when links or elements on the page link to the page currently being viewed. For example, visitors to the Region 6 workgroups landing page who click on the R6-South Central local navigation menu option are able to reload the landing page. Providing a link that simply reloads the current page is confusing for visitors and results in wasted time and clicks. Self-referential clickability can also be disorienting since the implied promise of an active link is to be transported to a new page or to additional information.



The clickability issue becomes more problematic with the navigation tabs. Clicking on a tab that represents the page currently being viewed reloads the page, despite the arrow cursor indicating this link is not clickable. This false indication of clickability undermines the credibility of other visual cues applied to navigation links to orient visitors, such as highlighting.



Similarly, hovering over the Water link does not change the cursor to a hand to indicate clickability, yet the link is clickable. To remedy this, the tab and navigation links representing currently viewed pages should be rendered unclickable.



Finally, the arrangement of tabs does not reinforce the site hierarchy. Three tabs at the top of the page represent the Region 6 subcategory and its two subsequent category Regional Workgroups , but they are displayed alongside each other as if to suggest they are at an equivalent level in the site hierarchy. Visitors who are trying to learn how content is organized are misled by this display. Therefore, navigation links should visually indicate that the Workgroups are subsets of the Region 6 subcategory, thus mirroring the way site content is actually structured.



In contrast with the tab organization, the local navigation in the left sidebar correctly shows the two Workgroups as subsets of the Region 6 subcategory page . If the tabbed structure of the page is to be maintained, removing the Region 6 Home link from the tabs would enable the landing page to provide differentiation and specialized content for each of the Workgroups without blurring the hierarchy of these subsequent categories with the parent category.



˃ Fix link destinations for the two homepage links.

˃ Render links unclickable if they simply reload the current page.

˃ Remove the Region 6 Home link from the tabs on the subcategory page.

Link Execution

Recommendation

Issue 2 of 10


Primary Page


The Region 6 Workgroups primary page is ineffective in providing topic introductions and browsing paths for content within the section. The two content boxes represent the two Regional Workgroups, but present only links to subsequent categories such as Education or the Amistad Task Force . By skipping a level, the content boxes miss an opportunity to showcase topics and content on the two Regional Workgroup subcategory pages. Instead, the primary page should be made more robust by adding headings, scope notes, and thumbnail images to introduce content on the two Workgroup pages. In turn, the Workgroup pages would introduce subsequent categories.

Primary Page Issue 3 of 10


This site’s primary page follows best practices by showcasing subcategory topics and content with headings , thumbnail images , and introductory scope notes . This provides a guided browsing path for visitors to discover information deeper into the site, strengthening the value of the primary page.

Primary Page Issue 3 of 10


˃ Showcase Workgroup subcategories on the primary page with headings, scope notes, and thumbnail images.

Primary Page

Recommendation

Issue 3 of 10


Hub and Spokes Navigation


The Region 6 section does not provide visitors with consistent hub and spokes navigation. This is the practice of providing a hierarchical layering of site content that maintains access to previous layers as well as providing quick access to related content at the same level in the hierarchy. Although local navigation links reflect subcategory pages, links are not displayed for subsequent category pages deeper into the section. Failing to provide these links slows visitors’ progress, as additional effort is required to navigate vertically and laterally. Additionally, use of hub and spokes navigation increases orientation, as visitors can intuitively understand the relationship of the current page to the rest of the site by noting which navigation options are highlighted and the how subsequent menus are nested.

Hub and Spokes Navigation Issue 4 of 10


Hub and spokes navigation is more effectively implemented on this site. Visitors have access to pages at the same level as their current page , as well as to the next higher level category . This display gives visitors an overview of available content as well as convenient access to navigate at all levels of the hierarchy. Best practice requires that hub and spokes navigation be provided on the primary, landing, and content pages.

Hub and Spokes Navigation Issue 4 of 10


˃ Provide hub and spokes navigation on all landing and content pages.

Hub and Spokes Navigation

Recommendation

Issue 4 of 10


Orientation


Local navigation menus fail to highlight the appropriate subcategory when subsequent pages are being viewed. For example, visitors to the Texas-New Mexico-Chihuahua Regional Workgroups page are oriented within the site by the highlighting of that page’s local navigation link . Selecting a subsequent category such as Emergency Response should result in the parent category maintaining its highlight to show that visitors are still within this subcategory, but, instead, the highlight disappears . Visitors now have no orientation cues from the local navigation menu, disorienting them. To remedy this, the highlight should be maintained on subcategory navigation links when visitors browse within those subcategories.

Orientation Issue 5 of 10


This site’s local navigation menu offers more consistent orientation cues by highlighting the appropriate menu link for the subcategory page being viewed, and maintains that highlighting when visitors navigate to subsequent pages within the subcategory , providing dependable, persistent orientation.



Additionally, the site does not provide complete breadcrumb trails for subsequent categories. For example, the breadcrumb trail for Texas-Tamaulipas-Nuevo Léon-Coahuila Regional Workgroups contains the full path to this page, yet, on the subsequent page, the element to the Workgroup page is missing. When breadcrumb trails are not accurate, visitors are denied a reliable linear and hierarchical pathway of where they have been and where they are currently—which undermines orientation and navigation. Visitors often use breadcrumb trails to return to previously viewed pages and to understand where they are in the site’s structure; inconsistently provided breadcrumb trails makes it more difficult for them to do so.



˃ Ensure subcategory navigation links remain highlighted when visitors browse further into those subcategories.

˃ Display full breadcrumb trails to accurately reflect the pages’ location within the site architecture.

Orientation

Recommendation

Issue 5 of 10


Labeling


Some navigation labels are abbreviated and unclear. In particular, the two subcategory local navigation labels use abbreviations that are not universally understood. Although the target audience may know that CHIH stands for Chihuahua, the abbreviation still imposes a cognitive load on visitors, which slows down their browsing. Also, the label references only states and regions, not the type of content. It is not clear, for example, that these labels refer to Regional Workgroups. The result is that there is insufficient information in the link label to compel visitors to click on it. Labels should accurately reflect the content they represent, even if the label needs to be lengthened or made more generic to accommodate the information.

Labeling Issue 6 of 10


Similar labeling issues exist with subsequent category tabs. The labels for the New Mexico-Chihuahua and Texas-Chihuahua Rural Task Forces do not indicate that descriptions of those task forces will be found on these tabs. Because the descriptions are each one paragraph in length, a better implementation would be to combine the two tabs into one tab labeled Task Forces, and include a heading and paragraph for each task force on a single page.

Labeling Issue 6 of 10


˃ Avoid abbreviations for navigation labels; ensure labels accurately represent content at the destination pages.

˃ Combine the two Task Force descriptions into a single tab.

Labeling

Recommendation

Issue 6 of 10


Duplicate Links


There are several instances of stealth duplicate links. These are links that are uniquely labeled yet present the same page. For example, the R6 Home tab and the Workgroup Overview link in the content box both present the TX-COAH-NL-TAUM Workgroup | Overview page. Redundant navigation mechanisms, particularly when they employ different labels, confuse visitors and result in their clicking on differently labeled links that lead to the same location; this makes for an inefficient navigational experience. Therefore, links leading to the same page should be commonly labeled.

Duplicate Links Issue 7 of 10


Similarly, the TX-COAH-NL-TAUM Workgroup Overview page contains two stealth duplicate links—one in the top row of tabs and one in the secondary row of tabs . In addition to labeling variations, the tabs suggest that Workgroup Overview is a subset of Texas-Tamaulipas-Nuevo Léon-Coahuila Regional Workgroups, when, in fact, the two tabs link to the same page. This increases the likelihood of confusing visitors and also wastes their effort as they might click on multiple links only to find they lead to the same location. To resolve this issue, the Workgroup overview tabs should be removed from the secondary tab row.

Duplicate Links Issue 7 of 10


˃ Ensure multiple links to common destinations use common labels.

˃ Remove the Workgroup Overview tab.

Duplicate Links

Recommendation

Issue 7 of 10


Expected Location


Although the site follows the best practice of indicating offsite links and documents with a note or icon, it does not open these pages in a new browser window. For example, the link to the Texas Commission on Environmental Quality’s TCEQ Border Program site is labeled with an Exit icon, but the page opens in the same browser window as the referring page. This impacts visitors in two ways—it surprises those who did not notice the icon and are now browsing an unfamiliar site with different visual elements, and it impedes their return to the EPA site by simply closing the Texas site when they are finished browsing there, forcing them instead to click the back button multiple times to go back to the EPA page containing the referring link.

Expected Location Issue 8 of 10


Similarly, visitors who click on PDF links such as the Municipal Guide for Comprehensive Management of E waste in the Northeast of Mexico are informed that the link presents a PDF document, but the page containing that document opens in the same browser window. This means visitors who wish to return to the EPA site may accidentally close the window when they finish reading the document, losing their browsing path back to the site. Visitor frustration could be reduced if PDF links open those documents in a new browser window that can be easily closed without impeding access back to the EPA site.

Expected Location Issue 8 of 10


˃ Open a new browser window when visitors are being transported to an external site or to a PDF file.

Expected Location

Recommendation

Issue 8 of 10


Multimedia Content


The Region 6 Workgroups category page does not offer multimedia content on its primary page to help visitors learn more about Workgroups. While text and diagrams are adequate for some, others find more value in videos, which offer a more immersive, richer experience. Although PDF presentations are available in the Region 6 Publications section, visitors to the Region 6 Workgroups section would find value in visually oriented, detailed explanations of specific issues relating to Border 2020 and what policies are being advanced to deal with these issues.

Multimedia Content Issue 9 of 10


Similarly, visitors viewing the Texas-New Mexico-Chihuahua Regional Workgroups subcategory page or the Education Task Force subsequent category page find no multimedia content to aid in their understanding of Border 2020 issues. The site should consider providing such videos on landing pages within the Region 6 Workgroups section, or, alternatively, linking from those pages to a video repository.



Multimedia content on a similar site displays multimedia content directly on the topic’s landing page. The video accompanies the lead article introducing the topic, and enhances those textual elements with visual supplementary content to offer a well-rounded presentation.



˃ Add multimedia content to primary and landing pages in the Regional Workgroups sections; alternatively, link to a repository elsewhere on the site.

Multimedia Content

Recommendation

Issue 9 of 10


Print and Email Functionality


Visitors often want to print content pages for review offline, for their own personal use or for the use of others. However, the Region 6 Workgroups section does not provide explicit Print functionality on pages within the site. Instead, visitors must use their browser-based Print functionality to print pages. However, content pages within this section are poorly formatted for printing, as shown in this example. Because navigation menus do not serve a purpose on paper, they should not appear on pages formatted for printing.

Print and Email Functionality Issue 10 of 10


This site includes a link to Print functionality in a prominent location. When clicked, the link opens a pop-up window containing an appropriately formatted printout. Note that Search functionality and navigation links have been removed from the printed version.



Visitors also want to share content via email, but the Region 6 Workgroups section does not provide Email functionality for this common task. This forces them to resort to copying the URL shown in the browser, opening their email program, and pasting the URL into a new email message. In contrast, best practice is to provide an explicit link or icon that opens a pop-up window offering a form visitors may fill in to email the page.



This site provides explicit Email functionality directly on the page. The Email link presents visitors with an online form to easily share information found on the site.



˃ Provide explicit Print and Email functionalities on content pages.

Print and Email Functionality

Recommendation

Issue 10 of 10






˃ Bottom Line


The use of tabs to introduce subsequent categories within the Region 6 section disrupts visitors’ mental model of the site hierarchy. Clearly labeled navigation links would provide a more intuitive browsing path to lower level content, strengthening the value of both primary and landing pages.

Bottom Line

Environmental Protection Agency

Documents

Transcript of Environmental Protection Agency