Download as PDF, PPTX
Uploaded byMartin Anderson-Clutz
Simplifying your admin experience - Stanford WebCamp
The document discusses ways to simplify the Drupal administration experience for non-technical users. It recommends using descriptive labels and help text, avoiding Drupal terminology, ensuring forms are intuitive with required fields marked and sensible defaults, and providing tools for immediate feedback. Dynamic layouts like Layout Builder and Paragraphs can give editors control while reducing complexity. The site should be organized into logical systems and context should be maintained for simple tasks.
More Related Content
Similar to Simplifying your admin experience - Stanford WebCamp
![Laminated_Springs[1]. Machine design practice](https://cdn.slidesharecdn.com/ss_thumbnails/laminatedsprings1-251116120255-2a3c06fb-thumbnail.jpg?width=640&height=640&fit=bounds)
Simplifying your admin experience - Stanford WebCamp
- 1. Simplifying Your Admin Experience Make Drupaleasy for the people who use it most
- 2.
- 3. DRUPAL HAS AREPUTATION OF BEING Harder to Learn We have the power to make it easier. What follow are some ideas on how site builders and developers can help Photo: https://unsplash.com/@brucemars
- 4. Demo 1 A stockinstall of Drupal 9
- 5. Don’t Make YourEditors Think ● Every page should be self-evident, or at least self-explanatory ● Make it obvious how to perform a task ● Standard UX principles apply ○ Use a visual hierarchy ○ Consistent use of link colours Photo: https://unsplash.com/@brucemars
- 6. Be Descriptive ● Providehelp text (field descriptions) wherever possible ● Label icons, at least on hover ● Where validation constraints exist, state them in the help text ○ Including expected input patterns, e.g. Sku: XXXX-###### ○ Characters not permitted or required Photo: https://unsplash.com/@brucemars
- 7. Watch Your Language ●Avoid Drupalisms ○ Nodes, entities, media, etc ● Use familiar, relevant, and meaningful labels ○ Alerts, events, images, etc Photo: https://unsplash.com/@brucemars
- 8. Appropriate Complexity ● Haveroles configured with a simplified editor experience, for less technical users ● Balance power and configurability with simplified, single-purpose tasks ● The right answer will be different from site to site, and change over time ● Default to Basic HTML with a simpler set of WYSIWYG options Photo: https://unsplash.com/@brucemars
- 9. Reduce Friction ● Makeevery click count ○ Admin Toolbar and Coffee modules can help users get where they need to go faster ● Think about where you take a user when a task is completed ○ Login And Logout Redirect Per Role can allow you to a user somewhere useful after login Photo: https://unsplash.com/@brucemars
- 10. WYSIWYG Buttons ● Erron the side of keeping simple ● Some buttons very rarely needed: ○ Superscript ○ Subscript ○ Justify text ● Others likely should always be excluded: ○ Underline Photo: https://unsplash.com/@brucemars ● Consider adding: ○ Maximize
- 11. Staying In Context ●Provide obvious prompts on listing pages to manage the content ○ for editors only ● For simple tasks, keep in context when possible ● For more complex tasks, return when finished ● Add Content By Bundle and Display Link Plus help to add links for editors only Photo: https://unsplash.com/@brucemars
- 12.
- 13.
- 14.
- 15.
- 16. Immediate Feedback ● Providetools to give immediate feedback on any additional work that may be needed ● Accessibility: Editoria11y ● Responsive: Responsive Preview ● SEO: Real-time SEO (yoast_seo) ● Image previews: use a thumbnail image format cropped to the same proportions as when viewed full size Photo: https://unsplash.com/@brucemars
- 17. Good Form Principles formaking your forms intuitive
- 18. Field Usability ● Clearlymark required fields ● Provide sensible defaults when possible ● Avoid placeholder text ● If more than one “action” button, clearly indicate primary ○ Never a “Clear” or “Reset” button Photo: https://unsplash.com/@brucemars
- 19. Field Usability Radios, Checkboxes ●Options obvious without clicking ● Select with a single click Photo: https://unsplash.com/@brucemars Select dropdown ● Better if many options (>5) ● Add Select2 or Chosen to provide search
- 20. Remove Elements ThatAren’t Needed ● “Promote to Front” and “Sticky” for content types where these values won’t be used ● Simplify module allows base fields to be hidden from forms ● Use Field Permissions to hide fields only needed by high-level admins Photo: https://unsplash.com/@brucemars
- 21. Reference Field Usability ●Inline Entity Form to allow creating new, related content ○ Allows custom labels e.g. “Image” or “Contact” Photo: https://unsplash.com/@brucemars
- 22. Jakob’s Law ● Leverageconventions and mental models editors bring to your site ● Mimic the way similar applications work whenever possible Photo: https://unsplash.com/@brucemars Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
- 23. Specialized Fields ● Leveragefields meant to replicate common patterns of data entry ○ Address module provides a set of fields for capturing location information ■ Integration for geocoding, mapping ○ Smart Date for app-like date and time entry, including recurring events ■ Integration for calendar displays Photo: https://unsplash.com/@brucemars
- 24. Organize Your Form ●Sequence forms logically with most important fields first ○ Required fields high up too ● Visually group related fields and labels ○ Field Group module ● Single column is better Photo: https://unsplash.com/@brucemars
- 25. Consistency ● Try tohave edit forms follow the same structure as the entity view ● Try to use the same widgets and naming across different entities and bundles Photo: https://unsplash.com/@brucemars
- 26. Design for theTypical Use Case ● If an entity has numerous fields to handle edge cases, collapse them into a fieldset or tab ● If various WYSIWYG plugins are needed for edge cases, put them into a separate text format, not default ● Form Mode Control can help using different form configurations based on use case Photo: https://unsplash.com/@brucemars
- 27. When Things GoWrong ● Alerts should be descriptive enough to communicate the fix required ● Don’t show errors in a modal or popup that has to be dismissed ● Show errors inline on the form element or at least highlight the field with the error ○ Inline Form Errors module (core) puts error messages next to each element and outputs a summary Photo: https://unsplash.com/@brucemars
- 28. Demo 2 An optimizedDrupal 9 site
- 29. Dynamic Layouts Giving editorscontrol over the output structure
- 30. Layout Builder ● Core’svisual, accessible solution for laying out: ○ The default layout of a content type ○ Each node of one or more content types ● Only enable when necessary, possibly only on a single content type Photo: https://unsplash.com/@brucemars
- 31. Layout Builder ● Canexpose a bewildering list of options ○ Layout Builder Restrictions allows for a smaller list ● Possible to make bad decisions ○ Layout Builder Lock can help prevent some ● Use Layout Builder Library to allow editors to choose from predefined layouts Photo: https://unsplash.com/@brucemars
- 32. Paragraphs ● Less visual,but harder to break ● Possible to nest for complex layouts ● Can also be used for field collections ● Some use paragraphs with Layout Builder ● Paragraphs Edit gives authors a quick way to edit a single component Photo: https://unsplash.com/@brucemars
- 33. Systems Thinking Thinking aboutyour sites as a set of individual systems
- 34. Website Systems ● Oneor more content types, related views, sometimes with specific modules for additional functionality ● Examples: ○ Blog or news ○ Alerts ○ Staff directory ○ Events Calendar Photo: https://unsplash.com/@brucemars
- 35. Keeping Context ● Allowmanagement within a system ● Provide obvious prompts for managing ○ for editors only ● For simple tasks, stay in context when possible ● For more complex tasks, return when finished ● Add Content By Bundle and Display Link Plus help to add links for editors only Photo: https://unsplash.com/@brucemars
- 36.
- 37. Clone and Edit ●For complex content types, sometimes easier to clone and edit than build from scratch ○ Entity Clone module provides an operation for this Photo: https://unsplash.com/@brucemars
- 38. Managing Dates ● Wherethe “date” of content is important (e.g. news) make an explicit and obvious field ○ “Created date” is hidden and often isn’t what should be shown ● Publication Date module will automatically show the date content is actually published, but also allows a manual value Photo: https://unsplash.com/@brucemars
- 39.
- 40. Content View AsA Dashboard ● Customize the filters ● Consider making the moderated content view an attachment or block ● Content Planner module provides analytics and calendar views Photo: https://unsplash.com/@brucemars
- 41. Documentation ● Make scannable,with steps clearly indicated ● Include screen captures ● Provide in a user-friendly format ○ Not everyone can use Google Docs ● Videos can also help show a process e.g. Loom screen recorder ● Try using Tour or Help Topics for embedded help Photo: https://unsplash.com/@brucemars
- 42. Incremental Improvements ● Testas much as possible ● Eat your own dog food ● Get feedback and iterate Photo: https://unsplash.com/@brucemars
- 43. Modules to Help ●Responsive Preview ● Editoria11y ● Field Group ● Form Tips? ● Smart Date ● Add Content By Bundle ● Inline Entity Form ● Inline Errors ● Entity Browser or Media Library Photo: https://unsplash.com/@brucemars ● Tour ● Help Topics (beta)
- 44. Resources ● Laws ofUX ● Form Design Best Practices ● Content Creation by Average People ● Website Forms Usability: Top 10 Recommendations ● UX Considerations for Building an Amazing CMS | UX Booth ● How to set up a CMS that will make non-technical users happy ● User Experience: The Single Most Important Element of a Web CMS Photo: https://unsplash.com/@brucemars
- 45.