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?