Improve editing experience of Drupal 8

For Drupal Developer and UX Design Professionals.

You are welcome to join us to make this improvement happen. To contribute, you can comment or create a patch in this Drupal.org issue. Thanks in advance!

Improve editing experience of Drupal 8

Drupal is a content management software which is used to build many important websites such as White House and Greenpeace Greenwire. In a usability study performed by Open Social, a critical usability issue in Drupal default interface was discovered. In this blog post, this usability problem is explained and a solution is proposed. Furthermore, the proposed solution can also be used as a solution to improve the general editing experience in Drupal when a confirmation step is required.

A critical usability issue

In Drupal, when users want to change their email or password, the current password is required in order to apply the changes for safety reasons. In the default Drupal interface, current password field is placed in the same page as the email and new passwords fields.

Improve editing experience Drupal 8

It seems logical that if users scan the page from top to bottom, they will find this field easily. But reality tells us otherwise. 

This interface has been tested by several users who have no experience with Drupal. When asked to change their password, everyone missed the current password field and they all struggled to figure out what went wrong when they try to save the new password.

What went wrong

The problem becomes clearer if we look at it as a process instead of a page. 

Take editing password for example, a process an user goes through is likely to be:

  1. Go to the editing page
  2. Change password
  3. Save the change 

In this process, ‘new password’ and ‘current password’ fields are actually relevant to different steps. ‘New password’ is relevant to step 2 of making the change, while ‘Current password’ is relevant to step 3 when saving the change. Therefore when changing password, the entering current password is not an option users will be looking for.

Solution to fix it

A solution to solve this problem is separating the current password field from the fields users need to change and put them in the steps they belong to.  

This prototype link shows how it works: http://prototype.goalgorilla.com/drupalux/currentpassword/#g=1&p=edit_account

On this editing page, the current password field is removed. Users can focus on editing the email address or password. Once users click the save button, a lightbox interface appears asking users to confirm their change by entering the current password. 

This solution is supported by the Drupal UX group https://twitter.com/DrupalUx/status/869940672840830976.

Interaction design update editing improvement
Interaction Design

A general solution for editing experience

In a broader perspective, this solution can be applied to the Drupal editing experience in general.

Besides as a security measure, the same interaction can also used to prevent human errors. Below are two examples to show how it can work (thanks to Daniël Smidt for the inspiration):

Example Hubspot general solution for editing experience
Example Hubspot
Example Mailchimp general solution for editing experience
Example Mailchimp

Let's make this improvement happen

Currently, there are more than 1 million websites built using Drupal. The impact of solving this usability issue in Drupal can’t be bigger. 

You are welcome to join us to make this improvement happen.  To contribute, you can comment or create patch in this Drupal.org issue

 

Interaction Designer
Xinyu Ma

Check out our other news articles

Click for our award winning clients