drupal content editing ux
DESCRIPTION
TRANSCRIPT
Drupal content editing UX
Sergei SorokinCOO Ukraine
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
Drupal admin interface over the years
Drupal 4.7 Drupal 5
Drupal admin interface over the years
Default Drupal 6 in Garland theme Drupal 6 in Bartik theme with admin_menu module
First D6 themes & modules aimed at improving admin interface
• rubik
• rootcandy
• admin
• admin_menu
• vertical_tabs
• etc…
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
D7UX results
• Updated and simplified structure
• “Seven” theme with optional overlay
• Admin toolbar with shortcuts
• Dashboard• Contextual links
D7UX was a huge improvement
To push it further, let’s identify the issue first
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
How to make client’s daily interactions with your product easier?
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
Real-life examples, tips
and modules
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
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
Total control https://drupal.org/project/total_control
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…
Content: reduce with permissions
Leave only necessary node options by:• Limiting permissions• https://drupal.org/project/
override_node_option
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
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.
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: 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
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.
Spark
Distribution for D7
and part of core in D8
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
Spark
In-place editing Responsive layout builder
Spark is anothergreat step forward
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
Recommended reading
The Design of Everyday Things
by Donald A. NormanDon't Make Me Think
by Steve Krug
Thank you!
Questions?