Progressive Enhancements: Improve data entry and user interactions

Websites can do far more than just present information. Many business applications have moved onto the web, and with a CMS like Drupal in the back end, your website itself can be an integral part of your business.

Drupal in particular is a great platform for building business applications. Here are a few scenarios that we've implemented:

• A yacht club manages its moorage database, a guestbook kiosk, waiting lists, events, regulatory compliance for electrical inspections and insurance documentation for its members
• Staff directories, with staff being able to manage their personal information and get associated with multiple locations
• E-Commerce and Membership sites, managing wholesale customers with multiple buyer accounts buying for multiple customer locations
• Checklists that result in a report that may be shared with customers, with details for each item
• An application to help insurance brokers select the correct carrier from a database of thousands
• Website calculators to calculate greenhouse emissions

So many of these can be built with normal Drupal and its thousands of contributed modules. But sometimes that results in a confusing user experience, and it's time to get creative to make your application easier to use.

Problem 1 -- Select the right term

For one client, a simple hierarchical selection was not going to do the trick. This client has a database of thousands of insurance carriers they have built up over decades, with specific contact and submission instructions for each one. The problem is, picking the right carrier is not simple. Many carriers have similar sounding names. Some have regional offices to direct requests to. Others are handled by particular brokers. Still others have very specific submission steps.

Looking over the options for selecting taxonomy terms, there are several different modules to help show parent/child relationships, using multiple select widgets, searching auto-completes, tree widgets, and others -- but none show any additional information related to each term.

We made a custom widget to solve this problem. You start typing in a search box and get an auto-completed list of carriers containing matching words.

Once you have selected a term, a box shows up with the term's description, showing information for users to determine whether they selected the right carrier.

With this search, you might find a "parent" carrier, which then loads a second dropdown showing its children. Or, you might find a "child" carrier which also loads the parent -- in either case, you can see the help description for both.

Problem 2 -- Complete a checklist

We love checklists. When we launch a new site, we run through a checklist with over 100 specific items to check. Most of these are shared across all sites, but as part of our process, we will add specific items for each site as well as remove others that are not relevant.

Having an easy way to check items off a list, optionally adding notes, is a game-changer for us. We can now easily create a new checklist for each of our new monthly products, and use that to build a report, train a new user, or ensure that all steps are complete.

Solution - Create custom Drupal fields and widgets

For both of these problems, we decided that "traditional" approaches of using stock field types and widgets was not sufficient. Using one of the newer front-end toolkits like Vue.js or React, we can create an entirely new user experience that hugely streamlines data entry, and improves the quality of the end result.

We chose Vue.js to build these widgets as progressive enhancements, designing the user experience entirely within the browser. They then load and save data back to Drupal using Drupal's built-in JSON:API interface, or as part of Drupal's regular form posting.

Make your forms better!

Web applications use forms to collect data from users, and there's a ton of different elements available to choose from when building out a form. Progressive Enhancements can do even more to improve the user experience, pulling context-aware information from wherever you can think of, to help users fill them out correctly the first time.

If you need a custom widget, or calculator, or other form improvements for your site, reach out!