Theme Toggle

Theme Toggle

What Problem Does This Solve?

The map is overloaded with layers and users struggle to reduce the clutter

Why Use This Pattern?

Interactive maps are collections of layers and each layer that is turned on adds to visual information to the map and if any one of those layers isn’t required or desired it can be considered clutter to the user. Being able to quickly chose which layers are of interest will enhance the overall experience by reducing the amount of data being transferred between the server and the client and subsequently rendered on the map.

When to Use This Pattern

Use when having logical groups of layers that users can select from makes sense for the task on hand. This grouping can be considered a theme or preset that serves as a quick starting point into a collection of layers, often referred to as themes. Themes can be based on categories like food, entertainment, emergency, etc. or topics to explore like restoration efforts, disease risks, wildfire exposure. Have a toggle control that allows users to switch between themes will help users get to the desired information faster without having to go through long lists of layers and turning them on and off.

What’s the Solution?

Group layers into themes and provide a mechanism for users to toggle between them. A toggle can be as simple as an explicit dropdown or radio select control. More sophisticated designs may build theme toggles into a user’s workflow and switch upon moving from one section of the app to another, for example by clicking a next button in a wizard or opening a different panel like an accordion.

Special Considerations

Create meaningful themes that match the user’s mental model and anticipated task.

Examples

Theme Toggle
Theme Toggle

Leave a Reply