Grow your CSS skills. Land your dream job.

Results of Group Design Project on Rating Three Candy Bars

Published by Chris Coyier

Last week I proposed a little design challenge: design a small part of an interface which allowed a user to rate three candy bars in order of how much they liked them. Quite a few folks took a stab at it. I'd like to round up what I feel were the best entries for discussion and then pick the "winners" (and remember, this is just me picking my favorites, not necessarily what would absolutely work the best in every app in the world).

Remember, in Tinkerbin, you often have to click the green "Run" button for most of these to work properly.

The very first entry by Jesse Shawl was just three dropdown menus:


View

I'm glad Jesse posted this because it highlights an important aspect of this challenge. The design is very simple, which is good (although I'd work on the spacing to make it more clear what goes with what). But it allows a user to make a mistake. The user can rate each candy bar, but that user can choose the same rating for each candy bar, which doesn't solve the problem of rating them in order.

Also utilizing dropdown menus is an entry by Moritz:


View

At first only one dropdown is shown, with all three choices. After you choose from the original dropdown, a second dropdown is shown with only the remaining two candy bar choices, and lastly a third dropdown with the final choice. I'd critique that the last choice isn't needed, but it does complete the flow.


An entry by David Booth is clever in that it uses the candy bar itself as a bar chart to reflect its current rating.


View

Unfortunately it falls victim to the same problem as Jesse's solution in that a user could rate two or more candy bars the same rating. It also doesn't utilize any known web affordances. Yes, it says "Click a candy bar", but that's a rather unusual request that isn't intuitive. Also a bit strange how it requires 5 clicks to go through a cycle when there are only 3 possible ratings.


Nate was the first to try out a drag-and-drop interface.


View

This solves the problem of each candy bar having a unique rating. In other words, it's not possible to have the candy bars in an invalid rating order state.

There are similar drag and drop solutions Martin Blackburn, Josh, stursby, Kyle Sevenoaks, Remco Hendriksen, Óscar Mario Víquez, Michael Crawford, and Kirby. Cooper also did a drag and drop technique, which has the neat feature that a notification message pops up quickly summarizing the change.

Another by Todd Wolfson who also attempted a variation: select-and-drop. Zach Smith created "wells" for which the candy bar icons can be dropped, with an "X" option to move them back out in case you make a mistake. Daniel again with the wells.

A word on drag and drop

Drag and drop has been around in computer operating systems for a long time. Users know how to do it and feel comfortable doing it. But drag and drop is far newer on the web. It's not all that common and (I don't have any data, but I would wager) that many users don't even think to try it on the web.

But darn if drag and drop isn't useful! Particular in cases like this. I'll put forth that if we choose to implement it, we should do all we can to tell the user what we expect of them. Some options:

  1. The mouse cursor should be set to "move":
    .move {
       cursor: move;
    }
  2. Text explaining what to do (e.g. "to change the order of the candy bar ratings, drag the one you wish to move to the number you wish it to be.").
  3. The design should scream "drag and drop". Perhaps a little handle by which to drag them and a dotted-line "well" for which to drop them.
  4. Have an alternative interaction besides drag and drop that can accomplish the same goal (if more cumbersome). This is particularly important for mobile, since there is no mouse. It's possible for a tap-drag-tap thing to work, but it's certainly not an established pattern.

In Wufoo, in the Form Builder, we offer drag and drop to add new fields to your form and rearrange the current ones. We explain it via text and show the correct cursor. But everything that can be done via drag and drop can be done just through clicking as well. It's more cumbersome in that all new fields go to the bottom and you need to click over and over to position how you want it, but it's possible. Drag and drop just makes things easier if a user bothers to try and learn it.


A similar UI to drag-and-drop, but allowing for clicking instead was done by Rafał Krupiński.


View

Rolling over the second or third candy bar reveals an arrow, which when clicked, moves that candy bar up one spot. Very simple. As a slight improvement I might suggest making the "move up" arrows even more obvious (so as not to require explanatory text) and visible at all times. (Alternative with text). Offering only an up arrow is also slightly weird in that it might not jive with a user's own mental model. What if they think to themselves "Snickers, ewww!" and want to move it down. They can only do that by moving something else up, the opposite of what they are currently thinking.


prabhu.webdev tried out a voting system where there are up and down arrows for each candy bar which affect a numeric value.


View

It's nice to see a totally different approach to the UI, but unfortunately this again doesn't solve the problem that two candies could be rated the same. If this idea was extended to having a group decide which candy bar was best, this might be just the ticket.

Similar "voting" concept by Tauseef Jamadar.


Richard Bland tackled a number of the problems with drag and drop with this "winners block" idea:


View

This UI makes the concept of drag and drop a bit more intuitive since most users likely understand the concept of a winners block and that each contestant should occupy one tier. Unfortunately dragging each candy bar onto a block isn't overly satisfying (it's hard to tell if you "did it right") and there is nothing preventing multiple candy bars from sitting on the same block, or deactivating unused blocks.

