Radio button & Check box
사용자가 여러개의 옵션 중 하나 또는 복수의 선택을 할 수 있도록 합니다.
Basic principles
Familiar
라디오버튼이나 체크박스는 오랜 기간동안 사용자에게 익숙한 UI 이며, 기대에 맞게 작동해야 합니다.
Scannable
라디오버튼이나 체크박스에서 선택된 항목은 다른 항목에 비해 한눈에 알아볼 수 있도록 눈에 띄어야합니다.
Efficient
다른 선택 옵션들 간의 비교가 쉬워야합니다.
Usage
Radio button
리스트에서 하나의 옵션을 선택합니다. 모든 옵션이 한번에 보여야합니다. (체크박스처럼 네스팅이 불가합니다.)
Check box
리스트에서 하나 또는 여러개의 옵션을 선택합니다. 체크박스(Parent) 안에 체크박스(child) 리스트를 둘 수 있습니다.
체크박스(Parent) 내에 체크박스(child)를 둘 수 있으며, Parent가 check되면, child 체크박스는 모두 check됩니다. child 체크박스 중 하나라도 uncheck되면, parent 체크박스도 uncheck됩니다.
체크박스와 라디오버튼 구분
하나의 항목만을 선택해야하는 경우에는 라디오버튼을 사용합니다.
Don’t
하나의 항목 만을 선택할 수 경우임에도 체크박스를 사용해 사용자가 여러 항목을 선택할 수 있다는 오해를 하게 만듭니다. 하나의 옵션을 선택할 수 있음을 분명히 표시하기 위해 라디오버튼을 사용합니다.
선택된 항목 UI
선택 항목과 미선택 항목은 명확히 구분되어야합니다.
Don’t
페이지 별로 선택된 항목과 미선택된 항목의 UI 디자인이 다르면 안됩니다.
또한 Page1의 선택된 항목은 미선택된 항목과 구분이 되지 않아 혼란을 주고 있습니다.