Toggler v0.1
I decided to put together a little proof of concept. The idea is to mimic the functionality found in desktop applications like Adobe Photoshop where a user can click on a checkbox and while continuing to hold the mouse down, can move over other checkboxes and have them toggle as well.
I've put together a demo page for Toggler that you can check out and play around with. Because this is a proof of concept, I haven't tested this in Safari or Opera and I'm using down and dirty event handling.
I could honestly see this as being a replacement for or as an addition to "toggle all" buttons.
Conversation
Very nice.
Works great in Firefox... of course; but Safari struggles: no boxes will check.
Seems very useful.
I think it's an excellent idea.
However, I think it would be good to offer *alongside* toggle all... not as a replacement. I say this because I actually have pain in my arm, and dragging-like movements can be painful for me. I actually enjoy the toggle all features on sites for this very reason.
It's great to offer, though, for those that do prefer dragging, and would be a good way to add another usability method.. which is always good. Just don't leave us with tendonitis/arthritis out. ;)
@Taylor: it looks like WebKit works. I'd have to track down what Safari is getting confused with.
@Jina: very true. I think that's a very valid point.
I'm just curious why you didn't go for the click a checkbox, and click another while holding shift selects a range? (Sorta-kinda seen in bloglines, and gmail.)
It has analogues in Windows UI I believe... and does the same thing.
PS: I never knew Photoshop had this. So. Cool.
I'm not sure about the usefulness of this, due to people either not expecting that functionality or not needing it. I'm struggling to see the situation where this would be the killer app so to speak
excellent experiment though. kudos.
I have to disagree with adrian on the whole usefullness aspect. I think this would be extreemely useful. From the perspective that, if enough people used it, it would become the standard, so the point of saying that people wont expect the functionality is not really a big deal, if it were to become adopted by major websites.
Re: Safari bug. I somewhat have it resolved. There's one scenario where it doesn't work perfectly and with a quick Safari check, I should be able to solve. But at least Safari users will get a sense of what it should do.
@Hsiu-Fan: How about that... I didn't know Gmail had shift-click support. :) This, of course, ties into adrian's point about discoverability. That's always the problem with anything trying to replicate a desktop interaction that doesn't already exist on the web: nobody knows how to discover it. I like this interaction over the shift-click because it's one-handed.
As a matter of fact it will be useful to deselect (uncheck) checkboxes, while moving backward
Nice proof-of-concept snook, the feature inspired me ;) : I packed it into a small mootools class, supporting the suggestions for the shift support and reverting while moving backwards:
digitarald.de Playground: Toggler
@digitarald
cant you convert it to jquery-plugin?
For many people, hitting the actual check box is tough enough - hence the usefulness of labels. For many more people, running a mouse pointer across checkboxes is going to be very difficult and (like me) would prefer clicking each one seperately and getting it right first time roud.
Nevertheless, as a proof of concept, well done!
What would be really good, and i dream of the day when it can be possible on the web, is when you can select like you do on a desktop. That is to say, as soon as you hold down the mouse button and start dragging, a box shows and everything within the box gets selected.
@Abu: I'd disagree slightly that running a mouse pointer over a checkbox is more difficult than clicking each one individually. As long as one can hold the mouse button down, it's quite handy to be able to swing the cursor back and forth until each one is knocked off instead of trying to position the cursor over each checkbox. With that said, this functionality could easily be expanded to include larger hit areas like including the labels as active targets, something I had considered but ultimately decided not to implement.
@digitarald: nice work. :)
Very nice, although I assume very few people would realize you could actually do that with checkboxes on a website. Not sure where this idea would best be used?
Very nice. I like that it isn't an extension of a library, since it is a small js file to achieve the task. Adding it as an extension would be nice, after the fact, but as a standalone like this it is much nicer.
Works well in FF on the mac....and, as Jina stated - couple this with a 'toggle all' and it is extremely useful.
Nice work...
Here's a greasemonkey script that adds similar functionality to any site:
http://www.squarefree.com/2005/04/13/checkrange/
Click the first box, then shift-click the last box. It's saved me a lot of time.
I always thought it was cool you could do that in Photoshop, but never thought anything more of it.
Very nice that you wrote a script to do this on the web, but I don't know about how practical it is - only because you're average user probably wouldn't think to try it, and it seems sort of silly to leave a note to the user letting them know that the functionality is there. Plus I can't remember the last time I saw a list of checkboxes like that.
That is uber-sweet!
A couple of thoughts;
1. Would it make more sense if it reversed the current state of the checkbox?
2. I don't see that it would be that hard to add "Click/drag to select multiple" to the label area to explain use quickly.
3. I personally think it would be better if the select area included the text next to the box, so the whole label, which I understand you decided not to do, but it would make it an easier target (especially for touchpad users :)
Very cool all around though, and speedy. I didn't experience any lag or problems on my old linux laptop in Firefox.
Textpattern has a button (in the article tab, perhaps elsewhere as well) that selects a range of checkboxes. Gmail goes a step in a different direction and provides links that select emails based on read or starred state.
This is a neat proof of concept. However, I find it a stretch to imagine an interface that couldn't be better handled by a custom multi-check solution. The web is not a desktop application; users do not expect it to behave in the same manner.
Cool proof of concept, but it'd be more useful if it included LABEL's as well as dragging over the LABEL's because dragging a straight line over a bunch of small objects can be difficult.
Very good idea, and somewhat useful too. Would be nice to add the ability of a SHIFT click, something similar to selecting rows in an excel spreadsheet.
To take it a step further: how about making double-click a 'select-all' functionality, and double-clicking again an 'undo' of that first double-click (so you'd have to remember the state of all of the checkboxes...)
You could even use the scroll wheel: click a checkbox, and then use the scrollwheel to automatically select a number of checkboxes below or above that selected one, and the next click you make (anywhere) stops that scrollwheel-function...
Maybe that's a bit too much however :)
very good idea but it dont't work with opera :(
Re: Discoverability: This is always an issue with any desktop interaction that you try bringing to the web that doesn't exist there already. The question is whether the interface could be descriptive enough to guide the user towards letting them know what to expect. For example, Google Calendar lets you hit a date and then drag the mouse to another date. Google Mail has shift-click. Both are completely unexpected behaviour on the web and yet people discover them. The key thing here is not to eliminate other possibilities but to augment already existing systems to give users greater control.
@eburhan: What version of Opera are you using? I just tested in v9 and it's working tickety-boo.
I've gotten an error every once in a while, when playing with it. I cannot reproduce it consistently. It occurs when untoggling the list one by one. When I click the last one, the first one (that I've already unchecked) toggles on. I got it a few times in a row, but not since, so I can't isolate precisely where it is.
I remember a likewise script back in the days dubbed "Click-n-drag checkboxes".
After Googling a bit and using the wayback machine I found one archived page, dated December 15 2003 (yes, 2003). The javascript can be found right here
Also found this recent solution, dated March 12 2007
That is very nice. It is a feature that many of us likely use on a near daily basis. Good job!
Nice work! This is one of those "it was staring us right in the face and no one noticed" design solutions. Very, very nice.
LOL - I totally misread your instructions and shift-clicked the checkboxes (holding shift down throughout).... this triggered a bug in firefox where upon unchecking a checkbox it disappears altogether!?
but when using the page as instructed it works really well and it actually feels quite nice and intuitive ;)
Nice one, even though I had some trouble using it. Doesn's seem to work in Safari, but in Firefox it is alright. I think it would be a bit more intuitive to have the check boxes invert on hover (hovering a checked box would uncheck it). At least that was the behavior I expected. Don't know if that is the way that checkboxes work in desktop applications. My memory is a bit short term.
On a sidenote: The colour contrast on this site is a bit off in some places. I can hardly tell the blog post # from the background. The same goes for the date and the "All comments" link.
Keep up the good work!
I wonder if it works when rolling over the "label" element. That would make it much nicer as it would extend the range of the rollover. Could you try it using < label > tags?
jQuery plugin now available on my blog <!-- javascript xhtml sql css php -->
sorry but comments only in russian
Awesome, been looking for something like this for a while! Thank you for sharing!
I've been searching the internet something lik this. Great script!!
I've been playing with the code to get it to highlight the row the checkbox is in but I can't figure out how to reference the id of the row. Any suggestions?