This is an age old debacle with toggle switches. How do you indicate it is ON/OFF and how do you indicate pushing it will turn OFF/ON particularly when the states are binary but not as simple as ON/OFF and you’re working in two dimensions.
You’re trying to show status and allow toggling all at once. There are basically 4 ways to do it with a binary setting and no one right way.
- Icon shows current status, Text shows current status. My coffee maker does this with a button that goes from “Single” to “Double”.
- Icon shows current status, text shows what a click will achieve (Zoom)
- Icon shows what a click will do, text shows current status (Example?)
- Icon shows what a click will do, text shows what a click will do (Play/Pause buttons typically work like this)
As a result, as a user you have to spend the cognitive load analyzing the icon, maybe trying to guess what the current setting is, to try to intuit what a click will actually achieve.
