As far as I know, there hasn’t been a lot of research into using crowdsourcing to optimize or even design web elements. So this weekend I ran a simple experiment into using crowdsourcing to create the world’s first crowd designed button.
As a starting point, I used the WordPress download button in the newly redesigned WordPress.org header.
I coded it using LESS, which enabled me to add randomizable variables. By randomizing the gradient colors, border colors, paddings, highlights and shadows, I could create an unlimited stream of button variations. I kept the randomizations within a reasonable range, but there was enough randomization to create some fairly unique looking buttons.
Here’s a sample of the buttons my system randomly generated. Click for a full preview.
Not all the buttons are attractive. Some of them came out looking weird. But, is it possible to find a diamond in the rough?
Here’s where I turned to the crowd, asking thousands of people to perform the simple task of choosing their favorite and least favorite buttons from a set of 3 randomly selected variations. The button they chose as the most attractive received a score of 1, the least attractive received -1 and the one in the middle received a 0.
I posted the job on CrowdFlower. After 4 hours and $30, I had ratings for 12,000 different button variations.
Processing The Data
It’s fairly easy to represent each variation as a series of numbers. You can represent colors using RGB, HSV and LAB. Paddings, font size and highlights are inherently numeric. From here I used regression to essentially smooth out the distinct scores of -1, 0 and 1 into continuous values ranging from -1 to 1.
The idea is simply that a good regression model will tend to give types of buttons that consistently received scores of 1, a higher value. Given enough data, the model should also be able to predict which button has the highest chance of receiving a 1 rating, or which button will would most often be selected as the most attractive.
I tried out a few regression systems. Google Prediction, Weka and my own custom system. In the end, I chose Weka. It gave the best results in the least time. I also like the idea that it’s open source, so it probably wont disappear any time soon.
After creating a model using the 12,000 variation ratings from the crowd, I used the model to predict the ratings on another set of random buttons. Finally, I chose the button with the highest predicted rating.
After all that, this is the button my system chose as being the most attractive.
Not bad! I’m not claiming this is the most attractive button ever designed, but in my opinion it’s better than the current WordPress download button. What’s exciting is that this button didn’t require design input from a professional designer. That was taken care of by the crowd.
For now, this was just a fun experiment I thought I’d share. If the system matures, it could serve as a useful tool for non-designers to drastically improve the designs of their interfaces. It might also be useful for designers to break through design block.
If anyone from WP.org sees this, you’re more than welcome to use this button design :)