Home > Dealing With Data > change view on a set of data? > Change view – Dedicated button

Change view – Dedicated button

It works like this:

  1. A certain set of data, in this case a set of search results, is shown on a map. The button in the top right corner indicates that the user can view the results on a list as well. Tapping on the button…

  2. … changes the map view into a list view.

  3. By tapping the button in the upper right corner again, the user can return to the map view.

Use when

A set of data can be viewed in all kinds of ways, e.g. in a list, on a grid, or on a map. The user might want to toggle between views to see the data in an other layout. Most commonly from list view to map view, and from list view to icon view. The button can contain text, an icon, both icon and text, or it can look like a switch between two icons. The button doesn't have to be placed in the same spot on each view, but this might confuse the user. It is recommended to always provide the user with the option to switch back and forth.

When you always want to have the option to change the view available for the user, you should apply a dedicated button. When your screen space doesn't allow a dedicated button, you could consider a change view option in a tab bar or the options menu.

The Good

  • User can see directly what different views are available
  • User has to click only once before changing the view
  • If the result is a lot (>10), then the list view will help user to search. (Borrys Hasian)

The Bad

  • The button is always visible, even when it is not needed.
  • The \'Map\' button looks like a button to search, because it\'s placed next to the Query Text Field. (Borrys Hasian)

Examples

Layar

1 The Funda layer in Layar, shows a double button on top of the screen. In this list view, the user has the possibility to switch to map view, or reality view.

2 In the map view, the double button is still located in the same spot. The options to switch to are now reality and list view.

3 Finally, in the reality view, the options to switch to are map and list view.

Google places

1 Results to a search query are shown here in a list view. At the top of the screen, next to the search box, the map icon can be tapped...

2 ... to switch to the corresponding view. Notice that the button to switch back is here placed in the bottom left corner of the screen. This is common in all google maps applications, so expert users will know how it works. New users might find it hard though to notice, that the map icon in the former view can be tapped to switch views.

Gallery

1 A folder in the Android gallery can be viewed in two ways: spread out in a grid view, or by tapping the switch in the top right corner...

2 ... in the stack view, where all stacks of images and video's are provided with dates.

Leave a comment