As a general standard, when having an icon for a setting, I've never been sure whether to display the icon for the currently enabled setting, or the alternative.

My exact situation is within a mobile game, where the player can choose between tilting the device, or having buttons on the screen to use. So i have two icons, one a mini screen with buttons, the other a mini screen with rotation arrows around it.

So in this situation, should I display the icon that corresponds to the current control setting, or display the opposite one, so they change to that setting when they click on it?

Is it a matter of preference, or is there some standard behind all of this?

  • already asking this question should be enough to answer it: if YOU are confused, the users for sure will be... just use another method to visualize it, would be my advice
    – wrm
    Feb 20, 2013 at 10:31

3 Answers 3


I don't think there's a standard, at least, I haven't seen a standard and still get confused sometimes.

It seems to me that clicking on an icon (or button, or whatever) means you are after a change. The icon image or text in a button should indicate somehow what change will take place.

So the icon or button should display the state that will take effect when the icon or button are selected.


No matter which way you do it, about half your audience is going to be confused that it's not the other way. You're really better off thinking of it as enabling or disabling tilt, rather than enabling tilt or enabling buttons, which means using something like a toggle button to represent the state.

  • I'm with Karl on this, state buttons are wrong, "is it going to change? is it showing the current state?". I normally end up switching those type of buttons a few times to check what happens. Much better to so as Karl has said and make the actual option clearer, tilt on/off.
    – G3D
    Feb 20, 2013 at 3:11

This problem has no correct solution. The problem is that you are trying to use one button for function that needs radio control, or at least 2 buttons, working as a radio (only one of them can be pressed at time) - One button for "control by screen" and one button for "control by tilt". When you press on "control by screen" the other button becomes unpressed and vice versa:

Mode1: ([] - pressed button; || - unpressed)


Another possible clear solution is to separate the button that will switch these two options and the indication of the current mode. Here is a text example for the two possible states.

 [Click to switch] ----> (Tilt mode)

 [Click to switch] ----> (Screen mode)

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