brunch

매거진 UX 디자인의 모든 것

라이킷 41 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Sep 06. 2016

스위치 또는 체크박스 UX 설계 원칙

UX 디자인 배우기 #30

Today UX 아티클

UX Movement에 게재된 Anthony의 글 When to Use a Switch or Checkbox를 소개하고자 합니다.

같은 기능, 다른 맥락

샐러드용 포크와 메인 코스용 포크는 매우 비슷하게 생기고 같은 기능을 하기 때문에 언제 어떤 걸 써야 할지 헷갈리는데, 스위치와 체크박스도 마찬가지라고 합니다. 많은 디자이너들이 언제 어떤 걸 써도 상관없다고 생각하지만, 유저가 이 두 가지를 보는 즉시 기대하는 바는 다르다고 합니다. 맥락에 맞춰 활용해야 인터페이스를 직관적으로 만들 수 있다고 합니다.

즉각적인 액션(instantaneous actions)을 위한 스위치

스위치는 언제나 설정의 on/off를 나타낸다고 합니다. 유저가 스위치를 on으로 돌렸을 때는 on 레이블이 뜨자마자 액션이 즉시 취해졌을 것으로 기대한다고 합니다. 이는 UI뿐만 아니라 현실에서도 마찬가지라고 합니다. 스위치를 올리면 바로 전등이 들어올 것이라고 기대하며, 반응이 늦어지거나 추가적인 액션을 필요로 하는 경우엔 무언가 잘못되었다고 생각한다고 합니다.

스위치를 조작하면 이미 원하는 설정이 반영된다고 기대하기 때문에, 설정을 적용하는 ‘확인(submit)’ 버튼은 절대 없어야 한다고 합니다. 즉, 스위치는 설정이 즉시 반영되어야 하는 경우에만 이용해야 하며, 설정 반영 전에 확인 절차가 필요한 경우는 체크박스를 이용해야 한다고 합니다.

버튼을 눌러야 하는 체크박스

체크박스는 스위치처럼 설정을 즉시 반영하지 않는 대신, ‘확인(submit)’ 버튼을 같이 제공하여 유저가 확인 버튼을 누르면 설정을 적용한다고 합니다. 이렇게 버튼을 한 번 더 누르게 하면 유저에게 다시 한번 확인해볼 수 있는 기회를 주어 실수로 활성화하는 오류를 방지해준다고 합니다.

스위치를 이용하면 유저가 각 설정이 적용되는 것을 기다려야 하지만, 체크박스를 이용하면 많은 설정을 한 번에 적용할 수 있다고 합니다. 때문에 많은 설정을 한 번에 적용할 때는 체크박스를 이용하는 것이 시간을 절약해줘 더 유리하고, 소수의 설정을 자주 변경할 때는 스위치가 유리하다고 합니다.