Richard updated it to utilize some "drop zones" and snapping behavior, which conceptually is a good idea but came out a bit buggy.


Raphael Lopes utilized drag and drop but in a unique way: by making the candy bars into vertical sliders.


View

This felt a little more natural to me than some of the other drag and drop solutions, but I wish there were more affordances going on, like the browser default UI of a slider, a move cursor, or some helpful text.


This one by Thomas Dybdahl Ahle I quite enjoyed because he brought some mathematics into it. This one requires the least number of actions to complete the task (2) by just offering two comparisons.


View

I wish that, visually, it didn't look like it was going to be a three-step process. I think it would be nice if it literally told you it was going to be a two-step process. It would only show you the first comparison, then reveal the second comparison on completion of the first.

Similar click-to-vote idea by Zach Malone. More by Pablo Botta, William Blanchette, and IJas require three clicks to "finish".


Damon combined the idea of voting with a bar graph:


View

Neat idea, but it is victim to the early problems we discussed like being able to vote the same candy bar the same rating and is a bit too complex, allowing 1-10 values rather than just rating in order.


Baylor Rae' implemented something very similar to the "Radio Buttons with Two Way Exclusivity" idea:


View

I quite like the use of simple form elements. My biggest critique is that the two-way exclusivity feels like kind of a bummer as a single click can sometimes deactivate multiple previous selections if there are conflicts. An improvement would be to use value-swapping, which feels nicer as it deals with conflicts by swapping instead of deactivating.

Baylor also updated this technique. It falls back on the radio button grid, but when JavaScript is enabled, goes with the two-click ordering system.


Another version of the click-to-rank system is from Remi:


View

