A presentation at DrupalCon Lille in in Lille, France by Sascha Eggenberger
🚀 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
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
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
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
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
Next Drupal Admin UI improvements DrupalCon Lille 2023
Next Drupal Admin UI improvements DrupalCon Lille 2023
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
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
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
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
Collaborative presentation with Cristina Chumillas (@ckrina)
for free. You
can too.