Next Drupal Administration UI improvements

🚀 Next Drupal Admin UI improvements Cristina Chumillas (@ckrina) / Sascha Eggenberger (@saschaeggi) DrupalCon Lille 2023

Cristina Chumillas @ckrina, Lullabot Next Drupal Admin UI improvements DrupalCon Lille 2023

Sascha Eggenberger @saschaeggi, GitLab Next Drupal Admin UI improvements DrupalCon Lille 2023

Empower site builders to easily build the best solution Next Drupal Admin UI improvements DrupalCon Lille 2023

Research Next Drupal Admin UI improvements DrupalCon Lille 2023

User Personas Next Drupal Admin UI improvements DrupalCon Lille 2023

Administrator Next Drupal Admin UI improvements Site Builder Content Editor DrupalCon Lille 2023

We need to define what and for whom Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/2703367 Next Drupal Admin UI improvements DrupalCon Lille 2023

Administrator Behaviors Frustrations Motivations • Drupal related day-to-day work • Unmaintained projects and unstable releases • Wants to keep the site running and up-to-date • Unclear communication of project statuses • Is responsible to the site owner • Keeps track of status of the site (Database, Server, Security aspects) • Updates the site and modules • Complex Admin UI • Develops new features • Menu architecture doesn’t make sense • Administers users and permisisons • Troubleshooting Next Drupal Admin UI improvements DrupalCon Lille 2023

Site Builder Behaviors Frustrations Motivations • Drupal related day-to-day work • The IA of the site doesn’t fit all use cases • Wants to implement new features • Spending time jumping around the UI • Wants to build the best solution with the minimum effort • Translates User interface • Creates and manages Entities • The UI is often too complex to understand • The UI isn’t reactive/interactive enough • Doesn’t have enough UX knowledge Next Drupal Admin UI improvements DrupalCon Lille 2023

Content Editor Behaviors Frustrations Motivations • Uses Drupal for day-to-day work • The navigation is confusing • Doesn’t want to think • Creates and manages Entities • Only uses a tiny part of the navigation • Getting things done as quickly and easy as possible • Translates content Next Drupal Admin UI improvements • Complex UI DrupalCon Lille 2023

User Journeys Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

Other research 1.1 Card sorting 2 Laboratory Research University of Minnesota 2. Next Drupal Admin UI improvements DrupalCon Lille 2023

Navigation modernization Next Drupal Admin UI improvements DrupalCon Lille 2023

Previous work 1.1 Information Architecture 2 Content Creation new menu 2. 3 Admin UI & JS Modernization Initiative (UX research) 3. 4 Admin UI & JS Modernization Initiative (Claro, new layout) 4. 5 Gin Admin Theme 5. Next Drupal Admin UI improvements DrupalCon Lille 2023

