Wenbo

Yesterday all of a sudden I had a crave for Asian dessert “Mochi” and I decided to make some.

I was digging into my memory and was looking for recipes online, trying to find a perfect recipe. I noticed most recipes are “step by step” format and in some cases the recipe can be incredibly long.

I devised another format of recipe, mainly in Grid. See the image below, it’s pretty self-explanatory.

Recipe Design - Wenbo

I like this grid style, cuz:
1 – in terms of length, it’s not that daunting
2 – it gives u a hint of “which ingredient interact with which” in neighboring blocks.
3- it offers multi-tasking possibilities.

However, during the real cooking process, I found it not optimal. The underlying reason is: It’s not as straightforward as the step-by-step style;

User wants simple no-brainer instruction during cooking and user’s need determines everything. That’s why step-by-step instruction flourishes.

As promised, the topic this time is survey design, and as usual, I’m sharing a project that I am working on.

Rules of thumb

- Speak users’ language, be concise but not ambiguous
- It never hurts to do one more dry run.
- Response rate: 20%-40% for target email invitations, 10%-15% for web popup windows, 1%-2% web banners

Prelude: Survey and you

We all agree that online survey is a very effective method to unveil l the answer to product stakeholder’s questions and collect quantitative data about target users. It is especially superior in making strong claims about narrow phenomena.
There are several ways of attracting users to take your survey, ranking in efficiency, from highest to lowest: email campaign, popup window (which I dislike most) and website banners. In my case, I used a sliding animation, hoping to have user’s attention with minimal negative influence on browsing experience.

FRBSF Survey

Apple Survey

Step 1: Formulate Goals

What’s the question in your mind? Do you want to know your users’ characteristic information, their behavioral preferences or their attitude toward your product? In my case, we hope to know users’ impression of usability/visual appeal/functionability/web page speed and we can prioritize them. List all questions out, group them semantically, and eliminate ones that you don’t really need, because, the shorter the better.
A gorgeous example is from apple.

survey frbsf other

Step 2: Design the questions, make it short

The rule of thumb is: make it short. If this survey is a single-question-one, GOOD, if a multi-questions one, don’t be discouraged, remember not to put too many questions on one page, because a long-and-daunting-survey is not that friendly to users. If possible, try to use as many as many as many close-end questions as possible, which will save both users and your time. If you hope users to surprise you, it is ideal to have an open-end question with the survey.
Or you can do what I did here, using a little bit Javascript, asking for “why” “other” when user clicks on “strongly disagree” or “other” button. A tiny interaction makes a difference, right?

Agree/Disagree Array

Another nice approach I would like to mention is the agree/disagree array. If you have a group of somewhat related questions all asking agree/disagree, why not put them into an array, reduce the reading time of the user and make the survey more visually appealing.

Survey Design

Step 3: Test, Pilot and Start the survey

Actually a better phrase for this section is: Iterative test, iterative pilot and finally start the survey. The test of the survey helps u refine your wording in the survey, and the pilot helps u balance the amount of information you require and the time users need to spend on it.
Send out the survey using: email, popup window, banner or even telephone calls. Remember, the invitation message needs to be short, and full of incentive. A subtle example shown below is from msdn while in contrast an annoying survey is displayed side by side.

Last Step: Data analysis is important

Either a home-built survey application or 3rd party online survey tools will generate reports. Do spend GOOD amount of time on it, totally worth it.

Do you remember every time you forgot to save something and tried to quit some application, an alertbox popped out abruptly with a loud “bang” saying “you haven’t finished saving, are you sure you want to quit?” This is an excellent error-proof mechanism but in some cases, we can improve it with a subtler alert, making it more usable.

Here is a comparison. In one of our application we have a text submitting form with a character limit of 600. Unlike the traditional “you have reached 600″ alert, I tried to implement in a more user friendly way.

1. Provide a live word count. If exceeded, it will turn into a negative value with red color the color I believe is a good metaphor for “stop”
2. Take of the “600″ alert
3. Disable the “submit” button after user exceed the limit, providing a soft alert
4. While the textarea is blank, show a hint message “this is 600 limit only”

Usable vs unusalbe warning

So, how do you feel about it?