What Problem Does This Solve?
The user’s center of interest or activity changes and requires toggling to a different layout.
Why Use This Pattern?
Builders must decide early on which layout to use and how to arrange elements on the canvas. Each layout pattern has a purpose and certain benefits but also comes with shortcomings. Focus on the Subject explains that just because an app follows a certain layout doesn’t mean that users are stuck with it as their lens of interest changes. This pattern can be interpreted as a toggle between a Full Map and a Reference or No Map layout.
When to Use This Pattern
Use when the current view or layout doesn’t provide enough canvas to display all the information for a subject of interest. An example of this need is an app to investigate work orders and enhancement plans across schools in Hawaii. The main screen could utilize a Full Map layout showing all schools in Hawaii on a map and selecting a school will then show information for that school in an Info Popup. The challenge is that there is not enough space to show all the details about the school in this limited space and therefore the app falls short displaying large amounts of data.
What’s the Solution?
Provide a switch so that users can toggle to an alternate layout. This switch can be a link that navigates to another page or a button in an Info Popup that opens a modal window. The new layout has then enough space to show additional properties, tables, charts, or even a small reference map to illustrate the location.
Ensure that the change in layout is seamless and logical, provide smooth transition during navigation with a clear way to go back. Make it easy for users to dismiss the selection like closing a modal window.
Users don’t like change or learning an app with new functionality and abilities. Providing familiar interfaces are recommended and constant changes are disruptive. Limit the amount of layout changes and only use when really needed and avoid unnecessary page transitions. Consider fitting the content into already available containers like a side panel or use content patterns like Info Popup whenever possible.