Question

When using icon images without text captions, should the icon represent the current state or the next state? For example I have a block of text that I want to minimize / maximize or I want to toggle showing All User Records or just My Records. I’m sure there are compelling arguments for either side and know that consistency is key, but what are the arguments related to good intuitive user design?

Answer 1

There is neither standardization nor general human tendency on this. For example, MS Windows UX Interaction Guidelines specifies four basic kinds of toggling progressive disclosure control. Three out of four show the state-when-activated, while one shows the current state.

I believe if you test a particular approach on your users, you’ll get different results depending on what you ask. If you show them a control and ask them what state the app is in, they’ll tend to read the icon as if it were indicating the state. If you show them a control and ask them to change the state (where in some cases the state is already changed), they’ll read the icon as if it were the state to achieve. It’s precisely because of this they invented toggling buttons.

If you’re lucky, users use the icon primarily for either reading the state or setting the state, and not both. Then let the icon indicate whatever the users use it for.

If they indeed use it for both reading the state and setting the state, you’re basically hosed, but there are a few things you can try to minimize hosehood:

• Use text in addition to or instead of an icon. When labeled with a verb (e.g., “Connect”), the control indicates the state the user gets. When labeled with an adjective or noun (e.g., “On Line”), it implies the current state.

• If your lib doesn’t support toggling icons, then consider using a checkbox control, if that’s allowed.

• If your lib doesn’t support checkboxes, then consider two controls, one to set each state, where the current state is disabled. Not too good for reading the current state, but there’s some precedence for this in pulldown menus.

• Fiddle with graphic design or placement to make it consistent with the meaning you’ve chosen. For example:

  • Command buttons are always labeled with the action they commit, so if your icon indicates the state the user gets, then give the icon a raised appearance like a command button. If the icon indicates the current state, then give it a flat appearance.

  • Toolbar controls usually show the state they bring about, so put the icon at the top of the window if indicates the state the user gets. In contrast, icons in the “work area” of the window indicate objects or attributes, so icons there should show the current state. Icons at the bottom of the window (in the status bar) should also show the current state.