Drupal content editing ux
- 1. Drupal content editing UX Sergei Sorokin COO Ukraine
- 2. Overview • Problem outline and a bit of history • Basic principles of improving backend UX • Real-life examples, tips and modules • Spark project and Drupal 8 UI improvements • Conclusion and Q&A
- 3. Drupal admin interface over the years Drupal 4.7 Drupal 5
- 4. Drupal admin interface over the years Default Drupal 6 in Garland theme Drupal 6 in Bartik theme with admin_menu module
- 5. First D6 themes & modules aimed at improving admin interface • rubik • rootcandy • admin • admin_menu • vertical_tabs • etc…
- 6. D7UX initiative D7UX principles: • Make the most frequent tasks easy and less frequent tasks achievable. • Design for the 80% • Privilege the Content Creator • Make the default settings smart Site: www.d7ux.org
- 7. D7UX results • Updated and simplified structure • “Seven” theme with optional overlay • Admin toolbar with shortcuts • Dashboard • Contextual links
- 8. D7UX was a huge improvement To push it further, let’s identify the issue first
- 9. Problem outline • Drupal admin interface, concepts and entities can be confusing even for beginner developers • Clients who are using the CMS usually don't think in the same logical patterns as developers • Developers rarely pay attention to this issue and it ends up being ignored
- 10. How to make client’s daily interactions with your product easier?
- 11. Basic principles • Simplify by reducing all that is not necessary • Don't make user guess • Ensure consistent logical and interface patterns • Minimize cost of user error
- 12. Real-life examples, tips and modules
- 13. Navigation • By default user is redirected to /user page which is usually useless for editors • Redirect user to the page where he/she can perform their common actions • https://drupal.org/project/login_redirect • https://drupal.org/project/rules • Logging in is not the only use case • Remove unused menu items with permissons • https://drupal.org/project/shortcutperrole
- 14. Dashboard & content list Dashboard • Default D7 dashboard • https://drupal.org/project/workbench Content list • https://drupal.org/project/admin_views • https://drupal.org/project/improved_admin • https://drupal.org/project/views_bulk_operations
- 16. Content: easy improvements • Give meaningful names and descriptions to content types, their fields and other entities • Clone existing nodes with https://drupal.org/project/node_clone • Create another node of the same content type in a row with https://drupal.org/project/addanother • Schedule automatic publishing and unpublishing of nodes https://drupal.org/project/scheduler • Add https://drupal.org/project/linkit to provide easy interface for internal and external linking to nodes, users, managed files, etc…
- 17. Content: reduce with permissions Leave only necessary node options by: • Limiting permissions • https://drupal.org/project/ override_node_option
- 18. Content: WYSIWYG • Don’t make user think about input format, set it by role with: https://drupal.org/project/better_formats • Integrate it with file system • Remove unused buttons in editor
- 19. Content: media files Allow user to manage and reuse uploaded files: • https://drupal.org/project/media_browser_plus • https://drupal.org/project/imce • https://drupal.org/project/filedepot • http://drupal.org/project/plupload for multiple file uploads These modules can be overwhelming for editors, so try to disable unused features and customize per needs.
- 20. Content: dealing with complex forms https://drupal.org/project/field_group https://drupal.org/project/conditional_fields
- 22. Views & panels • Views built-in feature that is often overlooked: add contextual links in all listings on the site to allow quick access to node editing or deletion. • Allow editors to edit headers and footers of Views without giving access to everything else with https://drupal.org/project/views_ui_basic • Easily rearrange view items with https://drupal.org/project/draggableviews • If you use panels, you can override panel content per node with https://drupal.org/project/panelizer
- 23. Minimizing cost of error • Enable revisions by default and use http://drupal.org/project/diff to let editors compare them and easily roll back • Make sure you have (at least) daily backups set up. Not really an UI advice, but it’s always relevant • Use https://drupal.org/project/field_validation to create specific validation rules for fields • Install https://drupal.org/project/clientside_validation to send feedback to user immediately without having to submit the form.
- 24. Spark Distribution for D7 and part of core in D8
- 25. Spark • In-place editing • D&D layout tools • Enhanced content creation • Dashboard improvements • Mobile (responsive) administration • CK Editor in core • And much more https://drupal.org/project/spark
- 26. Spark In-place editing Responsive layout builder
- 27. Spark is another great step forward
- 28. Conclusion • Drupal admin interface often can be complex for end users • Constant improvement is evident (though it could be faster) • Usability of Drupal and your project in particular depends on you: don’t overlook the issue, test backend usability, improve it, share it by contributing • It’s a good investment that will enrich your projects and make your clients a bit happier
- 29. Recommended reading The Design of Everyday Things by Donald A. Norman Don't Make Me Think by Steve Krug