5 Survey Design Tips for Strong Visual Hierarchy

Participants process online surveys based on the visual hierarchy of the page, which moves them from one element to the next. Creating a strong visual hierarchy will help guide the participant, starting with the most important piece of information, in a logical progression with a clear idea of what to do next. This can also simplify the task for participants, increasing engagement and response rates. Below are five survey design tips that will help create a strong visual hierarchy and improve readability.

But first, take some time to think about the following questions which will guide the process:

Who are your participants?
An optimal online survey design differs depending on the participants. For example, an aging population may need larger fonts because smaller fonts may be difficult to read, potentially decreasing engagement.

What information is most important?
To create a strong visual hierarchy, you must first determine the rank of importance for the information on the page. Is it the question prompt, or some other text that should be read before answering the question? After establishing this rank, use the following techniques to guide the participant from the most to the least important.

Font

With or Without Serif?

The font type chosen for an online survey will greatly influence legibility and how it is perceived (comic sans font will not be taken seriously). Therefore, it is important to choose a font type that will optimize readability. The two most common font types are Sans-serif (e.g. Arial, Helvetica) and Serif (e.g. Georgia, Times). For online surveys, Sans-serif tends to be easier to read and is perceived as more modern.

Size

Two of the most important roles for font size are:

• Enhancing readability
• Creating a visual hierarchy

As mentioned above, it is important to know your audience in order to determine the optimal size for legibility. A good rule of thumb is to start with 1 em size font, then adjust based on the needs of your audience (e.g. larger font for aging populations). Using ‘em’ instead of ‘pt’ font definitions will allow the text to scale on different devices, such as mobile or tablets. This size font is also a good baseline for text within the online survey, such as question prompts. Use larger and smaller sizes for headers, responses, and other information on the page.

Styling

Utilizing different styling (e.g. italics, bold) creates a visual hierarchy and contrast between elements, helping to guide the participant. The most important thing is to use styling consistently throughout the survey. A simple way to use this technique is to italicize instructions in order to separate from question prompts.

Survey Design Tip: refrain from underlining text because it can be confusing for online surveys, since it is the standard for hyperlinks on webpages.

Color

Color is a great way to not only make your survey look branded and beautiful, but it can also help create contrast between elements by showing emphasis or de-emphasis. Choosing a color palette can often be daunting with shades, tints, hues, and colors that look the same (is it off white, egg shell, or cream?). Just take a deep breath – it’s going to be okay.

Start with your organization’s color. If you don’t have a standard brand palate, then choose a color that you like and use online tools, such as Adobe Color Wheel (the ‘compound’ option provides the best results), to find others that work well with it. Aim to have three colors, one each for headings and key word emphasis, error messages, and navigation. Use consistently to standardize the contrast between objects throughout the online survey.

Survey Design Tip: begin in black and white, then use color as a tool to create visual hierarchy and speed up comprehension.

Whitespace

The space that is left blank or unused (referred to as ‘whitespace’) is just as important as the space that is filled with objects. It can be one of the most valuable tools for improving readability, engaging participants, and navigating them through the online survey. Whitespace is helpful in several ways:

• Grouping questions and responses
• Reducing the visual ‘noise’
• Focusing a attention on a particular element or task (example: Google)

Limiting the number of questions or objects per page to two or three will ensure it doesn’t look cluttered. Also, use one or two lines of whitespace to group prompts and responses.

Large Chunk

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis ipsum ligula. Maecenas tincidunt diam vitae tincidunt tempor. Praesent vulputate vulputate aliquam. Nam finibus egestas eros, eu lacinia diam.

Much Better

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis ipsum ligula.

• Praesent vulputate vulputate aliquam.
• Nam finibus egestas eros, eu lacinia diam.