際際滷

際際滷Share a Scribd company logo

Expert Usability Review: OSHA.gov

W
Wes Lewis

This is a usability assessment I conducted while supporting the OSHA.gov Modernization initiative with Booz Allen Hamilton.

1 of 33
Expert Usability Review OSHA.gov
ABOUT THIS EXPERT USABILITY REVIEW Initiated May 2016 Prepared for Occupational Safety and Health Administration (OSHA) Assessed using current standards from industry leaders Human Factors International (HFI) Nielsen Norman Group (NN/g) Usability.gov Conducted by Wes Lewis of Booz Allen Hamilton User Experience (UX) Lead for OSHA.gov Drupal Migration 12 years of experience in UX design & usability analysis HFI Certified Usability Analyst (CUA)
GOALS OF EXPERT USABILITY REVIEW Uncover and assess the severity of usability issues on the desktop and mobile sites. Evaluate the usability of osha.gov against current industry standards. Find opportunities to improve and optimize usability for the intended users.
AN EXPLANATION OF SEVERITY RATINGS Cosmetic. These issues are mostly cosmetic in nature. Minor issue. These issues inconvenience the user, but do not completely stop them from completing tasks. Major issue. These issues signify major usability problems. Top priority. These issues keep users from completing tasks efficiently. 1 2 3 4 #
RECOMMENDATIONS
RECOMMENDATION #1 Ensure global consistency Recommendation 1.1: Inherit DOL.govs global stylesheet & general flat aesthetic. Remove gradients from page elements, most notably the global header and buttons. Gradients impact readability of text placed on elements using them Generally considered a dated UI design trend. Implement mega menu style & functionality as demonstrated in the DOL.gov global header. Easy to use, accessible, and already exists for easy incorporation. 3
RECOMMENDATION #1 Ensure global consistency Recommendation 1.1: Inherit DOL.govs global stylesheet & general flat aesthetic. (contd) Utilize whitespace, bolding of key phrases & words, alternating row colors, bulleted lists, and clear H1-H6 header styles to make page content easy for users to digest. Reserve underlines for hyperlinks. Remove low-resolution images or otherwise non-standard graphical elements Lean more towards minimalist design, ensuring that every element adds value 3
RECOMMENDATION #1 Ensure global consistency Recommendation 1.2: Ensure all landing pages within OSHA.gov have a uniform appearance and function. There is very little consistency throughout OSHA.gov., especially on landing pages. Aesthetically jarring at times Potentially impacts memory load in terms of having to reacquaint to a new user interface. Inconsistent design also impacts the users trust in the site and the site provider. Each landing page seems to utilize a different variation of a content slider. Implement a simple and accessible content slider. 3
RECOMMENDATION #2 Revisit information architecture Recommendation 2.1: Merge blue frequently-visited navigation in header with navigation menu. The existence of these buttons unnecessarily clutters the global header of the site the starting place for most visitors, especially new ones. Navigation, search, page title information is in this vicinity. If reorganized in a manner which more closely matches the mental models of visitors, they will be able to locate these areas of the site with very little issue. 2
RECOMMENDATION #2 Revisit information architecture Recommendation 2.2: Ensure that the path shown in breadcrumbs is accurate. Several instances exist in OSHA.gov where the path shown in the breadcrumbs is either inaccurate or reflects an alternate path. Example: From the home page, select For Employers > Employer Responsibilities. The breadcrumbs indicate that this page should be under Worker Rights, which is underneath the For Workers navigation category. This is disorienting to users as breadcrumbs are a textual representation of a websites structure. They help site visitors understand and navigate a websites hierarchy. A location-based breadcrumb trail should begin with a link to the websites home page and end with the current page. 4
RECOMMENDATION #2 Revisit information architecture Recommendation 2.3: Extract links from the global navigation menu which take the user outside the scope of OSHA.gov. There is no visual indicator that, upon clicking a link, a user will be navigated outside of OSHA.gov This can be disorienting to users and may be a cause of frustration and increased bounce/exit rates. These links, if too important to remove completely, can be placed in another more intuitive location of the site. 3
RECOMMENDATION #2 Revisit information architecture Recommendation 2.4: Organize and label navigation elements so that sections such as How To on home page and quick links are not necessary. The links in the How To section are long and do not lend themselves to be easily scanned by users Valuable real estate can be better utilized to highlight fresher, more relevant content for users 4
RECOMMENDATION #2 Revisit information architecture Recommendation 2.5: Choose up to two navigation schemes: task and topic (remove audience-based navigation). Users can navigate the by topic, task, and user in the same menus. As it stands now, the navigation forces users to go through miscellaneous categories to access content. Websites with audience-based navigation often have overlapping content, which creates a greater workload for users (and content maintainers). Average 6.1% of users go 1 page deep from the top ten landing pages and then refer to some sort of FAQ or Help page. 4
RECOMMENDATION #2 Revisit information architecture Recommendation 2.5: Choose up to two navigation schemes: task and topic (remove audience-based navigation) (contd). Users might feel anxious that the information they see might be incomplete or incorrect. Forcing people to self-identify tends to create an additional step and take people out of their task mindset. Users may question whether the category will have information about that group or for that group. 4
RECOMMENDATION #3 Clearly distinguish OSHA- specific content Recommendation 3.1: Separate OSHA-specific icons in header from DOL- specific social media The grouping of icons in the header leads one to believe that they are either all OSHA-related or all DOL-related. In all actuality, OSHA does not market a Facebook page, a Twitter handle, or an Instagram account of their own. These are all DOLs social media accounts. Career & Internships = DOL, Contact Us= OSHA. 2
RECOMMENDATION #4 Eliminate repetitive screen elements Recommendation 4.1: Language translation controls exist in a number of places on each page, each exhibiting different behaviors. Espa単ol navigation item located in the global header returns the user to the home page of a translated version of the site, taking the user away from the page previously in view prior to toggle. (Note that the navigation item used to arrive on this page disappears upon arrival.) A blue Language toggle is present on several pages at the content level. When triggered, everything below the global navigation is translated. The button persists after the translation has occurred and exhibits the action in the translated language. An Espanol link exists in the global fat footer and, as a result, is present on every page. This link is not a toggle (a DOL-wide directory of links targeted to the Spanish-speaking audience) , but the fact that the links name is the same as others which exist on the same page can be problematic for those reliant on screen readers 3
RECOMMENDATION #4 Eliminate repetitive screen elements Recommendation 4.2: Remove repetitive links. Contact Us (https://www.osha.gov/html/Feed_Back.html) appears in no fewer than four places on each page. For Workers > Contact Us For Employers > Contact Us Contact Us (blue button in header) Contact Us (link in footer) 2
RECOMMENDATION #4 Eliminate repetitive screen elements Recommendation 4.3: Allow for only one menu trigger per page. The button labeled Menu (used to expose the responsive menu) and the hamburger icon are generally perceived as equivalent and, although these should trigger different menus, should not exist on the same page. Organize the information in a manner which does not require the use of a submenu. Note: Safety and Health Topics presents a responsive submenu which should be triggered by a hamburger icon. However, when the hamburger icon is triggered, it expands the global menu in addition to the submenu. Triggering the hamburger icon once both menu icons are open anchors the user to the bottom of the page. 2
RECOMMENDATION #5 Revise OSHA.gov homepage Recommendation 5.1: Prioritize fresh content. # of workers who died in 2014 is at the top of the page. Much fresher news and blog content is lowered in priority with the blog content being located at the very bottom right of the page. According to our Google analytics findings, the OSHA.gov landing page is BY FAR the most heavily visited page within its domain. The impression delivered when the statistics being shown are two years old may not be the impression that OSHA wants to convey. 2
RECOMMENDATION #5 Revise OSHA.gov homepage Recommendation 5.2: Make notable calls to action more prominent. Currently, calls to action such as File a Complaint, Report Fatalities & Severe Injuries, Find an OSHA Office, and others are buried in the How To section and in the navigation among other informational sections of the site. The call to action for visitors to subscribe to the newsletter is in two primary places: The envelope icon in the global header of DOL (note: this icon is generally used with the expectation that the user will be sending a message instead of signing up for a newsletter), and Beneath the fold on the homepage as an image-link to OSHA QuickTakes. 3
RECOMMENDATION #5 Revise OSHA.gov homepage Recommendation 5.3: Rethink the presentation of OSHA-focused Twitter feed. Currently, the Twitter feed commands a large portion of real estate on the home page, but only shows two posts. 2
RECOMMENDATION #6 Revise OSHA Newsroom Recommendation 6.1: Adopt DOL.govs convention for filtering articles and publications. Investigate the need for a separate newsroom since DOL.gov has its own and allows users to filter by agency. OSHA currently exists as a filter option 2
RECOMMENDATION #6 Revise OSHA Newsroom Recommendation 6.2: Minimize the prominence of the filter/article type selection area once DOL.gov convention is adopted Users may very likely filter eventually, but the filter does not have to be the very first visible section on the newsroom home. Currently, users are unable to see the updated list of articles because the filter and the newsletter subscription field take up more vertical space than necessary. This impacts the users ability to determine system status. Has their request to filter been satisfied? They must scroll down to determine this after every submission as no additional feedback is provided above the fold. 2
RECOMMENDATION #7 Revise forms (global) Recommendation 7.1: When filling out forms, it is very easy to encounter errors and make mistakes. Implement masks and character limits to help users properly format information with specific rules When preventing mistakes is not possible, allow users to view/correct their mistakes before submitting their form. 3
RECOMMENDATION #7 Revise forms (global) Recommendation 7.2: Minimize the users cognitive load by placing helpful error messages within the context of the form which persist until action is taken to rectify the error. Inconsistent behavior across the site. Errors on the form used to file a complaint are placed on another screen in a bulleted list, forcing the user to remember what errors were made when returning to the form to correct them. Errors in the form used to report Serious Events are displayed in the context of the form, but disappear before a user had a chance to process the information displayed and are not specifically worded. 3
RECOMMENDATION #7 Revise forms (global) Recommendation 7.3: For long forms, allow a user to review their responses prior to submission. The Filing a Complaint form allows the user to review their submission, but only after it has already been submitted to OSHA. 3
RECOMMENDATION #8 Ensure global accessibility Recommendation 8.1: Ensure global accessibility. Users cannot currently tab and select through the elements on the home page content slider. Closed caption text does not accurately match verbiage in videos posted from YouTube. For example, someone answering an OSHA Help Desk phone says Hello. This is OSHA. How may I help you? but the closed captioning says This is Russia. How may I help you? 4
RECOMMENDATION #8 Ensure global accessibility Recommendation 8.1: Ensure global accessibility. Many pages are missing titles to inform the user as to where they currently are. This is required. Users are unable to skip repetitive navigation. In several instances, page content does not meet Section 508 contrast standards. 4
RECOMMENDATION #9 Evaluate the quality of help Recommendation 9.1: Assess the value of embedding certain videos to OSHA.gov from YouTube. Example: Conveying the content shown in the Know Your Rights video on the homepage could be easily achieved in a more concise manner In this 1:25 minute video, the only messages aside from a non- verbal call to action to visit osha.gov/workers are: You have the right to a safe workplace. You have the right to ask questions if something seems unsafe. You have the right to report work-related injurieswithout being fired! 3
RECOMMENDATION #9 Evaluate the quality of help Recommendation 9.2: How To section label is misleading. This group is more of a Quick Links section than an instructional on how to achieve certain functions on OSHA.gov. The links do not direct the user to specific instructions to accomplish functions, but rather the actual functions themselves the existence of instructions varies per page in the section. 2
RECOMMENDATION #10 Revise Contact Page Recommendation 10.1: Address responsive menu bug. Responsive navigation menu does not stay open long enough to review contents or to make a selection. This is an issue which might exist in other areas of the website, which impede access to other areas of the website and trap a user. 4
RECOMMENDATION #10 Revise Contact Page Recommendation 10.2: Expose contact form on the contact page instead of forcing users to navigate to yet another page from the contact page in order to submit a message. Currently, user must select Email link to expose form. When navigating to a contact page, users expect immediate access to a form. The first option on the Contact OSHA page is a phone number. The second available option is to click a link to access the Submit a Workplace Safety & Health Question form. 2
FOR QUESTIONS OR COMMENTS Regarding this review Wes Lewis UX Lead, OSHA.gov Drupal Migration Booz | Allen | Hamilton Lewis_Wes@bah.com

