SurveyJS: Improved Form Builder Usability (first half of 2018)

During the six month since we released production versions of our MIT-Licensed SurveyJS Library and Open Source Form Builder, we’ve learned a lot about how people use our built-in survey editor UI and what leaves them confused. In this article, we’ll summarize the usability issues we’ve encountered and how we solved them.

Properties Pane: A Problem with Ready-to-Use Solution

The first and probably most common usability issue was with the Properties pane on the right-hand side, a sight familiar to all developers and power users:

Property Grid

Developers kept asking us about ways to hide this pane, as it didn’t appear helpful to end-users who worked with the Form Builder to construct surveys.

Fortunately, we did foresee such requests and already had user-friendly modal dialogs as ready-to-use replacements. An example below shows a Question editor. Similar multi-tab editor windows are also available for Panels, Pages, and Surveys.

Checkbox Question modal Editor

We did update these dialogs to make the multiple panel UI a bit more discoverable. You can now transform tabs into an accordion:

Radiogroup Question modal Editor with accordion

The Accordion is our new favorite view and the default option now. By the way, the picture above highlights yet another Editor UI improvement — the ability to apply custom themes.

Manage Pages in the Designer: Add New, Select

To our surprise, we received multiple questions asking us how to add a new page to the survey — the first and most basic action. We conducted a few usability testing sessions and in fact saw testers struggle. We had to make changes — an operation that easy should be straightforward for everyone.

Here is the old design surface.

Design surface — pages, v1.0.1

We agreed on the the following issues with this design:

• No connection between the selected page’s label (“page 1”) and page surface. They seemed to be separate entities.
• The green gear did a poor job of indicating the selected page.
• Many users ignored the little plus button.
• “Survey” link on the same line with “page” links added confusion.

Here’s how this design surface looks after our changes:

Design surface — pages, v1.0.25

• Buttons became tabs for better visual connection between the selected page label and design surface.
• A dropdown gives an additional means to select a page. The tab control and dropdown list are synchronized.
• The “+” button is now a little bigger, and in the top-right corner, at a more visible location. Additionally, there’s an “Add New Page” item in the dropdown.
• The “Survey” button has been renamed to “Survey Settings” and moved up, next to “Undo” and “Redo” buttons.

After the change: With the new design, we conducted a few successful usability test sessions and never again got questions about managing pages from our users.

Expression Property Editor

Unlike the previous example, we always knew that our Expression Editor was going to be a problem in its current form.

We have created a powerful expression engine. You can build logical expressions of any complexity, using nested elements and functions, both built-in or custom-made. At the same time, the editor was a simple plain-text memo field with a link to documentation.

Want to look up a function? Switch to documentation. Want to look up a previous question’s name to reference its value? Close the editor and find that question…

As you can imagine, there was no lack of questions and improvement suggestions on our support forum. The dialog was a growing pain in the neck for ourselves too — we spent lots of valuable time building these expressions even in our internal testing.

Expression Editor, v1.0.1

We have now added a simple wizard that can create a logical condition. You can add conditions to the overall expression thus accumulating a more complex criterion.

Expression Editor, v1.0.25

The dropdown on the left lists all questions with their nested elements. Then you can select an comparison operator and a value.

When possible, we render the referenced question right there in the Expression Builder window. End-users can select a value using a checkbox, radio group, dropdown, rating, etc., instead of entering the value into the text box directly.

The text editor is still there, so you can modify the expression as needed. And, if you reference Ace Editor, you can press CTRL+SPACE to display a completion hint.

After the change: The number of questions about expressions dropped significantly. We still get a few from time to time, but they are mostly related to complex scenarios and involve assistance with custom functions.

Editing questions on the designer surface

Element designer UI had only two commands in the initial release: “Editor” and an ellipsis that opened a menu with additional actions. We soon discovered that finding the Delete command behind that ellipsis wasn’t an obvious task for everybody.

Element designer UI, v1.0.1

Before updating the UI, we needed to consider the redesign from two perspectives.

First of all, we wanted to allow end-users to perform most common tasks directly on the designer surface: change a question’s title, mark a question as required, change question type or content (choices).

On the other hand, SurveyJS is a developer tool first, so we needed to enable an easy way to customize the commands available in the Form Builder.

We’ve implemented all of the above using the Adorners concept. An Adorner is a UI designer command that appears on a SurveyJS element based on a pre-defined condition. A developer may remove a default adorner or register their own.

The glyphs and dropdowns you see on the image below are the default adorners we ship in the current version. You’ll not that we’ve moved question-related adorners outside question boundaries. Otherwise the UI became messy, especially for questions with longer titles.

Element designer UI, v1.0.25

As you see, we kept the Edit command first, followed by Delete, Show/Hide Title, Required attribute.

The “Dropdown” link on the right-hand side indicates the question type and also allows you to quickly switch to a different representation.

Change element type action

Question title has its own adorner too. That one enables you to edit captions directly on the designer surface.

Title adorner

In case of dropdown questions, where choices aren’t immediately visible on screen, use the Edit Choices adorner to gain access to the list.

Edit Choices adorner

Once answer choices become available, you’ll see their adorner, which allow you to add, delete, edit, and reorder choices using drag & drop operations.

Choices items editing and drag & drop adorners

The one adorner we didn’t mention is the hamburger displayed just above the question area. That’s a drag & drop adorner, and we’ll talk about it in the next section.

Element Drag & Drop adorner

Add and Reorder Elements Using Drag and Drop

The last usability issue that we want to talk about in this article is drag and drop discoverability. End-users did not understand they could create and position questions by dragging them from the Toolbox. Nor did they realize they could use drag & drop to reorder elements later.

Surface designer and Toolbox, v1.0.1

Since drag and drop wasn’t discoverable, users ended up clicking on the Toolbox elements. Form Builder added the element as a last entry on the current page and users did not know what to do next.

First of all, we changed the message to “Please drop a question here from the Toolbox on the left” and made it bigger. The drop target is now the entire designer surface instead of the previously available small rectangle.

Surface designer and Toolbox, v1.0.25

Drag & drop adorner — a glyph we mentioned in the previous section— appears in the top-left corner of questions, which is where users now initiate drag & drop to reorder questions.

Another thing worth mentioning in relation to toolbox is that you can customize the view by grouping items into categories as shown in the image below.

Surface designer and Toolbox with categories, v1.0.25

A Few Words in Conclusion

We have solved countless other usability and design issues — they are too many and minor to be listed here.

With the few latest versions we’re getting noticeably fewer questions from end-users. Our usability testing sessions are going smoothly now, with testers never confused with the easy tasks.

You may Give Our Form Builder a Try and see for yourself, no registration necessary.

Here is the Form Builder Library documentation, including examples of integration into web applications written on different platforms.

Finally, you can freely fork Form Builder on GitHub. It’s an Open Source Project.

To learn more about SurveyJS, we recommend that you visit our website or take a look at the following articles: Meet SurveyJS and SurveyJS is Out of Beta.