Two-Panel Selector

MacOS System Preferences background image selector

There are many occasions where the user needs to see a list of options, categories, commands or other related items but when they make a selection they still need the list in view.Two-panel selectors are commonplace in web and application design as they enable users to view the contents of individual files, emails and other content-carrying items in one panel and quickly switch between them in another.

Benefits

The users don’t need to skip between different sections of the applications in order to gain access to the list of options or individual contents. So, this pattern minimizes the number of necessary intermediate steps and interactions.

A movement from a section, windows or page to another usually demands the users reorient themselves every time they reach a new position, what is a cognitive effort. Using this pattern the spatial location is preserved and the user don’t need to reorient itself in the screen.

Spatial memory is limited, it is estimated that we are capable of maintaining only nine distinct items in an active state; designs that involve movement from one region of the user interface to another interrupt the experience of scanning options and checking their contents, which forces the user to maintain information in short-term memory. – Interaction Design Foundation

Using this pattern, the users don’t need to maintain infromation in short-term memory because everything that they need to reach is in the same section, windows or page. They don’t need to remember where things are because it was never removed from view.

How to Implement

Users tend to look from left to right and top to bottom (as per the viewing direction followed during reading), therefore, the list – being the user’s first port of call – should be placed either above or to the left of the panel in which the selected item contents are displayed.
To make the interactive and viewing experience as cohesive as possible, the contents of an item should appear immediately in the second panel, following interaction with the corresponding item in the first panel list. Even brief delays can negatively affect user experience, so every effort should be made to ensure the contents appear as quickly as possible.
List options are generally arranged vertically and there are often times when the number of options exceeds the available space of the panel so scrolling must be enabled.
The selected option in the first panel must also be distinguished from the rest to provide the user with a means of instantly determining which item contents they are currently viewing.