More Related Content

Expert Usability Review: OSHA.gov

  • 2. ABOUT THIS EXPERT USABILITY REVIEW Initiated May 2016 Prepared for Occupational Safety and Health Administration (OSHA) Assessed using current standards from industry leaders Human Factors International (HFI) Nielsen Norman Group (NN/g) Usability.gov Conducted by Wes Lewis of Booz Allen Hamilton User Experience (UX) Lead for OSHA.gov Drupal Migration 12 years of experience in UX design & usability analysis HFI Certified Usability Analyst (CUA)
  • 3. GOALS OF EXPERT USABILITY REVIEW Uncover and assess the severity of usability issues on the desktop and mobile sites. Evaluate the usability of osha.gov against current industry standards. Find opportunities to improve and optimize usability for the intended users.
  • 4. AN EXPLANATION OF SEVERITY RATINGS Cosmetic. These issues are mostly cosmetic in nature. Minor issue. These issues inconvenience the user, but do not completely stop them from completing tasks. Major issue. These issues signify major usability problems. Top priority. These issues keep users from completing tasks efficiently. 1 2 3 4 #
  • 6. RECOMMENDATION #1 Ensure global consistency Recommendation 1.1: Inherit DOL.govs global stylesheet & general flat aesthetic. Remove gradients from page elements, most notably the global header and buttons. Gradients impact readability of text placed on elements using them Generally considered a dated UI design trend. Implement mega menu style & functionality as demonstrated in the DOL.gov global header. Easy to use, accessible, and already exists for easy incorporation. 3
  • 7. RECOMMENDATION #1 Ensure global consistency Recommendation 1.1: Inherit DOL.govs global stylesheet & general flat aesthetic. (contd) Utilize whitespace, bolding of key phrases & words, alternating row colors, bulleted lists, and clear H1-H6 header styles to make page content easy for users to digest. Reserve underlines for hyperlinks. Remove low-resolution images or otherwise non-standard graphical elements Lean more towards minimalist design, ensuring that every element adds value 3
  • 8. RECOMMENDATION #1 Ensure global consistency Recommendation 1.2: Ensure all landing pages within OSHA.gov have a uniform appearance and function. There is very little consistency throughout OSHA.gov., especially on landing pages. Aesthetically jarring at times Potentially impacts memory load in terms of having to reacquaint to a new user interface. Inconsistent design also impacts the users trust in the site and the site provider. Each landing page seems to utilize a different variation of a content slider. Implement a simple and accessible content slider. 3
  • 9. RECOMMENDATION #2 Revisit information architecture Recommendation 2.1: Merge blue frequently-visited navigation in header with navigation menu. The existence of these buttons unnecessarily clutters the global header of the site the starting place for most visitors, especially new ones. Navigation, search, page title information is in this vicinity. If reorganized in a manner which more closely matches the mental models of visitors, they will be able to locate these areas of the site with very little issue. 2
  • 10. RECOMMENDATION #2 Revisit information architecture Recommendation 2.2: Ensure that the path shown in breadcrumbs is accurate. Several instances exist in OSHA.gov where the path shown in the breadcrumbs is either inaccurate or reflects an alternate path. Example: From the home page, select For Employers > Employer Responsibilities. The breadcrumbs indicate that this page should be under Worker Rights, which is underneath the For Workers navigation category. This is disorienting to users as breadcrumbs are a textual representation of a websites structure. They help site visitors understand and navigate a websites hierarchy. A location-based breadcrumb trail should begin with a link to the websites home page and end with the current page. 4
  • 11. RECOMMENDATION #2 Revisit information architecture Recommendation 2.3: Extract links from the global navigation menu which take the user outside the scope of OSHA.gov. There is no visual indicator that, upon clicking a link, a user will be navigated outside of OSHA.gov This can be disorienting to users and may be a cause of frustration and increased bounce/exit rates. These links, if too important to remove completely, can be placed in another more intuitive location of the site. 3
  • 12. RECOMMENDATION #2 Revisit information architecture Recommendation 2.4: Organize and label navigation elements so that sections such as How To on home page and quick links are not necessary. The links in the How To section are long and do not lend themselves to be easily scanned by users Valuable real estate can be better utilized to highlight fresher, more relevant content for users 4
  • 13. RECOMMENDATION #2 Revisit information architecture Recommendation 2.5: Choose up to two navigation schemes: task and topic (remove audience-based navigation). Users can navigate the by topic, task, and user in the same menus. As it stands now, the navigation forces users to go through miscellaneous categories to access content. Websites with audience-based navigation often have overlapping content, which creates a greater workload for users (and content maintainers). Average 6.1% of users go 1 page deep from the top ten landing pages and then refer to some sort of FAQ or Help page. 4
  • 14. RECOMMENDATION #2 Revisit information architecture Recommendation 2.5: Choose up to two navigation schemes: task and topic (remove audience-based navigation) (contd). Users might feel anxious that the information they see might be incomplete or incorrect. Forcing people to self-identify tends to create an additional step and take people out of their task mindset. Users may question whether the category will have information about that group or for that group. 4
  • 15. RECOMMENDATION #3 Clearly distinguish OSHA- specific content Recommendation 3.1: Separate OSHA-specific icons in header from DOL- specific social media The grouping of icons in the header leads one to believe that they are either all OSHA-related or all DOL-related. In all actuality, OSHA does not market a Facebook page, a Twitter handle, or an Instagram account of their own. These are all DOLs social media accounts. Career & Internships = DOL, Contact Us= OSHA. 2
  • 16. RECOMMENDATION #4 Eliminate repetitive screen elements Recommendation 4.1: Language translation controls exist in a number of places on each page, each exhibiting different behaviors. Espa単ol navigation item located in the global header returns the user to the home page of a translated version of the site, taking the user away from the page previously in view prior to toggle. (Note that the navigation item used to arrive on this page disappears upon arrival.) A blue Language toggle is present on several pages at the content level. When triggered, everything below the global navigation is translated. The button persists after the translation has occurred and exhibits the action in the translated language. An Espanol link exists in the global fat footer and, as a result, is present on every page. This link is not a toggle (a DOL-wide directory of links targeted to the Spanish-speaking audience) , but the fact that the links name is the same as others which exist on the same page can be problematic for those reliant on screen readers 3
  • 17. RECOMMENDATION #4 Eliminate repetitive screen elements Recommendation 4.2: Remove repetitive links. Contact Us (https://www.osha.gov/html/Feed_Back.html) appears in no fewer than four places on each page. For Workers > Contact Us For Employers > Contact Us Contact Us (blue button in header) Contact Us (link in footer) 2
  • 18. RECOMMENDATION #4 Eliminate repetitive screen elements Recommendation 4.3: Allow for only one menu trigger per page. The button labeled Menu (used to expose the responsive menu) and the hamburger icon are generally perceived as equivalent and, although these should trigger different menus, should not exist on the same page. Organize the information in a manner which does not require the use of a submenu. Note: Safety and Health Topics presents a responsive submenu which should be triggered by a hamburger icon. However, when the hamburger icon is triggered, it expands the global menu in addition to the submenu. Triggering the hamburger icon once both menu icons are open anchors the user to the bottom of the page. 2
  • 19. RECOMMENDATION #5 Revise OSHA.gov homepage Recommendation 5.1: Prioritize fresh content. # of workers who died in 2014 is at the top of the page. Much fresher news and blog content is lowered in priority with the blog content being located at the very bottom right of the page. According to our Google analytics findings, the OSHA.gov landing page is BY FAR the most heavily visited page within its domain. The impression delivered when the statistics being shown are two years old may not be the impression that OSHA wants to convey. 2
  • 20. RECOMMENDATION #5 Revise OSHA.gov homepage Recommendation 5.2: Make notable calls to action more prominent. Currently, calls to action such as File a Complaint, Report Fatalities & Severe Injuries, Find an OSHA Office, and others are buried in the How To section and in the navigation among other informational sections of the site. The call to action for visitors to subscribe to the newsletter is in two primary places: The envelope icon in the global header of DOL (note: this icon is generally used with the expectation that the user will be sending a message instead of signing up for a newsletter), and Beneath the fold on the homepage as an image-link to OSHA QuickTakes. 3
  • 21. RECOMMENDATION #5 Revise OSHA.gov homepage Recommendation 5.3: Rethink the presentation of OSHA-focused Twitter feed. Currently, the Twitter feed commands a large portion of real estate on the home page, but only shows two posts. 2
  • 22. RECOMMENDATION #6 Revise OSHA Newsroom Recommendation 6.1: Adopt DOL.govs convention for filtering articles and publications. Investigate the need for a separate newsroom since DOL.gov has its own and allows users to filter by agency. OSHA currently exists as a filter option 2
  • 23. RECOMMENDATION #6 Revise OSHA Newsroom Recommendation 6.2: Minimize the prominence of the filter/article type selection area once DOL.gov convention is adopted Users may very likely filter eventually, but the filter does not have to be the very first visible section on the newsroom home. Currently, users are unable to see the updated list of articles because the filter and the newsletter subscription field take up more vertical space than necessary. This impacts the users ability to determine system status. Has their request to filter been satisfied? They must scroll down to determine this after every submission as no additional feedback is provided above the fold. 2
  • 24. RECOMMENDATION #7 Revise forms (global) Recommendation 7.1: When filling out forms, it is very easy to encounter errors and make mistakes. Implement masks and character limits to help users properly format information with specific rules When preventing mistakes is not possible, allow users to view/correct their mistakes before submitting their form. 3
  • 25. RECOMMENDATION #7 Revise forms (global) Recommendation 7.2: Minimize the users cognitive load by placing helpful error messages within the context of the form which persist until action is taken to rectify the error. Inconsistent behavior across the site. Errors on the form used to file a complaint are placed on another screen in a bulleted list, forcing the user to remember what errors were made when returning to the form to correct them. Errors in the form used to report Serious Events are displayed in the context of the form, but disappear before a user had a chance to process the information displayed and are not specifically worded. 3
  • 26. RECOMMENDATION #7 Revise forms (global) Recommendation 7.3: For long forms, allow a user to review their responses prior to submission. The Filing a Complaint form allows the user to review their submission, but only after it has already been submitted to OSHA. 3
  • 27. RECOMMENDATION #8 Ensure global accessibility Recommendation 8.1: Ensure global accessibility. Users cannot currently tab and select through the elements on the home page content slider. Closed caption text does not accurately match verbiage in videos posted from YouTube. For example, someone answering an OSHA Help Desk phone says Hello. This is OSHA. How may I help you? but the closed captioning says This is Russia. How may I help you? 4
  • 28. RECOMMENDATION #8 Ensure global accessibility Recommendation 8.1: Ensure global accessibility. Many pages are missing titles to inform the user as to where they currently are. This is required. Users are unable to skip repetitive navigation. In several instances, page content does not meet Section 508 contrast standards. 4
  • 29. RECOMMENDATION #9 Evaluate the quality of help Recommendation 9.1: Assess the value of embedding certain videos to OSHA.gov from YouTube. Example: Conveying the content shown in the Know Your Rights video on the homepage could be easily achieved in a more concise manner In this 1:25 minute video, the only messages aside from a non- verbal call to action to visit osha.gov/workers are: You have the right to a safe workplace. You have the right to ask questions if something seems unsafe. You have the right to report work-related injurieswithout being fired! 3
  • 30. RECOMMENDATION #9 Evaluate the quality of help Recommendation 9.2: How To section label is misleading. This group is more of a Quick Links section than an instructional on how to achieve certain functions on OSHA.gov. The links do not direct the user to specific instructions to accomplish functions, but rather the actual functions themselves the existence of instructions varies per page in the section. 2
  • 31. RECOMMENDATION #10 Revise Contact Page Recommendation 10.1: Address responsive menu bug. Responsive navigation menu does not stay open long enough to review contents or to make a selection. This is an issue which might exist in other areas of the website, which impede access to other areas of the website and trap a user. 4
  • 32. RECOMMENDATION #10 Revise Contact Page Recommendation 10.2: Expose contact form on the contact page instead of forcing users to navigate to yet another page from the contact page in order to submit a message. Currently, user must select Email link to expose form. When navigating to a contact page, users expect immediate access to a form. The first option on the Contact OSHA page is a phone number. The second available option is to click a link to access the Submit a Workplace Safety & Health Question form. 2
  • 33. FOR QUESTIONS OR COMMENTS Regarding this review Wes Lewis UX Lead, OSHA.gov Drupal Migration Booz | Allen | Hamilton Lewis_Wes@bah.com