3

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.

3
  • So you already have seen the issues with using one button. The answer is to have 2 separate buttons and it will be clear which one is active.
    – musefan
    Sep 17, 2020 at 8:40
  • 1
    Two separate buttons take more space, that's the problem. And I thought that a toggle button is enough for toggling job :-?
    – ShinaBR2
    Sep 17, 2020 at 9:01
  • I highly recommend you visit this page: ux.stackexchange.com/questions/1318/…
    – Steve
    Aug 8 at 18:39

2 Answers 2

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 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:

button group image

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.

1
  • Perfect reference and thanks for your answer :D
    – ShinaBR2
    Sep 18, 2020 at 5:15
1

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:

enter image description here

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

enter image description here

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

3
  • Thanks for your answer for my first question. And how about the second one? I'm still on considering.
    – ShinaBR2
    Sep 17, 2020 at 10:01
  • I put something about the default view at the end of the answer
    – Danielillo
    Sep 17, 2020 at 10:22
  • 1
    No, my second question is about next or current state. The default view is depended on my business, that's not my question.
    – ShinaBR2
    Sep 17, 2020 at 12:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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