Firm up that Backend: Easy Exercises for a Usable Admin Interface
The Quick Takeaway
In this post, we cover:
- How to customize your workflow
- Trim down options to get to what's essential
- Tips to update and revert content
- WYSIWYG configuration
- Customizing your dashboard
Want to learn more? Get in touch today, and let's chat. A streamlined admin user interface is essential for your content editors and for an efficient content workflow.
The first time that I ever worked with Drupal was actually as a content editor. I have never seen, heard of, or interacted with this CMS. And to be honest, I hated it. I dreaded having to work in it at all. Everything in the administrative user interface that I, as a content editor, was working with was left to the Drupal defaults. Even when developers take time to modify the administrative interface, often they have difficulties empathizing with first time users, to create something better for users of all skill levels.
As a Drupal developer, I encourage clients to spend a little time and attention on the administrative workflow and customizing it to meet their needs. Even the smallest tweaks can make a big difference in giving content administrators, who have never worked with Drupal before, confidences to do their job without assistance. This also means that current content administrators need to spend less time training and hand-holding other content creators as they start working within the Drupal system. Here are some recommendations on how you can tighten-up the administrative experience, particularly on Drupal 7 websites.
Warm Ups
These warm ups are really basic, but really effective things that you can do that can make a big difference to content creators.
- Use the administration menu
- Dropdowns allow users to easily and quickly get through the system.
- Add help text on fields, and descriptions on content types, taxonomies, and contexts. Most importantly be consistent.
- Check that structure and naming make sense to people who don’t know Drupal
Exercise 1: Customizing the Workflow
It is important to do an intake with the client about their internal business workflow, and once that is done draft a workflow within Drupal that has custom permissions and access based off of that. This would include determining the roles required for their business, and any custom permissions those roles need.
By setting specific roles and permissions, content administrators can focus on only the tasks that they need to complete. In addition, removing functionality that we do not want specific roles to have allows us to prevent unintentional “breaking” of the site, or access to privileged content/functionality.
- Taxonomy Permissions: Vocabulary Permissions per Role
- Field Permissions: Field Permissions
- Content Types: Content Access
After customizing the permissions for each roles, and therefor eliminating unnecessary functionality for each role, content administrators can focus on their specific tasks.
You can easily test out all your new permissions is by using Masquerade, which allows you to quickly switch between users.
Exercise 2: Admin Views with Views Bulk Operations
Administration Views overrides the default content, users and taxonomy system pages using Views Bulk Operations (VBO). In D7, the default content page includes the option to filter by content type and status. When VBO is added to the mix, content administrators can search for the title, filter by type, author, status and vocabulary. This not only gives a more robust search and filter functionality on these pages, but also adds functionality to bulk update content values.
For Drupal 8, the content admin page is build with Views and a junior VBO that made it into core. It can, and should, be customized for the particular needs of the site. However, it no longer requires additional modules.
Exercise 3: Custom Entity Ordering
There are many use cases where entities need to be able to be ordered arbitrarily. My preference for these instances is to use Nodequeue because it has an easy drag and drop interface, it supports translation and it allows for separate permission between editing and ordering the content.
This easy drag and drop interface allows content administrators to define custom ordering for content.
There are some occasions where you not only need custom ordering of entities, but also to create hierarchy between them. In this case, I recommend DraggableViews this will give you the drag and drop interface that I find convenient from Nodequeue, but will also allow the creation of parent-child relationship between nodes.
Exercise 4: Grouping similar fields
I recommend using Field Group to clean up the edit page. Here you can group common fields together to make large content types into manageable chunks of fields. For example: having all file and image fields in a table labelled “Media” or all taxonomy reference fields in a tab labelled “Related Content.”
Before and after: By separating the fields into groups of vertical tabs, content creators can focus on one aspect of the content at a time and easily work through even the largest content types.
Exercise 5: Managing Field Dependencies
Conditional Fields allows you to show and hide fields based on the values of other fields. This ability to hide and display fields, allows you to keep the edit page from becoming unnecessarily cumbersome. It is ideal for situations in which you only need certain parts of the content sometimes. In these situations, it also helps to keep the website unbreakable.
Before: By default the content is not Featured and therefore there is no area to add a Featured Image.After: When the content is marked as Featured, a field for Featured Image appears.
For example, if you have a piece of content that allows for an image to appear when the content is Featured, then you can optionally show an image field only when the content is already marked as Featured.
Exercise 6: Cropping Images
To give content creators full control over how image styles and the Drupal system manipulate photos I like to add in Manual Crop. This allows content creators to crop images in the Drupal system after uploading them to a file field. It will maintain the aspect ratio set by the image styles, which helps to keep the design bulletproof. However, it means that there are not arbitrary decisions being made about the composition and cropping of the final imagery.
Exercise 7: Trim Down the Options
Override Node Options allows permissions to be set to each field within the Authoring information and Publishing options field sets on the node form. This means that if users don’t have permissions they will not see some of the default Drupal options like “Promoted to front page.” Most Drupal website do not use these pieces of default functionality and they can be distracting to content creators.
Exercise 8: User Friendly Select Lists
Chosen is a jQuery plugin that allows select lists to be more user friendly. Instead of just a listing of clickable items, you can search through the list and easily add and remove multiple items from lists that allow for multiple values. This is particularly useful on select lists where you have a lot of options.
Exercise 9: Character Counts
Word counts on text fields are really effective ways to keep content from breaking the design. To help with character counts (specifically, with relaying them to content creators) Maxlength is a very valuable option. It shows a helpful countdown of how many characters are left within the text field, and it even color codes it.
Exercise 10: Updating and Reverting Content
Diff along with Workbench Moderation allow users to easily change between different revisions of their content. Workbench Moderation allows editors to save draft revisions of content without publishing them provides for basic content review workflows before content goes live. When reviewing the differences between revisions Diff illustrates what changes were made to the content.
Exercise 11: Configuring the WYSIWYG
The majority of these options aren’t even included in the allowed HTML tags for Filtered Text. This means that developers were not expecting them to be used, and should a content creator attempt to use them the content would not appear formatted correctly on the front-end of the website. Instead of expecting content editor to ignore the cornucopia of options before them, the unnecessary WYSIWYG options should be eliminated.
Before: By default the WYSIWYG comes with a lot of options.After: Once this is complete all content creators should be left with are the pieces of functionality they are intended to use.
This is mostly unnecessary in D8, since the defaults there are far more logical and minimalist.