The better UI would be for the circles to be visually connected somehow to illustrate that only one selection is possible like you have in physical switches with more than two positions
The better UI would be for the circles to be visually connected somehow to illustrate that only one selection is possible like you have in physical switches with more than two positions
A related issue with radio buttons and check boxes is that in some GUIs, clicking the label next to the box/button also clicks the widget, but there was no visual indication that that is the case. Sometimes the clickable area even extends the whole width of the window. This carries the risk of users making a selection when all they wanted to do was to click the window in a seemingly inactive area to make it come to front.
I think we could solve that issue and visually connect radio buttons by placing them onto a background rectangle with rounded corners — thus adapting a visual cue from the button group widget. Then highlight the background portion that is clickable when the mouse hovers over it, and when the button/area gets clicked. Further, you could choose to make the colours consistent with those you'd use for selecting items in lists.
One solution to selectable labels would be to add the indeed missing indicator, e.g., you could have the whole label have a border when it's active (though in this case maybe you don't need radio buttons, but just have multiple lines that look like distinct lines?)
Hard to access the background group, I know it doesn't work if it includes labels like in the screenshot in another comment, but maybe only for buttons it'd be more understandable
This is an interesting point. Radio buttons are kind of weird in terms of their initial position because unlike with checkboxes, there's no way to get back to the "empty" state where none is selected. It took me a bit to wrap my head around what you described, but the more I think about it, the more it seems like a "slider" with clearly marked stopping positions. If it's too confusing for people to have some sort of "default" option, maybe having a different color for the part of the slider that's moved based on whether it's in a valid position could help; at the top of the slider, it could be one color indicating "must be moved", and then when you slide and drop it at one of the marked options (or click the option; it could move automatically to the position like a scrollbar), it changes color to show it's valid.
Re. the missing default - you can have an explicit element "none selected" with the slider positioned there
Plenty of options to make UI more intuitive
http://hs.windows.microsoft.com/resbox/en/6.2/main/9f04b9c9-...
It's not the exact design you describe: The slider is there, but only the label of the selected option is shown, the other options are only represented as tick marks.
I think there are two problems with the design though, (which would also still be there if all labels were shown):
- The slider widget back then was normally used for selecting continuous numeric or at least interval scaled input values: That's what the mechanism of dragging it with the mouse was developed for. It could be configured with a small number of discrete values as options, but then dragging became awkward: Either the ticks were spaced very far, then you had to drag the cursor a long distance before there was any kind of visual feedback at all - or the ticks were spaced closely, like here, but then dragging the slider to one specific tick became difficult.
- It's possible to click the slider, but there is no visual indication that you can do so. In fact, the visual indicators are almost inverse to how you'd need them: The selected option has a big handle that you can not click (only drag), the unselected options have no handle though you can actually click on the empty slider bar to move the handle in that direction.
I guess that's why they never did this again after this one try - which is sort of a pity, because you could probably build a redesigned slider widget optimized for discrete input that solved those problems.
https://techcommunity.microsoft.com/t5/image/serverpage/imag...
Normally they are within a radio button group so that they are visually connected: https://i.stack.imgur.com/03p3T.jpg
Some things are swipeable with no indication, or long pressable with no indication, we've removed scroll bars almost everywhere so no indication that something is scrollable unless the content gets cut off and you have reason to try to get to the rest of it, but sometimes it aligns nicely so you assume that's the end. Links and buttons we not only removed the underlines from but now they're grey which historically meant disabled... So no, none of this is intuitive.