Return to site

Wow!!! vs. Aha...The Webform Module's User Experience

September 11, 2017

Providing a fancy and slick user interface is the quickest way to wow and sell software. Drupal doesn’t provide you with a slick wowing user interface, but once you start to understand Drupal's site builder and developer experience, you’ll find yourself having continual "Aha" moments.

Wow and Sell vs. Understand and Aha...

Proprietary software needs to sell something. Open Source software needs to do something.

Proprietary Content Management Systems (CMS) and online form builders have a lot of immediate wow, including snazzy marketing and very fancy user interfaces. I admit it: I like wowing people and the Webform module's user experience with video tutorials and it's very slick-looking elements like signatures and likert are meant to impress you. The Webform module's "Aha" moment happens when you grasp the software's full potential. Suddenly you understand the Drupal mantras, "There is a module for that; There is a hook for this; Anything and everything is customizable." Aha indeed.

Wow is cool. Aha promotes understanding and growth.

The Webform User Interface/Experience

Circling back to Webform module's user interface and experience, there’s a limit to how much wow I can build. On the flip side, there is unlimited aha available. The latest releases of the Webform module includes a significantly improved UI with Ajax, element previews, tabbed dialogs, and more. The Webform module may never have a slick WYSIWYG drag-n-drop user interface... I’m okay with that. I’d like to share with you the current state of the Webform UI/UX and talk about some key concepts.

The current user interface for the Webform module leverages existing UX patterns from Drupal core. For example, using a modal dialog for creating new elements was inspired by the Blocks UI. The Webform module also includes support for core's experiment system tray. My goal is to provide "fluid user experience" that is logical and works for all users while providing an incredible amount of configurability and flexibility.

Here is latest and relatively final Webform UI/UX.

It’s not how you build the webform but what you do with the webform submission.

The actual form builder is not the most important feature of the Webform module. Without a doubt, generating form and submission handling is by far the most important aspect of the Webform module. The 1000's of end-users filling out and submitting forms are more important than the one person building the form. A webform submission, also known as a lead in the land of CRMs, is why organizations build websites; to connect with new and existing customers.

We need to build awesome forms that encourage users to complete the form and create submissions which we can routed to our CRMs, internal, and external applications.

So what is both awesome and aha worthy about Webforms?

Webforms are just an extension of Drupal's Form API. Webform elements are literally and programmatically wrappers around Drupal's form elements. Drupal's Form API is a mature subsystem that has excellent accessibility, it protects and validates against malicious submissions, and is very easy to alter and customize.

What is next for Webform 8.x-5.x?

The general UI/UX for the Webform is close to done but there are plenty of little things that still need polishing, including inline help and settings management.

I’m almost ready, albeit nervous, to tag a release candidate. Why nervous? Because I’m continually packing new features into every monthly release. Sadly, every beta release also includes a few too many regressions and bugs. Prior to tagging an RC, a full audit of the Webform module's code base and functionality so that @todo are fully accounted for and API are relatively solidified would serve all parties well.

Please join the Drupal community and start helping out with the Webform module's issue queue and ask your questions at Drupal Answers.

Conclusions

The Webform UI/UX leverages Drupal 8 UI/UX design pattern and contains a lot of wow potential, however our focus needs to be on the more important aha moments. Building awesome forms and applications that connect with our customers and constituents is where our aha moments lie, and it's these aha moments that are among our biggest strengths.