Choosing how your respondents interact with your survey questions and pages is more important than you might think. On the Style tab under Layout you can choose both a Desktop Interaction and a Mobile Interaction. Hover your mouse over each option to see each in action. Below we'll describe and demo each interaction in a survey and discuss some best practices and other considerations.
Desktop Interactions
Standard (default) - Survey respondents will experience your survey much like how it is displayed on your Build tab.
Check out the standard desktop interaction (default) in an example survey.
One at a Time - This desktop interaction option will display one question at a time. When the respondent submits the question it will slide to the left and the next question will slide in from the right.
Check out the one-at-a-time desktop interaction in an example survey.
Mobile Interactions
One at a Time (default) - Survey respondents will see one question at a time. When the respondent submits the question it will slide to the left and the next question will slide in from the right. Check out this survey link on a mobile device to see it in action:
Check out the one-at-a-time mobile interaction (default) in an example survey. Open this link on a mobile device to see it in action.
One at a Time interaction on Mobile devices is not compatible with VoiceOver accessibility for vision impaired survey respondents. If one is running a survey where vision impaired respondents are using VoiceOver, please utilize the standard interaction for survey taking.
Standard - Survey respondents will experience your survey much like how it is displayed on your Build tab. Check out this survey link on a mobile device to see it in action:
Check out the standard mobile interaction in an example survey. Open this link on a mobile device to see it in action.
Not Mobile Optimized - This option will render the survey as it is designed for desktops on a mobile device.
Best Practices and Considerations
There is no right or wrong when it comes to selecting a survey interaction. What works for one survey may not be ideal for the next. After selecting an interaction be sure to test, test, and then test again. Below we discuss some survey aspects that may be affected by your interaction choice.
Survey Audience
Consider your audience. The one-at-a-time interaction is somewhat novel for online surveys. While this will almost always be a good thing, there are some populations, those that are less tech savvy, who may prefer the standard interaction.
Survey Fatigue
While there is no precise formula for what causes respondent fatigue, it is generally attributed to the number of questions, amount of text on the page, number of clicks, the need for scrolling and subject matter. With respect to interactions, you will want to consider how many clicks are required by the various interactions, as well as how much scrolling each requires. We encourage you to test out the various interactions you are considering. Respond to your survey and try to assume the point of view of a respondent.
Response Rate
The one-at-a-time interaction was designed to be more engaging than the standard survey form. This may result in increased response rates. While this will almost always be a good thing, you may want to consider whether you want to make a change like this in surveys where you expect to compare the data overtime. New respondents who were encouraged to answer based on the fancy new interaction may change the characterists of the sample you are using to draw conclusions. Similarly, respondents who previously answered in a different format may answer questions differently in a survey with a new interaction, further biasing any changes you wish to measure. If you decide to go ahead with a change to the survey interaction, be sure to benchmark your data on the important demographic characteristics to ensure that your overall sample didn't change too much. If it did, it's ok, just remember to report this change as part of the results.
Accessibility
We recommend the Standard interaction as it is most accessible for screen readers. If you expect that many survey respondents will be using a screen reader, you may want to change your survey to include a single question per page. Screen readers will read the entire page and then, once the survey respondent tabs to the first field, the screen reader will enter form mode. In form mode screen reader focus on inputs and labels and will not re-read the question text. Thus, surveys with a single question per page will be easiest to navigate on a screen reader.
Non-input Elements: Text/Instructions and Image Elements
Consider the use of the one-at-a-time interaction when using Text/Instruction and Image Elements in your survey. Because elements will be displayed one element per page and text/instruction and image elements do not have inputs, when they display by themselves on the page this can be a bit confusing to a survey respondent. As an alternative to text/instruction elements, we recommend using page descriptions and titles. For image elements you can instead header images or place images in your question text.
Grid Questions
The treatment of grid questions varies quite a bit depending on the interaction you choose. For example, the one-at-a-time interaction will display grid questions one row at a time. Often, when you choose to display a series of questions in a grid format you are actually looking for respondents to make a comparison across the rows. Displaying all the rows together and asking respondents to answer this way is a very different cognitive task than displaying rows one at a time. Depending on your interaction choice, you might get very different data.
This is very different...
than this...
Disable Fly-In Animations for One-at-a-Time Interaction
Do you like the one-at-a-time interaction but you're not a fan of the fly-in animations that are part of this interaction? Never fear, we've got some CSS Code to disable these animations!
It's as easy as copying and pasting the below CSS code in your theme. To do so, go to your survey's Style tab and scroll to the bottom of the survey preview to access the link for the HTML/CSS Editor. The CSS should be pasted in the field on the Custom CSS tab.
html,body,.sg-int-blurred .sg-question-set > .sg-question,.sg-survey *
{
transition: opacity 0s ease-in-out;
-moz-transition: opacity 0s ease-in-out;
-webkit-transition: opacity 0s ease-in-out;
-moz-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
animation: none !important;
-webkit-animation: none !important;
}
.sg-page-rotateSlideOutPrev,.sg-page-rotateSlideOutNext {
display:none !important;
}
.sg-page-rotateSlideInPrev,.sg-page-rotateSlideInNext {
display:none !important;
}
