Custom Radiobutton using CSS/JS/JQuery

Question

I have a little web admin tool I'm working on that allows a user to view & edit the properties on a DB Object. Most of the settings are "yes/no/don't know" type properties.

There's quite a lot of settings to display so managing screen real-estate & usability is important.

When I first scaffolded the UI, I was using Test 1 in the above image. Suffice to say it looked cluttered and with dozens of these in multiple columns/category groups in the UI. Test 2 was slightly better but not by much.

So I was thinking of doing something like Test 3. Depending on which radiobutton is selected in the html, a difference image appears. And clicking on the image cycles through the 3 options repeatedly.

(If you've ever used the GMail Labs feature that allows you to have lots of different kinds of "Star" flags for your email, that's the idea)

So my questions to the UI/CSS Gurus.

1. Is "Test 3" an acceptable/usable solution ?

2. IF so, is it possible to change a radiobutton (or select/option) input into that using just CSS & JS? (or if you can point me towards a tutorial/resource, I'd appreciate it)

Thanks,

Eoin C

Answer 1

Test 3 might be acceptable, but Test 2 or select boxes would be something more familiar to most users. I'd only go with Test 3 if I knew my users were tech-savvy enough to handle custom widgets. It just doesn't look like an interactive input.

Answer 2

Add click handler to the image. On click open div with 3 radio buttons together with images. When user selects one of radio buttons, close the div and change image in table.

Answer 3

the cycling thing does not seem usable to me. I think test 2 is the best option. it might look a bit 'cluttered' but at least it's usable. If someone needs to fill in these forms 5 times a day i think he'll start to get bored of the cycling quite fast.

another important point is this: in test 2 you have no default value, which is good. because is someone forgets 1 line you can do form validation for that. with the cycling thing, the default value already will be one of the answers, making it more easy to make errors on input.

if i were you i'd take test 2 and put the unknown to the right side so you have Yes, No, Unknown.

Answer 4

Test 3 seems a good solution to me. The only thing I would personally change is the icons, the red one means "cancel" and the undefined's one is used for warnings, so they're not much close to the undefined/not supported concepts.

However if the problem is about the number of options a good choice would be to group options by category and show/hide each group only when the user has to interact with them (and you can use Test2, that is more clear).

Answer 5

Case Three in my opinion has two big problems

• It is not immediately obvious to the user that the icons are changeable - ie. They're buttons
• You can't tell at a glance what the icons represent.

Problem two can be solved with a small key area at the bottom of the chart telling them what each button mean. Problem one is... a little harder.

The two most obvious solution I can think of is to add little clickable triangles to their sides that changes their values when clicked, to illustrate that this is in fact that the value can be changed. The other is to add a large tooltip that will appear when hovered over, giving the user the option of changing the value as well as informing them what each icon means.

The choice here basically comes down to the actual use case for this - Case Three is far more "glacable", because of the color coded values, at the expense of slightly reduced usability and a slightly steeper learning curve.

---

As for the technical solutions, there are many, but if you want Case Two with a lot less clutter, I would recommend you to have a look at jQuery UI's button widget - it really takes the cake out of having to implement this sort of things. Have a look at it here: http://jqueryui.com/demos/button/#radio