Drupal content editing UXSergei SorokinCOO Ukraine
Overview• Problem outline and a bit of history• Basic principles of improving backend UX• Real-life examples, tips and mod...
Drupal admin interface over the yearsDrupal 4.7 Drupal 5
Drupal admin interface over the yearsDefault Drupal 6 in GarlandthemeDrupal 6 in Bartik theme withadmin_menu module
First D6 themes & modules aimed atimproving admin interface• rubik• rootcandy• admin• admin_menu• vertical_tabs• etc…
D7UX initiativeD7UX principles:• Make the most frequent tasks easy andless frequent tasks achievable.• Design for the 80%•...
D7UX results• Updated andsimplified structure• “Seven” theme withoptional overlay• Admin toolbar withshortcuts• Dashboard•...
D7UX was a hugeimprovementTo push it further, let’s identify theissue first
Problem outline• Drupal admin interface, concepts andentities can be confusing even forbeginner developers• Clients who ar...
How to make client’s dailyinteractions with your producteasier?
Basic principles• Simplify by reducing all that is notnecessary• Dont make user guess• Ensure consistent logical and inter...
Real-life examples, tipsand modules
Navigation• By default user is redirected to /user pagewhich is usually useless for editors• Redirect user to the page whe...
Dashboard & content listDashboard• Default D7 dashboard• https://drupal.org/project/workbenchContent list• https://drupal....
Total control https://drupal.org/project/total_control
Content: easy improvements• Give meaningful names and descriptions to contenttypes, their fields and other entities• Clone...
Content: reduce with permissionsLeave only necessarynode options by:• Limiting permissions• https://drupal.org/project/ove...
Content: WYSIWYG• Don’t make user think about input format, set it byrole with: https://drupal.org/project/better_formats•...
Content: media filesAllow user to manage and reuse uploaded files:• https://drupal.org/project/media_browser_plus• https:/...
Content: dealing with complex formshttps://drupal.org/project/field_group https://drupal.org/project/conditional_fields
Content: custom design
Views & panels• Views built-in feature that is often overlooked: addcontextual links in all listings on the site to allowq...
Minimizing cost of error• Enable revisions by default and usehttp://drupal.org/project/diff to let editors comparethem and...
SparkDistribution for D7and part of core in D8
Spark• In-place editing• D&D layout tools• Enhanced contentcreation• Dashboardimprovements• Mobile (responsive)administrat...
SparkIn-place editing Responsive layout builder
Spark is anothergreat step forward
Conclusion• Drupal admin interface often can be complex forend users• Constant improvement is evident (though it couldbe f...
Recommended readingThe Design of Everyday Thingsby Donald A. NormanDont Make Me Thinkby Steve Krug
Thank you!Questions?
Upcoming SlideShare
Loading in …5
×

Drupal content editing ux

1,759 views

Published on

Published in: Technology

Drupal content editing ux

  1. 1. Drupal content editing UXSergei SorokinCOO Ukraine
  2. 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 UIimprovements• Conclusion and Q&A
  3. 3. Drupal admin interface over the yearsDrupal 4.7 Drupal 5
  4. 4. Drupal admin interface over the yearsDefault Drupal 6 in GarlandthemeDrupal 6 in Bartik theme withadmin_menu module
  5. 5. First D6 themes & modules aimed atimproving admin interface• rubik• rootcandy• admin• admin_menu• vertical_tabs• etc…
  6. 6. D7UX initiativeD7UX principles:• Make the most frequent tasks easy andless frequent tasks achievable.• Design for the 80%• Privilege the Content Creator• Make the default settings smartSite: www.d7ux.org
  7. 7. D7UX results• Updated andsimplified structure• “Seven” theme withoptional overlay• Admin toolbar withshortcuts• Dashboard• Contextual links
  8. 8. D7UX was a hugeimprovementTo push it further, let’s identify theissue first
  9. 9. Problem outline• Drupal admin interface, concepts andentities can be confusing even forbeginner developers• Clients who are using the CMS usuallydont think in the same logical patterns asdevelopers• Developers rarely pay attention to thisissue and it ends up being ignored
  10. 10. How to make client’s dailyinteractions with your producteasier?
  11. 11. Basic principles• Simplify by reducing all that is notnecessary• Dont make user guess• Ensure consistent logical and interfacepatterns• Minimize cost of user error
  12. 12. Real-life examples, tipsand modules
  13. 13. Navigation• By default user is redirected to /user pagewhich is usually useless for editors• Redirect user to the page where he/she canperform 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. 14. Dashboard & content listDashboard• Default D7 dashboard• https://drupal.org/project/workbenchContent list• https://drupal.org/project/admin_views• https://drupal.org/project/improved_admin• https://drupal.org/project/views_bulk_operations
  15. 15. Total control https://drupal.org/project/total_control
  16. 16. Content: easy improvements• Give meaningful names and descriptions to contenttypes, their fields and other entities• Clone existing nodes withhttps://drupal.org/project/node_clone• Create another node of the same content type in a rowwith https://drupal.org/project/addanother• Schedule automatic publishing and unpublishing ofnodes https://drupal.org/project/scheduler• Add https://drupal.org/project/linkit to provide easyinterface for internal and external linking to nodes, users,managed files, etc…
  17. 17. Content: reduce with permissionsLeave only necessarynode options by:• Limiting permissions• https://drupal.org/project/override_node_option
  18. 18. Content: WYSIWYG• Don’t make user think about input format, set it byrole with: https://drupal.org/project/better_formats• Integrate it with file system• Remove unused buttons in editor
  19. 19. Content: media filesAllow 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 fileuploadsThese modules can be overwhelming for editors,so try to disable unused features and customizeper needs.
  20. 20. Content: dealing with complex formshttps://drupal.org/project/field_group https://drupal.org/project/conditional_fields
  21. 21. Content: custom design
  22. 22. Views & panels• Views built-in feature that is often overlooked: addcontextual links in all listings on the site to allowquick access to node editing or deletion.• Allow editors to edit headers and footers of Viewswithout giving access to everything else withhttps://drupal.org/project/views_ui_basic• Easily rearrange view items withhttps://drupal.org/project/draggableviews• If you use panels, you can override panel contentper node with https://drupal.org/project/panelizer
  23. 23. Minimizing cost of error• Enable revisions by default and usehttp://drupal.org/project/diff to let editors comparethem 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 tocreate specific validation rules for fields• Install https://drupal.org/project/clientside_validationto send feedback to user immediately without havingto submit the form.
  24. 24. SparkDistribution for D7and part of core in D8
  25. 25. Spark• In-place editing• D&D layout tools• Enhanced contentcreation• Dashboardimprovements• Mobile (responsive)administration• CK Editor in core• And much morehttps://drupal.org/project/spark
  26. 26. SparkIn-place editing Responsive layout builder
  27. 27. Spark is anothergreat step forward
  28. 28. Conclusion• Drupal admin interface often can be complex forend users• Constant improvement is evident (though it couldbe faster)• Usability of Drupal and your project in particulardepends on you: don’t overlook the issue, testbackend usability, improve it, share it bycontributing• It’s a good investment that will enrich your projectsand make your clients a bit happier
  29. 29. Recommended readingThe Design of Everyday Thingsby Donald A. NormanDont Make Me Thinkby Steve Krug
  30. 30. Thank you!Questions?

×