Environmental Protection Agency

1. Environmental Protection Agency Manos Demetris, Usability Auditor July 2013 Usability Audit Review Content and Navigation

2. Agenda • Overview of Usability Audit Review • Specifications and Scope • Usability Compliance Rating • Top 10 Critical Usability Issues • Bottom Line

3. Usability Audit Review • 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.

4. Usability Audit Review UAR • 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.

5. Usability Indicators • Individual Application • Pass/Fail Metric • Measures Specific Aspect of Usability • Proprietary to ForeSee • Website Analysis and External Research • Best Practice

6. How The Audit Works • Usability Violation • Localized Negative Implications • Tactical Recommendations

7. Deliverables

8. “There’s A Good Reason We Do It That Way” • History Behind Usability Violations • Independent Perspective • What Visitors Want and Expect • Seamless and Intuitive Online Experience

9. Agenda • Overview of Usability Audit Review • Specifications and Scope • Usability Compliance Rating • Top 10 Critical Usability Issues • Bottom Line

10. Specifications • July 2013 • 1024 x 768 • Iterative Evaluation

11. Content and Navigation • 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.

12. Agenda • Overview of Usability Audit Review • Specifications and Scope • Usability Compliance Rating • Top 10 Critical Usability Issues • Bottom Line

13. How Content and Navigation Measures Up • Number of Indicators Applied: 63 • Number of Usability Violations: 27 Usability Compliance Rating 57% • 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.

14. Agenda • Overview of Usability Audit Review • Specifications and Scope • Usability Compliance Rating • Top 10 Critical Usability Issues • Bottom Line

15. Top 10 Critical Usability Issues • Homepage Linkage • Link Execution • Primary Page • Hub and Spokes Navigation • Orientation • Labeling • Duplicate Links • Expected Location • Multimedia Content • Print and Email Functionality

16. Homepage Linkage

17.    Homepage Linkage Issue 1 of 10 • 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.

18.     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.

19. Homepage Linkage Issue 1 of 10 Recommendation • Ensure headings and thumbnail images representing subsequent categories are clickable. • Adds scope notes to introduce category content.

20. Link Execution

21.   Link Execution Issue 2 of 10 • 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.

22. 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.

23. Link Execution Issue 2 of 10 • 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.

24. Link Execution Issue 2 of 10 • 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.

25.   Link Execution Issue 2 of 10 • 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.

26.    Link Execution Issue 2 of 10 • 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.

27. Link Execution Issue 2 of 10 Recommendation • 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.

28. Primary Page

29.   Primary Page Issue 3 of 10 • 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.

30.    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.

31. Primary Page Issue 3 of 10 Recommendation • Showcase Workgroup subcategories on the primary page with headings, scope notes, and thumbnail images.

32. Hub and Spokes Navigation

33.   Hub and Spokes Navigation Issue 4 of 10 • 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.

34.    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.

35. Hub and Spokes Navigation Issue 4 of 10 Recommendation • Provide hub and spokes navigation on all landing and content pages.

36. Orientation

37.   Orientation Issue 5 of 10 • 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.

38.    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.

39.   Orientation Issue 5 of 10 • 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.

40. Orientation Issue 5 of 10 Recommendation • 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.

41. Labeling

42. Labeling Issue 6 of 10 • 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.

43. 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.

44. Labeling Issue 6 of 10 Recommendation • Avoid abbreviations for navigation labels; ensure labels accurately represent content at the destination pages. • Combine the two Task Force descriptions into a single tab.

45. Duplicate Links

46.   Duplicate Links Issue 7 of 10 • 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.

47.   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.

48. Duplicate Links Issue 7 of 10 Recommendation • Ensure multiple links to common destinations use common labels. • Remove the Workgroup Overview tab.

49. Expected Location

50. Expected Location Issue 8 of 10 • 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.