UI 공부2. 체크박스(Check Box)
아는 것도 다시 보는 신입 UX기획자의 공부 노트
신입 UX기획자의 공부노트
- 하루 한개씩 쌓아나가는 UI기초
입사 교육을 받고, 팀에 배치된지 두 달이 되었네요. 아직은 업무 투입 전 문서를 처음부터 끝까지 구성하여 역량을 발휘하는(평가까지 받는) 과정에 있습니다. 스스로 문제점을 찾고, 분석하여 UI를 만들고 있는데 각 UI컴포먼트에 대한 이해도를 높여놔야 업무에 투입되었을 때 정확하고 폭 넓게 아이디어를 낼 수 있을 것 같다는 생각이 드는 요즘이네요.
오늘 주제는 체크 박스입니다. 토글을 다뤘으니 체크 박스를 다뤄주는 것이 순서상 자연스러울 것 같아 선택하게 되었습니다.
21.03.20
체크박스(Check Box)
체크박스는 선택지가 1개 이상일 때 사용합니다. 쉽게 생각하시면, 설문 조사할 때 '복수 선택 가능'의 상황을 생각하시면 될 것 같습니다. 1개를 선택해도 되고, 2개, 3개... 를 선택해도 되는 상황에 체크 박스를 사용합니다.
Google Material Design - 'Check box' 중에서그럼.. 기능의 on/off는 체크박스를 쓰면 안되는 건가요?
체크박스를 기능의 키고 끄는 기능에 쓰기도 합니다. 구글 머터리얼을 보니 체크 박스를 통해 기능을 키고, 끄는 토글 스위치와 같은 기능을 한다고 제시되어 있습니다. 하지만, 보통 기능의 키고 끄는 기능을 제시할 때에는 토글 UI를 사용하는 듯 합니다. 아래 사용 가능한 예시 사진 첨부하겠습니다.
(개인적으로 저 상황은 토글을 쓰는 것이 더 좋다고 생각하긴 합니다. 아마 가능하다는 것을 보여주기 위해 구글 머터리얼 디자인에서도 제공하지 않았을까 조심스레 생각해봅니다.)
Google Material Design - 'Check box : Behavior' 중에서체크박스 리스트가 너무 길어질 경우, 토글 토큰
하지만, 선택지가 너-무 많아질 경우에는 길이가 어디까지 있고, 스크롤은 얼마나 내려야 할지 알 수 없어 사용자에게 부담감을 줘 사용성을 해칠 수 있습니다.
이 경우에는 토글 토큰을 사용하여 대체해주는 것이 좋습니다. 한 눈에 펼쳐진 리스트를 통해 선택지의 개수 범위를 인지할 수 있고, 잦은 스크롤을 사용하지 않아도 됩니다. 잘못 체크했을 때 다시 찾아서 취소가 용이하여 오류회복성이 강하다는 장점도 있습니다. 가로/세로 폭을 활용할 수 있어 시각적으로 부담을 덜 준다는 효과가 있기도 합니다.
정확히 몇 개 이상은 체크박스를 지양해야한다는 정해져있지 않습니다. 하지만, 가로폭이 허락하고 기획/디자인 컨셉에 맞다면, 리스트가 너무 많아질 경우에는 토글 토큰으로 대체하는게 좋을 것 같습니다:)
https://uxmovement.com/forms/why-toggle-tokens-are-a-better-alternative-to-checkboxes/https://material.io/components/checkboxes#usage
를 참고하여 작성하였습니다.
