본 글은 UX moment의 글 Why Toggle Tokens Are a Better Alternative to Checkboxes와 UX Planet의 글 Checkbox vs Toggle Switch를 기반으로 생각을 정리한 글입니다.
폼(Form)은 홈페이지에서 회원 가입, CS 문의 접수, 견적 요청 등 자주 쓰이는 요소로, 고객 경험에 큰 영향을 준다. 그 어느 누구도 귀찮은 스텝을 밟거나 헷갈리는 시각적인 요소를 좋아하지 않는다. 이번 글에서는 체크박스와 토글 스위치에 대해 알아보고, 언제 각 요소를 사용하는 것이 가장 좋은지 살펴본다.
실수로 회원가입을 누르곤 한다. ㅠㅠ
■ ‘선택’하는 옵션 4가지 – 체크박스, 라디오박스, 토글 스위치, 드롭 다운
여러 목록 중에 ‘선택’하게 하고 싶다면 쓸 수 있는 옵션은 다음과 같다.
체크박스(Checkbox)
1개 이상의 옵션을 선택할 때 사용한다. 아예 체크하지 않아도 괜찮다. 사각형 모양이며 선택되었을 때 체크마크나 X가 표시된다.
라디오버튼(Radio Button)
단 1개의 옵션을 선택할 때 사용한다. 원 모양이며 선택되었을 때 원의 색상이 채워진다.
토글 스위치(Toggle Switch)
어떠한 동작을 표현할 때 사용한다. ex. 어떤 것은 끄거나 켠다. 어떤 쪽이 ON이고 OFF인지 시각적으로 명확히 보여줘야한다. 텍스트 라벨이나 컬러, 아이콘의 조합으로 표시되곤 한다.
드롭 다운(Drop Down)
드롭 다운 형식을 통해 여러가지 리스트를 보여준다. 목록이 너무 많을 경우, 위의 옵션을 사용하기 힘들 때 사용하나 드롭 다운은 보통 가독성이 떨어지므로 UX 측면에서는 좋지 않다. 이럴 때는 자동 완성 기능을 이용하여 사용자가 옵션을 빠르게 찾을 수 있게 보완하면 좋다.
이번 글에서는 체크박스와 토글 스위치에 좀 더 집중해서 살펴보자.
■ 즉각적인 행동을 나타낼 때 – ‘토글 스위치’
체크박스는 눌렀을 때 선택이 된 상태지만, 토글 스위치는 누름과 동시에 ‘동작’된다. 온/오프나 숨김/보여주기와 같은 기능이라면 토글 스위치를 쓰자. 사용자에게 ‘업데이트’나 ‘제출’과 같은 확인 과정을 거치지 않아도 되는 기능임을 명심하자. 사용자의 ‘확인’이 필요하다면? 체크박스를 쓰도록 하자.
토글 스위치를 사용할 때 주의해야 할 것은, 명확한 동작이 있는 옵션에서만 사용해야한다는 점이다. 당연히 그에 따른 상태가 비주얼적으로 잘 보여야한다. 현재 상태가 온인지 오프인지 헷갈리지 않게 말이다.
또한, 각 옵션끼리 연관성이 없이 독립적이어야 한다. 예시에서 Auto-Brightness 기능은 Wi-Fi 기능에 영향을 주지 않는 기능이다.
■ 미정의 상태일 때 – ‘체크박스’
체크박스는 여러가지 옵션 중에 고를 때 좋다(토글 스위치의 경우 누르는 순간 동작이 실행되기 때문에 1-2초의 시간이 소요되기 마련이다).
여러 하위 옵션이 상위 옵션 아래에 그룹화된 경우 역시 체크박스가 좋다. 아래 예시 이미지를 보면 모든 하위 옵션 목록에서 일부만이 선택되었음을 보여준다.
또한, 예/아니오의 명확한 선택을 요구하는 경우라면 토글 스위치보다는 체크박스가 좋다. 예를 들어 회원 가입 시 개인 정보 활용에 대한 동의 문구는 단순히 예, 아니오의 선택권이기 때문에 체크박스를 사용하는 것이 더 직관적이다.
■ 모바일 환경이라면? ‘토글’
아래 이미지를 보면, 왜 모바일 환경에서 토글이 더 좋은지 바로 알 수 있다.
모바일 환경에서 체크박스는 세로로 너무 많은 공간을 잡아먹는다. 또한 체크박스와 실제 텍스트 사이의 공간이 다른 것이 비주얼 노이즈를 만든다. 텍스트 부분이 손가락으로 누르기에 너무 작다는 문제도 안고 있다.
그러나 위의 예시같이 하나의 선택이 여러 줄로 이뤄질 경우에는 체크박스를 사용하는 것이 좋다.