Should I use multiple icon for two states of toggle button

Question

I have a simple bar chart component and I'm going to add a button which help user able to switch between two view modes. Let say:

• First mode called "relative view" (show percentage value of each column).
• Second mode called "absolute view" (so actually number value of each column).

The button to toggle-like, but I want the UI is just a simple button, not using the switch. Default is "absolute view".

I have two questions:

• Should I use two different icons for each state according the current view mode? For example, one "number" icon, and one "%" icon.
• If I use two different icons, the icon should be show according the "current state" or "next state"?

For second question, for example if I am currently in "absolute view", should it be displayed "number" icon or "%" icon? Each way has its meaning I think:

• If I use icon for next state, that mean I taught user: click to change to next state.
• If I use icon for current state, that mean I taught user: this is the current state, click to toggle.

This thing makes a little considering. Any help should be highly appreciated. Thanks.

Answer 1

Let's start from the bottom.

If I use two different icons, the icon should be show according the "current state" or "next state"?

• Should a toggle button show its current state or the state to which it will change?
• Should an icon show current state or next state?

Should I use two different icons for each state according the current view mode? For example, one "number" icon, and one "%" icon.

In the case of media player, I'd say two icons is safe because "play - pause" is expected by most users. However in your specific case it depends on the fact whether your users expect the "relative - absolute" pair.

In other words, if they see a "relative" button, do they expect it will also help them going to a "absolute" view?

The button to toggle-like, but I want the UI is just a simple button, not using the switch. Default is "absolute view".

I'm not sure if this violates your requirement but I think it's safer to go with something like this, as all buttons and icons are always there:

In fact, the toggle/switch may not really future-proof. If you want 1 button, you may also go with a Select widget which allow you in the future to add more view options if necessary (for example, "Relative", "Absolute", "Hybrid")

To summarize, I think it's better to show all the options and their states instead of switching between them.

Answer 2

What is described in the question is a change of view. There's a generic icon for "view mode" that changes the type of arrangement of the elements in a list:

In this case it would be to find a single icon of mode change from "absolute" to "percentage" and make it understandable:

About the default view it depends of the type of project, I don't think it's simple to answer without knowing it.

_{*Icons from thenounproject.com}