Uploaded bySuzanne Dergacheva
Building a Great User Experience for Content Editors in Drupal 8
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.
More Related Content
Similar to Building a Great User Experience for Content Editors in Drupal 8
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Building a Great User Experience for Content Editors in Drupal 8
- 1. evolvingweb.ca @evolvingweb Building aGreat User Experience for Content Editors SUZANNE DERGACHEVA
- 2. • Co-founded EvolvingWeb in 2007 • Experienced Drupal themer, developer, project lead • Loves teaching DrupalSuzanne Dergacheva CO-FOUNDER AND FRONT-END LEAD @suzanne_kennedy
- 5.
- 6. Site Admin Experience Site Building Experience Content Editing Experience Whatis the Content Editor Experience?
- 7. Content Editor isUX hard Complex information architecture = Complex user experience
- 8. • Manage formdisplay • 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 amodule for that? Admin UI Initiative Material Admin Theme
- 10.
- 11. When to DoContent Editor UX? TRAINING & QACONFIG & DEVELOPMENTSTRATEGY & DEFINITION Now NowNow Now Now
- 12. When to DoContent 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 DoContent 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.
- 15. What Do ContentEditors Want?
- 16. What Do ContentEditors 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, andArchitecture
- 20.
- 21. • Unclutter theadmin 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 upyour edit forms with the Manage Form Display tab • Help users figure out what to enter in each field Edit Content
- 23. Edit Content Use theright field widget for the job
- 24. Edit Content Entity Browserhttp://drupal.org/project/entity_browser and File Entity Browser http://drupal.org/project/file_browser
- 25. Edit Content Hide thecruft.
- 26. Edit Content Add helptext, but not too much. Specify image resolution.
- 27. • Users shouldknow what to expect when they publish content • Does that mean a pixel-perfect WYSIWYG experience? Edit Content with No Suprises
- 28. Edit Content withNo Surprises An example from Netlify
- 29. Edit Content withNo Surprises Proposed UI from Bryan Hirsch for mass.gov project https://medium.com/@bryanhirsch/backend-live-preview-fd9179132b1f
- 30. Edit Content withNo 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 outyour text formats • Configure the right buttons for the job Good WYSIWYG experience
- 32.
- 33.
- 34. Good WYSIWYG Experience LinkIt WYSIWYGTemplate Editor File Modules for CKEditor
- 35. Good WYSIWYG Experience Front-endstyles in the WYSIWYG editor
- 36. • Simplify thepublishing workflow • Create Views to facilitate publishing and translating content Publish and Translate Content
- 37. Content Moderation Draft Published Editing Workflow Reduce thenumber of steps in the process Use labels for transitions and states that make sense
- 38. • The hardestproblem 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’sthe edit link?
- 40. Edit Complex Pages ParagraphsCustom blocks with Inline Entity Form
- 41. Edit Complex Pages Avoidmarketing-type text in configuration
- 42.
- 43.
- 44. Watch a ContentEditor at Work And take notes
- 45.
- 46.
- 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.