Contrib.social

Redesign the toolbar

Open on Drupal.org →
Created on 1 June 2023, over 1 year ago
Updated 16 April 2024, 8 months ago

Problem/Motivation

The existing Toolbar is the result of several UX improvements done for Drupal 7, but both Drupal and design and UX patterns have changed since then.

This issue will focus on giving a new look and feel to the existing Toolbar without getting into Information Architecture changes, although it’ll take into account they will happen in the future.

In our initial research we’ve found several issues that need to be addressed:

Usability issues

  • The existing Toolbar in the horizontal mode:
    • The existing implementation blocks us from using sticky regions that would be useful for important actions like the Save button.
    • Leaves an empty left area unused in desktop/horizontal working spaces.
    • Requires clicking and waiting for page loads. (Using the admin toolbar module or patch can overcome this problem: No submenus on horizontal mode - ✨ Add dropdowns to horizontal toolbar menu (as with 'admin toolbar' in contrib) Needs work )
      • Submenus become problematic when there are many options in the dropdown that expand past the screen’s viewport.
    • The current Toolbar is not able to accommodate the navigation patterns of most prominent personas (i.e., site builder and content editor)
      • The toolbar IA requires site builders to “jump around” to various sections of the admin to do things like manage displays or create new view modes and then add them to content types.
    • The toolbar fails to display active links when they are located deeper than what is shown in the toolbar itself. As a result, it becomes unclear which section you are currently in. Also toggleable lists are inadvertently closed in this scenario.

    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

    • It fails WCAG color criteria
    • Focus styles are not sufficiently obvious. Missing states in the existing designs.

    Proposed resolution

    To resolve these problems, we are starting with research and usability testing. We are taking what we know from Gin → ’s and GitLab’s navigation redesign → shared by @saschaeggi → and applying those ideas to the redesign. For example, Gin has implemented a left/top/top toolbar and has received good feedback from many of its users. So, we already have some evidence that the change will be well-received.

    There is plenty of research that concludes that a left, vertical toolbar performs better with large or complex menus.

    Previous research

    • The current Drupal admin UI has a multi-level menu. Research from UX Movement concludes that left/top/top or left/left/left navigation patterns performed best from a UX and speed perspective. Moreover, when the menu is large, left/top/top performed the best.

    • UX collective research says that side navigation is easier to scale. Complex projects can require long lists of content types, custom view modes, etc. Top/horizontal navigation can make it difficult to navigate for site builders and content editors.
    • Side navigation with large menus is also easier to scan. Categories are viewable without leaving the current page.

    Process and validation

    Our usability testing to validate our initial hypothesis will begin at DrupalCon Pittsburgh with wireframes on Figma. Our plan is to:

    • Create a testing script for site builders to perform a task(s) using the toolbar as it is now. We’ll collect their feedback and pain points.
    • Bring our first round of designs to DrupalCon and document feedback

    We’ll use the data we collect from DrupalCon to iterate on the designs and create a static HTML version of the toolbar for further testing and iteration.

    We’ll also need to list the APIs that affect Toolbar to find any design variation we’ll need to accommodate, both from core and main contrib modules (i.e., Workspace module).

📌 Task
Status

Fixed

Version

11.0 🔥

Component
Toolbar  →

Last updated about 1 month ago

  • Maintained by
  • 🇫🇷France @nod_
Created by

🇺🇸United States baluv3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024