[Plan] Administration main navigation modernization

Problem/Motivation

Our UX research in 📌 Redesign the toolbar Active uncovered usability, design, and accessibility problems with the current toolbar.

Usability issues for the horizontal implementation:

• The current toolbar doesn’t support sticky regions for important actions and leaves unused space in desktop/horizontal working spaces.
• Clicking and waiting for page loads is required (can be addressed using the admin toolbar module or patch. No submenus on horizontal mode until ✨ Add dropdowns to horizontal toolbar menu (as with 'admin toolbar' in contrib) Needs work lands (as with 'admin toolbar' in contrib)).
• Submenus become problematic with numerous options that extend beyond the screen's viewport.
• The toolbar fails to display active links located deeper than what is shown in the toolbar itself, affecting navigation and usability.

Design issues:

• The admin experience feels outdated because it’s based on an old design system (Seven).
• Both site builders and content editors expect to be able to utilize more screen real estate to be aligned with modern layouts.
• Using a dark background tends to draw a lot of attention from the main content of the page.

Accessibility issues:

• Toolbar colors fail WCAG color contrast criteria.
• Focus styles are not sufficiently obvious. Missing states in the existing designs.

Also, the existing toolbar has outdated code (for example, it relies on JQuery).

Proposed resolution

We are proposing a new side navigation to replace the current toolbar, incorporating modern patterns and structure based on usability research and utilizing updated code. The objective of this plan is to improve the usability, design, and accessibility of the toolbar by addressing the specific issues we have identified through our research.

Plan

Phase I

• 📌 Redesign the toolbar Active
• Create a prototype for user testing and iterate on the designs based on testing results and community feedback.
• Conduct research to inform information architecture and navigation for each user (e.g. site builders, content users, site administrators) ( 🌱 Restructure the admin interface Information Architecture Active )

Phase 2

• Propose the result to Drupal core as an experimental module. We still need to define how.

Later:

Information architecture changes when we have the results of the user research:

• 🌱 Restructure the admin interface Information Architecture Active
• 🌱 New “content creation” menu proposal Needs review

User interface changes

The existing Toolbar will be replaced with a new Side Navigation.