#7384 closed bug (notabug)

Opened May 17, 2011 06:13AM UTC

Closed May 17, 2011 12:26PM UTC

Last modified May 17, 2011 01:19PM UTC

catastrophic usability test results for radio buttons and checkboxes

Reported by: jan_harmsen Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.button Version: 1.8.12
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (4)

Changed May 17, 2011 12:26PM UTC by scottgonzalez comment:1

resolution: → invalid
status: new → closed

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.

Changed May 17, 2011 12:56PM UTC by jan_harmsen comment:2

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

Changed May 17, 2011 01:02PM UTC by scottgonzalez comment:3

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.

Changed May 17, 2011 01:19PM UTC by jan_harmsen comment:4

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.