3

Currently, I have menu button for toggle purpose. User can switch between original web view, or striped down mobile view.


Currently, we are in original web view

On action bar, I'm showing a phone icon, which is used to tell user, "By clicking on me, you are going to switch to mobile view"


Currently, we are in mobile view

On action bar, I'm showing a web browser icon, which is used to tell user, "By clicking on me, you are going to switch to original web view"


I was wondering, for a toggle button, should the icon telling

  • What will be the next state if user clicks on me?

    • A phone icon indicates if user clicks on me, view will switch to mobile view.
    • A web browser icon indicates if user clicks on me, view will switch to original web view.
  • OR, should the icon used to indicate what is current state?

    • A phone icon indicates current state is mobile view.
    • A web browser icon indicates current state is original web view.

marked as duplicate by locationunknown, maxathousand, Ken Mohnkern, JonW Dec 29 '17 at 16:16

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1

If you have to do it this way, then I'd opt for the first option where the icon indicates the next state.

However, if possible, I'd actually show both icons simultaneously (next to each other) and then use some sort of highlight to indicate the current state. The user will then see what the current state is and will intuitively know that clicking on the other icon will change the state to whatever that icon represents.

This provides a better user experience because users can easily see the current state and also see both options at all times.

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