체크박스. 뭔가를 선택하는 항목을 나열할 때 사용하는 가장 기본적인 UI 형태이다. 동시에 직관적이기도 한데, 이건 이 UI 요소가 아주 오래되었기 때문. 종이 형태로 된 서류에도 "해당하는 항목에 체크하시오" 같은 지시문과 함께 체크박스를 사용해왔다.
웹 폼이 등장하면서도 체크박스는 다중 선택 UI의 상징처럼 사용됐다. 그러다 모바일 시대가 시작되면서 '이게 최선인가?' 하는 의문과 함께 다른 UI에 대한 고민이 시작.
체크박스의 대안을 얘기하는 글이 있어 소개한다.
원문링크; https://uxmovement.com/forms/why-toggle-tokens-are-a-better-alternative-to-checkboxes/
Why Toggle Tokens Are a Better Alternative to Checkboxes
What interface component would you use for selecting options from a large list? For most designers, checkboxes come to mind.
uxmovement.com
체크박스의 단점
- 공간을 차지한다.
- 타겟 영역이 좁다.(특히 모바일에서)
- 시각적 요소가 늘어난다.
그럼 토글 토큰(Toggle Token)은?
체크박스의 단점을 해소한다. 공간도 적게 차지하고 터치 공간도 크고, 레이블과 터치 대상이 일치하니 시각 요소도 줄어든다. 한 번 탭(클릭)하면 선택, 다시 탭(클릭)하면 선택 해제.
하지만 체크박스가 더 나은 때도 있음
위 예시처럼 레이블이 여러 행으로 될만큼 길어질 때는 체크박스가 더 적절하다.
원문에서는 "토글 토큰"이라는 이름이 체크박스만큼 직관적이라고 주장한다. 토큰처럼 생겼고, 토글 방식으로 작동 하니까. 이건 영어권 저자의 생각이고, 사실 한국어 화자 입장에서는 토큰이나 토글이나 와닿지 않기는 똑같다. 체크박스가 훨씬 더 잘 와닿지.
'웹과 모바일' 카테고리의 다른 글
접근성의 미신: 색깔에 대한 오해 (0) | 2019.11.18 |
---|---|
드롭다운의 문제점 (4) | 2019.11.15 |
폼(form) 디자인을 잘 하려면? (0) | 2019.11.11 |
툴팁의 문제점과 대안 (3) | 2019.11.06 |
개발자를 위한 디자인 팁 5가지 (0) | 2019.11.04 |