Tech
UXD Accessibility
5 Months
Project A, one of Google's most used platform by Google employees to ensure that they work is fully accessible, is an outdated platform that has not received a face-lift in many years. My job is to ensure that Project A is cohesive with all other Google platforms in terms of style, fonts, colors, and specially accessibility.
Let me take you on how I turned this old inaccessible site
to a fully accessible cohesive Google platform
.png)
This is a very confidential project. A lot of the material in this have been obscured or removed do to confidentiality between Google and employee.
Project A's current information architecture was everywhere. Duplicate information, too many tabs, and confusing navigation.
One of my first tasks at Google, was to reduce the amount of tabs and consolidate the information to facilitate navigation. Users were getting lost and because of the duplicate info, they were forgetting where things were.
A simple navigation
After consolidating all the content and reducing the pages and tabs, a more friendly and consumable navigation emerged. Allowing users to navigate after and efficient across the platform
Out of all of Google's platforms, this is the one that has to be the most accessible. This is the platform that all of Google's employees come to follow standards, protocols, to ensure that their work is accessible
Current color usage passes but does not fully meet WCAG's AAA standards
An upgrade to a more approachable design
Whether it was color, weight, negative space, or font, the platform had many issues of improper use of hierarchy
Many designers don't take into consideration basic design principles and can lead to future bigger problems that can decrease user retention or returns. Hierarchy is one the those biggest attention to detail that can lead a website, platform, app, from being okay to being very successful.
Improper use of headers
The most top use header on the page should the biggest or more attention grabbing. In this case, the second header is the biggest. Also all headers should should decrease in size proportionally
Design standards
Even though purple is the products main color, it should not be used as a link color. Because of usage, it has become a design principle that links are blue and visited links are purple.
Heavy weight
Any use of bold and colors can distracting when trying to guide the use to accomplish a task. The heavy purple line on the right and the big blue call-out brings attention more than other elements in this page. They should supplementary items instead of primary
All Combined
With the improper use of all these, the user never makes it to the content of the page. The eye is drawn to the call out, then to the second header, to the side nav, back to the top-nav and loops back down
A solution for better returns
Applying design principles and properly use colors and fonts can improve the usage, functionally, and aesthetics of a product
High Contrast
WCAG Success criterion 1.4.3: Contrast Minimum, to have a high contrast to address people with visual impairment, blurry vision, color blindness and more to be able to see and understand the content without confusion
Keyboard Focus
WCAG Success criterion 2.1.1: Keyboard requires that all websites should be operable with the use of a keyboard alone and providing a well design keyboard focus state
Breadcrumbs
Having breadcrumbs ensures that people with short attention spans or other cognitive disabilities can complete long series of navigation steps
Alt Text
Best practice is to use Alternative text for all non-text content. This will help a screen reader read out loud to people or convert to braille
Multiple ways to the same place
Give the users multiple ways to get to the same area, this helps then internally organize the site map on their own
Page Navigation
For long content, give users a page navigation to page links to consume and access information faster. This will help orientate and its easier and faster to read just headers
Scalability
Ensuring the content and structure of the platform doesn't break when user changes zoom, is very important. People with vision disabilities should be able to use the platform with no problems
One other most areas in Project A is the criteria pages. This pages are heavy with content, massive tittles, endless scrolling, and confusing orientation.
Accordions closed
Accessibility information hidden inside accordions. Using a long question that tells users what they're looking for
Accordions open
Inside accordions are more content on specific topic, holding "how to" or "what not to do" best practices.
Designing a simple yet usable solution
Semantic Names
Assign each criterion question with a semantic name, a short phrase that describes the whole section.
Secondary Element
Keep the question that users always see but place it underneath the semantic name and make it a secondary element
Dropdowns to Arrows
Removing the accordions will no longer need the drop-down icons. Replace with right arrows to assure that the content is still available
Separate criterion list from criterion content
This will help the use get oriented with the full page, be able to find what they are looking for faster and be able to look for new information faster.
Shorter page navigation
Separating the list from the content will also shorted the right page navigation. Users will no longer see the long endless list on the right but be able to focus on the proper content.
