Building a Great User Experience for Content Editors in Drupal 8
2 likesâą661 views
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.
Building a Great User Experience for Content Editors in Drupal 8
- 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 âą ConïŹgurable 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 ïŹeld types DEVELOPMENT
- 9. Isnât there a module for that? Admin UI Initiative Material Admin Theme
- 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 DeïŹne 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 DeïŹne 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 & DeïŹnition
- 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 workïŹows? âą 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 workïŹow to get content approved
- 19. Goals, Tasks, and Architecture
- 21. âą Unclutter the admin UI by making granular roles and limiting permissions âą Pick meaningful content type and ïŹeld 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 ïŹgure out what to enter in each ïŹeld Edit Content
- 23. Edit Content Use the right ïŹeld widget for the job
- 24. Edit Content Entity Browser http://drupal.org/project/entity_browser and File Entity Browser http://drupal.org/project/ïŹle_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 ïŹelds required or provide defaults âą Order your ïŹelds consistently âą Enable previews âą Consider where content will be displayed (different devices, view modes, media)
- 31. âą Plan out your text formats âą ConïŹgure the right buttons for the job 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 workïŹow âą Create Views to facilitate publishing and translating content Publish and Translate Content
- 37. Content Moderation Draft Published Editing WorkïŹow 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 conïŹguration
- 44. Watch a Content Editor at Work And take notes
- 45. evolvingweb.ca @evolvingweb Thinking Forward and Beyond
- 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 [email protected]