catastrophic usability test results for radio buttons and checkboxes

[jan_harmsen]

jQuery UI radio buttons and checkboxes and even buttons (depending on their location) have catastrophic usability test results due to their identical visual appearance. A user must be able to tell at first sight what a radio button is, what a checkbox is and what a normal button is. There is a big semantic difference between these three ui elements and the problem is that they all look similar if not identical in jQuery UI which misleads many users.

1. A button is a ui element that triggers an action.
2. A checkbox is a ui element for choosing / setting the on/off state of an individual property
3. A radio button is a ui element for choosing one of several (>=2) possible states of an individual property

Since a user cannot clearly distinct these three ui elements visually in jQuery UI, it is unclear to many users what the purpose of these ui elements is when they appear on a page / in a web application. Checkboxes and radio buttons need to look different so that a user can immediately identify what a checkbox is and what a radio button is (and what a normal button is). Checkboxes and radio buttons need a coding other than color-coding, color-coding alone is never enough to visualize states / semantic differences.

Look at paper forms which have been around for many years. There is a good reason why checkboxes look different than radio buttons and jQuery UI should not change that.

Please fix this bug causing poor usability asap.

Thanks!

Jan Harmsen

[Scott González]

You're using the plugin wrong. If you don't want a checkbox to look like a button, then don't initialize it as a button. We will be releasing checkbox and radio button plugins in the future, but they server a very different use case.

[jan_harmsen]

Well, as a matter of fact not I am using the plugin wrong but many developers building websites / web applications using jQuery UI ;-)

I am just a usability engineer reporting results from usability tests...

If there is no intention to change the visual appearance then at least the documentation needs to be modified so developers can understand that jQuery UI checkboxes and radio buttons should NOT be used to replace standard form radio buttons and checkboxes due to poor usability.

The current implementation can definitely not be recommended from a usability point of view, that's all I wanted to point out. If the jQuery UI team is happy with that there's nothing more that I can do :-)

Thanks for looking into this, I'm afraid you did not understand the problem.

Best regards,

Jan

[Scott González]

I fully understand the problem, but we're not going to make it impossible to do something completely valid just because some users might do the wrong thing. There are perfectly legitimate use cases for rendering a checkbox or radio button as a toggle button.

[jan_harmsen]

Well, then you maybe understand the problem but most developers obviously don't...

The result is the same: poor usability.

There would be a chance for better usability if visual appearance + documentation got adjusted. But it looks like this is not an important issue. At least I gave it a try.