Loading...

Drupal 8 Admin User Experience

Drupal 8 Admin User Experience

Do you remember the first time you logged in and fumbled around the Drupal admin UI? It's no secret that the Drupal 8 Admin User Experience can be overwhelming, frustrating and inefficient if the interface is not leveraged to its fullest potential. When evaluating different CMS’s during the discovery period, it’s not uncommon to have a client request WordPress for the sole reason that the admin user interface looks better out of the box.

Drupal 8 has made great strides to improve its admin interface; it is becoming evident that UX/UI has become a real priority for Drupal 8. The admin is responsive out of the box, a WYSIWYG is included in Core, and there have been recent UX/UI improvements to the status report page. New features are being contributed by the community and modules such as the Media Module are making their way into Drupal Core to improve image and other media handling.

Prioritize Admin Theme Customization

These recent improvements do not mean that you should neglect customizing the admin theme for your admin users. As the core functionality of the site is being built, it is easy to push off customizing the administrative theme and even let it fall off the radar completely. However, we need to place customizing the Drupal admin experience for the content administrator as a priority. The admin users of the site are working in the backend every day as part of their jobs.

Improvements for Drupal 8 Admin User Experience

Luckily, there are a few simple improvements we can (and should) do as developers to polish the Drupal 8 Admin User Experience, make content creation more efficient, and help rid Drupal of any negative admin UI reputation.  

  1. Pick an admin theme. One of the easiest and immediately noticeable things you can do is use a theme that has been contributed by the Drupal community. The Adminimal theme is the most popular. It simplifies the admin theme to allow users to focus on creating content.
  2. Install Admin Toolbar. The Admin Toolbar module transforms the admin menu into a dropdown menu. Not only does this reduce clicks for content administrators, but it speeds up site building. This should be one of the initial modules installed on a site.  If you have installed the Adminimal theme, you can also install the Adminimal Admin Toolbar.
  3. Customize your admin theme. First, create a module and define a library with CSS that you would like to use in your admin theme. The hook hook_page_attachements() can be used to add the library to the admin theme. Adding some branding colors, making spacing adjustments, or styling your Paragraph fields can make a huge difference.
/**
 * Implements hook_page_attachments().
 */
function your_module_page_attachments(array &$attachments) {
  $theme = \Drupal::theme()->getActiveTheme()->getName();
  if ($theme == 'your_admin_theme_name') {
    $attachments['#attached']['library'][] = 'your_module/your_libarary_name';
  }
}
  1. Add and group menu items. The Administration menu is like any other menu in Drupal. Links can be added and menu items can easily be grouped differently by dragging and dropping the menu items.

For example, if we have a sponsor content type with multiple sponsor taxonomy vocabularies, and reports from a custom module for sponsor impressions. We will start with creating a new menu item located at Content --> Sponsor Content Listing. This will link to /admin/content?type=sponsor to provide a pre-filtered content listing of only sponsors. We can then make other child menu items that place all sponsorship related content administration in one place. Items include the link to add a new sponsor, links to the sponsor related vocabularies, and a way to access the sponsor reporting.

Drupal 8 Admin User Experience

  1. Add contextual filters and columns to content listing views. We often add new columns in the admin content listings along with a contextual filter to make that field filterable. We might have an external ID field on all content types that correspond to the ID in an external AMS. Allowing the administrator to search for content with their external ID makes them much more efficient at finding content in Drupal.
  2. Review permissions. It is important to narrow down what an admin user has available to them in the backend. Limiting their permissions helps them focus on creating content by removing distracting menu items.
  3. Enable the Inline Forms Error module. The Inline Forms Error Module is an experimental module; however, it is accomplishing a number of important things. It increases usability and accessibility by making the forms WCAG 2.0 AA compliant. It adds clearer messaging to errors below the field and links to those errors at the top of the page.

Drupal 8 Admin User Experience

Our team is excited at the adoption of Drupal 8 and the positive feedback we’ve been receiving from our clients. If you have any questions about improving the Drupal 8 admin experience, our team is here to help.