Comments on: 3 Ways to Make Checkboxes, Radio Buttons Easier to Click http://uxmovement.com/forms/ways-to-make-checkboxes-radio-buttons-easier-to-click/ User Experience Movement Mon, 15 Jan 2018 03:40:42 +0000 hourly 1 http://wordpress.org/?v=4.2.19 By: Spencerhttp://uxmovement.com/forms/ways-to-make-checkboxes-radio-buttons-easier-to-click/comment-page-1/#comment-91499 Thu, 01 Dec 2016 16:51:00 +0000 http://uxmovement.com/?p=4615#comment-91499 Great article! We’re going to implement some of this on a site right now.

Seeing that JQueryUI does a lot of this out of the box, allowing you to style some of the fields a bit without inhibiting accessibility.

One thing that I found odd, not having read a UXMovement article in a while, is all the jumbled gobbledy gook at the end of the post. There’s a product section that doesn’t relate to the content of the post and doesn’t have much context, affiliates, related articles, social sharing options, and the author’s info. All of these seem to have the same visual hierarchy. Individually, the social items and author are normal and help the post, but combined with the other items the bottom of articles feel very confusing and disjointed. Just a quick observation! Felt odd to see this confusing mash-up on a UX site.

]]>
By: Jeff Burnzhttp://uxmovement.com/forms/ways-to-make-checkboxes-radio-buttons-easier-to-click/comment-page-1/#comment-90285 Sun, 08 Feb 2015 13:58:40 +0000 http://uxmovement.com/?p=4615#comment-90285 Thank-you for the ideas, I have used the button zone idea in the latest version of my Drupal theme project (has about 60 000 users) in an attempt to improve checkbox and radio UX in mobile, it seems to be working pretty good, certainly in Android its a vast improvement.

Another method I have implemented is to use an image to replace the label (using an accessible text image replacement method), which gives a huge touch target, this is kind of the same thing but only really useful when it makes sense (in this case users are setting the alignment of images in their posts).

]]>
By: Andrewhttp://uxmovement.com/forms/ways-to-make-checkboxes-radio-buttons-easier-to-click/comment-page-1/#comment-10226 Sun, 25 Nov 2012 20:49:20 +0000 http://uxmovement.com/?p=4615#comment-10226 You have to place ID’s on the inputs, and use that same ID in the label’s FOR attribute to get it to work in Safari (actually, I’ve just been doing that for so long I didn’t even realize the other browsers worked with that now.

Nesting the input is not correct. I don’t even think the elements will validate without the FOR method in the near future – it’s essentially saying the input is part of the input’s label, and screenreaders will often muck it up.

If you ask me, there should have just been a label attribute for the input fields from the beginning. The whole “use a sibling element to identify the next element in the document” thing has always baffled me.

]]>
By: tomeldershttp://uxmovement.com/forms/ways-to-make-checkboxes-radio-buttons-easier-to-click/comment-page-1/#comment-7039 Mon, 05 Sep 2011 09:24:37 +0000 http://uxmovement.com/?p=4615#comment-7039 A quick note for anyone wanting to use labels that interact with the form inputs: In order for it to work correctly in Safari, you need to nest the input in the label

Label Text

Which looks a bit clunky to me, but is apprently the correct way to use labels now.

]]>
By: Travis Almandhttp://uxmovement.com/forms/ways-to-make-checkboxes-radio-buttons-easier-to-click/comment-page-1/#comment-6946 Mon, 22 Aug 2011 21:47:26 +0000 http://uxmovement.com/?p=4615#comment-6946 Here’s an idea of where to start:

http://travisalmand.net/css/checkBoxLabels.html

In this case you should be able to style the label tag however you wish to look like a clickable zone. Including the cursor and hover effects.

]]>