Questionnaire
Table of Contents
Details
- Date Completed:18 April 2006
- Days/hours spent:6 days, 2 hours
- About the company:Amplefuture
- Software used:Flash 8
- Tag:SWF (Flash 7 Actionscript 2)
Currently working on…
Lots of freelance and e-commerce projects.
Latest Work
Search Portfolio
Designed and developed a questionnaire in Flash 8 using Actionscript 2.0 and Flash player version 7 compatibility.
1. ActionScript
Introduction
As with all projects, in-depth research is required into what technologies and compablities Flash has. Since Actionscript is simliar to Javascript, its syntax and use of arrays is significant to this project. As the user presses a selection for a question it stores this information into 2 arrays. One for "what question is this?" and another array stores "what did they select?".
POST
So that when it came to collecting all the information I could just use a for loop and I'd be on my way to completing this project. When the user gets to the last question and presses the submit button, the two arrays were merged togerther and placed inside an empty movie clip. Then using Flash's ability to send variables inside a movie clip via GET or POST, to send the information to a server-side scripting language.
Arrays
One problem that arose was that once the for loop merged the 2 arrays together, data was overwritten. This is because, if someone presses 2 selections from the same question, the 2nd selection would be only submitted to the script. To solve this I used a crude method and created an array with all the question numbers inside. Then using another for loop to scan through all the questions and selection arrays, and put them together inside an associative array. I used the toString() function I could separate all the selections from the same question when it was sent to the PHP script. This made things much easier for our developer, as he could separate the answers using the explode function in PHP.
Flash screenshot, where the actionscript is gathering all the question and answers together and placing them inside a multi-dimensional array.
User-centered feedback
Another problem occured when a user picked the "No Preference" button. I had to figure out a way to disable all the other buttons and to also enable them again if the user unchecked the "No Preference" button. Luckily, I made sure I placed all the questions inside their own movie clip. This helped, as I could access all the elements inside that movie and disabled them, except for No Perference.
Code example:
_global.disable_buttons = function (mc:MovieClip):Void {
for (var name:String in mc) {
if (mc[name].button_text.text != 'No Preference') {
mc[name].enabled = false;
mc[name].gotoAndStop('deselected');
var num:Number = _global.num_in_array(_global.aAnswer, mc[name].button_text.text);
if (num != null && _global.aQuestion[num] == mc._name) {
_global.aQuestion.splice(num, 1);
_global.aAnswer.splice(num, 1);
}
} else {
mc[name].gotoAndStop('clicked');
}
}
}
Flash screenshot, where I'm writing the actionscript to disable all buttons within a question if "no perference" is pressed.
I also created a function which checked to see if the user answered all the questions on the current frame. Otherwise the next button would be disabled.
The last two questions were "What I like" and "What I don't like". So I made sure that the user couldn't click on a selection in "What I don't like" if it was selected in "What I like". I applied functionality into the other questions, so if the user went back to a previous question they would be able to see what they selected.
Flash screenshot, showing the last two questions "What I like" and "What I don't like", worked with each other.
2. Design
Introduction
On a usability sense it was important to analyse all the questions and answers and find out how to make good use of the screen space (740px by 500px). The last two questions had 24 selections while the other 10 questions had a max of 10 selections. This proved to be difficult as trying to create an attractive and logical design was hindered by the huge difference in selections.
Flash screenshot, where I'm placing all the selections inside a question movie clip.
Three different designs
But this didn't stop me from trying my very best to push the boundaries. I came up with three designs, all different from each other. One design used elements from their current site (rounded corners with thick stroke), another design completely white and with fresh green buttons, while the last one had curved features. The latter design was my least favourite as I didn't put as much effort into it. Strangely that was the one that got picked! (and learning my lesson this time around...). So I had to carry the design one with a unusual layout.
Flash screenshot, the three different designs I created.
Imagery
The client wanted some pictures on the questionnaire to liven it up...! Sadly, since they picked the curved design it wasn't possible to fit pictures in as well as question and answers. So I thought it would be a good idea to create an immediate scenario, like when curtains close for interval in a play. Which would be the place that would show the picture.
Client Feedback
I like receive feedback on my designs, be it negative or positive, there is always a lesson learnt. The first design stage I was told.... "the buttons seem rather boring, make them more funky", "we don't like the colours, make them more lively", etc... (I can't remember all of them) But I took on board what they said and tried to analyse their perspective as well as what User-centered designs should be based on.
What's hot now...
I applied a gradient effect, what is hot at the moment, and made the button states (hover, down and normal) more obivous, hover, had a flat green, anddown, had an inner shadow (like it was pressed in). I tried livening up the colours but I believe in consistently and didn't want to go too far away from the colour scheme of their website. I enforced the importance of this and we agreed to pick slightly brighter greens.