5

I would like to create a slightly different convention for single select and multi-select toggle choices. I hate the stereotypical look of default radio buttons and check marks in boxes, so I came up with the following design.

toggle button ideas

The examples show default, hover-over, and selected states of a multi-select option (square) and a single select (circle). These buttons will primarily be used in a standard testing environment where a user is asked to pick the best answer, or pick all answers that apply.

Can I flatten out and simplify the design of this functionality and have users still understand it? If anyone has any examples this functionality without the default look of radio buttons or check marks i'd really appreciate it!

EDIT:

After everyone's input here as well as mulling it over more I decided to wimp out and keep with the standard. This is for assessment based content, and in the end readability has to trump my want to try to bend the standard. Following is what i decided to go with.

enter image description here

Thanks for the feedback!

Improve this question
3
  • 1
    How are you going to indicate that the first set is multi-select? Do you think that a square box is enough of an indication? At the default and hover state, they look like standard check boxes, but the selected state doesn't. I'd be worried that the change in appearance may make the user think it behaves differently than a normal check box.
    – dmacfour
    Nov 24, 2014 at 19:32
  • 3
    Do not make the user think. A checkmark is almost universally intelligible and there has to be a very good reason to change that other than "I hate them".
    – Danita
    Nov 25, 2014 at 19:05
  • I like the flat aesthetics of what you ended up with. I shared a similar option (among many others) with our design team, and it wasn't chosen. IIRC, it was a little harder to clearly represent combinations such as ticked-disabled or unticked-disabled, especially if you don't want a really dark/heavy state for the regular (non-mouseover) enabled state.
    – Jon Coombs
    Feb 5, 2016 at 23:32

2 Answers 2

Reset to default
9

You can do this, but be careful about appearance in a vacuum.

It should be pretty safe for radio buttons as there will be several (or at least 2) in a group so the users can see that one choice looks more "selected" than the others.

The trouble will come when there is only a single checkbox on a page or if there are several that are all selected. If they are all in the same state, there is nothing to visually compare them to in order to determine which is the on state. It will be hard to determine if all the boxes are on or off at a glance.

For example, without any other visual cues to go on, is this button checked or unchecked? Unclear toggle state.

The solution to this depends on what your other controls look like. If all your buttons resemble the empty/off checkboxes you have, then they may be able to provide the needed context. You might also need to show the selected button's text in bold.

If your hover/interactive/accent color is different from the selected color shown, users may have a hard time understanding which color means what. "When I click a button it turns yellow, but when I click a checkbox it turns teal or white. Which one means it's on?" If the rest of the controls in your UI are teal because that's the color that denotes interactivity, the white buttons will stand out more and may appear to be the selected ones.

Users are used to seeing some manner of mark in the box when they select these controls. If you don't want to use the traditional checkbox, consider using a smaller square/circle inside the box as the mark. Sample with small square for checkmark.

Improve this answer
1
  • Very good points. I would just point out that the last idea of a smaller square meaning "ticked" goes against a very common standard in which that means partially-selected. That is, a column of checkboxes (one per row) might have a box in its heading that means tick/untick all rows. When some but not all are selected, you might see the small square. (Ditto if you look at properties for multiple files in Windows Explorer and the "Read-only" box isn't set the same for all of them.)
    – Jon Coombs
    Feb 5, 2016 at 23:27
1

We use something similar to that in some of our internal apps - especially those in which users have to make many selections. Taking out the check marks made the page "cleaner" and users like it. Now our sample size is small (around 30 users) and not representative of web users in general (they're finance professionals working extensively on internal apps and dashboards) but the response has been positive.

Test as best you can with your user base but my user base has been positive.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.