Building a Great User Experience for Content Editors in Drupal 8
2 likes659 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.
Ad
More Related Content
What's hot (20)
Similar to Building a Great User Experience for Content Editors in Drupal 8 (20)
![[HKDUG] #20160626 - HKOSCon 2015 - Website DIY with Drupal 8](https://cdn.slidesharecdn.com/ss_thumbnails/hkdug20160626-hkoscon2015-websitediywithdrupal8-150625092111-lva1-app6891-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Suzanne Dergacheva (20)
Ad
Recently uploaded (20)
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 • 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
- 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
- 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
- 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
- 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]