This document discusses building a great user experience for content editors in Drupal. It outlines various aspects of the content editor experience that can be complex, such as managing form displays and field settings. The document recommends defining user goals and tasks upfront and getting input from content editors. It also provides tips for configuring the editor experience, such as customizing edit forms and WYSIWYG settings. Testing the experience with content editors and iterating based on their feedback is also emphasized.

1. evolvingweb.ca @evolvingweb
Building a Great User
Experience for Content Editors
SUZANNE DERGACHEVA

2. • Co-founded Evolving Web in
2007
• Experienced Drupal themer,
developer, project lead
• Loves teaching DrupalSuzanne Dergacheva
CO-FOUNDER AND FRONT-END LEAD
@suzanne_kennedy

5. OUR WORK

6. Site
Admin
Experience
Site Building Experience
Content
Editing
Experience
What is the
Content
Editor
Experience?

7. Content Editor is UX hard
Complex information architecture = Complex user experience

8. • Manage form display
• Configurable widgets
• Field settings
• Admin themes
• Admin views
• Flexible permissions
• Text formats and WYSIWYG
• New things like layout
builder…
Content Editor UX is Easy
CONFIGURATION
• Custom admin theme
• Form Alters
• Plugin system for custom widgets and field types
DEVELOPMENT

9. Isn’t there a module for that?
Admin UI Initiative Material Admin Theme

10. So what’s the
solution?

11. When to Do Content Editor UX?
TRAINING & QACONFIG & DEVELOPMENTSTRATEGY & DEFINITION
Now NowNow Now Now

12. When to Do Content Editor UX?
TRAINING & QACONFIG & DEVELOPMENTSTRATEGY & DEFINITION
Test the
experience
by training
Build out your
users stories
through site
building & dev
Define user goals
and tasks
Get content
editors involved
in choosing
terminology and
making decisons

13. When to Do Content Editor UX?
TRAINING & QACONFIG & DEVELOPMENTSTRATEGY & DEFINITION
Define user goals
and tasks
Get content
editors involved
in choosing
terminology and
making decisons
Test the
experience
by training
Build out your
users stories
through site
building & dev
Test the
experience
by training

14. evolvingweb.ca @evolvingweb
Strategy & Definition

15. What Do Content Editors Want?

16. What Do Content Editors Want?

17. Questions to Ask
• What are the most content editing use cases and workflows?
• What needs to be easy to edit?
• What are the requirements for content on the site?
• How can we make this simpler?
• What do content editors call things?

18. Content Editor Goals
• Find and add content
• Edit content easily
• Create rich content with the
WYSIWYG editor
• Create/edit blocks and taxonomy
terms
• Add content to the menus
• Know what content is going to look
like when they publish it
• Create content that's accessible
• Get content scheduled and
published
• Translate content
• Communicate with more complex
pages (landing pages)
• Use a content editing workflow to
get content approved

19. Goals, Tasks, and Architecture

20. evolvingweb.ca @evolvingweb
Build

21. • Unclutter the admin UI by making granular
roles and limiting permissions
• Pick meaningful content type and field names
• Create clear links for adding content
• Customize your content overview page admin
views per content type
Find and Add Content

22. • Clean up your edit forms with the Manage Form
Display tab
• Help users figure out what to enter in each field
Edit Content

23. Edit Content
Use the right field widget for the job

24. Edit Content
Entity Browser http://drupal.org/project/entity_browser
and File Entity Browser http://drupal.org/project/file_browser

25. Edit Content
Hide the cruft.

26. Edit Content
Add help text, but not too much. Specify image resolution.

27. • Users should know what to expect when they
publish content
• Does that mean a pixel-perfect WYSIWYG
experience?
Edit Content with No Suprises

28. Edit Content with No Surprises
An example from Netlify

29. Edit Content with No Surprises
Proposed UI from
Bryan Hirsch for
mass.gov project
https://medium.com/@bryanhirsch/backend-live-preview-fd9179132b1f

30. Edit Content with No Surprises
In the meantime, some best practices:
• Make fields required or provide
defaults
• Order your fields consistently
• Enable previews
• Consider where content will be
displayed (different devices, view
modes, media)

31. • Plan out your text formats
• Configure the right buttons for the job
Good WYSIWYG experience

32. Good WYSIWYG Experience
https://www.drupal.org/project/allowed_formats

33. Good WYSIWYG Experience

34. Good WYSIWYG Experience
LinkIt
WYSIWYG Template
Editor File
Modules for CKEditor

35. Good WYSIWYG Experience
Front-end styles in the WYSIWYG editor

36. • Simplify the publishing workflow
• Create Views to facilitate publishing and
translating content
Publish and Translate Content

37. Content Moderation
Draft
Published
Editing
Workflow
Reduce the number of steps in the
process
Use labels for transitions and states
that make sense

38. • The hardest problem in Drupal: How do I edit
this little text on the homepage?
• Use blocks and paragraphs to store chunks of
content
• Try out the layout builder!
Edit Complex Pages

39. Edit Complex Pages
Where’s the edit link?

40. Edit Complex Pages
Paragraphs Custom blocks with Inline Entity Form

41. Edit Complex Pages
Avoid marketing-type text in configuration

42. Edit Complex Pages

43. evolvingweb.ca @evolvingweb
Testing!

44. Watch a Content Editor at Work
And take notes

45. evolvingweb.ca @evolvingweb
Thinking Forward and
Beyond

46. Practise User Experience

47. Upcoming Drupal
Trainings
APR 25, ONLINE (FREE!)
What is Drupal?
MAY 7-11, PRINCETON, NJ
5 Days of Drupal 8 Training
MAY 29-30, ONLINE
Drupal 8 Advanced Site Building
JUNE 5-6, ONLINE
Drupal 8 Theming
JUNE 5-6, ONLINE
Drupal 8 Module Development
evolvingweb.ca/training
training@evolvingweb.ca

48. evolvingweb.ca @evolvingweb
Thank you!