Why 1.1 Different IA for Site builders and Content creators 2 No 2nd level navigation in horizontal mode (until #2634854) 2. 3 Too much space when vertical 3. 4 Not up-to-date design 4. 5 Accessibility problems 5. 6 Still uses jQuery code 6. Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

Parts Information architecture Research Design User tests Frontend Backend Next Drupal Admin UI improvements DrupalCon Lille 2023

Information architecture Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/3325034 Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/3381734 Next Drupal Admin UI improvements DrupalCon Lille 2023

Survey 1.1 Map the customizations to the Toolbar 2 Map the customizations to the Administration menu 2. Next Drupal Admin UI improvements DrupalCon Lille 2023

New Content creation menu Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/3203618 Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

Designs Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

From Prototype to alpha release Next Drupal Admin UI improvements DrupalCon Lille 2023

Menus 1.1 Are they menus placed as blocks? 2 Where do we manage these blocks? 2. 3 Who has permissions to edit them? 3. 4 Do we limit what can be placed in there by the API? 4. Next Drupal Admin UI improvements DrupalCon Lille 2023

Current core defaults 11. 2 3 Should we remove the “Content” top item if the Content Creation is enabled? How? Should we rename the Shortcuts to Bookmarks? How do we remove the help link and place it somewhere else? Next Drupal Admin UI improvements DrupalCon Lille 2023

Content creation menu 1.1 Provided by the toolbar module? 2 How do the items under the Create top link get filtered? 2. 3 Should we have submenus under the Create link? 3. 4 Should Blocks Layout live there? 4. 5 Who should be able to change it? 5. Next Drupal Admin UI improvements DrupalCon Lille 2023

Usability tests Next Drupal Admin UI improvements DrupalCon Lille 2023

Rounds of tests 1 August d.org/3379160 2 September d.org/3385182 3 DrupalCon Lille Help us testing at the contribution room! Next Drupal Admin UI improvements DrupalCon Lille 2023

Implemented in Gin Next Drupal Admin UI improvements DrupalCon Lille 2023

Gin 3.0 RC7+ Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

Layout changes Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/3076820 Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

Other navigation changes 1.1 Local tasks (Primary and secondary tabs) 2 Local actions (CTA’s) 2. 3 Vertical tabs 3. 4 Search filters (Modules page, inpage, etc.) 4. Next Drupal Admin UI improvements DrupalCon Lille 2023

Local tasks (Primary tabs) Local tasks (Secondary tabs) Local actions (CTA’s) Next Drupal Admin UI improvements DrupalCon Lille 2023

Local actions (CTA’s) Next Drupal Admin UI improvements DrupalCon Lille 2023

Customization Next Drupal Admin UI improvements DrupalCon Lille 2023

Other changes Accent color Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/788332 Next Drupal Admin UI improvements DrupalCon Lille 2023

Other changes Darkmode Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/3251278 Next Drupal Admin UI improvements DrupalCon Lille 2023

Other changes Layout density Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/3080994 Next Drupal Admin UI improvements DrupalCon Lille 2023

Field UI Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

Layout builder Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/3361359 Next Drupal Admin UI improvements DrupalCon Lille 2023

Pitch-burgh 1.1 Layout builder 2 Gutenberg 2. Next Drupal Admin UI improvements DrupalCon Lille 2023

Dashboard Next Drupal Admin UI improvements DrupalCon Lille 2023

Modern Dashboard with Role presets (#3244581) Next Drupal Admin UI improvements DrupalCon Lille 2023

Next Drupal Admin UI improvements DrupalCon Lille 2023

Which content? Task-focused Dashboards Next Drupal Admin UI improvements DrupalCon Lille 2023

Personas / Tasks Site Administrator Content Editor • Shortcuts • Shortcuts • Reports snapshot • Content created by other users edited recently by me • Run cron • Own published content • Clear cache • Own unpublished nodes • If Announcements: latest announcements • Latest published content (all) • If multilingual: missing translations • If Announcements: latest announcements Next Drupal Admin UI improvements • If workflow: Own drafts (replaces the custom block without Workflow), Content that needs review, All drafts DrupalCon Lille 2023

Technical implementation 1 Dashboard as entities Next Drupal Admin UI improvements 2 2 default Dashboards, available based on permissions 3 If Layout Builder is enabled, customizable with Layout Builder DrupalCon Lille 2023

github.com/penyaskito/dashboard-initiative Next Drupal Admin UI improvements DrupalCon Lille 2023

Other proposals Next Drupal Admin UI improvements DrupalCon Lille 2023

Other changes: Same page preview Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/same_page_preview Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/3367356 Next Drupal Admin UI improvements DrupalCon Lille 2023

Other changes: Autosave Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/autosave_form Next Drupal Admin UI improvements DrupalCon Lille 2023

Getting involved Next Drupal Admin UI improvements DrupalCon Lille 2023

dgo.to/3373303 Next Drupal Admin UI improvements DrupalCon Lille 2023

Slack 1.1 #admin-ui 1.4 #dashboard 2 #field-ux 2. 5 #preview 2. 3 #layouts 3. 6 #gin 3. drupal.org/join-slack Next Drupal Admin UI improvements DrupalCon Lille 2023

BoF: Room 2.1 4.15pm – 5.00pm The new admin Toolbar Next Drupal Admin UI improvements DrupalCon Lille 2023

BoF: Room 2.1 5.15pm – 6.00pm Gin Admin Theme Next Drupal Admin UI improvements DrupalCon Lille 2023

Thank you! @ckrina @saschaeggi Next Drupal Admin UI improvements DrupalCon Lille 2023