Last time we did a group design project, we did a list with functions and we got lots of interesting ideas. Then the other day I linked to a video of Ryan Singer, a tiny part of which inspired the idea of radio buttons with 2-way exclusivity. Then reader Erik Edhagen suggested I do more of those group design project things… so here we are!
Your Mission
Create an interface where a user is able to rate three candy bars (a Snickers, a Twix, and a Butterfinger) in the order of how much they like them (1st, 2nd, 3rd).
You don’t need to save the data. You don’t need to build an entire web page around it. Just the part where you do the rating.
Create your demo using Tinkerbin and post the link (and any notes/comments you might have) in the comments below. If you want to use a JS library in Tinkerbin you gotta link it up in the HTML section.
There are no other rules. Get creative.
Prize
I’ll pick three users who I think did a particularly good job and send them a CSS-Tricks T-Shirt.
Let’s say about a week. I’ll close the comments on this post on Tuesday, October 25th and pick the winners. Follow conversation will happen in some kind of roundup post.
Why?
Just to be clear, I have no particular need for this. I’m not trying to get “free work” out of you.
I think this is just a fun and useful exercise for practicing design. You learn while thinking through how you think it’s best to approach this. You learn while creating it. You learn while seeing other people’s approaches. You learn dissecting and discussing all the approaches.
Sounds interesting ..
Interesting indeed. I might jump in this one.
sweet n’ simple baby!
http://tinkerbin.com/r0KPfQTA
Did you even try lol.
Total fail. I can rate each bar as a 2.
Love the concept. I’ve got a great* idea, just need to find the time to do it!
*Greatness level dependent on you, our judge haha
Rate your Bar! Click to move it up!
(You have to click Run for the js to work)
http://tinkerbin.com/KC64oGvH
I like the idea
Too confusing, plus like a previous example I can rate them all the same value.
Needs some work still :/
:)
http://tinkerbin.com/nA3rxWqf
I’m not that convinced drag&drop is something people love to do on the web.
I like, but you’re right, there’s still some edge cases. In the latest Chrome, I can make the bar images disappear, with no way to bring them back. It’s the kind of idea I immediately thought of, though. Nice initial work!
I really like your use of ‘this’ in the Javascript; I kept on limiting myself to closuring the element I bound to instead of looking it up every time.
A few constructive criticisms:
– To capture all mouseup’s, you will need to bind to window.parent.body and do some bubbling.
– If an element is not dropped on a valid slot, return it to its original position
– Handle the case for dropping an element into its original slot (Hint: do nothing ;) )
– Instead of requerying frequently (that is getElementById), try to memoize what is going on.
– Instead of using .innerHTML, use .replaceChild; much more legal and less strenuous on the DOM.
cheers for the construtive feedback, my first time doing this sort of thing without jquery. I’ll optimise at lunch, until then http://tinkerbin.com/aq1lD5Oq
I like it a lot, the only problem I see is that when I drag something from 3 to 2 it will not slide number two down before I release the mouse (it should show that it is alive and knows what is happening). Not a major problem, and with that fix I don’t think it is possible to do it any better.
If I drag and drop away, It disapears… :/
Check out the latest version, above your comment :)
http://tinkerbin.com/i5KAPrgo
The closest I have gotten with mainly pure CSS.
Coming up: a jQuery UI event-based system and non-jQuery UI version (if I don’t get tired by then).
I like it but it requires jQuery. “mainly pure css”?
Lol, I was referring to the numbering schema and as well as the coloring. Sorry for the confusion.
Upboat your candies, or bury in to oblivion
http://tinkerbin.com/N36eXsb4
improving now …
You can still rate two bars the same though.
Todd’s got it so far from me :0)
if tinkerbin not working … check this
http://jsfiddle.net/QnnDW/
The problem here is that a) you can rate all 3 candy bars the same number, and b) the user is supposed to rate them 1, 2 and 3. So I don’t think this complies with the requirements :(
I may have a think about this one too!
Updated to use Javascript to deal with the classes (so it isn’t broken as with before).
Also, a fix on counting that I missed and made border-radius more compliant.
http://tinkerbin.com/CZQ0Ey5S
I will leave the non-jQuery version for another day. I don’t think I can make any better UX than jQuery UI Sortable gives.
:( I wrote it from scratch, thought it was part of the challenge.
Hey, whoa. This is an exercise, not a competition; the point is to have fun. I admit that yours takes the cake with its complexity with designing its own Javascript.
bit buggy, but here it goes ( credit goes to David Booth for image sources ;-) )
http://tinkerbin.com/yfndOlhh
Todd’s solution is the one I’d go for, but it doesn’t work in mobile Safari.
If you wanted to be super scientific and eliminate any default bias you could have the user drag the items from a ‘bin’ into preference order, or randomise the default order on each page load.
http://tinkerbin.com/ti4c2Zwg
simple as that :P
Doesn’t work for me…
@Richard: Have You tried clicking the ‘RUN’ button? :P
PMSL – No I really didn’t! I apologise sincerely… *Duh*
You get the feeling you should be able to press the green arrow.
Absolutely… completely slipped my mind… Simple yet effective idea. Check mine out below: http://tinkerbin.com/tm7IyKrV
@Thomas: Green arrow can be a hint instead. It’s just a sketch. On the other hand – it only appears when mouseover is triggered on a list item – it can’t be clicked.
@Ritchard: Nice logo out there – good move, the t-shirt is yours :) But gettin’ back to the point: I’d add snap in both: bottom container and podium sections with some sort of round placeholder shown when your “mentos” is being dragged over certain area.
http://tinkerbin.com/jXHf7J0I
@rafal – Thanks for the comments, and yeah I agree, the snap to function is something I may add next along with some additional styling and labelling.
LOL – Mentos… mmm nice right?
Whilst lying in bed, I realized it would be quite quick and easy to do this sans-jQuery. Also, I have been meaning to do more katas. As a result, I got up and tossed this together. Oh, and I decided to join the ‘use an image’ trend.
http://tinkerbin.com/m2eJWqgu
I feel like I am missing some good concepts so feel free to point them out. Also, for those of you are up to it, I left some TODO’s that I would love the solutions to =P
I think animation, and an indicator on clicked items, would make it easier to know what was going on.
Could you please explain more? I did put an indicator on clicked items (it makes them very blue) and it seems to work in the browsers that support Tinkerbin (FF and Chrome).
I agree that animation would be nice and slick (especially if done with CSS3-animations) so I will add it in later today.
fixed the issues :)
http://tinkerbin.com/DLLzxRIC
bug fix
http://tinkerbin.com/aq1lD5Oq
Almost done… Ill share shortly
http://tinkerbin.com/tm7IyKrV
Here is my version.
I have used the JQuery UI library taking advantage of the Drag and Drop feature to allow users to drag their favourite chocolate bar onto the podium.
In an ideal world this would save the users data in some kind of poll?
I have styled it with CSS as best I can with the exception of green gradient. In this case I just ran out of time to finish the CSS3 gradients and instead just included the fallback png.
Hopefully it will be pleasing enough on the eye and have the required functionality.
I should point out that I am actually linking out to all of the JS required, so that may slow it up a little…
Great Concept! You inspired me to make another one using jquery..maybe.
Thanks kindly,
I inspired myself, I was considering creating another one with better styling, make it into a proper interface so to speak.
Reply to this if/when you have something else to show.
Here it is: Candy Bar Sniper
http://tinkerbin.com/JiwfbytL
@David – That is absolutely stunning, truly truly stunning.
If I had time today my plan was to take my concept and go for a onClick event, a bit like this, as suggested by another member of the thread but I don’t have the time. :-( Funny enough my mate last night said about some kind of “bubble popping” animation for it as well so when the user clicks on the bubbles they appear on the podium in the order they chose.
Friend me on Twitter/ or email me from my website, I would very much like to collaborate with you on future works… @blandydoes
@ Richard Bland – Thanks, I will send you an email by the end of this week.
Heres my solution http://tinkerbin.com/5BzRC3aU
Heres one just for fun
http://tinkerbin.com/atgItbDk
Here’s my piece .. will work more on this
http://tinkerbin.com/d6IyjNif
http://tinkerbin.com/vxvKIGvr
This is my version. I’ve used JQuery UI too …
=)
Cool. I originally sketched something similar based upon the slider. I like it.
Very nice, maybe there could be an indicator to help differentiate when they are close?
I don’t know if i understood your question. My english is very poor .. rsrs sorry.
I think yes, because jQuery UI has a proprety value. You can define when it is 0 and can add any class with a different style, or apply anythink.
Here is a merge sort based: http://tinkerbin.com/4j76GEUi
It should require the least amount of work for the user, and ensure optimal complexity if the number of bars grow :)
Can I offer a bit of constructive criticism here? *looking confused* I don’t find it easy to figure out what is going on… You may wish to add some description or labelling suggesting to the user what they are required to do. I found myself just clicking around with no real idea of the outcome.
Reasonable :)
Here it is with labels: http://tinkerbin.com/8OrNsOsV
The idea is that the user doesn’t have to care about the final ordering, but only the minimal number of individual choices.
I may revisit my earlier version and offer up some better styling and labelling.
I think when it comes to getting the user to interact with your site there needs to be an element of fun and reward for taking the time out of their lives to complete the task you set.
Ill stick with the podium concept because it is a recognisable symbol of positioning, the best will always be higher up on the podium than the worst, so the task is a bit more obvious. as a 1st, 2nd and 3rd positioning task.
It definitely requires additional labelling though. :-)
Chris what have you got me into mate! ;-p
wow lots of great examples –
– the earlier bar based interfaces were the most “satisfying” from a user pov. The drag and drop versions make sense but there is no clicking into place or finality.
-I agree with the observation that in pre-populated versions (with bars already in 1 2 3 order) the order could influence user voting.
My solution is a click to increment and decrement a bar, representing a specific brand of candybar.
Link: http://jsfiddle.net/TEfQd/4/
It’s very rudimentary at this point (no design really) and I’d like to get it to where it stops incrementing/decrementing at 10/0; I just don’t have the time right now.
Whoops – forgot to add updated version. This is the one I meant to post!! http://jsfiddle.net/TEfQd/5/
Very cool man …. congratulations ….
Updated again to add a bit more styling (still not much :) )
http://jsfiddle.net/3zzsk/2/
Ok, updated design, added logic to stop at 0 or 10: http://jsfiddle.net/3zzsk/4/
+1 for Damons!
Here’s mine.
http://tinkerbin.com/Dv5HBu7N
Stursby’s approach seems simple, is easily to comprehend, works well and could easily be customized. I like it a lot!
Heh, it has the same numbering problem I did. Buggy when (all done in FF latest):
– Click on the top element and wiggle it. The second one loses its prefix.
– Click and drag the second to the bottom (don’t let go). The second one loses its prefix.
– Click and drag the third to the top or second. The last one loses its prefix.
– Click and drag top to third. The second one loses its prefix.
– Click and drag top to second. The top does not change to ‘1’.
– When clicking and dragging any of the elements, the numbering gets screwing on the actual one being dragged.
Hey Tom, I just tried it in FF and it’s working fine for me…
What do you mean by “wiggling it”? are you just click it then moving your mouse all around?
I’m trying to break it, by dropping elements all over the place, but it’s still working for me.
http://tinkerbin.com/qlF4ttF8
An we’ve got another one! Lacks usability, but it’s cute :D
OMG! It’s animating now!
http://tinkerbin.com/5H8VHpD9
@Rafal – That is fricking sweet mate! Now you win the T-Shirt ;-p
You win!
Well, here is my idea:
http://jsfiddle.net/p4bl1t0/qcdDJ/
I think drag and drop is not the best choice beacause it could be trouble to use the UI in a mobile device.
So I do a click interface were you select candys in you order of preference (like a little child). You can re-order click again in a candy bar to get it to the top.
Extra: Semantic markup (OL, UL)
really slick and I love the non-presumptive horizontal list that doesn’t indicate 1st 2nd or 3rd out of the gate.
– good assumption on the drag and drop being tough for mobilers
but having drag and drop once the items are in the list would be nice for non-mobile folks who made a mistake. rather than having to “reset” each time you want to reorder your list.
You can reorder the OL by re-clincking on the elements in the list. This would make that the clicked item go to the top of the list.
Here is a little modified version
http://tinkerbin.com/uuCFJVoH
Here is my modified version of the drag and drop.
http://tinkerbin.com/L4VwQF4J
The design is better and I have incorporated a snap to inner function. If I had more time I would like to figure out how to get that smooth snap to effect but for now I think this will do the trick.
I agree with some of the comments about drag and drop not being an ideal solution for mobile. Again if I had time these are all issues I would address.
Order selection makes the most sense but it has been done so many times in the past, I really havnt seen many applications where drag and drop has been used for something like this. It is just really good fun!
:-)
I hope people like the design and the basic functionality.
Great work there Richard. The only thing I would suggest is to fix the location where it can be dropped. Right now it seems to be droppable anywhere. This is great place am learning lots
Yeah I am working on that – I would like it to drop smoothly into place with an animation too…
could you possibly keep the items draggable or onClick have them move to the highest available slot?
that way you can avoid the dragndrop issues while keeping the fun functionality for those non-mobile folks.
great work Richard! the thread of your development to this point is really fascinating!
Hi Jon,
This is becoming very interesting for me as this is really the first time I have dug deep into the drag drop functionality, I am very much learning as I go along.
Here is a modified version again: http://tinkerbin.com/0ndVeGsU
This time I have added an active class to highlight the droppable areas, and I have contained the draggable elements within the candy-wrapper (see what I did there in my code… candy… lol).
Then I added a revert for when they elements are dropped outside of the “drop zone” which means they revert back to their original position.
The trouble I am in now is that I cant get them to drop exactly into the center of the droppable container and once dropped I can only drag and drop into the droppable conatiners and not back to its original starting point if say a user has a change of heart.
Easy for users to understand and to the point. Sometimes less is more.
http://tinkerbin.com/X6hUX9yi
Whoops bad tag. Here:
http://tinkerbin.com/2zT7sFjF
Some sort of animation (color change, maybe) once the bar is dropped, would really help this out.
Here’s my go at it: http://tinkerbin.com/zXzQaR6f
Here’s my concept http://tinkerbin.com/isvzmZIr.
Mine came out looking a lot like your original design. I didn’t intend to copy your structure, but it does seem to be the most self explanatory.
I think it is the easiest to use because it follows a pattern that has been around for so long.
When surveys ask to rate customer service, they present a listed form with a number of radio buttons. And immediately I know how to read and rate each item. They don’t have to explain “Click a number between 1 and 10”.
While I think a drag and drop solution reads the best because the items are in an ordered list. And if you use an image like this (http://dl.dropbox.com/u/14873072/sorter.gif) usage is quickly implied. I can’t think of a good fallback for a browser without javascript enabled, nor am I confident in usability for a mobile platform.
Which leaves me thinking the pattern or one similar to the one I used is the best.
—
Here’s some sample PHP that would validate my example.
• [PHP CODE EXAMPLE] Success
• [PHP CODE EXAMPLE] Error
After looking at everyone’s ideas I think my favorite has been this method (http://tinkerbin.com/gi4pDmEQ) by Scott Vivian*. I find it faster to fill out and it scales a lot better than mine. However, it relies completely on javascript and that bothers me.
So I changed my original idea to implement Scott Vivian’s idea when javascript is enabled (http://tinkerbin.com/BAJasDxC). It is scalable and if it was in a form you could still get the order from
$_POST['ratings']
.## The Change
If JS is disabled it presents a regular form. But when JS is enabled it changes over to use the better system.
—
* If I didn’t quote the right person please pardon me for my mistake. There are over 150 comments (at the time I’m posting) and I may have missed the original comment.
Here’s my try : http://tinkerbin.com/57oln1L2
It definitely needs some visual improvements, but I think the UI is very nice and simple to use. From what I’ve seen so far, drag and drops makes it way too complicated for a user to understand or to actually use. Here, with just 2 clicks, you’ll have your candies ranked in order. I’m curious to know about what you guys think.
I think this is one of the best. Good job, Remi.
The only flaw I can see is mobile, because of hover. But for a desktop UI, I think it works.
http://tinkerbin.com/xaWo3Lpi
That’s mine. Came out pretty ugly with huge jQuery code. I’m pretty sure there loads of cleaner ways for doing it, but at the moment I dont have any better ideas.
This is a neat idea! As an idea to clean up your jQuery code, you could create things in variables. For instance, for each option, you have 3 different choices it could be:
$(‘.third li:last-child’).html(‘Awful!’);
$(‘.second li:last-child’).html(‘Good enough!’);
$(‘.first li:last-child’).html(‘Delicious!’);
If you set these as variables, you could make it a lot easier on yourself.
Thanks for the idea. I’ve just started learning jQuery so it’s still kind of new for me.
http://tinkerbin.com/QJaVFnJq
Peeter –
Looking a little bit better! A few more suggestions:
1. Set variables so you don’t have to access “$(this)” so much. It’s taxing on the CPU. Instead of having $(this) called 6 times for one hover function, setting a variable for “li.one”, “li.two” & “li.three” (such as var $liOne = $(‘li.one’); will help out a ton.
2. There are lots of lines where you manipulate the DOM with CSS to add background colors. Not only is it redundant, but manipulating the DOM takes time. Instead, you can set those CSS styles with class, like : .red { background:red } and in your jQuery, instead of doing .css(), you would do addClass(‘red’) and removeClass(‘red’). You can also set up the default background class with a white background, and add that class once it’s been removed in the hover off function.
Hopefully those aren’t too overwhelming. You can always write back if you need help!
Thanks!
Starting to learn something about jQuery.
1. I had one problem when I was doing the hovering with classes. When I was hovering one rating bar then hover effect was applied to all of the rating bars. I couldn’t find any better way to avoid this than using $(this).
2. I made classes for every background color I use. But I had to use !important in css to override the class that gets added when rating bar has been clicked. Is there any better way for doing it.
http://tinkerbin.com/NSw4F9xK
This has been one of the best posts…getting all the readers to show there skills and tricks! Good stuff!
After some serious deliberation and analysis , I think I’ve come up with the best solution of them all:
http://tinkerbin.com/3tr4Tepl
Ah ah, you win.
Might not look as pretty in older browsers…
http://tinkerbin.com/BvMQcIDC
-CP
Lets put a nice ‘move’ cursor in there — http://tinkerbin.com/r0dqngk7
Nice work. I am loving this one the best so far. Clear indication of rank, easy to use, and no ugly brown or olive graphics, or pixelated candy wrapper images ;)
I went for what I thought was the most usable method which I mentioned in my comment on the previous post. Two clicks is all that’s needed!
http://tinkerbin.com/gi4pDmEQ
The list numbers are slightly weird in Firefox but apart from that it works fine. Credit to stursby for his great CSS candy bar designs which I shamelessly stole :D
This is the type of solution I was going to present. Saved me the trouble. :)
I think it’s good and it’s very much in line with popular UIs on mobile that narrow down choices to minimize clutter, and then expand based on what you’ve selected. I think this is easy to use and, unlike some of the others, there’s no confusion or ambiguity.
no worries man. nice execution!
http://tinkerbin.com/9nBsaALX
Quick and easy, expands to any number of items simply. My code leaves much to be desired, but you get the idea ;)
Here’s another simple one
http://tinkerbin.com/hQb2Ggcc
I’m so frustrated with Tinkerbin, it says something went wrong when I try and save, does anyone know why?
Sorry Chris had to use jsfiddle, Tinkerbin keeps giving me an error.
Anyway here’s my go. Tried keeping it simple as possible. Sorry for the bad choice of images.
http://jsfiddle.net/U8GA8/
Here’s my solution. I tried to use some jQuery and a little bit of CSS; the fade effects may be a bit overpowering, but I think it turned out well.
http://tinkerbin.com/hdJMUzFn
Sorry! Here’s one that actually works: http://tinkerbin.com/rs5SOZWi
For some reason you have to click run twice for the jQuery to actually work.
First try:
http://tinkerbin.com/fC6EOHNO
Oh, btw, you need to click on the “Run”
Some appearence modified.
http://tinkerbin.com/ayB2bFkX
http://tinkerbin.com/SoANjm4E
Probably the only thing worth noting:
It randomizes the list after every choice or reset.
Some nice work has been shown so far, nice post Chris!
If I wasn’t busy at the moment I would have participated, threw this together quickly in photoshop, I love drag and drop but arrow controls are simple and work nice with mobile.
Image Shack Link
#2 this time with jquery – Candy Bar Sniper
0. (Click Run)
1. Pick your favorite, 2nd favorite and 3rd favorite candy bar.
2. Shoot the balloons to drop the candy bars into the correct cups.
http://tinkerbin.com/JiwfbytL
I found one slight issue… If I shoot the balloons before the cups they fall to the floor and its game over? – Perhaps you could work on there a continuation of the balloons if I miss my target?
I guess I liked the idea that one can miss the cup and therefore loose “a turn”, if I have some spare time this week I will work on a continuation.
#2.1 – Candy Bar Sniper
Changelog: 1.Restarts Balloons on a miss. 2. Better Looking Cursor
http://tinkerbin.com/i3CHOxFf
Brilliant… now all it needs is a stats board that pops up with the users chosen order and a reset button to try again! ;-p
Here is my interpretation: http://tinkerbin.com/4kW1JySR
Remember to hit run!
Pure CSS!
Whoops, a little bit trigger happy there. That is mean to say no images!
Excellent development.
Whoops, a bit trigger happy there. That is mean to say no images!
Please delete the above comment.
http://tinkerbin.com/wc4E6qpT
I’ve tried to do this so that the barebones markup would deliver a form that has the potential get the job done on the server-side in the absence of CSS and JS…
Tested in the latest versions of Chrome, Safari and Firefox, but I haven’t tried to cover all the bases with CSS vendor prefixes.
Here is my pure css solution:
http://tinkerbin.com/tBdjBxte
It’s horribly ugly, but fully functional. I don’t really have time to make it pretty just for the fun of it, got real work to do. :) Would be easy enough to beautify.
Oh, I tested it in Chrome 14 and FF 8. The technique is pretty straight forward, think I learned it from css ninja, so maybe easy to adapt to w/e browser.
My solution.
I know its complicatete =)
http://tinkerbin.com/a20LO9oD
http://tinkerbin.com/a20LO9oD
Actually I’d say it’s pretty simple and straightforward, good job :)
Thx =D
my two cents : http://tinkerbin.com/L0KJds3Q
Not the greatest design in the world but it works.
I go with simplicity and user experience. No bells and whistles, just what the user expects it to do.
http://tinkerbin.com/avYPxhOl
I’m sorry for the double post. I had some connection problems over here! De last post is the correct one!
Here is my attempt. Bit of fun and learnt a couple of things! http://tinkerbin.com/OWGpw3sk
Nice job
Hope u will get the prize!
Huree
Stursby’s approach seems
simple, is easily to
comprehend, works well
and could easily be
customized. Thanks
Hi Guys!!
I gave it a shot, here’s what I got:
http://jsfiddle.net/eruecco87/PaBba/
or
http://jsfiddle.net/eruecco87/PaBba/embedded/result/
I used JS Fiddle cause tinkerbin was giving me a few issues
Cheers!
I’ve made a few adjustments and improvements to the original one, here’s the one I submitted at first.
http://jsfiddle.net/eruecco87/PaBba/10/
http://jsfiddle.net/eruecco87/PaBba/embedded/result/
Basically the improved version has this characteristics:
– Drag & Drop sorting (jQuery UI)
– Click Rating (Clicking the hearts)
– Area Highlighting
– Confirmation POP-UP (Triggered upon rating change)
I just did this to try and scale the functionality and to note that most good ideas posted here can be combined.
Please judge just on my original entry
http://jsfiddle.net/eruecco87/PaBba/10/
Ok, I cleaned my pure css solution up visually. Here it is:
http://tinkerbin.com/AcdTuJP0
Thanks for the problem to solve, helped me think outside my normal box. Really appreciate seeing all the cool looking visuals people are doing. Gives me some good ideas. Wish I had the style of some of you, people really made some cool looking items.
I hope my 0 javascript method isn’t too ghetto.
Hi everyone,
Here is my entry: http://tinkerbin.com/GzuqKZmm
For modern browsers.
I hope you will like that ;)
Ps.: I will go to CSSOff, so its only a small entry to represent my knowledge :)
I forgot in my sample… sry for bad semantic :/
Btw guys… forget jquery ui for this small script…
You shot with a huge gun for a small birdy…
http://tinkerbin.com/IswKwjIo
i added a scrollbar so you could actually get to the third option. sorry, didn’t account for the small frame of the tinkerbin view area.
I forgot ol… strip_tags cut my tag…
Unfortunately, i used class for attribute text property… I should use data-*… nevermind… I will not post new version, it’s not fair i think. I will pay more attention for semantic on CSSOff.
I’ll take a stab here with a very no-frills design: http://tinkerbin.com/lh0bAyoy
I tried to make it simple. I included onstates for active items in that position and it will swap out existing items if you change your mind. i might alter the approach if there were more than three items, but i think that this works well within the parameters.
can’t wait to hear what you think!
also, reading through some of the comments, i agree that drag+drop isn’t something people always want to do. i tried to solve this without anything too fancy and chose not to do drag and drop. i also tried to keep the interface clean by hiding the dropdown options and only show what’s necessary and useful. I wanted to try and make it a one-click solution.
I’ve worked on a project where users are given the opportunity to rank their choices from 1 to [setting we make].
The radio buttons idea is nice but it isn’t scaleable and doesn’t feel right to me.
What I like most is dragging but you’d be surprised how few people understand dragging. Just try it out with letting your parents sit at it.
So with some User eXperience I figured it would be better to (also) have up and down buttons for the ranking. And just as important, make sure it’s visual AND make sure people can’t double click.(most non techies double click on everything)
My example is based on one of the other examples posted here(Remco Hendriksen) because its code was neat and had the base I needed. The original project has even more user friendly interface controls but it would cost me too much time to copy it all.
To conclude, my example:
http://tinkerbin.com/KuBFUbUo (I suggest a browser that supports :first-child and :last-child)
Here is mine.
http://tinkerbin.com/q4XAsn3H
I used jquery sortable. I contained the items so you can’t drag them all over. I also added some feedback that your choice is updated.
http://tinkerbin.com/vYNc8dJ2
Pretty basic interaction. Could’ve used jQuery UI / sortable, but not really worth the KBs.
I should point out I didn’t bother to test this on anything but chrome.
I think its a good choice… i saw many good idea… but all has bad code / semantics… i think thats the one of the good ways…
1 suggestion in your code -> dont use global function -> create private function in private segment
I hope my comment was useful!
Wow, so many submissions already. I haven’t had time to read them all so I don’t know if I’m proposing something new or not:
http://tinkerbin.com/9d05DBSc
Simply click on your candy bar and see how the exclusive system works!
This one is good as I like the simplicity of it.
Very nice; clean and simple to use design, with clear coding
It nearly feels like it reads your mind, when you click on an already marked bar, and it gets a “1”
Here’s my solution: http://tinkerbin.com/ASQNijM6
The code’s really ugly right now and could probably be made a lot better… but at least it works!
The idea is that each candy bar is in a column, and you can drag it up and down the column. After you let go, it snaps to the closest of four positions (bottom = undecided, top = best candy bar). If two candy bars are in the same position when you let go, the older one gets pushed back into the bottom/undecided position.
I love how this one actually enforces an ordering, and doesn’t let you rate two bars equally.
I’m not sure it’s always logical what happens when you drag a bar to the same height as another one though. Specially if there’s a third bar blocking the position right under it.
Yeah, at first I was just going to make the conflicting one to move one rank down, but then I wasn’t sure what should happen if there was a second conflict then, so I just decided to make it go all the way down, to the undecided position.
Another improvement would be to allow people to just click on a position inside the vertical column to set the rating of a particular candy bar, as opposed to clicking and dragging, to accommodate people who don’t want to or can’t easily drag and drop.
http://tinkerbin.com/rt9cpXOz
Made a jQuery plugin called that turns any ul into a drag-n-droppable ranking system. Not very feature-rich but has some potential.
Exactly what I was trying to achieve but with a bit more style. You clearly know your JQuery better than I do. Well done… This is the winner for me from the ‘drag and drop’ entries. :-)
My first experience: I initially thought I would be able to drag them out again. I only found out by accident, that I was supposed to click them.
Suggestion:
Drag and drop interface if you want to go toward the ‘touch crowd.’
Some kind of radio box interface that disables already selected options for ‘mouse users.’
Here’s my solution based on a Drag-and-Drop tutorial I found at elated.com
Here’s my version.
And again on jsfiddle so you can see the entire thing (and don’t have to click run to kick start the jQuery)
Took me about an hour, including img manipulation and was the first idea that came to my mind. Didn’t look at other entries before I made it :)
I usually go to this place called The Web Squad for my web needs, but lately I’ve been getting into a bit of programming myself. I like CSS cause it’s so powerful (even without the tricks)
Final version! added jscript callback to keep the colors as they move, submit button and some moz css also.
jsFiddle version.
Now to look at some other entries :)
http://tinkerbin.com/gA92nwiv
Must see in chrome for better font-view!
A Mix of JQuery UI, CSS3 and google webfonts. No Images needed :) http://tinkerbin.com/ucFifkTI
Here’s mine. Spoiler alert: No fanciness, no drag-and-drop, no OOP… I’m going for the human approach. But maybe I’m missing the point?
JUST TWO QUESTIONS: http://tinkerbin.com/2002OW3G
Do click RUN. Thanks!
Here’s my entry http://jsfiddle.net/YasirTheLeGend/QcmDz/embedded/result
I do bad CSS coding, so please pardon me.
http://jsfiddle.net/xpertdev/wfaxb/
Here is mine. Drag the Slider below each candy.
Concept is just like below :
Asking for the how much you like each candy. You drag the slider and open up the that much candy for you.. :)
Hope you like this.
Hello to all, I’ve finished my project and here it goes http://jsfiddle.net/QETJM/25/embedded/result/
Very rough round the edges and lacking in style, but here’s my offering…
http://tinkerbin.com/NhV4SAqB
(No drag and drop in this one)
For a rating of only three choices it felt to me like a sortable list was the easiest to manage. Here’s my crack at it.
Also, I love the Ryan Singer peepcode screencasts. Awesome insight into how to tackle a UI problem from one of the best.
http://tinkerbin.com/nsA8vFCk
looks like you have to click run to get it to work. I linked to jquery + jqueryUI so that seems like the cause.
http://tinkerbin.com/BZaIgqZF
You’ll need to click ‘Run’.
Two obvious downsides to my approach are that (1) it doesn’t scale and (2) it’s text-heavier than some other submissions.
The upside is that the selection requires only one click.
http://tinkerbin.com/S1axsjQU
Wrote this today. Not my best work but it was late at night. :D
Comments, Hints, Suggestions? Let Me Know. Thanks
http://tinkerbin.com/ImGWVQ8I
Just in 3 clicks :).. I didn’t code to rate the last(3rd) one automatically, since the user has a chance to re-rate… ;)
http://tinkerbin.com/gIvb36ko
yet another example.
If the last snack wasn’t rated automaticly js code would be much simpler.
Less clicks is better than more clicks.
need to hit run!
Forgot to say that it’s fully scalable as far as number of snacks and size of a container.
In FF I got an error. Fixed it.
Final version:
http://tinkerbin.com/IAsab0hl
http://tinkerbin.com/Ry3CefLa
Here’s mine with jQuery sortable
Dave
You have to click run to make it work : )
Here is my design,,
I’m new in javascript and CSS, so maybe this is the best that i can do.
http://tinkerbin.com/HKqcZoJQ
Please give me the advice,
thx,,,
hehehehehehehehe,
Will you send the price abroad if I win? To Istanbul?
Here’s my design:
http://tinkerbin.com/TQev7DBO
Is uses jQuery and CSS3 transition and transform and you rate with just three clicks.
Hope you like it.
Updated design: http://tinkerbin.com/H7szhuX2
http://tinkerbin.com/XCj8Sn9v
works in chrome, should work in others.
click and drag a circle to change rate.
Here’s my try which leverages form labels and css.
jQuery is used but only for limiting one candy type selection.
http://tinkerbin.com/werIIpXb
constructive critiques welcome!
A quick approach using jQuery UI and drag & drop. I figure that direct manipulation of the candybars is a good approach. It’s a little buggy but I’m quite new to JS so I don’t really have the knowledge to make the fixes.
http://tinkerbin.com/vvsCeb3H