Forms Template Library

I think we all agree that our users have a, shall we say, less-than-easy time creating new forms. I have often thought about how to improve this process, and taking a user-centered design approach helps us to break down some of the core areas we should focus on.

The main elements of User-Centered Design (UCD) are:

1. Visibility: The ability for users to be able to tell what they are supposed to be doing at first glance. They need to be able to construct a mental model, to be able to predict actions before taking them.
2. Accessibility (different from disability accessibility, which is also very important): It should be easy for users to find what they need, be able to sort through information without trouble, and be either consciously or unconsciously aware of the hierarchy of information.
3. Legibility: Text should be easy to read. No teeny tiny type, no low-contrast colors that make it difficult to see, especially for users with colorblindness.
4. Language: Short sentences are ideal, along with a friendly tone and low incidence of technical terms and unhelpful jargon.

‍

Visibility: At a glance it is not that obvious what you are doing here.  We found, during usability testing, some users didn't even see the scroll bar and thus only saw the first 6 templates. Those that did were completely overwhelmed by the amount of options there were. One tester even saw the "Vault Required" stickers and assumed it meant that they could not use the templates, thinking they were missing something, even if they did in fact have their Vault set up. The thumbnail images provided do little to convey the differences between templates as well.

Accessibility: Information is being missed or misunderstood, or not even existing in the first place. The descriptions of the templates are only viewable once the sample is selected, and are often overlooked. Navigational elements should be at least somewhat consistent however here it does not make an appearance at all (see: sense of place below).

Legibility: The text within the template thumbnails are often illegible and thus offer little value to the selection process. The DCC link color contrast level fails the web content accessibility guidelines laid out by the World Wide Web Consortium (luminosity contrast ratio is too low).

Language: The descriptions of the templates themselves are often overlooked altogether (too hidden and easily missed) and the content itself has plenty of room for improvement. The overall tone of this part of the process is rather cold and robotic.

There is also a noticeable gap regarding the user's sense of place within the system. There is no navigation on the screen, and nothing that tells you where exactly you are in the app, how to go back, and where you are going from here. What happens when you hit "Create Form"? At this stage it is not obvious. Is your form live? Do emails automatically get sent out as soon as the button is pressed? Do you get to preview it before finalizing? Where does it take you? Can you make further customizations (especially if you are making a form the first time, it is not clear what you are setting up now vs. later). As you can see, a UX Designer lives for rhetorical questions. 😏

A year ago I had a concept for a form builder that encompassed the idea of a more guided form creation process, as shown by this rough wireframe below:

The idea was to guide the user through a series of questions towards a template that would make the most sense to them on a conceptual level, rather than having them choose from a list of all possible options. However, this path was deemed as too much of an overhaul, so I changed directions:

‍

Here are some of the features I was testing in this low-fidelity mockup:

• A more unified navigation. I added in the current side menu space repurposed to hold content for template selection, with navigation that leads back to the form list so there is a less jarring transition between the two spaces.
• A filtering system to make it easier for people to sort through types of forms.
• Visual representations and descriptions of the resulting form in the forefront.

One of the more important things I wanted to achieve was cutting down the number of forms that people have to browse through in order to find the right one. I also found myself wondering, "Why do they have to see an additional template just for a UK address? Couldn't this just be a variation, or option, that they choose instead?". This prompted me to see what else I could cut or consolidate and turn into checkboxes, and thus, reduce the number of template choices overall. What I ended up with is this:

Here, instead of having separate templates for "include recurring donation",  "recurring only", and "one-time donation" there is ONE main template, with these variations displayed as options. On the back-end it would function largely the same: if user chooses x template + y checkbox = z already existing template. So, less work for the developers. Also, having the template options overlay the screen like you see above cleans up the screen considerably.

After getting feedback from clients to ensure I was on the right path, I began working on a more higher fidelity mockup of what I was thinking of. Considering the more complex interactions I was working into a design, I decided that it would be a perfect time to actually built a working demo to hand over to development so they would have an easier time implementing my work. I also took this as an opportunity to learn Git and hosted it all on gitlab.

‍

I really enjoyed working on this project and the response from our clients were quite positive. If I were to work on this again, I would have some further questions I'd like answered about forms and templates: Do people really like browsing a list of different form layouts and choosing one based on it's specific use? Or would they prefer a more guided approach that tries to reduce that cognitive load? Or, do we need templates at all - maybe there is just a form, and various options for that one form. Only more research will tell..