Side-by-Side

Side By Side

What Problem Does This Solve?

Visually inspect and compare two scenarios spatially, temporally or quantitatively.

Why Use This Pattern?

Comparing spatial-temporal data is a common analytical task to detect changes over time or identify patterns between variables. Providing two synchronized maps helps to see differences at a glance without the need to constantly swipe or toggle.

When to Use This Pattern

The main advantage of Side-by-Side over its related patterns Swipe, Overlay, and Timeslider is that the content within the area of interest is fully visible and not obstructed by other layers while the user zooms and pans to explore the content. This circumstance requires few user interactions to change layers or time extents and is especially useful for reports that require snapshots and are meant to be printed or stored as hardcopies.

A downside of visual side-by-side comparison is that the human brain must invest cognitive work into approximating the locations to be compared while the eye is jumping back and forth between the two maps.

What’s the Solution?

Display two (or more) maps side-by-side, each displaying a different scenario. Synchronize the maps so that the other maps mimics pan and zoom events of the map being navigated on. While either map could be used for navigation it is not necessary to replicate all the navigation controls on each map unless it is deemed important for clarity. If possible, duplicate the mouse cursor on the corresponding map to help users see their current pointer position as the mouse moves on one side. Consider depicting the second pointer with a different cursor like a crosshair.

Provide clear titles of the variables and timeframe shown on each map. Being able to change the variable and/or timeframe is a commonly seen approach to add flexibility to the analysis. It is advisable to show two legends when showing different variables or scales.

Special Considerations

Some applications allow users to switch between a Side-by-Side view to a Swipe view. This approach provides users with maximum flexibility and caters to varying needs and use-cases.

Examples

Side-by-Side
Side-by-Side

Leave a Reply