Tuesday, July 05, 2005

Radio button hell

What's wrong with the following dialog?



Both options are mutually exclusive. In the example above one shouldn't use checkboxes but radio buttons. So it's clear for the user that only one option can be activated at the same time, that she has to choose between the one or the other. The dialog should look like this:



Pretty simple, pretty straightforward. Fortunately this kind of mistake became very rare. I actually had to invent an example because I couldn't find one in the wild. That's a good sign :-)

The ones of you who are actively using the new designer from Trolltech's Qt4 (and heavily switching its user interface mode ;-) ) may have an idea where I got the inspiration for that little example. It's borrowed directly from designer's "Edit" menu. There you'll find a "User Interface Mode" entry. It looks like this:



Have a feeling what might be wrong with the above menu entries?

These menu entries look like checkboxes, but behave like radio buttons. In Qt4 (and in previous Qt versions) both the radio button like and the checkbox like menu entries look exactly the same. So there is no visual hint about what's going to happen if a user clicks on such an entry. It could be either the one or the other type of menu entry. To be absolutely sure the user has to check back on that menu entry to find out what happened. Insane, isn't it? This is how it should look like:



GTK, the various Java toolkits, even Windows, they all are doing it like that, are doing it right. Why not Qt? It's not as if the engineers at Trolltech didn't know about that. I sent the trolls a bug report one year ago to make them aware of this issue, actually got positive feedback and hoped they fixed that shortcoming with the new version of Qt4.

Unfortunately they didn't :-(

9 comments:

Anonymous said...

Actually, Qt4 takes a step in the right direction, and makes it possible to draw radio-button indicators in menus. (Qt3 did not provide for that). Not sure whether plastique takes advantage of that

-SadEagle

sebas said...

Does that mean that only the display of radiobuttons in menues is "broken" (broken as in the original post's screenshot of Qt designer) or are they "broken" everywhere?

tom14 said...

I reported something similar to this as a bug a while ago. Bug 74054 I tried to make proper checkboxes by modifying plastik but for some reason they changed widths in different menus and menu items being used as radio buttons came up as checkboxes. Also, all menu items were 'checkable' so there wasn't any way to make sure a menu item actually was being used as a checkbox. I think this is also something that has changed in Qt4 but I'm probably wrong.

Florian Grässle said...

@sebas
Yes, only the display of radiobuttons in menus is "broken". Broken as in the original screenshot of Qt designer. They look like checkboxes, but actually are radio buttons.

Philippe Fremy said...

It is ironic since Jasmin Blanchette, the main author of Qt Quarterly posted exactly this kind of advice on how to use radio and check boxes in one of the Qt Quarterly.

Seele said...

Could you "replace" the text if you change the option to an action?:

"Dock Windows" / "Seperate Windows"

Apple does this in some of their menus

Tina Trillitzsch said...

@Seele
I don't like this behavior on the mac much, actually. KDE has it in a lot of places, too, in Konqueror's view menu, for example: on and off.
But there are several problems connected to it: the user never actually sees the text changing. So if she looks into the menu later, she won't be able to recognize the same option as easily - it has another name now.
Another thing is that people often recognize menu items by text shape. If the shape now starts to change depending on the toggle state, this doesn't work anymore.

Anonymous said...

When it comes to radio buttons in menues it is perfectly possible, but the style has to support it. (se my style http://freqmod.dyndns.org/qklouds)
for example. It may be an idea to change the background of the menu item if the button is a selected or deselected checkable button. Then the text keeps the same shape, and it is easier to spot for the user.

Stuff You Should Know said...
This comment has been removed by a blog administrator.