7

I am designing UI/UX for a survey webapp which has more than 150 questions. Right now they are using 5 radio buttons for each question. Similar to the image below:

General UI

So the question is, how to make it super user friendly, easy and fun to do?

Further I am looking for a solution from responsive web design perspective too. I hate designing it like the following image below but what are some other options.

cookie-cutter design

2
  • 9
    You want it to be user friendly ? Try to put in less questions, maybe put optional questions that allow the user to clarify if he responds negatively to the previous one, for example.
    – user42730
    Jan 23, 2015 at 15:25
  • 5
    Also, try to make the radio buttons custom and way bigger, if possible you should totally hide the fact that they're radio buttons and make the whole square clickable to make it easier for desktop users to fill the survey without doing target practice with their mouse on those tiny radio buttons.
    – user42730
    Jan 23, 2015 at 15:27

6 Answers 6

8

Shorter survey will equal more completions. Since shortening the length is out of your influence, the following considerations will make it more likely to be completed. they are predicated on BJ Fogg's Behavior model. The formula is B= MAT. Behavior is a result of Motivation,ability and the trigger.

Present the trigger to people in the right state of motivation and make the behavior as easy as possible to complete.

Motivation is difficult to affect so focus on making the survey as easy as possible to complete. Here are ability improving UI changes you can make:

  1. Make the interface touch points as large as possible. For example if you use radio buttons, make the containing table cell clickable/tabbable. Fat fingers or mouse taps will be easier.

  2. Always keep the header labels that define the selections in view. As users scroll down the survey, they will have a difficult time remembering what the choices are if the labels scroll out of view.

  3. The same goes for the submit button. Make sure they don't have to hunt for the action button. Any frustration will quickly erode motivation.

  4. Organize the questions into context related groupings. this way they will have a sense of completion of a section.

Motivational Cues:

First, offer the survey to people who are in a state to fill it out. Perhaps after buying something or similar. Incentives may work as well. And be sure to deliver.

But these motivational cues may help as well:

  1. Set the user's state of mind at the beginning. Tell them the survey scope, reason and incentives up front. They could be anything from, "it will help make the product better for you." or "You get $10".

  2. Provide a begin button so they initiate the survey, rather than you just putting a Giant form together.

  3. offer a progress bar that lets them know how close they are to completion. and lets them know the state of their sunk cost of time.

  4. Most important, let them save a long survey to complete later if they want. Email them the link to their survey in whatever state it's in should they quit mid action.

  5. Make sure it's bug free and fast. 5 second loads between pages are worse than 100 more questions.

This reminds me of the surveys I received from Subaru when I bought my new car. They were long and employed some of these techniques. I filled them out because I was in a high motivation state to engage with them because I loved my new car. I don't know if I would be as motivated a year later.

I am in the middle of a similar project and am using these exact techniques. I'll report back if my findings are of any use.

Good Luck

17

Had to deal w/a similar issue last year.

Our task, which we couldn't change, was to convert an 11-section, 120-question "learning style" survey PDF into an interactive quiz. The original PDF is a daunting 10-pg list of questions & checkboxes, much like your example, which no student really wants to complete.

Our solution was to break it up by sections, and display it more like a "Buzzfeed" quiz w/only 1 question at a time. The goal was to help respondents focus their attention on the question at hand without being too distracted or put-off by a never-ending form.

Instead of radio buttons, we just used a large touch-friendly div w/a jQuery event listener to determine which one was tapped and save the result. Read 1 question; choose 1 response; repeat until finished.

The screen displays indicators for # of sections & questions remaining, along w/current question counter and section title. You cannot skip or repeat individual questions (the results would be meaningless), but you can skip between sections.

Multi-section survey example 1

Results are calculated & displayed after each section, rather than after the entire thing, to provide a sense of progress/completion, and to give the impression the survey was short & quick instead of long & boring. The eventual plan was to allow user login so they could complete the survey in multiple visits, but initially it was all-or-nothing w/no progress saved.

The project was cancelled shortly after completing a basic working prototype, but it is completely responsive & functional on mobile as well as desktop. This was much easier to do w/a single question & answer than with an entire table involving hundreds of radio buttons. CSS animations between questions/sections were also planned to make the UI more lively & interactive, while making sure the content would still display properly in older browsers.

enter image description here

Note that we didn't care about collating data or tracking specific Q&A pairs - only with adding up how many times someone answered a particular way in a given section (e.g. 4x "Never" and 3x "Always). Presumably you'll actually care about tracking and collating specific questions & answers, so figuring out how to structure & store the data is a key consideration. That shouldn't affect the UI though.

