Active button background color?


#1

Just tried the latest build and one thing rubbed me little wrong so I wanted to ask this community on their design opinion.

Which of these buttons seem active to you?

My intuition based on skeuomorphism is that the darker background is pressed-in. But the other has higher contrast, trying to look active as well. So I'm kinda conflicted and it goes against my expectations when I click them and find out it's the ligher one that's active.

Here is an example where I think it's handled correctly (whether flat or 3D, doesn't matter) in this regard:

Is it just me?

I've done some googling and can't find any good article on the issue. Thanks for any opinions.


#2

By the way you can see this in photoshop as well:


#3

Hey Ondrej,

This came up in testing (and I've even found myself being confused by it.)

A better visual implementation of this toggle is on my list to fix. The priority is a little lower than some other things, but I'll see if I can get it in for the next release.


#4

Shadows aside, there's a lot more going on here to give you the impression that the dark one is active. For one, the dark one is the only element that looks the way that it does out of 4 elements. It's the only element out of 4 with a darker background. It's also the only one out of 4 that's lit up. If the other 3 were like this one and this one was the one like the other 3, the context of it being the only one that's not like the others would still tell the user that it's the active one.

The same thing is happening here. The dark element is the only one that looks the way that it does, out of 3 different elements. And by the way, although this panel has a trendy flat design without shadow, the skeuomorphism is still very strong here. It lies in the fact that the two other elements have the same background as the entire panel, and so it's as if they are flat on the panel and the darker one is pressed in. Not to mention those very subtle light borders around the darker button adding to that effect.

when there are only two buttons to toggle, I think there's going to be a degree of uncertainty to the user regardless of the styling. It can be minimized by using things like skeuomorphism, but at the same time, skeuomorphism only works because the user is seeing something that looks similar to things he has seen before, and so he has an idea as to how this unknown thing may function. The problem is that nowadays with the way so many of our computer interfaces are designed, I don't think there can be a guarantee that the user will see your button the way that you want him to see it. But if you keep your interface styling consistent, it'll reinforce itself onto the user. For example the user may look over to another panel in the interface that does have more than 2 buttons, and then they will see that the dark one is the one that is active. Or, they'll click and learn and press undo and now they know.


#5

I agree, @ldubya. I think there are probably other ways to come at at two-way toggle that are more visually evident (like the iOS or Material design toggles). And a 2-way toggle should probably be a separate control from a 3+ way segmented control.

This isn't a super high-priority fix (it doesn't block functionality, just can slow visual recognition), but I think with some more iteration we can eliminate the confusion.


#6

@ldubya I think your comment about the background color of the unselected ones being the same as the surrounding background is a great point. I’ll try it out on my own designs, if it help even for the two button cases.