Snap version 10.17 has improved web survey layout on smartphones such as the iPhone and Blackberry.

However, because smartphones have limited screen space, a mobile internet connection (which may use a slow speed) and small keyboards, it is sensible to adapt your surveys if you know that they will be viewed on smartphones.

This worksheet discusses the issues involved in designing a survey for smartphones. It describes the facilities in Snap to help you. It gives an example of changing a survey so that it conforms to the guidelines for use on a smartphone.

Things to consider when setting up your smartphone survey

If you are designing a survey that is principally going to be used on smartphones, the best practice is to design the layout for the survey accordingly. You may wish to use one of the PDA style templates provided with Snap.

Do:

  • Think about the size of the screen that people will read it on
  • Have ten or fewer questions
  • Use small graphics or no graphics
  • Have one question per page (to reduce the need to scroll)
  • Turn off the progress bar
  • Be careful about your choice of image boxes if you use graphics
  • Turn off the option of having the title on every page
  • Choose buttons which look good when small
  • Consider the pros and cons of using data pickers
  • Check how your survey looks on different phones and browsers

Do not:

  • Use items that use a lot of memory, such as sliders, map controls and large pictures (some older devices may not display sliders and map controls correctly)
  • Have lots of questions that take a long time to look through on a small screen
  • Have many open-ended questions where you ask respondents to enter free text

Background

Surveys delivered over the Internet may be viewed on any type of device, from a large monitor to a smartphone. If you know that a survey is only going to be seen on one type of device, you can design for that screen size and set of features. If you are not sure whether people will be completing it on a smartphone or at their desk, it can be more challenging.

Snap now incorporates the mobile meta tags “HandheldFriendly” and “viewport” to make Snap WebHost and Web:HTML surveys look better on handheld devices. Snap provides style templates suitable for PDAs and smartphones. These are tagged PDA in the lists of style templates.

If you are creating a survey to be viewed on a specific device, you can set a page size that is the same as a device screen size.

Summary of steps

This example shows how to convert the snActivate survey supplied with Snap to work on a smartphone. To convert your own survey, you will need to check the content of the questionnaire yourself, and make changes to the questionnaire properties. (You can change the properties by applying a pda style template to the survey.)

The steps you will go through are:

In the questionnaire:

  • Consider whether to use data pickers for date and time (these take up a lot of the screen but may be quicker for entering current date and time than a smartphone keyboard)
  • Put page breaks between each question

In the layout properties:

  • Change the buttons to symbol buttons rather than text buttons
  • Remove the title on following pages
  • Remove the progress bar
  • Remove the proportional edit boxes

In the page properties:

  • Set the page size (if you know what device people will be using)
  • Make it single column

Step 1: Creating an online edition using the pda template

  1. Start Snap.
  2. Open the survey that you wish to run on a smartphone. (This example used the Activate survey supplied with Snap.)

    New paper edition

  3. Create a Snap WebHost or Web:HTML edition. Click Editions and style templates button to display the Editions and Style Templates dialog.
  4. Click [New…] to create a new edition, and in the Publication Medium field, select Web.
  5. Select Snap Webhost or HTML from the dropdown list. This example uses Snap WebHost.
  6. Select Load Style to choose a new style for the layout of the paper questionnaire. Click SBW: browse button and select DefaultPDA.qsf from the file list.

    New paper edition

  7. Click [OK] to close the New Survey Edition dialog.
  8. Click [OK] to return to the Questionnaire – Design Mode window. You will be in your new edition. You will notice that it has a much narrower layout.

    New paper edition

Step 2: Checking the questionnaire

  1. Check to see if there are page breaks between each question. Insert any page breaks needed by selecting a question and pressing [Ctrl] + [S] to insert a page break above it.

    New paper edition

  2. Check to see if there are column breaks in your survey. If there are any, you can either
    • convert them to page breaks by selecting the first question after the column break and pressing [Ctrl] + [S].
    • remove them by selecting the first question after the column break and pressing [Ctrl] + [A].
  3. Check that your questionnaire conforms to the guidelines given in Things to consider when setting up your smartphone survey.

Step 3: Publishing and testing your survey

  1. Select File | Publish or click [Ctrl] + [Shift] + [W] to publish the online edition of the survey.
  2. Select Publish with Preview as the output type.
  3. Make a note of where the survey is published to, as you will need this information to place your survey on Snap WebHost or a website.
  4. The survey will be previewed in a browser. Check it for issues such as the size of images, etc., but remember that you can only see how it behaves on a smartphone when you are testing it on a smartphone.
  5. Make any corrections necessary and re-publish.
  6. Load the survey onto your website (if it is an HTML survey) or Snap WebHost.
  7. Look at the final version on a variety of smartphone browsers.

Changing the publishing settings when using your own styles

If you wish to use your existing styles rather than applying a style template, you must set the questionnaire properties yourself.

  1. Click Questionnaire properties button on the Questionnaire window toolbar to open the Questionnaire Properties dialog.
  2. Select Layout from the list of sections on the left of the dialog.
  3. Clear the Use the first title as the main title on all pages checkbox. This removes clutter from the screen and limits the amount of information that must be loaded on each page.
  4. Clear the Proportional edit boxes checkbox. This ensures that response boxes are kept at a usable size.

    QP: Snap WebHost layout property

  5. Click the Scheme button.

    QP: Snap WebHost layout property

  6. Set the Scheme to Images.
  7. Set the Style to Symbols.
  8. Choose the colour, shape and border that you wish.

    QP: Snap WebHost layout property

  9. Clear the Use Progress Bar checkbox. This reduces screen clutter and speeds up the load time, by cutting the number of images to load on each page.
  10. Click [OK] to save your settings.
  11. Select Margins in the Section pane on the left.
  12. Set the margins to a minimum width. Set the columns to 1.

    QP: margins properties showing SWH with reduced margins and one column

  13. If you know that your survey is only going to be viewed on one type of device, you can set the page width to the width of that device. Select Page in the Section pane on the left.
  14. Set the Width. (You can only set the page height for a paper survey.)

    QP: margins properties showing SWH with reduced margins and one column

    If you are unsure of the device width, or the type of devices, set the dropdown list to Fit to window.
    QP: section - page showing landscape sel

  15. Click [OK] to save your settings.

Conclusion

This worksheet has shown you how to set up a survey for a mobile phone. It has explained issues such as page breaks and graphic size.

For more information about image boxes, see Specifying a graphic to use as a box.

For reference information on setting the layout in the Questionnaire Properties dialog, see: Layout Properties.

For more information about designing surveys for mobile phones, see Smashing Magazine’s article A User-Centered Approach To Web Design For Mobile Devices and Jacob Neilson’s Alertbox columns (e.g. Utilize Available Screen Space).

If there is a topic you would like a worksheet on, email to snapideas@snapsurveys.com