What
인터페이스 안에 두개의 panel을 나란히 놓는다. 첫번째 panel에는 선택할 수 있는 아이템들을 나타내고 다른 panel에는 선택된 아이템의 내용을 보여준다.
Use when
사용자에게 리스트의 전체 구조를 보여주는 동시에 스스로 선택한 순서에 따라 사용자의 페이스로 아이템을 보여주기를 원할때.
물리적으로 작업하는 화면은 충분히 넓기 때문에 분리된 두개의 panel을 보여줄 수 있다. 반면 휴대폰처럼 매우 작은 화면은 이 패턴을 사용할 수 없다. 그러나 블랙베리와 같은 화면은 가능하다.
Why
Two-Panel Selector는 이미 학습에 의해서 익숙해져 있다. -윈도우 탐색기, 이메일 클라이언트, 웹사이트 등
사람들은 한 panel에서 아이템을 선택하고 다른 panel에서는 그에 해당되는 내용을 본다는 개념을 빠르게 이해한다.
두 개의 패널이 나란히 보여지면 시선을 쉽게 이동할 수 있음으로 사용자의 시선이 panel 사이의 긴 거리를 이동하는 물리적인 노력을 줄여준다.
시각적인 인지 부담을 줄여준다. 윈도우 전체가 변하지 않고 대부분의 영역이 고정되어 있음으로 사용자들은 변하는 영역에만 초점을 맞추어 볼 수 있다.
사용자가 기억해야 할 부담을 줄여준다. 이미 목록이 스크린 위에 떠있으며 “당신은 이곳에 있다”라는 이정표로 작용하기 때문에 사용자는 자신이 선택한 목록을 기억을 더듬지 않고도 바로 옆의 panel을 쳐다보기만 함으로써 인지할 수 있다.
How
선택할 수 있는 리스트 panel은 상단이나 왼쪽에 둔다. 왼쪽에서 오른쪽으로 글을 읽고 쓰는 사용자들의 시각적 흐름에 있어서 리스트를 보고 선택된 아이템에 해당하는 내용을 보는 흐름이 유리하다.
사용자들이 아이템을 선택하면 해당하는 내용을 즉시 두번째 panel에 나타낸다. 선택은 단 한번의 클릭으로 완료되어야 한다. 키보드-특히 화살표 키-로 선택을 변경할 수 있도록 해야 한다. 사용자의 물리적인 노력과 브라우징을 위해 소요되는 시간을 줄여주고 키보드의 사용성에도 기여한다.
선택된 아이템을 시각적으로 명확히 만든다. 선택된 아이템과 선택되지 않은 아이템을 명확히 구분지어 주어야 한다.
또한 Tow-Panel Selector에 리스트와 트리 같은 단순한 구성 요소들을 더하여 Sortable Table이나 Tree-Table과 같은 정보 표현 패턴으로 사용할 수 있다. Card Stack과 Overview Plus Detail은 Tow-Panel Selector와 밀접하게 관련되어 있는 패턴이다.
선택하고 보여주기 컨셉이 멀티플 패널을 통해 확장될 때, 계층구조를 통한 내비게이션을 용이하게 하기 위해서 Cascading Lists를 사용할 수 있다.