[번역]Selection control 디자인 가이드
체크박스, 라디오 버튼, 스위치 등 선택의 기능을 하는 컨트롤의 사용방법
체크박스, 리디오버튼, 스위치 등 선택 관련 컨트롤은 명확한 가이드라인을 모를 경우 어떤 것을 사용할지 고민이 되는 경우가 많은 것 같습니다. 특히 on/off를 선택하는 경우에서 체크박스와 스위치를 모두 사용할 수 있어 어느 것을 적용해야 할지 모호한 경우가 많을 것 같습니다. 아래 글에 의하면 보편적으로 on/off에 대해서 체크박스와 스위치가 모두 사용되고 있는 것 같으니 둘 중 어떤 것을 사용해도 사용자에게는 자연스럽게 느껴질 것 같습니다. 결론적으로는 가능하면 on/off에 대해서는 스위치를 사용하되, 상황에 따라 체크박스를 사용하여도 무방하다고 할 수 있을 것 같습니다.
*이 글은 아래 글을 요약 번역한 글이며, 이해를 돕기 위해 보충이나 의역을 한 부분도 있습니다.
셀렉션 컨트롤은 은 리스트에서 항목을 선택을 하거나, 설정을 켜거나 끌 수 있도록 해주는 용도의 컨트롤이다.
셀렉션 컨트롤의 종류는 체크박스, 토글 스위치, 라디오 버튼, 드롭다운 리스트가 있다. 이 컨트롤들을 용도에 맞게 사용하는 방법에 대해서 알아보도록 하겠다.
각 컨트롤의 용도
체크박스
체크박스는 두 가지 용도로 사용할 수 있다.
1. 다수의 체크박스 항목 중에서 선택 (선택하지 않거나, 하나 또는 다수의 항목 선택)
2. 하나의 체크박스 항목으로 옵션을 켜거나 끔
토글 스위치
토글스위치로 yes/no 또는 On/Off의 상태를 전환
라디오 버튼
한 가지 선택만 할 수 있을 경우 사용. 한 가지 옵션이 선택될 경우, 다른 옵션들은 자동적으로 해제됨. 한 번에 한가지 옵션만 선택할 수 있다.
드롭다운 리스트
라디오버튼과 같이 한 가지 옵션만 선택할 수 있음. 드롭다운 리스트는 커맨드 메뉴, 내비게이션 매뉴, 양식 또는 속성 선택 등에 사용될 수 있어 라디오버튼보다 용도가 더 다양하다.
컨트롤을 용도에 맞게 선택하여 사용하기
#1 아래 질문을 에 따라 용도에 맞는 컨트롤을 고를 수 있다.
1. 제공되는 옵션의 갯수는 몇 개인가?
2. 사용자는 몇 개의 옵션을 선택할 수 있는가?
3. 옵션들의 관계는 어떻게 되는가?
독립적(Independant), 상호배타적(Mutually exclusive)
#2 단일 체크박스(Single Checkboxes)와 토글 스위치
단일 체크박스와 토글 스위치는 동일하게 사용할 수 있는 것 처럼 보인다. 그러나 플랫폼 별로 단일 체크박스와 토글 스위치 사용에 대한 가이드가 있다.
Apple - Mac OS
토글 스위치
Mac OS환경에서 토글 스위치는 사용되지 않는다.
체크박스
두 가지 상반되는 상태(On/Off) 중 선택을 하게 할 경우
단일 체크박스가 옵션을 켜고 끄는 용도로 사용된다.Apple - iOS
토글 스위치
두 가지 상반되는 상태를 켜고 끌 때
체크박스
리스트에서 다수의 아이템을 선택해야 하는 경우
Material design
토글 스위치
단일 옵션을 켜고 끌 때
무언가를 즉시 활성화/비활성화 할 때
체크박스
리스트에서 하나 이상의 아이템을 선택할 때
하위 선택항목을 가지고 있을 경우
데스크탑 환경에서 옵션을 켜고 끌 때 (구글은 아직 아직 데스크톱 환경에서 옵션을 켜고 끌 때 스위치를 사용하기도 한다.)
토글 스위치는 데스크탑과 모바일 환경 모두에서 항목을 켜거나 끌 때 사용된다.
체크박스는 하나 이상의 아이템을 선택할 때 사용된다.Microsoft
토글 스위치
옵션을 켜거나 끌 때
체크박스
액션 아이템을 선택하거나 해제할 때.
단일 아이템에서의 선택/해제, 그리고 다수의 아이템 선택 모두 사용
마이크로소프트의 디자인 가이드에서 토글 스위치는 옵션을 켜거나 끌 때 사용된다.
체크박스는 리스트에서 아이템을 선택할 때 사용된다.#3 단일 체크박스와 라디오 버튼
사용자에게 두 가지 옵션 중 하나의 옵션을 선택하도록 할 때 결정하기 모호한 케이스들이 있는데 다음과 같이 사용하면 된다.
두 가지 옵션이 '대립(opposing)' 보다는, '선택(alternative)'하는 관계일 때 라디오 버튼을 사용하라.
옵션을 '켜고 끄는' 기능을 할 경우 단일 체크박스나 토글 스위치를 사용하라.
#4 체크박스는 사각형으로
체크박스와 라디오버튼은 동작하는 방식이 다르다. 라디오 버튼에서는 한 가지 옵션만을 선택할 수 있고, 체크박스는 여러 개를 선택할 수 있다. 체크박스를 라디오 버튼과 같은 형태로 만든다면 사용자는 한 번에 하나의 옵션만 선택할 수 있다고 생각할 것이다.
Lyst는 체크박스를 라디오 버튼 형태로 적용하여 사용자를 혼란시키고 있다.구글과 애플은 둥근 형태의 체크박스를 사용한다. 사용자들이 이 형태에 얼마나 혼동스러움을 느낄지는 모르겠지만, 사각형 체크박스의 형태를 변형시킬 충분한 이유가 있지 않는 한 일반적으로 사용하는 형태를 사용하는 것이 좋다고 생각한다. 단순히 보기 좋다는 것은 충분한 이유가 되지는 않는다고 생각한다.
체크박스의 일반적인 형태가 사각형이라는데는 논란의 여지가 없다. 다이이몬드나 원형으로 만들지 말라.
- About Face / Alan Cooper
Gmail은 둥근 형태의 체크박스를 사용한다.Creativity는 다른 것들과 다르게 하기 위해 룰을 깨는 것이 아니다. 사용자를 혼란시키지 않도록, 단순하고 직관적인 방법으로 복잡한 문제를 푸는 것이 Creativity이다.
#5 옵션이 10개가 넘을 때는 드롭다운 리스트를 사용하지 말라.
E-commerce사이트의 47%가 '국가'를 선택하는 컨트롤에 드롭다운 리스트를 사용한다. 긴 드롭다운 리스트는 스크롤을 많이 해야 해서 원하는 옵션을 선택하기가 쉽지 않다. 이런 경우에는 나라 이름을 타이핑하도록 하는게 훨씬 쉬운 사용성을 제공한다.
관련 글
Selection Controls — Material Design
Check Boxes — Windows Design Guideline
