Survey Design

Introduction

Getting your survey design right is not just a matter of respecting your brand guidelines or providing a pleasant experience to your users. A well designed survey also yields higher completion rates and thus better customer insights. Refiner offers various styling options to make your survey blend perfectly with your brand and guarantee highest response rates.

Screenshot showing Refiner’s survey design options for Web-app Survey Widgets

Survey layouts

Refiner offers the same type of survey experience across all delivery methods. Depending on the delivery method and the client device (desktop or mobile), slightly different survey layout options are available as described below.

Web-client survey layouts

In-Product surveys can have different layout options when viewed on a desktop or tablet device. Which layout you choose for your survey has not just an impact on the user experience, but might also impact survey response rates. As a rule of thumb: the more intrusive and visible a survey is (e.g. centered layout), the higher the response rates.

The following options are available for Web-app Surveys on Desktop clients:

  • Top left, Top centered, Top right
  • Bottom left, Bottom Centered, Bottom right
  • Modal
  • Top Banner, Bottom Banner

On mobile devices, popup surveys are displayed with a bottom slide-in on mobile devices.

Below you’ll see a screenshot of some popular options.

Another popular choice are centered surveys with a backdrop overlay.

Lastly, you can also use our banner layout to make use of the entire screen.

When viewed on a mobile device, Web-app Surveys are always displayed bottom centered to ensure a good user experience.

Mobile SDK survey layouts

Native mobile app surveys launched with our Mobile SDKs can be displayed as Bottom Slide-in or in Fullscreen mode.

Survey pages layout

Survey Pages, as well as the landing pages of Email Surveys, offer a layout similar to our survey widgets. Most of the design options are available (colors, rounded corners, progress bar). In addition, you can also upload your own logo.

Styling options

Refiner offers the same type of survey experience across all delivery methods. We provide similar design options for In-Product Surveys, Survey Pages and Email Surveys as shown in the table below. Each option is described more in detail further below on this page.

In-Product WebIn-Product Mobile SDKSurvey Pages
Adaptive color palettes
Rounded corners
Progress bar
Highlighted border
Banner images
Avatar imagesBottom Sheet
Upload logo
Hide close button
Backdrop close
Back navigation
Text direction
Hide Refiner Branding

Adaptive color palettes

Refiner allows you to choose an Accent Color and Background Color for your surveys. Both, the Accent and Background Colors, are used in different shades in your surveys for input fields and buttons.

Depending on the brightness of background colors, Refiner will automatically set the text color either to Black or White. This mechanism ensures that your survey widget has enough contrast between text and background elements and that your survey is easy to read.

Progress Bar

If you surveys contains more than 2-3 questions, it might be helpful to display a progress bar. The progress bar shows users how many questions a survey has in total and how many are left.

Rounded corners

To better match the style of your application, you can choose between rounded or straight corner style.

Highlighted border

Avatar image

Adding an avatar, name and job-title to the top section of your survey widget will instantly give it a personal touch and make it more relatable. This usually results in higher response rates and overal better response data quality.

Banner images are a great way to mirror you brand inside a Refiner survey. The option to upload custom banner images is available for In-product surveys on web and mobile.

You can upload one banner image per survey in the Design tab. You can also choose to upload specific banner images for each question individually.

Survey Pages and Email Surveys let you upload a logo that is displayed in the top section of the survey page. You can also upload a page icon which used by web browsers.

Text-direction

You can switch the text direction from Left-to-Right (LTR) to Right-to-left (RTL). This setting might get overwritten for specific languages when using our Translations feature.

Hide close button

You can choose to hide the “x” close button which is otherwise displayed in the top right corner of an in-product survey.

We usually recommend to keep the close button visible to guarantee a good user experience. There are however various situations where hiding the close button makes sense. For example, when you running on onboarding survey with a centered modal layout and completing the survey is mandatory.

Disable back navigation

Some survey question types will display a “Back” button when they are placed after the first element. As the name suggests, the button allows a user to navigate back to the previous question and modify their response. You can choose to disable back navigation for all questions in your survey. If disabled, users can’t modify a response once given.

Backdrop close

When using a centered modal layout for your in-product survey, you can choose whether or not a click on the half-transparent backdrop overlay will close the survey or keep it open.

Hide Refiner branding

Customers on a paid subscription can hide the Refiner branding from their surveys entirely. Surveys from users on a free plan will show a small link to Refiner in the bottom.

Default branding settings

Colors can be set for each survey individually. If you are planning to run multiple survey campaigns, you can define your branding colors in your project settings in the section “Brand Identity”.

White-labeling with custom CSS code

Customers on an Enterprise plan can tweak the survey design with custom Cascading Style Sheet (CSS) code. Using custom CSS code opens up virtually endless styling possibilities, such as resizing the survey widget, changing the font-family, adjust button styles, etc. Please contact our team to get more information.

Was this helpful? Let us know with a quick a vote