Drupal

Improving the user experience of a Drupal 9 back office

Published on 07 July 2022
Site builder experience
Historically, Drupal is known for being a powerful CMS, and its administrative interfaces are among the best in terms of accessibility. But because it can do so much, its administration interface can be difficult to use if it isn't at least somewhat customized. Here’s more progress in our work on the contribution experience...

Modernize the Administration Theme with Gin

Fortunately, in recent years we’ve seen the Drupal community put a focus on usability, making it a real topic of interest. Drupal 8 and 9 brought a lot of improvements, and more recently we have new default themes for the front end (Olivero) and, more importantly, for the back end (Claro) in stable releases.

Beyond the administration theme, there are many modules aimed at improving the back office user experience. We already use some of them by default, others are still under consideration.

Gin: Like Claro, but Better!

Many Drupal sites use the default administration theme, Seven.

Screenshot of a back office using the Seven theme

Does it look familiar?

The default Drupal administration theme, Seven, leaves much to be desired.

Seven is stable and reliable, but it gives the impression that it was created a long time ago—and you’d be pretty much right, as it's been around since at least Drupal 6...

Claro (now stable and the default), included in the latest version of Drupal 9, is much more up-to-date!

Screenshot of Claro

It’s already better: more readable and pleasant to look at.

However, there’s another administration theme, Gin (a subtheme of Claro), which goes even further.

It's a subtheme of Claro that brings even more elegance. Since it’s a contributed module that’s not part of Drupal core, its development moves faster than Claro’s. Gin is a widely used, stable, and well-maintained theme.

Until recently, we advised against it only in certain cases—such as for sites with many nested paragraphs, which caused display issues in the back office. But things have greatly improved.

Screenshot of the Gin theme

Gin is an administration theme that gives Drupal’s graphical interface a clean, modern look.

Simplifying the User Interface

Our administration interface is now more modern and more readable, but it can still be dense—even intimidating—for a new administrator. In fact, Drupal’s back office offers many features, but not all are necessary day-to-day or for some types of content contributors.

Declutter

If, for example, your website doesn’t use the “Promoted to front page” or “Sticky at top of lists” features, you can completely remove the Promotion options tab.

Remove unnecessary form components using the Manage form display function

Disable unnecessary fields

In the screenshot above, we’re cleaning up the Article form in Structure > Content Types > Article > Manage form display:

Also, often when it comes to articles, linking them to a menu isn’t needed; there’s usually a “latest articles” block on the homepage or an “All articles” View.

In Structure > Content Types > Article in the main tab, you can choose not to display the menu section.

Disable menu linking

In this same section, you can also choose to disable the preview if you prefer to test pages as “unpublished” first (which is usually more accurate).

Simplified input interface with Gin

And here’s the result!

Getting Rid of Comments

Today, most sites no longer need this feature.

You can remove it from view by configuring each content type one by one, but if you’re sure you don’t need it, you may as well disable it entirely.

Be careful—if you want to delete it, first check that none of your content types already include the “comments” fields.

Comments disabled

No more comments tab in the content list!

Limit Allowed Text Formats

Drupal lets you create many text formats, or to put it simply, lots of WYSIWYG (CKEDITOR) interfaces with varying levels of features.

This is great, but in some cases, it can confuse contributors, who might wonder what this area below each rich text field is for???

Choosing text formats in a wysiwyg field

If needed, you can disable this functionality to remove the choice from editors. However, this requires installing an extra module: Allowed Formats.

Once the module is installed, new display options in Structure > Content Types allow you to simplify or limit text format choices.

Choosing which text formats to display

You select the desired format in the field settings.

disabling the selection list and help field.

If needed, you can even disable the drop-down list and help field.

Simplified insert interface

And there you go, it’s much cleaner!

Help That Wasn’t (Really) Help...

The help page is just a list of help pages for each enabled module, but it’s aimed at technical users like developers—not content editors. How can you avoid false expectations?

It’s quite tricky, because at the moment, being able to access help pages in Drupal’s permissions system is linked to being able to view admin pages...

While waiting for the community to address this, if you use Gin’s specific admin bar, you can hide it with CSS.

On the module page on drupal.org, it’s noted that you can easily customize the Gin theme by adding a file named gin-custom.css in /sites/default/files.

.menu-item.menu-item__help-main {

display : none ;

}

Be sure to version this file in your Git repository (it’s not in the default .gitignore file)

And now your useless help menu is hidden!

Admin menu bar without the help field

See you soon for more tips and useful modules.

Read more articles on Drupal