Background

A Likert Scale question, named after its inventor Rensis Likert is basically a rating scale (although there are quite a lot of differences)

The format of a typical five-level Likert item, for example, could be:

  • Strongly disagree
  • Disagree
  • Neither agree nor disagree
  • Agree
  • Strongly agree

Alfred App Screenshot

A Likert Scale question in a matrix form

A Likert scale is a bipolar scaling method, measuring either a positive or negative response to a statement. Often five ordered response levels are used, but some researchers use seven and even nine levels—it's been found that using seven or nine levels produce higher mean scores.

Creating surveys with Insightify is as easy as taking a survey. Its super-intuitive design gives user a WYSIWYG interface to create surveys. It was fun creating the simpler question types like Single/Multiple selection, Date question etc. even if they were mostly forms. Then we moved to the next sprint: on the Likert Scale questions. It was a real challenge to keep the ease of use and intuitiveness we just built!.

How do we do this?!

Stuck with this, there was only one thing in our minds for the coming days even while we were sleeping.

This was at a point where we thought we almost figured it out. But soon we realized we need Likert Scale questions' 'baap'— Likert Scale questions as a matrix of choices. It's important to follow the same design language for both these types of questions. One more challenge here - survey creators should be able to choose multiple answers to the question, in addition to the single choice. Think checkboxes and radio buttons.

Well, matrix of choices can be given as a matrix of dropboxes too. But e decided we won't do dropdowns. It drives the respondent crazy if given a matrix with dropdowns. One dropdown itself is evil.

It was shit, and we knew it.

Voila! We came up with the most confusing user interface ever!

Then again, one day I had a faint spark of an idea and I asked Niket, our JS/Rails guru whether we can have drag handles in these questions. He said we can have anything if it means a better experience. We sat together and came up with a prototype - An drag-expandble Likert Scale question.

Sketch: Drag-expandable Likert Scale

The major benefit of this interface was that it was scalable, and the matrix is just an extension to the Likert Scale interface.

Winner!

It was a wow moment for all of us. We added keyboard shortcuts, tab focus, drag back to remove columns/rows. Hitting return from the last column of the last row in the matrix would spawn another row, too. It was fantastic.

Oh, to switch between multiple choice (checkboxes) array and single choice (radio buttons), we just gave two links at the top of the matrix :)

See it working in the video below!