The general concept behind the button select grid question type is to have large, easily clickable answer options, similar to those you might find on an ATM at the bank (in fact, this question was previously named "ATM table"). Selecting answers requires very little effort because of the large hit area. This significantly reduces both cognitive and kinematic load (click fatigue). The button select grid question type comes in both single- and multi-select flavors depending on your needs.
Let’s check it out.
1: Underlying Question Architecture
Behind the scenes, button select grid questions are
<checkbox> questions for single- and multi-select, respectively. Most of the options that can be applied to single- or multi-select questions can also be applied to button select grid questions, including row/column shuffling, exclusive answers, mandatory vs. optional, etc.
<radio label="q1"> <title>How was the weather during your vacation?</title> <col label="c1">Terrible <br /> 1</col> <col label="c2">2</col> <col label="c3">3</col> <col label="c4">4</col> <col label="c5">Awesome <br /> 5</col> </radio>
2: Converting to Button Select Grid
To convert this to an button select grid, all you need to do is add
uses=”atmtable.6” to the question tag.
<radio label="q1" uses=”atmtable.6”> <title>How was the weather during your vacation?</title> <col label="c1">Terrible<br /> 1</col> <col label="c2">2</col> <col label="c3">3</col> <col label="c4">4</col> <col label="c5">Awesome<br /> 5</col> </radio>
That was pretty easy, but might not look as good as it could. One cool thing about the button select grid is that the button text can be separated from the column header text. Rows are still treated as rows, but the columns become the buttons. To add column legends, you need to add some additional syntax. Let’s move the “Terrible” and “Awesome” scale anchor labels up into the column legend. To do this, we’ll use the
atmtable:col_legend_text attribute on the columns we want to affect (more on that soon), but it looks like this.
<radio label="q1" uses=”atmtable.6”> <title>How was the weather during your vacation?</title> <col atmtable:col_legend_text="Terrible" label="c1">1</col> <col label="c2">2</col> <col label="c3">3</col> <col label="c4">4</col> <col atmtable:col_legend_text="Awesome" label="c5">5</col> </radio>
Notice that we moved the words “Terrible” and “Awesome” into that new attribute, but left the number inside the
<col> tag. In Builder, you would do this slightly differently than shown here. In Builder it’s a bit easier: when you set up your answers, you can just put in e.g. 1 | Terrible or 5 | Awesome and it will automatically move the content after the pipe symbol | into the
atmtable:col_legend_text variable for you.
From here onward, we’ll be customizing the question away from the default look shown above. To do this, we’ll be working in the XML with customizable variables that are unique to the button select grid question type. In the examples, I’ll only show the question tag, as we’re not going to be doing anything to the
<column> tags beyond the example of the
atmtable:col_legend_text shown above. If you add a button select grid question using builder, you’ll notice that there are several new XML variables put into the question tag. You only need to include the ones you want to customize. Here’s a brief description of each:
- Customize the look of the clickable button
- Type: CSS
atmtable:btn_css=”font-size: 36px;”would set the font size inside the button to 36px
- Customize the look of a selected button / hovered button
- This inherits the styling of the
atmtable:btn_cssand should be customized if
atmtable:btn_cssis customized or there won’t be any difference between the default and selected states
- Type: CSS
atmtable:btn_selected_css=”background: #662d91;”would set the background of the button to be #662d91 when the button is selected / hovered
- Customize the look of a disabled button. Answers can become disabled when used with a noanswer option, for example.
- Type: CSS
atmtable:btn_disabled_css=”background: #ddd;”would set the background to a very light grey, making it look disabled
- Customize the container for the column legends
- Type: CSS
atmtable:col_legend_css=”font-size: 18px”would set the column legend font size to 18px
- Adds a text label that will appear at the top of the columns
- This, unlike the other configurable elements, gets applied on the <col> tags, rather than the question tag
- Type: string
<col label=”c1” atmtable:col_legend_text=”Love This”>5</col>Would result in “5” appearing in the clickable button and “Love This” would appear above the column containing the buttons that show “5” inside them
- Customize the container for the row legends
- Type: CSS
atmtable:row_legend_css="color: blue"would turn the row legend text blue
- Toggles showing the raw inputs (radio or checkbox forms)
- Type: Bool (0=OFF, 1=ON); default: OFF
atmtable:inputs="1"would set it to show the raw radio or checkbox forms
- Toggles row dividers
- Type: Bool (0=OFF, 1=ON); default: OFF
atmtable:row_dividers="1"would turn on row dividers
- Customize the look of the row dividers
- Type: CSS
atmtable:row_dividers_css="border: 5px solid red"would make 5px red borders between each row
- Customize the overall table for the question grid
- Useful for setting a width for the question, just be sure to use great care when setting widths, especially for surveys that allow mobile devices
- Type: CSS
atmtable:table_css="width: 70%"would set the entire grid to be 70% wide
4: Customization Examples
The button select grid question is extremely flexible and there are a lot of directions you can take it through customization. I'll show several examples here.
4.1: Example 1 (More Customized Rating Scale)
<radio label="q3" atmtable:btn_css="border-radius: 10px; background: #fff; color: #444; border: 4px solid #888; font-family: 'Times New Roman', Times, serif; font-size: 36px; padding: 0; width: 12%;" atmtable:btn_selected_css="border-color: #f80" atmtable:row_dividers="1" atmtable:row_dividers_css="background: #888; height: 1px" uses="atmtable.6"> <title>How interested are you in the following movies?</title> <col label="c1" atmtable:col_legend_text="Not at All">1</col> <col label="c2">2</col> <col label="c3">3</col> <col label="c4">4</col> <col label="c5" atmtable:col_legend_text="Very Much">5</col> <row label="r1">Flight</row> <row label="r2">Argo</row> <row label="r4">Skyfall</row> </radio>
In this example, we styled the buttons to be different by changing the background color, border, and size of the default state using the
atmtable:btn_css variable. Because we customized the default state of the button, we also need to customize the
atmtable:btn_selected_css as it inherits the styling from the default state. If we didn't do something here, it would be impossible for users to tell which answer is selected; so we made the border orange.
4.2: Example 2 (Image Question with Light Customization)
<radio label="q3" atmtable:table_css="width: 30%;" uses="atmtable.6"> <title>Are you...?</title> <col label="c1"><img class="survey_image" src="[rel male-2.png]" title="survey image" constrain="true" alt="male-2.png" height="178" width="83" /></col> <col label="c2"><img class="survey_image" src="[rel female-2.png]" title="survey image" constrain="true" alt="female-2.png" height="178" width="83" /></col> </radio>
This question simply uses images in the columns. The only customization we made here is to set the table to be narrower than normal. If we had left that alone, they would be much wider.
4.3: Example 3 (Image Question with More Customization)
<radio label="q4" atmtable:btn_css="background: #fff; border: 1px solid #f80; border-radius: 100px;" atmtable:btn_selected_css="background: #f80" atmtable:table_css="width: 35%;" uses="atmtable.6">
Aside from using a different image in the columns, we're customizing the actual button using the
atmtable:btn_css variable to give it a white background and a thin orange border. We've also set the
border-radius to make the button round. Take care when using CSS3 properties – only modern browsers may render those properties. In this case, old browsers might see a rectangular button, so the
border-radius isn't something that's going to prevent them from answering the question.
Because we customized the default state of the button, we also need to customize the
atmtable:btn_selected_css as it inherits the styling from the default state. If we didn't do something here, it would be impossible for users to tell which answer is selected; so we made the background orange.
5: Some Considerations
5.1: Instant Recognition
The instant recognition people have for radio and checkbox forms means they won’t need to figure out how to use them. Radio buttons are usually round and have clear selected/unselected states. When someone sees a radio button, they know that it will allow a single selection and that clicking a different item will change their answer. Checkboxes are generally square or more squared off and also have very distinct checked/unchecked states. A checkbox indicates that it can be toggled on/off and if there are multiple, it usually means that you can select more than one.
When we start messing around with something that people are so familiar with, we run the risk of confusing them. By removing the visual cues of square vs. round, for example, they might not realize the distinction of single-select vs. multi-select. Try and make the button select grid buttons look clickable and "button-y". It may be tougher for respondents to recognize which are single- vs. multi- select, so keep that in mind when choosing this question type and consider adding that into the instructions.
5.2: Avoid Interference Effects
Most populations have learned that green means go and red means stop. A red checkmark graphic could result in what's called the "Stroop Effect", where the mind can automatically determine a semantic meaning based on the color. In this case users might incorrectly associate red, and think they are un-selecting an option. A green "X" could produce similar negative interference effects. Prevent interference by avoiding designs that create conflicting mental processes.
- Demo Survey: See the above examples in action here: https://v2.decipherinc.com/survey/selfserve/9d3/121133?debug=respview
- CSS Help: Finally, you may have noticed that (for now) in order to make extensive customizations to the button select grid question, you’ll need to learn some CSS. Luckily, it’s pretty easy and there’s a ton of help online. Here are 3 really useful CSS resources:
- CSS Cheat Sheet: http://www.cheatography.com/davechild/cheat-sheets/css2/
- CSS3 Generator: http://css3generator.com
- CSS Gradients: http://www.colorzilla.com/gradient-editor/