There are many ways to style the active state on toggle segments. There’s no definitive style that all designers agree with. However, I believe one of these two styles are fit to be the standard.
The active state needs to be clear without being distracting, but it’s challenging to find that balance. Which toggle style has the right balance?
I don't mind A being "distracting". Websites and apps are not fine art. I think of them more as essential services like telephone, internet and electricity. Users go to most sites/apps to perform specific, important tasks. Don't put form over function. The goal is a design which helps users get done what they need to get done in the least time so that they can move on to what they need to do next.
I chose A because it seems to change the actual shape enough to make it stand out. Otherwise, the contrast change in both of them may be insignificant for visually impaired users to identify a selection.
Having said that, I agree with some of the other comments and think there could be a better option.
Love the poll and would love to see more of them! Thank you.
I'd say A for A11y compliance. However, for improved A11y there should be some other visual cue that doesn't rely on color to indicate somethings been selected.
On a darker background, that really does pops out, and the equivalent version of that be on a white would be that inverse darker square. So if you wanted to capture that even more for A11y a looping fade in and out would enhance the image even more.
I would like to try B with no specific background when item is focused.
I mean, the white on dark mode and black on light mode should be sufficient to render some contrast. And I guess adding some specific background creates some noise.
Leaving aside accessibility which is definitely important, I choose A because it is clearer and, even if in B there were no contrast, there would still be evidence of the selected state even without other visual cue because the grey bounding box (both in light and dark version) works together the heavy change of color of selected item. my2c.
I would say something in between. I find A too distractive and B too weak.
I don't mind A being "distracting". Websites and apps are not fine art. I think of them more as essential services like telephone, internet and electricity. Users go to most sites/apps to perform specific, important tasks. Don't put form over function. The goal is a design which helps users get done what they need to get done in the least time so that they can move on to what they need to do next.
I chose A because it seems to change the actual shape enough to make it stand out. Otherwise, the contrast change in both of them may be insignificant for visually impaired users to identify a selection.
Having said that, I agree with some of the other comments and think there could be a better option.
Love the poll and would love to see more of them! Thank you.
I'd say A for A11y compliance. However, for improved A11y there should be some other visual cue that doesn't rely on color to indicate somethings been selected.
Is this a trick? I see no difference between A & B. What am I missing?
does B meet accessibility requirements? Those grays are very similar.
Each element is not independent, and it needs to be placed in different contexts to make sense.
What specifically informs you about their atate? I can't tell what they're supposed to mean.
On a darker background, that really does pops out, and the equivalent version of that be on a white would be that inverse darker square. So if you wanted to capture that even more for A11y a looping fade in and out would enhance the image even more.
C :)
I would like to try B with no specific background when item is focused.
I mean, the white on dark mode and black on light mode should be sufficient to render some contrast. And I guess adding some specific background creates some noise.
Leaving aside accessibility which is definitely important, I choose A because it is clearer and, even if in B there were no contrast, there would still be evidence of the selected state even without other visual cue because the grey bounding box (both in light and dark version) works together the heavy change of color of selected item. my2c.