Two clicks to rank all three. It does rely on a hover effect (important to remember how mobile doesn't really have hover). But that could probably be cleared up with some text.


This technique from Peeter combines stuff from a lot of the others. It looks like the radio button grid at a glance, but it's more like a click-to-vote in practice, and the result looks like the bar graphs.


View

Peeter wasn't the only one to implement UI that forced people to choose extremes like "Awful!" and "Delicious!". I was more interested in simply ranking them rather than applying labels. With extreme labels like these, it might detract from a user filling it out at all, if they disagree with them. For instance, someone might really love all three but one slightly more than the others and one slightly less (LIKE ME).


This technique from Caio Dettmar used actual sliders:


View

Sliders are pretty established patterns but this has the same issue as many earlier in that you can slide two candy bars to the same value. Also why the editable input? The slider doesn't seem to change when you change that value. Typically, a slider is used when the actual numeric value isn't important (like it isn't in this case).


The most imaginative and "out there" idea was by David Booth who created the "Candy Bar Sniper":


View

It's like the Winner Stand idea, but balloons float overhead carrying the candy bars. You click the balloon (popping it) and the candy bar falls into the trophy, rating it. If the goal is speed and practicality, of course this it out, but whatever, this is super clever and fun! Using an idea like this may just be a huge hit with users encouraging engagement and sharing. For instance, when creating a new Wufoo account, right after you are done with the forms and before you see the app screens for the first time you are taken to a screen that says "Assembling Wufoo Powers" where a series of abstract icons flash up in a row. This isn't because the site needs time to create your account (it's already done by that point), it's because it is super fun and makes the experience of creating an account more special.


I wasn't too concerned about the technology behind the design, but Richard came up with a clever way to rearrange the candy bars in order of preference using only CSS. The especially cool part is that it uses radio button inputs, so theoretically this could submit the data like a real form.


View

A similar mostly-CSS technique was done by mike, with just a touch of jQuery to prevent duplicates.


In an extreme attempt to reduce the number of clicks to solve the problem, this UI by David Herrera only requires one click:


View

Clearly not scalable (as David said himself) but it's interesting to see the extremes.

Closing Thoughts

It was amazing to see all the ideas roll in. There was lots of interesting submissions. Sorry if anyone was missed here. A few I just couldn't get to work or were just too far off-the-mark. If you are itching to view more, read through the whole comment thread.

This accomplished just what I had hoped: to highlight how many different ways even the simplest user interface mechanism can be done. Next time you need to design a bit of user interaction, think of this and how complex even the seemingly simplest things can be.

One surprise for me is that no single practical solution stood out as "clearly the best" in my mind. Perhaps that's to be expected since we had so little context to work with.

"Winners"

Remember, not an indication of the best possible UI for any app, but these three I thought did an exceptional job.

  • Baylor Rae' - Simple click-to-rank with non-JavaScript fallback.
  • David Booth - Candy Bar Sniper
  • Richard - Mostly-CSS click-to-rearrange that was a real <form>

Congrats ya'll - let's do this again sometime.

Comments

  1. ComeInEarth
    Permalink to comment#

    Impressive work, everyone!

  2. Permalink to comment#

    Thank you Chris for this group project. I really had fun doing it, and learnt quite a few things in the process.

  3. Januardi
    Permalink to comment#

    That was awesome,,,,,
    I can learn many thing at here,,,
    Let’s do it next time,,
    I will try it, to be the best,,,

    hahahahahahaha,,,,

  4. Permalink to comment#

    Cool roundup, but I noticed that Richard’s design is buggy. If you click on the bottom one, then the middle one, it will swap 2 and 3 (as expected), then move all of them up by one, moving 1 into the third position (not as expected).

    That aside, the roundup was cool, and it was interesting to see all of these design ideas.

  5. Permalink to comment#

    Baylor actually used the Market Research standard layout, an SA PER ROW question.

  6. Andrew
    Permalink to comment#

    Marvellous work everyone!
    those are all really cool ways of doing such a standard opinion poll.

  7. Great write up to a very interesting and exciting post. Congrats to the 3 winners!

    I am happy to see that David Booth got recognition for his sniper game. Although the other winners are “ideal” and simple solution I still think user experience is much more important these days… People need to feel engaged with what they are doing and that little bit of fun and role playing is great. :-)

    Congrats to everyone who entered too. We all had a bash and we all learned something new about ourselves. For me, it was the very first time I had implemented any kind of drag and drop, and although buggy, it is definitely something I will try again in the future.

    Thanks to Chris as well for hosting this!

  8. Due to lack of time, I wasn’t able to participate to this challenge. However, here is my contribution:

    I’ll write an article on my blog ASAP to support my solution. In meantime….

    Radio Buttons with Two Way Exclusivity are the right solution because form elements are used (radio buttons are right solution for voting/rating). In order to “rate”, visitor need to perform three actions (three clicks).

    Javascript has to been used to add improve UX by manipulating the content. Drag and drop solution is much better UX because visitor can rate candies with maximum 2 actions.

    The solution has to insure better UX (with javascript) and javascript failsafe (by using native forms).

    Here is my solution:

    http://example.dalibor-sojic.info/pages/candy-rating/

    P.S. Sorry for my english
    P.P.S. Better explanation soon on my blog.

  9. Jon Spooner
    Permalink to comment#

    This was such a great exercise for the site.
    A) I learned more about the other readers through their thought processes
    B) learned a bunch of new techniques in form dev
    c) had fun thinking through the possibilities (though I did not have time to submit a coded version – this time!)

  10. Scott
    Permalink to comment#

    Really enjoyed this design challenge, you should do this more often, Chris! Congrats to everyone, especially Baylor Rae who was inspired by my attempt but actually made it accessible :D

    There seems to be a little negativity towards drag-and-drop. Maybe for only 3 choices it is too confusing but for 5+ choices it’s definitely easier than other methods. Click-to-rate is more “costly” if you make a mistake because you usually need to start over, whereas with D&D you can fine-tune. Agree that it should be immediately obvious that you need to D&D.

    • You had a really good idea that I would probably use on a live site. I thought about making the selected candy bars sortable after two are added, but I didn’t want to make a third revision.

      As Chris said, sortable lists aren’t too obvious on the web. But my main concern with sortable lists is that they don’t work on mobile devices (I only tested on the iPhone). With the “click on the candy bars in the order you like them most” it’s easy to figure out and accessible on most devices.

  11. jsdev
    Permalink to comment#

    Chris, even though I didn’t participate in this, it was very fun to watch.
    Please do more of these, prizes aren’t even needed, just for the sake of winning. monthly?

    My unentered design made more sense for a list of 10 not so much three, and had touch screens in mind, think tap, tap ;)

  12. im jus learnig css..its very coool advice

  13. This was a really cool and very informative “contest”. I loved checking the site daily to see all the new concepts introduced and I saw a bunch that I liked much more than mine.

    I wonder if it may be somewhat site specific. Different sites are going to have a different audience and functionality already built into the site that people are used to.

    It would be cool to expose some of these concepts to “real-world” people and see their completion time and number of mistakes.

  14. Permalink to comment#

    very nice!

  15. StraPro
    Permalink to comment#

    Awesome contest. I loved seeing all the different appoaches. Super creative and fun

    Great job everyone

  16. Permalink to comment#

    The Thomas Dybdahl Ahle method does *not* always only require 2 steps — if you choose Twix for the first two steps, there’s no way to know how you rank the other two against each other, so a 3rd step is required. I agree that the second two steps should be hidden initially, then they can reveal only what they need to.

    The sniper game is brilliant, even if it reminds me of the annoying “shoot the -whatever-” banner ads.

  17. Permalink to comment#

    Aw contest enjoy a lot
    held in future also .. like it

  18. great insight and clever contest!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".