Designing/Developing a survey webpage, built with Flask (python)

Figure 1. Screenshot of a beta survey page

INITIATIVE 

When I was asked to review the existing UI of the survey [figure 2], I pointed out several mistakes the former one made.

1) There’s no description of what a participant needs to do.

2) The description of some questions are not articulate enough, especially first one.

3) Each question doesn’t have any number label.

4) If you want to use convention of survey such as radio button and check box, use it accordingly.

5) In this survey, recommend not to use colors in the questions except the Submit button, especially first one.

6) Use a progress indication. People want to know how many questions left.

Figure 2. Initial UI of the survey

After reviewing the page, I draw a UI mockup of the survey with Balsamiq, reflecting my points.

Figure 3. Mockup

Development (front-end)

First of all, I created a its structure with Bootstrap framework. One of advantages to use Bootstrap is that it includes a responsive grid system so that you don’t have to consider readers’ screen size. Otherwise, you need to specify each screen in order not to break your design. Moreover, the framework already includes sets of form elements such as radio button, checkbox, textarea, and so on, which you need for questionnaires. It does even have a set of form validation stylesheet.

Development (back-end)

The former site was built with Flask (python), a micro framework for back-end support. In the Flask, you can easily divide render_template based on the client’s method as following.

if request.method == ‘GET’:
(codes…)
elif request.method ==’POST’:
(codes…)

Also, you can pass variables to rendered template 1) by assigning a variable in HTML template to a variable in Flask, or 2) by using g variable in both HTML template and Flask. In these two ways, you can keep variables across pages.

1) In order to pass a filename of a video to HTML
In Flask :

return render_template(‘index.html’, filename = ‘./static/’ + filename)

HTML template:

<script type=’text/javascript’> var filename = ‘{{ filename }}’; </script>

2) In order to pass a percentage of progress to HTML

In Flask:

g.percentage = 100* g.currentnum / g.totalnumber

HTML template:

<span id=”progress”>{{g.percentage}}%</span>

Lastly, here’s how Flask gets user input from form tag in HTML.

user_input = request.form

then, you can access each input by user_input[‘input name’]

The final prototype

As I pointed out several issues to be improved from the original UI, the final prototype includes 1) labels for each question, 2) more detail/clear descriptions for survey participants, and 3) a progress bar on the top of the screen. 4) In the context of survey, participants only can see questions they already walk through or are working on and the next question will appear appropriately after users making answers to the current question. 5) I only used one color for the progress bar and button for action in order not to distract participants from questions.