The Why behind Ninja Forms 3.0 – Part 1

A few weeks ago, we introduced the idea of Ninja Forms 3.0. While the purpose of that post was to prepare our users and customers for a possible delay in support responses, I’d like to take some time over the next few weeks to talk about what Ninja Forms 3.0 will do, and how it will work. This will take the form of a series of posts, each examining a particular aspect of 3.0 and addressing why we made the decisions we did, what you can expect, and how these changes may impact users and developers alike.

The first thing we’re going to talk about is the most obvious change for Ninja Forms 3.0: the UI. A few months ago we hired Focus Lab, the same great design firm that created our logos, to create a new user experience for Ninja Forms. That process is complete and the development has just begun, but we can take a sneak peak at the new UI and discuss what issues we are trying to address and how we feel the new UI takes care of those issues. As I said, we are still in the middle of development, so what you see here might be a little different than the final product.

Let’s just dive right in with this week’s big question: Why redesign the Ninja Forms UI? It’s being used on hundreds of thousands of sites, and users seem to like it. While we don’t feel that our current UI is terrible or below industry standard, we know that there are ways in which it could be vastly improved.

For instance, the interface isn’t necessarily intuitive for new users. When presented with the UI for the first time, some users aren’t sure where to begin. The first option we considered was adding lots of help text to the screen, instructing users on how to begin and where to place fields, where to click, etc. We dumped this one fairly quickly, though, in favour of re-thinking the form building experience.

Our thought process sort of went like: “If we need lots of prompts to direct the user in how to use the product, perhaps the problem is with how the product works.” There were a few other considerations, such as making it easier to find fields and add calculations, but the driving force behind this redesign is making a form builder that is actually intuitive.

To give you an idea of what I mean, here is a screenshot comparison of our current builder, and what the new builder is shaping up to look like:

Ninja Forms 2x empty builder

In the image above, you can see an empty form. If you’re unfamiliar with Ninja Forms, or WordPress form building plugins in general, you’d be well within your rights to wonder what your first step is. Do you drag a field in? Why are there two save buttons? How do you find the field you want to add? What are the tabs across the top? As I said earlier, we could add a series of instructions to this same screen, which would help a number of users, but wouldn’t actually address the root of the problem.

Let’s see how our new UI will attempt to solve this problem.

Ninja Forms 3x builder empty

This feels much cleaner and intuitive. You’ve just created a new form, and the first screen you’re greeted with gives you very concrete next steps: Click or drag the field of your choice. Once you click one of the new fields to drag you will be greeted with an immediate visual guide as to where that field can be placed. The image below just gives a glimpse of what that will look like.

Ninja Forms 3x Drag Field

Want to add a field type to your form by dragging the box over? You can! Want to add multiple fields at once? Just click on them to add them to a “staging” area where you can sort them and add them en masse. Need to find a specific field? Use the filter box and all of the field types that don’t match your search are removed, leaving only the field types you’re looking for. Once you’ve added the fields to your form, you can edit them using the same drawer:

Ninja Forms 3x Edit Field

Ninja Forms 3x on mobileIf that’s not enough, this design will also scale gracefully on a tablet or other mobile device, making Ninja Forms the first WordPress form builder that is truly mobile friendly.

If you’re a developer, this does mean that custom code and add-ons that you’ve written for Ninja Forms will need to be tested, and possibly rewritten. We’ll have a beta of Ninja Forms 3.0 out for you to test a couple of months before we release.

Introducing a new UI and rewriting NInja Forms for version 3.0 is a bit scary for us. Ninja Forms is doing great, our customers are happy, we have over 40 extensions, and our team is growing. It would be easy to turn on cruise control and only make minor improvements and bug fixes. Honestly, that would be much easier. But easy doesn’t usually mean awesome, and we want Ninja Forms to be awesome! We want to create the most innovative, enjoyable form building experience for WordPress, and that’s what we aim to do with 3.0.

Thanks for reading, and we hope that you’re as excited for the future as we are. 🙂