Node forms can be big. With field collections, reference fields, tags, taxonomies, location fields, and others, node forms can actually be really big. This can make an editor’s experience so frustrating that it’s a surprise she doesn’t have a heart attack when she sees how much data she needs to enter in order to save the form.

Sound familiar? Well, in this article we will share some tips and tricks that we use to simplify editors’ lives and to make the Drupal editing experience more user-friendly.

Split a form into tabs

If you have too many fields on one screen, it’s nearly impossible for an editor to remember what he entered in the beginning by the time he’s reached the end of the page. The answer to this quandary is simple: it’s time to split up the form.

It is possible to use different criteria to split forms into more manageable sections, or tabs. The criteria you’ll use will depend on the type of form and its intended purpose. Forms can be split up by field types, required vs. optional fields, priority rank, more vs. less frequently used; the list goes on. To create an even better user experience, ask the editors themselves about how they’d like forms to be organized. If they have been using a particular form for a while, it’s likely they’ll have plenty of valuable feedback regarding the best way to make the forms more intuitive and improve the efficiency of their workflow.

From a technical perspective, there are multiple ways to achieve more manageable forms. The one we use most frequently utilizes vertical tabs. An example of this is shown in the screenshot below.

Vertical tabs help editors to concentrate on one thing at a time and improves the navigation experience when working with especially large forms. A good rule of thumb is to divide the form into chunks that won’t require users to scroll through more than 1 to 1.5 pages to complete all the elements on any given section.

In addition to vertical tabs, you have the option to set up horizontal ones. This can easily be achieved with the Field Group module.

Split a form into columns

Some editors set up their workstations to use fairly wide screens. In this case, another practical approach is to have multiple columns. This solution can be used to nicely group fields together so they can be viewed side by side.

Drupal's Panels module make it easy to configure forms that use columns. Simply set up the layout for a node’s edit form and arrange the fields however you like.

Warn editors about unsaved changes

If you use JIRA or Google Docs, you’ve probably seen a warning message like the one shown below.

For a busy editor juggling multiple tasks, this friendly little pop-up can be a lifesaver. And of course… there’s a module for that.

Allow us to introduce Node Edit Protection. It helps editors to remember to save their changes before navigating away from a form. This becomes especially handy if you’ve split your forms into multiple tabs, as editors may think that simply switching to another tab automatically saves their changes.

Taxonomy tag widgets

You won’t hear any complaints from us about the standard autocomplete feature and the way it enables editors to quickly select appropriate tags. There are multiple widgets, however, that put the icing on the autocomplete cake. One of these that we particularly like is Chosen.

Another good one is Autocomplete Deluxe.

Links

Sometimes editors need some help building links in WYSIWYG or when using link fields. This is especially true when editors need to search for and quickly locate the content or URL they want to reference. Enter the Linkit module, which acts as a link-specific autocomplete function.

With the Linkit Picker module, we can even have a custom view to search for the content we would like to link to. This allows us to configure additional filters to help editors find content more effectively.

References

If you are using reference fields, there is a nifty module called References Dialog. This module allows editors to create a referenced entity while working within a node using a dialog box.

This comes in very handy, especially when your referenced entities include only a handful of fields and can fit comfortably into the dialog pop-up.

May we suggest...

For more great ideas that will have editors singing your praises, check out this presentation from DrupalCon Amsterdam 2014 about building a better backend, as well as our colleague Boyan Borisov’s presentation about improving Drupal's editorial experience.

Interested in learning even more about how FFW can create a Drupal platform with user-friendly backend functionality for you? Don't hesitate to contact us.