5
  • Also add keyboard shortcuts to the different options and display those keyboard shortcuts on the interface so they can hit buttons instead of aiming and clicking.
    – Keavon
    Jan 23, 2015 at 22:58
  • I suppose that'd be an option for desktop. Focus at the time was more mobile/tablet use.
    – mc01
    Jan 23, 2015 at 23:15
  • +1, this is a really nice style, and seems likely to help get people to complete the survey.
    – user31143
    Jan 24, 2015 at 9:37
  • 3
    Important to keep in mind - if you're only displaying a single question at a time, don't waste time on fancy transitions between questions (fading, sliding around the screen, etc.). Display the next one ASAP after user action. Delays while the user watches the same useless animation for the fiftieth time in a row could get frustrating, fast.
    – Bob
    Jan 24, 2015 at 15:46
  • Good point Bob - guess it's ok we didn't get that far :)
    – mc01
    Jan 24, 2015 at 19:49
8

I think the length is the problem.

A survey with 150 questions is simply not going to be user-friendly, no matter how you dress it up. You are asking far too much of your users.

Also, a survey of this length is almost never necessary, nor is it even likely to be beneficial. Are there really 150 unique items you need to capture? Probably not. Most likely, even if you can get people to take the whole thing, the result will be a huge pile of data that is hard to analyse and interpret.

Looking at your example questions above, you have three questions that amount to "How do you rate the instructor?" and three about the platform. "Would you recommend the instructor to a friend?" doesn't really tell you anything different from "Would you take another course from this instructor?"

I think the length of the survey just needs to be drastically cut, and probably could be quite easily based on the sample questions.

I know you might not have control over the survey content. If so, sorry! But the content does impinge directly on the usability, so I think it is worth mentioning here.

3
  • Yes you are right. I have no control over contents. Above is just an example. Real questions are different. But still what is the best way if we have that much questions. I and displaying 10 at a time. But still the 5 radios infront of each question is some how not very user friendly. Each time user have to see the column title and then click on the radio. Is there a way we can change this?
    – Imran
    Jan 23, 2015 at 15:35
  • 4
    @Imran, actually the radio buttons aren't the problem. The problem is the amount of time it takes to think about each question. I think radio buttons are an acceptable design. Putting them close together is preferable to far apart.
    – user31143
    Jan 23, 2015 at 15:44
  • +1 on the 3rd paragraph's "the result will be a huge pile of data that is hard to analyse and interpret.". To give a concrete example, in my university, we are compelled to answer a form about our classes. Despite having only around 15-20 questions per page, it was incredibly tedious and not until we became forced to answer those surveys they were fond not to be statistically representative. Jan 23, 2015 at 23:45
3

Radio buttons are perfect for asking a question with 1 and only 1 answer.

I can assure you, however, that with each radio button click the user will hate you exponentially more and more so anything you can do to reduce clicks is the way to go.

Ways to reduce user clicks...

  1. If you can reduce the number of options from 5 to 3 that will help. For example: Happy, Neutral, Sad are usually good enough indicators when trying to see what people love or hate. Having 5 options can actually make the results more ambiguous instead of more clear.

  2. If you can group similar questions together and provide a single place to answer all the questions in the group that could help users get through the monstrous task of clicking 150 radio buttons. Answering the overall group question would automatically fill in the same value for questions below it and then the individual questions in the group could be modified as needed.

enter image description here

  1. Anytime you can pre-fill forms with answers that are correct is helpful but certainly discouraged in this instance due to the nature of maintaining neutrality and collecting accurate data.
4
  • 1
    Grouping idea is awesome. This is something which encourge user to answers without wasting too much time on clicking each and every item.
    – Imran
    Jan 23, 2015 at 17:18
  • 1
    It might be your only hope of getting people to complete a 150 question survey
    – DaveAlger
    Jan 23, 2015 at 17:20
  • The happy/sad idea is a good one. If going this route, I would say: use a neutral face, too, put neutral in between happy and sad, and remove the text labels of the options altogether. And only put the faces above each column. The less busy it looks, the less intimidating and long it will feel.
    – user31143
    Jan 24, 2015 at 9:34
  • I have also seen faces that replaced the radios.
    – Crissov
    Jan 26, 2015 at 14:38
2

You're on the right track and you're close to solving the problem - you need to make the users WANT to continue answering questions. What incentives do you have for your users? Money / Discounts to goods and services? Rewards, such as participating in a community?

The gamification aspect has to come first. Organizing the questions into convenient bite size chunks comes later; and the presentation formatting comes after that.

Whatever you do don't force the users into an ALL or NOTHING scenario. I can't tell you how many surveys I stopped part of the way through and then had the system try to force me to finish the rest of the questions.

EDIT: Answering the question: Do you need to user radio buttons?

Absolutely not.

  • You can use stars (which, although doesn't feel that way to the user) is much the same as radio buttons.
  • You can use sliders.
  • You can have users select images (do you like this ... or that)

And more. Use your imagination. Understand your target audience.

1
  • Thanks a lot Mayo Great answer! How I can make it better in terms of design? Is there an alternative of radios. How to make it more mobile friendly.
    – Imran
    Jan 23, 2015 at 15:02
0

Simplify the potential responses so they take less thinking.

At least this way if you can't reduce the length you do reduce the amount of effort required to complete it:

Recommend the Instructor to a Friend - Yes / No

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.