[Design] Review U.S. GHG Center design through digital.gov requirements and recommendations

[faustoperez]

Motivation

Now that we've passed the demo phase and moving forward to getting .gov status for the U.S. GHG Center website, we're opening this ticket to ensure the design approach is aligned with the latest best practices and requirements listed at https://digital.gov/topics/21st-century-idea/.

Overview of the requirements and principles / main action points

• User-centered and data-driven design
• Mobile-first design that scales across varying device sizes
• Accessible to people of diverse abilities
• Consistent visual design and agency brand identity
• Easy-to-understand content
• Information and services that are discoverable and optimized for search

[j08lue]

Re accessibility:

• https://github.com/NASA-IMPACT/veda-ui/issues/109

[j08lue]

Feedback from GHG stakeholders during R1 review:

Good accessibility practices make things easier for everyone. Some areas for improvement include image and text contrast in the data cards. Having text on images makes the text hard to use. There are some best practices available that could be leveraged. 18F, through GSA, makes available a design system called the U.S Web Design System (USWDS). It has different components that can be leveraged by any web site. These components have been tested to ensure that they are accessible. Another area of accessibility would be the headers used for text on the site. People using screen readers, and other assistive technology, use headers to skim or browse sites. Differentiating between these headers, using H1 for the most important section and H2 or H3 for less important sections, helps everyone to scan or browse the text on the site. There are also some aspects of the site that may be small (text labels) or hard to use (site navigation). The USWDS can help with those as well.

[faustoperez]

Design.gov guidelines

As an official U.S. Government website, the U.S. GHG Center has to comply with the 21st Century Integrated Digital Experience Act (IDEA)’s requirements. More information can be found at https://digital.gov/resources/21st-century-integrated-digital-experience-act/

This is a 4-point summary of the guidelines, with which the current design and future design proposals should comply with:

1. Accessible to People of Diverse Abilities

WCAG 2.1 Compliance

We will align the website design and content with the Web Content Accessibility Guidelines (WCAG) 2.1 standards. WCAG sets the global benchmark for web accessibility and covers a wide range of disabilities, including visual, auditory, motor, and cognitive impairments.

Elaborating on WCAG 2.1 compliance, here are the key aspects and principles of these guidelines. A full list can be found at https://www.w3.org/TR/WCAG21/.

Perceivable

• Text Alternatives: Provide text alternatives for non-text content, such as images, videos, and audio. This ensures that individuals who use screen readers or other assistive technologies can understand the content.
• Time-Based Media: Offer captions and transcripts for pre-recorded multimedia content. This benefits individuals who are deaf or hard of hearing.
• Adaptable Content: Create content that can be presented in different ways without losing meaning or structure. This assists users who may need to customize the presentation.
• Distinguishable Content: Ensure that content can be easily perceived, such as using sufficient contrast between text and background colors to aid those with low vision.

Operable

• Keyboard Accessibility: Make all functionality available via keyboard navigation. Some users, particularly those with motor disabilities, rely on keyboard input instead of a mouse.
• Time Limits: Provide controls to pause, stop, or extend any time limits on content. This helps users who may need more time to interact with or read content.
• Navigable Content: Ensure that content is easy to navigate by providing clear and consistent navigation mechanisms, headings, and labels.
• Input Assistance: Assist users in avoiding and correcting mistakes, such as clear error messages and suggestions for correcting input.

Understandable

• Readable and Predictable: Make text content readable and understandable. Avoid jargon or complex language and maintain a consistent page layout and navigation structure.
• Input Assistance: Clearly label form fields and provide instructions for completing forms, helping users understand what is required.
• Predictable Navigation: Ensure that navigation and actions within the website are predictable and consistent, reducing cognitive load for users.

2. Consistent Visual Design and Agency Brand Identity

Style Guide and Design System

We’ll develop and maintain a comprehensive style guide and design system that outlines the approved color schemes, typography, logos, and visual elements. We’ll ensure that all web content adheres to these guidelines.

DevSeed will review the materials available at the U.S. Web Design System (USWDS) and make sure our library of components for the U.S. GHG Center is fully aligned with them.

A design starter kit is available at https://designsystem.digital.gov/documentation/getting-started-for-designers/

User Interface (UI) Elements

Keep UI elements consistent throughout the site, ensuring that buttons, forms, and menus look and behave similarly. Display the agency logo prominently on each web page. Maintain consistency in font usage, color palettes, and other branding elements across the website.

At the moment the logo design and the general branding for the U.S. GHG Center are pending, but we will make sure both the current implementation and any future branding efforts comply with these general rules.

3. User-Centered and Data-Driven Design

User research and user feedback

Perform user research to better understand the target audience and their needs. Design content and features with these people in mind. Establish mechanisms for collecting user feedback. Analyze user behavior and preferences through analytics tools to make informed design decisions.

Iterative Design

Continuously iterate the website's design and functionality based on user feedback and data analysis. This agile approach keeps the site current and responsive to user needs.

4. Mobile-First Design

Responsive Design and mobile optimization

Create a responsive web design that adapts to various screen sizes, from small mobile devices to larger desktop monitors. Optimize page load times and user experience for mobile users. Prioritize mobile usability and test regularly on different mobile devices.

We will review feature-heavy, more complex user interfaces such as maps and dashboards so that the content is accessible and the basic functionalities are optimized for mobile.

[faustoperez]

Next steps

This is a framework to govern future GHG design proposals and implementation but these are some actions we can start working on in the current version.

I suggest we tackle them in this order:

1. Accessibility assessment.
2. Mobile-friendliness assessment (with an emphasis on the exploration/analysis interfaces).
3. Start the creation of a design system using USWDS guidelines. Continue the work we did about the branding.
4. Plan for user research and interviews in the following months, once we have enough users/feedback.

@j08lue would something like this work?

[faustoperez]

We have started a Figma file with USWDS components: https://www.figma.com/file/QSqUxWm8wpe0gyWzW1C4Dh/U.S.-Web-Design-System-(USWDS)-UI-Design-Kit?type=design&node-id=0%3A1&mode=design&t=l58Yg7vT6yrdfJc1-1

The starter UI kit on the USWDS website is quite complete for basic elements (color, typography, form elements, buttons, cards, etc.), but we need to:

• Adapt the existing components to the preliminary brand we have for the U.S. GHG Center
• Create missing components (hero sections, menus, page layouts for both desktop and mobile)
• Create data visualization components we'll need: charts, widgets, maps, etc.

I think that, with this effort, we can tackle the first 3 points in the above message (accessibility, responsiveness, design system) and prepare the ground for any future design needs 👍

[faustoperez]

Related https://github.com/NASA-IMPACT/veda-ui/issues/109