Recently, while trying to turn off some email announcements, I came upon this usability nightmare:

Wow.

I don’t have any issue with a switch over a more traditional checkbox. In fact, many of the apps my company makes use switches to good effect. A well-designed switch looks very nice and is just as obvious and usable as a checkbox. Further, having color on a switch helps a great deal with ensuring the current state is understood, and this interface even has that. I immediately knew that announcements were on.

However, because this isn’t a proper switch, the color ultimately detracts from the usability. My eye was drawn to the item I couldn’t click to turn off. Meanwhile, the control I wanted to enable was all gray, dimming it from my perception.

The above video is a reenactment of pretty much exactly what I went through. I saw that the “Enable Announcements” option was on. I tried to click it off, and that failed. Thinking perhaps I had misclicked, I then clicked a couple times, which amusingly led to it being highlighted. I finally paused, focused on the controls, and clicked “Disable Announcements”. I then played around with the control, shaking my head and muttering all the while.

What’s really breathtaking about this is that someone custom-crafted it. It’s a whole bunch of custom CSS, to wind up with…this. It’s awful, and I hope to never run into it elsewhere.