[meta] Improve administration navigation

What problem are we solving?

• 65% of sites customize the built in toolbar with contributed modules
• Dissatisfaction in navigating between different sections, i.e. content and structure is painful with the current toolbar
• Users feel disoriented while using the admin UI, i.e users don't know if they are under the right section of the interface
• Drupal is perceived as outdated, which the outdated Toolbar designs contribute towards

Who is this for and what will be the outcome?

• Site builders
• Content authors
• Evaluators

Result: what will be the outcome?

• Increased satisfaction with the out-of-the-box admin interface (e.g. reduced number of clicks or page visits needed to navigate through the UI)
• Increased confidence while using the admin interface (e.g. users feel oriented while using the admin UI, i.e users know they are under the right section of the interface)
• Improved initial impression of the administrative interface

How can we know the desired result are achieved?

• How many users are choosing the new administration navigation over the current solutions? (Quantitative)
• Ideally we would have a metric that ensures that the new administration navigation is perceived up-to-date/modern, but we’ll still need to decide what is the specific metric.

Idea validation

The hypothesis has been validated thanks the usability testing and research done in #3401352: [PLAN] Usability Testing and Research on the Toolbar. It consisted on a series of UX tests, that started with an initial one with a control version (existing Toolbar) comparing it to a new vertical left-aligned toolbar as the preferred option for both new and experienced users. That showed the need to for change management because even though users found the new left-aligned option more usable some commented that wouldn’t want to learn something new unless there is a good reason for it. That’s why we introduced a new feature that proved useful based on findings from a survey #3402271: Admin Menu Survey: an easy way to customize the menus shown in the admin toolbar.
The tests evolved as new improvements were made it into the module, like testing changes for elements like the Go back link, breadcrumbs and other alternative navigation elements. The tests kept showing that testers found more usable the proposed left-aligned administration toolbar.

Areas of focus

Now:

• Modernize the look and feel of the existing navigation:
  • ​​#3364215: Redesign the toolbar
  • #3421969: [PLAN] New Navigation and Top Bar to replace Toolbar Roadmap: Path to Stable
  • Navigation contrib module:
    • #3426606: [META] Implement the final design system
    • Implement a Top Bar (Experimental feature for now, hidden behind a flag) #3401826: [PLAN] Top contextual bar. This is related to #3076820: [META] Layout redesign.

Next:

• #3076820: [META] Layout redesign
• Information Architecture
  • #2755613: Restructure the admin interface Information Architecture

Later:

• Complementary navigation patterns (e.g. search integrated in the Toolbar)
  • #3325034: Providing additional methods of navigating the admin interface

Team and resources

We are working on the #admin-ui channel on Drupal Slack.

Current team:

• Cristina (Provisional Frontend Framework Manager, Usability Topic maintainer) – full time until October
• Lauri (Frontend Framework Manager) – available to support on high level direction and reviews
• Brenna Love (baluv3) - Project manager, half-time until October
• If you are planning on committing some time towards this idea, feel free to add yourself to this list! 🤗
• Mike Herchel - helping out when I can!
• Sascha (Claro, Gin, Drupal Design System) - helping also where I can regarding Design/Reviewing (also with insights of Gin and GitLab)
• Ivan Berdinsky - "You're Doing It Wrong" Specialist