Hi everybody. Today we're going to be talking about how do we actually visually design the survey questionnaire that we come up with. So, we're going to learn in this module about general principles of visual design of questions in a survey questionnaire. A couple of caveats that, one is that we're covering design a questionnaire specifically. Don't forget your overall knowledge about design, most UX researchers have an above average knowledge of what's good design or bad design. Some of this is going to touch on that, some isn't, but don't forget your design AI in general. The second caveat is that this is going to be specifically address written surveys and especially web surveys. Now, there are full design courses we could do about how do you design a questionnaire meaningful life for phone surveys or face-to-face surveys. Those are beyond the scope of this particular course but that knowledge is out there if you end up doing more of those types of surveys. So, for most online surveys that you do, the tools that you use to create that survey are going to have a set of design options for you to pick. The pros of that are that they're very consistent and easy to use, the cons are that there can be very difficult navigation in the more advanced choices that you might have make. So, it's traditional when you have basically a application like this, where it simplifies some of the low-level tasks that you need to do but if you really want to customize it can be much more difficult. Most of us use these types of applications when conducting our online surveys. So, we're going to talk more about those actually in the next video. One is to use darker and or larger fonts in the question stem. What might that look like? So, here which one of the following best describes your most recent visit to this site? You can see what the survey designers trying to do. There trying to separate out word that they think are important to their questions stem. There are a couple of problems with the way that this was formulated. One is that if you mix too many font choices like this, it's going to be cognitively confusing for the respondent. The other is in this case, it feels like they've hit the wrong words for emphasis. Another issue when you're looking at this is the response categories. Often designers will put response categories as a horizontal layer to try to save space. What you have here which are kind of wordy nominal response categories for a question, you're much better off using a vertical layout to decrease the cognitive burden for your respondent. So, here's that same question with a different type of design ethos. Here you can say that the question stem is entirely made bold and the word that I think is most important. One, is been underlined in this case. Underlining is interesting. It works well because it's a consistent across all web packages and it's a cue that respondents pick on very quickly, the only trouble with it is that in some types of formulations respondents could confuse it for hyperlink though that's pretty rare that that would happen. Now you can easily see because, one your questions stem is bolded and your response categories are not, that creates a visual distinction between those that helps very much ease the respondents burden in reading these questions. Then of course we've taken the response categories moving them from a horizontal layout to a vertical layout, which makes it much easier for respondents to actually understand what we're asking them. You want to use overall design principles to emphasize question elements that are important. What do I mean by overall design principles? Think about things that you're familiar with, proximity, similarity of size, common region, similarity of contrasts, everything you know from kind of the gestalt of visual psychology can be applied to how you put questions together. This is all based on the idea that when we read, the words are important but so is the design of the page. A lot of how we actually understand a word or a sentence comes from subtle cues like font and size differences or Font Formatting, and the brain uses all of that to drive understanding separately from just the straight cognitive processing of what the words actually are. You can use design basically to bolster your respondents understanding of your survey, but bad design can hinder your respondents understanding of your survey questions. So, looking at our last question you can see here I've made a very subtle change. All I've done is add an empty line between the question stem and the response categories. What this says is further home that principle of visual gestalt which is proximity. Right. Because they're no longer as proximal to one another, they're slightly separated, all of the response categories are now clustered into one bundle, the question stem is separate. Your brain immediately reads this much more easily as a survey question, and even the last example which is still pretty good. You want to choose font size. The type of font that you use and line length very smartly when you're making your survey questions. You should also consider how your mode of delivering your survey is going to affect these font choices. Now I've met very few UX professionals who are not also font nerds and their spare time, it could be that you're not, but font choices do make a big difference in legibility and we're thinking about how we put together our survey questions. So, here's an example of how mode could change our understanding of a question. The left you can see that there is the mode of how do we go shopping, how do we do shopping for need an item things like that, that is a typical web layout for a question. On the right, you can see how that would look in a mobile layout. It's not terrible, I've definitely seen worse and we'll all see worse in a few minutes, but you can see at the University of Michigan logo for instance is cut off in this particular example. The choices drop below the phone and the phone is going to require some scrolling which may lead to input errors. So, you really want to think about how is each question going to look on multiple devices if you anticipate that your respondents are going to take the survey on multiple devices. If you don't think that you're a font nerd, how do you react to comic sans. This is just a slide for little trolling to ferret out which of you feel really strongly about fonts. So, a lot of the applications that we use and the one that I'm using for example which is Qualtrics has a global look and feel option for fonts. I can go into my survey and this would set basically a default for all questions and response categories, and you can see that they've separated out those two both by the style of the font, the size of the font, and then of course whether it is bold or underlined, the tile size and things like that. You want to keep in mind of course that not every computer has every font, and so you want to pick fairly standard fonts that are available to everybody and their browsers. Qualtrics as well as most of these other survey software programs, also allow you to have rich editing options for each individual question. So, if I click through and go into an individual question like that we've been answering, you can see that Qualtrics provides me with lots and lots of different ways of editing that. I could add elements like Boolean and underlying, I could do strike through, I could do a whole set of things. Again, be careful with how much fanciness you get into when you're thinking about how do you design a question like this. In general, simpler is better, use characteristics like underlining sparingly and only to highlight the understanding of the question and to help your respondent along in their process. So, some advice on fonts. If you're still feeling burnt up about seeing that comic sans a few minutes earlier, script fonts are hard to read. If you look at this it's all the same question to give you a sense of how does your brain process these different fonts when there altogether. It takes the brain a little longer to untangle what is in that script font. Monospace fonts like courier, which I personally love beyond all other fonts, make individual word shapes harder to recognize. Part of how our brain processes the word is actually by it's shape as much as how the individual letters are. My four-year old right now is learning about sight words. There are certain words that we see so often that we just recognize them because of their shape. It's almost like a pre-processing that our brain does. Monospace fonts can interrupt that pre-processing sometimes. All caps causes fonts to lose their shape. So, the shape of the font again is important. If you write in all caps by the nature of all caps, the words start to look more like monospace fonts which can be problematic. Also of course for most of us who spend a lot of time on the internet, having all caps in a question looks like shouting. So, often I will use all caps to highlight a particular word, but you're going to want to be careful about how much you use that as a technique. You want to consider readability, features like sans serif fonts versus serif fonts. A general piece of feedback is to use sans serif fonts for web-based surveys and serif fonts for paper-based surveys. But you want to do some pre-testing and be careful about how you pick these font choices. Another piece of advice is to separate instructions from question stems by font variation. What do I mean by that? So, here's an example of a question. How often did you check Twitter yesterday? To this question I've added an instruction to the respondent. Please make sure to include mobile and desktop checks and then I have my response categories. By using slightly different fonts, I have depended on the gestalt of proximity and likeness to really separate the different parts of this question out to make clear what is the question, what is the response category, and what is the additional instruction. Tip five, for open-ended questions provide response spaces that match your desired responses. So, even before you read anything on this page, you can look at those boxes and your brain is going to process something about those text areas. One is much more shallow and you would think about less information, one has a longer depth and you're going to think about more information. This turns out to be true. Research has shown time and time again that for this exact same question, the second text option that you see here would elicit a lot more data from the respondents to answer that question. That having a longer textbox just signals to the respondent, we want more information not less. They're very rarely even though you can see the drag down button on the top of that and the respondent could expand that textfield, they're not going too. Most often respondents just try to match their responses to the size of the textbox that you have. Another tip for open-ended is to really shrink that if you're looking for very little information. So, you can see you'll get very different responses for this same question depending on these two textbox options that you see available. In the second one because the size of the text box is much more closely matched to what days would actually look like, that's a great way to actually shape what the respondent is going to answer and to automatically get out some of the junk data like a lots or I don't know types of responses in that text field. Another slight cue that we've done here is as you can see I've added a label days per week zero to seven, that's going to really help the respondent know what to put in that text field. All right. Tip six. Response options should be either in one row or a vertical. To save space, I've seen a lot of different formulations of response options. So, here's the same question with the same response options laid out in three different ways. The first one is a column layout, the second one is horizontal, and the third is vertical. Which of these is best? Well, I think number two and three are fairly equivalent. Though because these are short answers, are short responses, and they require much elaboration, I think the horizontal layout efficiency is great. The first one, however, has some problems with it because the way that we process ordinal information, the way we process scales is very visual. Because we've laid this out in columns effectively breaking up the actual scaled or ordinal information, the brain is going to have a much harder time processing these response categories than they would with the other two options. Tip seven, try to separate out your non-substantive options in your response categories. These are basically the I don't knows and the no opinions that sometimes you're going to want to add to your surveys. They're hopefully very rarely. So, here's an example overall. How would you rate the quality of this website? Excellent to poor and in this case I've added I don't know. Now, I actually couldn't figure out how to get qualtrics to make a space between the fifth and sixth box. Ideally what you'd want is don't know set off somewhere off to the side to show that it's a different option. Again, we're using the gestalt of space to make sure that ones and categories is seen as the real set and that the don't know option is considered an exception. Because I didn't have the option of space, I've added an italics to the font to try to do that visual separation between don't know and other responses. It's very important for you to outside of thinking about the individual questions, to think about how the questions come one after another in your survey. There's a lot of work that's been done research about how question order matters and the primary thing people worry about is drop-offs. A lot of people start surveys, but don't finish them. That's not necessarily a bad thing. These partially completed surveys can actually have really great information in them. Part of how we decide which questions to ask first is what question do you really want to get an answer to in your survey. So, one piece of general advice writing in your survey is to place your most important question first in an instrument. You want to make sure that you're hitting the really important points about what you're after right away. There's a temptation when we're writing surveys to put demographics first in a questionnaire partially because we think that's easier for people to respond to and they will warm up to the rest of the questionnaire, but really avoid doing that. If you're going to ask a question, ask the thing you care about the most. You want to cluster groups of questions together. I've seen a design choice of survey designers where what they were going to do is randomize all the questions, just throw to into a big bag and then randomly select which ones come out for the respondent. Don't do that. Questions should come in sensible patterns if for no other reason and then because of cognitive load. If you have a whole section of questions about usability, the respondent is going to be primed to think about usability and give you better answers than if you're mixing together usability, trust, authenticity or a lot of different constructs. That's going to cause their brain to have to retrieve information and to be activated in different ways for every single question. Just make sure that you are really clustering things into the concepts that you care about. Thirdly, you want to consistently identify each question and section. It's very tempting just to put all the questions, obviously in your database they're numbered, but it's hard for respondents to think back to a question or to feel like they're making progress in a questionnaire. The questions themselves aren't identified especially if there's no section headers. A straight list of questions with no information about what you care about is going to be disincentivizing for your respondents. Ninth tip is to avoid visual clutter. This kind of is a conglomeration of a lot of tips we've already looked at, but think about your mobile users. Try to reduce the cognitive burden of your respondents. Let me give you an example of how visual clutter might play across a web versus mobile format. So, this is a particular type of matrix questionnaire which has two phases. So, in this case, the prompt question is please answer the following questions about your internet security behaviors. This is divided into separate questions. How often do you do each of these tasks, and then do you feel like you should do this less, the same, or more? I mean you can see a whole set of questions that would have to do with typical internet security behaviors. Even just if there was a web survey and laid out as nicely, I think this is laid out on the web, you can see problems with this. This is cognitively really hard for respondents to do. Think about the respondent and do you really need to ask this question in this way? It could be you do. This is not an atypical layout. Often it's a good reason to ask a question in this way. But then, you can see how this question translated to a mobile format would be a disaster both because the matrix it's really hard to track on a mobile screen layout as well as the two column matrix becomes almost impossible to use. So, visual design or written questions and questionnaires has a lot of small subtle things that you can do to help the respondent understand what you're asking and to move them officially through your questionnaire. Use those darker and or larger fonts to make the question stem pop-out and really be clear about what you're asking. You can use design elements to signal what's important in a question. Underlining is my favorite, but you could bold or italicize if you want to. Make good font choices. Think about your sans serif fonts and use the actual shape of the word to help people identify what the word is. Make open-ended questions up the size of open-ended questions appropriate to the actual text boxes that you have so that you are helping to guide people in the types of responses that they give. Keep response options in one row or column. The two columns or the multiple columns or response options can be confusing, it's okay for more nominal information as long as you then mix up the boxes. Try to separate out non-substantive options like don't know or no opinion so that people aren't drawn to those responses. Your space or font differences to show that that's not part of the standard set of options. Then try to cluster your sections. Think about the flow of your survey, try to make sure that the questions come together in clumps that makes sense to the respondent, and that your whole survey has a design that prioritizes you getting your most important information up front in your survey questionnaire. Design is great as an important thing to think about. In the next video, we're going to talk about some standard packages for writing web surveys. There's a lot of options out there and we're going to talk about how would you assess those different options.
