Options 2

Some more variations as addition to the previous post.

Options 2

First a frame and button-less style, aimed at connecting label and check mark and avoiding a box that could only look like a specific target area. People already know underlined text that can be clicked on (one could argue that this is misleading here, as these are not links, though). Note the breaks for the descenders. If only browsers would get that right!
As the flattened style from the previous post was found to look disabled (even though labels stayed black), I stripped it down to just an outline on the right.

Bottom: Mutually exclusive options presented another way. I tried a filled selection, but it looked too much like a button,  so I went with a frame. I’m slightly concerned that users might try to drag the frame, but some highlighting (and lack thereof on the frame) would help.


About thorwil
I'm a designer from Germany. My main interests are visual and interaction design, free/open-source software and (electronic) music.

5 Responses to Options 2

  1. Burkhard says:

    I can’t really say why, but I don’t like the underlined style. Perhaps it’s that it looks like a link, also, having the line extend beyond the text looks strange.

    The flat style is superb. What about sinking the selected entry in? Instead of framing it as in the bottom style. This would also have a real world analogue: these old mechanical push buttons, push one and it keeps pushed in so it’s selected, releasing any previously pushed-in button. You would find these on old radios (for selecting fm, am, etc). I hope this is somewhat understandable.

    Lastly, for the flat style with the interconnected circles, eventually the connecting lines of the circles should not be discontinued for the frame of the buttons. They should be above the buttons.

  2. Burkhard says:

    Hm, perhaps the sunken in button for the flat style is not such a good idea after all, as it would probably look like a conventional toggle button. For the bottom style, what about making the frame draggable and letting it slide gently to its destination on clicking?

  3. thorwil says:

    Burkhard: Dragging the frame would be horrible inefficient compared to just clicking. So users should be kept from doing that.

    If there’s ever a need for a continuous selection of items from a list, the frame-widget could be adapted to either cover a fixed number of items or to be resizable via dragging.

  4. ARusakov says:

    I like the idea with the “ribbon”, and in fact the first thing I want to do with it is yes, to drag it. Maybe this is inefficient, oh well, drag-n-drop is generally not efficient. But it is very recognizable, and I think its worthwhile to enable it. A user will quickly learn to just click on a preferred option, but when (s)he can drag the “ribbon”, the learning curve seems less steep.

  5. mpt says:

    I suggest trying these ideas in a real-world window that uses checkboxes and radio buttons. For example, the “Proxy Configuration” tab of the Network Proxy Preferences window, or the “Calendar and Tasks” > “General” tab of Evolution Preferences.