OUTSTANDING ADMIN UX DRUPALCON GLOBAL 2020 elevated third | Denver - - PowerPoint PPT Presentation

▶
outstanding admin ux
SMART_READER_LITE
LIVE PREVIEW

OUTSTANDING ADMIN UX DRUPALCON GLOBAL 2020 elevated third | Denver - - PowerPoint PPT Presentation

May 05, 2023 151 likes •722 views

OUTSTANDING ADMIN UX DRUPALCON GLOBAL 2020 elevated third | Denver Raleigh Seattle Slides: https://bit.ly/391Jqcf Stop by our booth: #Event/expo/51475 US. Aubrie Hill Nick Switzer Senior Development Developer Director d.o: a3hill d.o:

slide-1
SLIDE 1

elevated third | Denver Raleigh Seattle

OUTSTANDING ADMIN UX

DRUPALCON GLOBAL 2020

slide-2
SLIDE 2

Slides: https://bit.ly/391Jqcf Stop by our booth: #Event/expo/51475

slide-3
SLIDE 3

Nick Switzer Development Director d.o: switzern

US.

Aubrie Hill Senior Developer d.o: a3hill

slide-4
SLIDE 4

Our agency exists to help

  • rganizations succeed. Elevated

Third is an agency that designs, builds and optimizes digital experiences using Drupal.

slide-5
SLIDE 5

A complex digital platform requires a well-architected, and practical administrator

  • experience. Don’t wait until it’s

too late.

NOT AN AFTERTHOUGHT.

slide-6
SLIDE 6

START AT THE BEGINNING AND MAKE IT A PART OF THE ENTIRE BUILD

slide-7
SLIDE 7

PLANNING

slide-8
SLIDE 8

Plan and build for real people. Put yourself in the shoes of someone who is actually working with the site every day.

KNOW YOUR USERS.

slide-9
SLIDE 9

How technical are they? How much control do they need?

CONSIDER YOUR ADMINS

How much control do they want? 1 2 3

slide-10
SLIDE 10

Do they know just enough to be dangerous? Separate configuration and content roles. Don’t slack on documentation.

TECHNICAL EXPERTISE

slide-11
SLIDE 11

Priority tasks should be easy. Don’t bog them down with extra stuff. Principle of least privilege.

CONTROL THEY NEED

slide-12
SLIDE 12

Reluctant or

  • verzealous?

Align admin wants with requirements. Open-ended experience vs curated tasks.

CONTROL THEY WANT

slide-13
SLIDE 13

Understand the major elements of your build and how they will affect the admin experience.

ARCHITECTURE.

slide-14
SLIDE 14

Introduces lots of variation due to the wide range of possibilities for the build.

  • Layout Builder vs. Paragraphs.
  • Naming conventions: be consistent and clear.

UNSTRUCTURED CONTENT.

slide-15
SLIDE 15

We’ve been doing this in Drupal for a long time, but it still deserves the same amount

  • f attention.
  • Each field should be focused on doing one job well.
  • Use the right field for the job. It’s called structured

content for a reason.

STRUCTURED CONTENT.

slide-16
SLIDE 16

Unstructured Page (Flexible)

Example: Homepage

Structured Page (Templated)

Example: Resource Detail

slide-17
SLIDE 17

Leave your developer brain at the door and use conventions that make sense to the marketing team.

  • Connect elements to the business need, not the

technical function.

  • Billboard vs. Banner, Lead-In vs. Basic Copy

NAMING CONVENTIONS.

slide-18
SLIDE 18

Limit the need for a WYSIWYG by building clean, well-structured content types.

  • When it is necessary, make sure it works as

advertised.

  • Use tools like Media Library to make it an

integrated experience.

WYSIWYG CONFIG

slide-19
SLIDE 19

Don’t start the build in Drupal. Use a document that is easy to change to flesh out site structure and relationships early.

BUILD SPEC.

slide-20
SLIDE 20

Think through everything - field names, help text, required text, allowed values.

slide-21
SLIDE 21

The format matters less than the content. Spreadsheet, UML, Freehand.

CHOOSE YOUR FORMAT.

slide-22
SLIDE 22

With architecture planned and admin roles defined, it’s time to move on to the build.

slide-23
SLIDE 23

IMPLEMENTATION

slide-24
SLIDE 24

Drupal core has a some great modules built right in to get us started making a great admin experience.

START WITH CORE.

slide-25
SLIDE 25

A clean, accessible and powerful administration theme that ships in core starting with 8.8

