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

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.