Dual view design pattern

Having two screens provides a natural affordance to compare two versions of the same type of content side-by-side, like two images, lists, or documents.

It can also be used to show the same information in two different ways at the same time, with each screen working seamlessly to provide more information to the user. For example, a list of restaurants on one screen, and a map with locations on the other.

If you want to achieve a dual view-like experience without designing two specific views, consider instead supporting multi-instance with your app to take advantage of the built-in support the OS provides. This could be useful for comparing two products opened on two tabs or other similar scenarios.

Dual view

Best practices

Here are some scenarios that will help guide you when applying this design pattern:

Avoid confusing dual-view and list-detail - the second screen should display an alternative version of the information on the first screen

Do Don't
Use the left side of the screen to display content in one view while using the second screen to view the same content in a different view. Don't use left screen to display a list and the second screen to display details; it's often seen that people confuse Dual-view with List-Detail design pattern.

Ensure visual indicators are synchronized for the selected item on both screens

Do Don't
Use visual indicators to display the same information in two different views. Don't mis-use visuals; not using the visual indicators the right way can result in a list-detail view.

Lever the two screens to compare data

Do Don't
Leverage two screens to compare the same instance of the product. Don't have a list on one screen and details on the second screen.

Use the two screens to preview and edit at the same time

Do Don't
Use the second screen to edit or markup changes from the content on the first screen in a dual-view. Don't allow users to edit or markup changes across both screens in a dual-view.

Types of apps that may benefit from this pattern

  • Editing tools that benefit from having before/after states side-by-side; for example, markdown code and preview.
  • Content and context side-by-side; for example, a map and a list of restaurants.
  • Apps that let the user compare similar items.
  • Having two canvases with coordinated contents but keeping each page separate; for example, canvas on one side, note taking on the other.

Code examples

These projects show a simple implementation of dual view that you can use in your apps: