[PM][서비스기획] 01_[UI 컴포넌트별 > UX 원칙 #3] 체크 박스

체크 박스

- 체크 박스는 디폴트 개념이 없음 (라디오 버튼과 큰 차이)

- 1개 이상의 옵션을 선택할 수 있는 기능

• Cf. 독립 실행형 체크박스는 특정 조건의 동의 여부 확인/단위 확인을 위해, 폼 마지막 항목에 활용됨

- 사용자가 선택 옵션을 저장하거나 시스템 제출 전 확인 및 검토 시 사용

- 상위 옵션 내 하위 옵션 그룹화 형태 ui에서 사용됨 (토글 버튼은 이런 형태 불가능)

 

 

체크 박스의 인식성

- 체크 박스 영역이 충분해야 하므로, 박스 크기가 텍스트에 비해 상대적으로 커야 함

- 체크 박스의 리스트는 한 줄에 한 개로 세로 형태 제공

• 단 체크 박스가 너무 많이 필요한 경우, 칩 버튼으로 대체하여 세로 가로로 확장 형태 제공

왼)체크박스가 많이 필요하여 오)로 개선한 사례

 

 

체크 박스의 선택 행위 최소화

- 디폴트를 비설정하여 유저가 스스로 결정할 수 있도록 함

- 체크박스 사각형 외 레이블이나 텍스트를 클릭시 옵션 체크 박스 선택 행위와 동일 적용

• Why? 체크박스는 UI 영역에서 가장 인터랙티브한 요소이므로 쉽게 액세스 되는 탭영역이 필요함(피츠의 법칙)

 

 

체크 박스를 통한 다음 선택 행위 유도

- 체크박스 제공 시, 확인 버튼(cta 버튼) 제공하여 실수 방지 

 

 

체크 박스를 통한 즉각적 선택 행위 인지

- 체크박스를 선택 시 작은 정사각형으로 표시되어야 함

 

- 체크 박스 선택 시, 명확한 시각적 효과 도출 필요

 

 

라디오버튼과 체크박스 구분

- 라디오 버튼 적정 개수 5~ 7개 권장 (선택지 더 많을 경우 드롭다운으로 치환 추천)