Device Diverse is IntelliSurvey's responsive, mobile-friendly theme. It is designed to be usable for any survey project, particularly if the sample universe is populated with respondents who may take the survey on something other than a full-size desktop or laptop computer. The customization in Device Diverse scales seamlessly between different screen sizes and input devices, as well as screen orientations. In addition, the survey navigation buttons are streamlined to require less user input to advance through the survey, tables are re-imagined to accommodate smaller screens, and the minimalist interface is easily legible. The net result of these changes is a better user experience, which positively affects LOI and attrition.
Navigation
Survey pages automatically submit where appropriate. If all visible questions are single-select, as soon as the respondent has provided an answer the survey will advance to the next page. In these cases where the survey has automatically advanced, a back button will temporarily appear on the following page, in the top right corner. This is to provide respondents who may have selected the wrong answer the opportunity to back and correct that answer. Other question types, such as text inputs and multi-select questions, will cause survey pages to display a continue button as soon as a response is provided. The button must be clicked in order to advance to the next page.
Try it!
Examples
The examples that follow are shown in Device Diverse theme. To get the "full experience" for how surveys will respond to different screen sizes, feel free to increase and decrease your browser width to watch how the survey responds to these size changes.
Auto-scrolling tables
Tables display three rows at a time, and feature a scroll bar. As soon as all visible table rows have an input, the table will automatically scroll to reveal the next two table rows. To modify the default displayed rows, use the show_rows tag as shown in T3.
If a radio type table has an autoother row, and there are no other questions on the page, the page will not submit automatically. This way, the respondent can selectively use the autoother row without the page automatically submitting before they can type an input in it. When the last required field is filled, the Continue button will appear, which must be clicked to proceed.
Table customization
The following parameters may be used to modify tables in Device Diverse, Modern, or Flex themes.
| Parameter | Description | Example Code |
|---|---|---|
show_rows |
Forces a given number of rows to display. Accepts a number, or 'all'. Mobile-friendly themes default to showing three rows at a time without using |
show_rows: 4 show_rows: all |
start_scroll |
Used with radio tables, this allows programmers to specify a number of rows the respondent must answer before the table will begin scrolling to display the other rows in the table. If no |
start_scroll: 1 |
mode |
Allows users to modify the table display. The following modes are currently available: Textabove mode forces the row element text to appear above the options. Buttons mode forces the row element text to stay to the left of the options. Vertical mode forces the options to be listed vertically below each row element. Classic mode allows for headers and formats the table to look similar to Tiled mode creates a numerical input table with buttons to increment and decrement the value of the response. Respondents may also manually input a value in the text field. This mode replaces the previously used template tiled_table.tx. |
|
Adding mode: textabove to the following example modifies the table so that the row element text, the elements from the list FRUIT, is displayed above their response options.
Since example T4 does not specify a number of rows to show at once, the default behavior would be to show three rows at a time. Not including the start scroll tag will cause the table to start scrolling after two rows' responses have been selected (rounding up from 3/2 =1.5 rows).
To begin the table scrolling earlier or later, include start scroll and specify the number of rows to scroll after.
Click mode for more information.
Ranking questions
Ranking questions in mobile themes utilize the rank widget. Each option will display the next available rank in its upper right hand corner when hovered over with the cursor (desktop) or when the option has been selected.
Tiled tables
The example below shows a basic tiled table with a step value of 1. Respondents may type a value into the field then increment or decrement as needed, or simply use the +/- buttons to specify the values.
For more information on tiled tables, see tiled.
Scale
Device Diverse will automatically size buttons and arrange them in a manner to best fit the respondent's screen size. This may not always be desirable, perhaps because response options increment numerically, so it may be necessary to test the option arrangement by changing the width of the browser window.
To always display options in a single row (or column, if the screen is narrow), use the scale tag, with a 'y' input.
Minimum width
To specify the minimum width to which an option button can be automatically scaled, use the minwidth parameter, accessible via the template_data tag. If specified, this is the smallest size an option button can become. If two option buttons cannot fit adjacent to each other, they will stack vertically.
Tooltips
Tooltips (a.k.a., "mouse overs") can be applied to questions via the explain or settext tags. They work similarly to the instruct tag, but whereas the input of the instruct tag always shows to the respondent, the text from an explain or settext only shows if the respondent hovers over the info icon or underlined text, respectively.
explain
The explain feature in Device Diverse works much the same as it does in other themes. For question/row elements or items used in a ranking question, the buttons include a gray striping in the lower right hand corner; in Modern theme, there will be a tooltip icon in the lower right.
settext
The settext widget allows the programmer to specify a term that, when displayed on screen, is underlined and functions just like an explain tooltip.
If there is a pointing device on the platform being used to take the survey, dragging the cursor on the icon or over the accented button area will produce the explain text.
If the device has a touch screen, the icon or accented area must be clicked to reveal the explain text.
Comments
0 comments
Please sign in to leave a comment.