CLARO

slide-26
SLIDE 26

Create re-usable, browsable, searchable media libraries for admins to quickly find the asset they need.

MEDIA & MEDIA LIBRARY

slide-27
SLIDE 27

LAYOUT BUILDER

Visual design tool for custom drag and drop layouts.

slide-28
SLIDE 28

Create “LEGO” blocks to design pages

CUSTOM BLOCKS

slide-29
SLIDE 29

The Drupal.org is full of exceptional modules that take a site’s admin experience to the next level.

LOOK TO THE COMMUNITY.

slide-30
SLIDE 30

Give admins a visual understanding of the content they are inserting.

PARAGRAPH BROWSER

https://www.drupal.org/project/paragraphs_browser

slide-31
SLIDE 31

Organize content entry for admin for a clear understanding

  • f what they are

editing.

FIELD GROUP

https://www.drupal.org/project/field_group

slide-32
SLIDE 32

Edit layout builder content in a modal window

LAYOUT BUILDER MODAL

https://www.drupal.org/project/layout_builder_modal

slide-33
SLIDE 33

Helps alter media libraries theme when used in layout builder / layout builder modal.

MEDIA LIBRARY THEME RESET

https://www.drupal.org/project/media_library_theme_r eset

slide-34
SLIDE 34

Organize blocks into categories, quickly add visual icon

LAYOUT BUILDER BROWSER

https://www.drupal.org/project/layout_builder_modal

slide-35
SLIDE 35

Restrict layouts and blocks allowed per content type

LAYOUT BUILD RESTRICTIONS

https://www.drupal.org/project/layout_builder_restrictio ns

slide-36
SLIDE 36

Allow admin to embed entities into WYSIWYG

ENTITY EMBED & ENTITY BROWSER

https://www.drupal.org/project/entity_embed https://www.drupal.org/project/entity_browser

slide-37
SLIDE 37

Adds autocomplete link field to WYSIWYG

LINKIT

https://www.drupal.org/project/linkit

slide-38
SLIDE 38

Limit the editors an admin has access to per field

ALLOWED FORMATS

https://www.drupal.org/project/allowed_formats

slide-39
SLIDE 39

Force CKEditor to respect row value.

CKEDITOR HEIGHT

https://www.drupal.org/project/Ckeditorheight

slide-40
SLIDE 40

Improve select list that have long list of choices.

CHOSEN

https://www.drupal.org/project/chosen

slide-41
SLIDE 41

Take the admin experience further with a few custom tweaks.

PERSONAL TOUCH.

slide-42
SLIDE 42

Added Dragula JS to paragraphs for easier re-ordering of content.

DRAGGABLE PARAGRAPHS

slide-43
SLIDE 43

Because layout builder and modal use the active theme – moved/copied appropriate CSS / JS / templates to active theme for better, more consistent experience

LAYOUT BUILDER MODAL THEME

slide-44
SLIDE 44

Turn buttons into icons to take up less vertical screen space

PARAGRAPH BUTTON STYLES

slide-45
SLIDE 45

Show only a preview of a paragraph and allow the admin to expand to see

  • more. Creates less

vertical space and allows admin to see more content.

COLLAPSIBLE PARAGRAPHS

slide-46
SLIDE 46

Changed save / preview button to be sticky for easy access on long content pages.

NODE PAGE THEMING

slide-47
SLIDE 47

Elevated Third’s admin theme that is based on Claro includes the custom features we talked about.

ADMINKIT

https://www.drupal.org/project/paragon_adminkit

slide-48
SLIDE 48

Now that you’ve built a fancy, well-architected admin UI. Take the time to actually test it!

slide-49
SLIDE 49

QA & TESTING

slide-50
SLIDE 50

Log in as an actual user with the role. Test common tasks for each role. Consider a UAT plan.

TEST IT RIGHT

slide-51
SLIDE 51

ONGOING OPTIMIZATION

slide-52
SLIDE 52

The admin UX is never

  • ver. Admins are likely the

most active users in your

  • site. Take the opportunity

to consistently improve.

slide-53
SLIDE 53

Collect feedback from your users. Apply updates based on that feedback. Never stop improving!

TEST IMPROVE REPEAT

slide-54
SLIDE 54

THANKS.

elevated third | Denver Raleigh Seattle

slide-55
SLIDE 55

Let us know what you think:

https://www.surveymonkey.com/r/DCGlobal 20SessionEval?title=AdminUX&id=30921

Stop by our booth: #Event/expo/51475