UI 디자인 가이드 : Select Controls
디지털화면에서 사용하는 선택 컨트롤들은 우리가 실제 생활에서 많이 사용하는 스위치에서 기원합니다.
먼저 "토글"이라는 단어는 활성화될 때마다 두 상태를 번갈아 가며 사용하는 짧은 손잡이가 있는 스위치를 나타내는데, 조명을 "스위치"할 때에 사용되고 있죠.
"라디오 버튼"의 경우 일반적으로 다이얼 아래에 스테이션 셋팅을 기계적으로 저장할 수 있는 버튼 세트가 있어 사용자가 스테이션간 전환을 더 빠르게 할 수 있는 일련의 버튼이 있는 자동차 라디오에서 나온 단어입니다. 이 버튼 중 하나를 누르면 다른 버튼을 누를 때까지 계속 눌린 상태를 지속하게 됩니다.
이 컨트롤들은 디지털에서도 비슷한 맥락으로 사용됩니다.
선택 옵션 컴포넌트 유형Checkboxes(체크박스)
하나 이상의 독립적인 옵션이 있고 사용자가 원하는 수만큼 항목을 선택할 수 있는 경우 사용됩니다. 선택이 없거나, 하나 또는 여러 개 선택을 포함합니다.
Radio buttons(라디오 버튼)
상호 배타적인 두 개 이상의 옵션이 있고 사용자가 그 중 하나만 선택해야 하는 경우 사용됩니다.
Toggle switches(토글 스위치)
두 개의 상호 배타적인 옵션이 있고 항상 기본값이 있는 경우 사용됩니다. 토글은 선택 즉시 적용됩니다.
Choice chips(칩스)
라디오 버튼에 대한 작은 대안입니다. 최소한 두 가지 옵션을 포함하는 선택 칩은 사용자가 선택할 수 있는 단일 선택을 나타냅니다.
Multi-select chips (다중 선택 칩스)
체크박스에 대한 작은 대안입니다. 사용자가 여러 옵션을 선택할 수 있도록 하며 모바일에서 필터링하는 데 많이 사용되는 편입니다.
선택 컨트롤은 오랫동안 유저 인터페이스에서 사용되어 왔으며, 사용자들은 각 컨트롤이 어떻게 작동하는지 학습되어 있습니다. 아래 시트는 상황에 따라 적합한 선택 컨트롤 유형을 정할 때 참고할 가이드입니다.
Inspiration was taken from NNG article “Checkboxes vs. Radio Buttons”States
체크 박스 및 라디오 버튼을 선택하거나 선택 해제할 수 있으며 토글은 끄기 또는 켜기일 수 있습니다.
각각의 선택 컨트롤들은 다양한 상태를 가지고 있습니다. 꽤 많아 보이지만, 안정적인 인터렉션을 위해서는 이 모든 상태를 포함해야 합니다.
Enabled(활성화)
Disabled(비활성화)
Hover(호버)
Foocus(집중)
Pressed(누름)
| 체크박스에는 미확정 상태(indeterminate state)도 존재합니다.
체크박스의 상태 중 선택도 미선택도 아닌 상태를 말합니다. 상태가 완전히 결정되지 않았으므로 이름이 불확실할 수 있습니다. 아래와 같이 여러 하위 항목을 포함한 상위 체크박스 같은 경우의 시나리오를 처리하는 경우 사용됩니다. 하위 체크박스의 선택/미선택을 모두 포함해서 표현합니다.
| 토글 스위치로 계층구조를 만들지 마세요.
토글 스위치로 트리구조를 만들게 되면시각적으로 산만해짐은 물론이고
포함된 모든 하위 옵션이 켜짐/꺼짐 상태일거라는 잘못된 인상을 줄 수 있습니다.
| 선택한 항목이 즉시 적용되어야 하는 경우, 토글 스위치를 사용합니다.
토글 스위치는 디지털 On/Off 스위치입니다. 토글 스위치에 의해 트리거된 모든 효과는 선택 즉시 적용되어야 합니다. 그렇지 않은 경우에는 토글 스위치가 아닌 체크박스를 사용하는 것이 좋습니다.
| 사용자의 혼란을 방지하기 위해 표준스타일을 사용하세요.
사용자에게 추가적인 인지 부하를 주지 않도록 가급적 일반적인 스타일을 따르는 것이 좋습니다.
라디오 버튼과 혼동하기 쉬운 원형 체크박스를 잘못 사용하는 경우도 있습니다.
| 옵션 목록을 세로로 정렬하면 표시하면 사용자가 쉽게 검색할 수 있습니다.
보통은 왼쪽 정렬된 컨트롤과 레이블은 서로 밀접하게 배치될 때 가장 잘 작동합니다. 이것은 가장 빠른 완료 시간과 적은 실수를 지원합니다.
단, 오른쪽 정렬 컨트롤은 디바이스 특성상 모바일에서 몇가지 장점이 있습니다.
레이블과 버튼이 너무 멀리 떨어져 있을 수 없기때문
오른쪽 사이드에 버튼이 있으면 한 손으로 디바이스를 컨트롤할 때 더 쉬워집니다.
또한 선택하는 동안 손가락으로 레이블을 가리지 않는 효과도 있습니다.
| 세로로 나열하기 어려운 경우 칩을 고려하십시오.
사용자가 어떤 항목을 선택했는지 구분이 가능하도록 해야합니다. 버튼과 레이블의 간격도 일정하게 유지해야 하구요. 세로로 나열하기 어려운 경우 가로 배열에서는 옵션을 시각적으로 명확하게 구분하기 위해 Chips을 많이 사용합니다.
| 옵션 수가 적은 경우 드롭다운 메뉴보다 라디오 버튼을 사용하세요.
쉽게 비교할 수 있도록 모든 옵션을 명시적으로 표시하면 사용자의 인지 부하가 줄어듭니다.
| 옵션 항목이 많거나, 유사 레벨의 반복 옵션에는 드롭다운을 사용합니다.
옵션의 수가 6~7개보다 많은 경우 사용자가 모든 옵션을 염두에 둘 수 없으므로 드롭다운을 사용합니다.
(Zoom — 10%, 20%, 30% ..)와 같이 예측 가능하거나, 옵션값이 일정하게 증가하는 옵션에도 동일하게 적용됩니다.
| 라디오 버튼은 Default을 반드시 포함하는 것이 좋습니다.
사용자는 라디오 버튼을 선택한 후에는 선택을 취소하고 원래 상태로 되돌릴 수 없게됩니다. 그러므로 기본값을 제공하고, 사용자가 선택을 자제해야 하는 경우 "None" 옵션 버튼도 제공해야 합니다.
옵션의 순서는 논리적으로 목록을 구성하며, 사용자에게 제안하는 식으로 활용할 수 있습니다.
| 명확한 레이블을 작성하되, 부정적인 표현을 하지 않습니다.
사용자가 긍정적인 선택을 할 수 있도록 레이블을 작성하도록 합니다.
이 선택에 대해 사용자가, "~하지 않을게요"라는 표현 보다는 '~하기를 원합니다'처럼요.
| 사용자가 이미 선택한 옵션을 강조 표시해줍니다.
사용자가 선택한 옵션을 구분할 수 있도록 다른 옵션과 시각적으로 다르게 표현해줍니다.
특히 데이터 테이블에서 행을 선택하는 경우 중요합니다.
| 일괄 선택 및 지우기 기능을 지원하세요.
사용자가 한 번에 여러 항목을 선택하거나 지우는 것이 어렵지 않도록 제공합니다.
| 원활한 인터렉션을 위해 클릭 영역을 충분히 넉넉하게 만드세요.
버튼과 레이블을 모두 포함하여 클릭/탭할 수 있는 영역을 확보하도록 합니다.
Fitts의 법칙에 따르면 타겟의 크기는 중요한 역할을 합니다.
체크박스와 라디오 버튼은 일반적으로 작은 형태고, 특히 모바일에서 클릭하거나 누르기가 까다로울 수 있기 때문입니다.
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
