How to display view options buttons in a top toolbar in mobile and desktop?

Question

I have a webapp with a list of items.

The items can be viewed in grid view (tiles) or in a vertical list.

At the top, I have a toolbar of sorts that have two icons that the user can toggle between the grid and the list views (only icons no labels)

In mobile this takes too much space in the top bar and we need to reduce the space taken by such 2-state toggling buttons.

I though maybe having one button that toggles between the two states but than found this: Should a toggle button show its current state or the state to which it will change?

What is best practice for this scenario if there is one?

Addition:

Also, is it a good practice to hide such buttons in mobile so that the user has to click a menu button to show these options which on desktop are always visible?

Answer 1

What are the items? Consider very carefully if both views actually adds value and helps the user gain overview, choose an action or progress further in some manner. In my experience, there is seldom more than one view type providing the optimal value needed for the user to get to where ever she's going.

I don't know of a best practice in this case. A button can show both states: a small graphic representing the current view and an arrow to a larger graphic representing the target view.

An alternative could be using swipe to change the view, avoiding a button altogether.

Personally, I prefer a button to most clearly communicate what it leads to, not the opposite. The users of your application should simply be able to understand what the button does - which is change the view.

Answer 2

If you are short of space on mobile, you can definitely show a single icon which reflects the current state of data. Here the key would be the icon design. The icon should be self explanatory. Otherwise the desired way is to show two icon where one is shown in the active state.