Your SlideShare is downloading. ×
Drupal content editing ux
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Drupal content editing ux


Published on

Published in: Technology

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Drupal content editing UXSergei SorokinCOO 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 UIimprovements• Conclusion and Q&A
  • 3. Drupal admin interface over the yearsDrupal 4.7 Drupal 5
  • 4. Drupal admin interface over the yearsDefault Drupal 6 in GarlandthemeDrupal 6 in Bartik theme withadmin_menu module
  • 5. First D6 themes & modules aimed atimproving admin interface• rubik• rootcandy• admin• admin_menu• vertical_tabs• etc…
  • 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:
  • 7. D7UX results• Updated andsimplified structure• “Seven” theme withoptional overlay• Admin toolbar withshortcuts• Dashboard• Contextual links
  • 8. D7UX was a hugeimprovementTo push it further, let’s identify theissue first
  • 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. How to make client’s dailyinteractions with your producteasier?
  • 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. Real-life examples, tipsand modules
  • 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••• Logging in is not the only use case• Remove unused menu items with permissons•
  • 14. Dashboard & content listDashboard• Default D7 dashboard• list•••
  • 15. Total control
  • 16. Content: easy improvements• Give meaningful names and descriptions to contenttypes, their fields and other entities• Clone existing nodes with• Create another node of the same content type in a rowwith• Schedule automatic publishing and unpublishing ofnodes• Add to provide easyinterface for internal and external linking to nodes, users,managed files, etc…
  • 17. Content: reduce with permissionsLeave only necessarynode options by:• Limiting permissions•
  • 18. Content: WYSIWYG• Don’t make user think about input format, set it byrole with:• Integrate it with file system• Remove unused buttons in editor
  • 19. Content: media filesAllow user to manage and reuse uploaded files:•••• for multiple fileuploadsThese modules can be overwhelming for editors,so try to disable unused features and customizeper needs.
  • 20. Content: dealing with complex forms
  • 21. Content: custom design
  • 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 with• Easily rearrange view items with• If you use panels, you can override panel contentper node with
  • 23. Minimizing cost of error• Enable revisions by default and use 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 tocreate specific validation rules for fields• Install send feedback to user immediately without havingto submit the form.
  • 24. SparkDistribution for D7and part of core in D8
  • 25. Spark• In-place editing• D&D layout tools• Enhanced contentcreation• Dashboardimprovements• Mobile (responsive)administration• CK Editor in core• And much more
  • 26. SparkIn-place editing Responsive layout builder
  • 27. Spark is anothergreat step forward
  • 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. Recommended readingThe Design of Everyday Thingsby Donald A. NormanDont Make Me Thinkby Steve Krug
  • 30. Thank you!Questions?