|
읽는 디자인, REASIGN? 해외 디자인 아티클 번역 뉴스레터!
디자인에 관심있는 친구에게 하단 링크를 복사해서 공유하세요!
|
|
체크박스 VS 토글 스위치
목차
- 즉각적인 반응
- 설정확인
- 다중 선택
- 미확정 상태
- 분명한 시각적인 상황
- 관련항목
- 단일옵션
|
|
양식은 사용자들에게 입력을 더 쉽게 사용할 수 있도록 하는 몇 가지 통제를 제공한다. 적절한 곳에 올바른 컨트롤을 사용하는 것은 디자인 하기 어렵다.
체크박스 컨트롤은 선택되지 않은 상태, 선택된 상태, 불확정한 상태, 세가지로 구성된다. 마지막 상태는 하위 옵션 목록이 상위 옵션 아래에 그럽화되어있고, 하위 옵션이 선택된 상태와 선택되지 않는 상태 모두 구성된 상황을 나타낸다.
토글 스위치는 전등 스위치처럼 켜고 끄는 물리적 스위치를 나타낸다.
토글 스위치를 가볍게 누르는 것(Tapping)은 선택과 실행의 두 단계 행동이다. 반면에 체크 박스는 옵션을 선택할 뿐이고, 실행하려면 보통 또 다른 컨트롤이 필요하다. 체크박스와 토글 스위치 컨트롤 사이에서 결정을 해야할 때, 기능 대신 사용 상황에 초점을 맞추는 것이 좋다. 다음은 형태 경험을 디자인 하는 동안 두 컨트롤 사이에서 결정하는 지침과 함께 사용되는 몇 가지 사용 사례가 있다.
사례 1 : 즉각적인 반응(Instant response)
다음과 같은 경우엔 토클 스위치를 사용하자.
- 명백한 조치 없이 적용된 설정의 즉각적인 반응이 필요하다.
- 설정 시 결과를 표시하려면 화면에서 켜기/끄기 나 보이기/숨기기 같은 기능이 필요하다.
- 사용자는 검토나 확인이 필요없는 즉각적인 작업을 수행해야 한다.
|
|
|
즉각적인 응답이 필요한 옵션은 토글 스위치를 사용하는 것을 선택하는 게 가장 좋다.
|
|
사례 2 : 설정 확인 (Settings confirmation)
다음과 같은 경우엔 체크 박스를 쓰자,
- 적용된 설정들은 사용자들이 실행하기 전에 확인하고, 검토해야한다.
- 정의 된 설정에 결과를 보여주기 전에 승인, 확인, 다음, 적용 같은 작업이 필요하다.
- 사용자가 변경 사항을 적용하려면 추가 단계가 있어야 한다.
|
|
|
체크박스는 설정을 적용하기 위해 분명한 조치가 필요할 때 더 좋다.
|
|
사례 3: 다중 선택 (Multiple choices)
이럴 땐 체크박스를 사용하자,
- 다양한 옵션을 사용할 수 있고, 사용자는 하나 이상의 옵션을 선택해야 한다.
- 다중 토글 스위치를 하나 씩 클릭한 후 결과를 기다리는데 시간이 더 걸린다.
|
|
|
목록에서 여러가지 옵션을 선택하는 것은 체크 박스들을 사용하는게 더 좋다.
|
|
사례 4: 미확정 상태 (Indeterminate state)
이 땐 체크박스를 사용하자,
- 여러 하위 옵션이 상위 옵션 아래에 그룹화된 경우 중간 선택 상태가 필요하다. 중간 상태는 여러 하위 옵션이 목록에서 선택되었다는 것을 나타낸다.
|
|
|
미확정 상태는 체크박스를 사용하는게 가장 잘 보인다.
|
|
사례 5: 분명한 시각적인 상황 (Clear visual state)
이땐 체크 박스를 쓰자,
- 토글 스위치의 끄고 켜는 상태와 혼동 될 수 있다. 가끔 스위치가 보여지는 상태인건지, 동작을 표시하는 것인지 이해하기 어려울 수 있다.
- 선택했거나, 선택을 하지 않는 분명한 상태를 제공해야 한다.
|
|
|
가끔 토글 스위치는 자신의 상태인지, 동작인지 명확하게 나타내지 않는 경우도 있다.
|
|
사례 6: 관련 항목 (Related items)
이땐 체크 박스를 사용하자,
- 사용자들은 해당 항목의 목록에서 옵션을 선택해야 한다.
|
|
목록에서 관련 항목을 선택하려면, 체크박스를 사용하자.
이땐 토글 스위치를 사용하자,
- 사용자들은 독립적인 기능이나 행동을 전환하고 있다.
|
|
|
독립된 항목에는 토글 스위치를 사용해서 선택한다.
|
|
사례 7: 단일옵션 (Single option)
이땐 체크 박스를 사용하자,
- 단 한가지 예/아니오 를 선택하는 것이 제공된다.
- 하나의 옵션만 선택하거나 선택 취소 할 수 있고, 분명한 것을 의미한다.
|
|
하나의 예/아니오 옵션은 체크박스에 더 적합하다.
이땐 토글 스위치를 사용하자,
• 단일 선택이 필요하며 온 / 오프 타입에서 결정하기 위한 두 가지 옵션을 제공하고자 한다.
|
|
토글 스위치를 사용하여 단일 온/오프 결정을 가장 잘 이해할 수 있다.
결론
보다 사용자 친화적으로 만들기 위해 올바른 컨트롤을 올바른 위치에 제공하는 것은 중요하다. 많은 옵션이 있는 형식은 길기 때문에 사용자가 정보를 채우기 위해 추가로 클릭 해야 한다면 지루함을 느낄 것이다. 제공된 사용 사례와 가이드 라인은 당신의 형태에 컨트롤을 추가하는 동안 체크박스와 토글 스위치 사이에서 결정을 내릴 때 도움이 될 것이다.
참조:
•Control and Patterns
•When to Use a Switch or Checkbox
•Selection Controls
•UX Design: Checkbox and Toggle in Forms
Thanks for reading. Find more related articles at uxdworld.com.
Get my free 5-day UX design course via email.
If you have any questions, contact me and I will write about it: Linkedin|Twitter | Facebook
|
|
|
오늘 읽은 아티클이 도움이 될 것 같은 친구가 있다면?
|
|
본문 요약 및 정리
- 즉각적인 반응 _ 즉각적인 응답이 필요한 옵션은 토글 스위치를 사용하는 것을 선택하는 게 가장 좋다.
- 설정확인 _ 체크박스는 설정을 적용하기 위해 분명한 조치가 필요할 때 더 좋다.
- 다중 선택 _ 목록에서 여러가지 옵션을 선택하는 것은 체크 박스들을 사용하는게 더 좋다.
- 미확정 상태 _ 미확정 상태는 체크박스를 사용하는게 가장 잘 보인다.
- 분명한 시각적인 상황 _ 가끔 토글 스위치는 자신의 상태인지, 동작인지 명확하게 나타내지 않는 경우도 있다.
- 관련항목 _ 목록에서 관련 항목을 선택하려면, 체크박스를 사용하자.
- 단일옵션 _ 토글 스위치를 사용하여 단일 온/오프 결정을 가장 잘 이해할 수 있다.
|
|
|
[2018.10.18]
수없이 사용하지만 가볍게 지나친 체크박스와 토글스위치를 조금 더 응시해 볼 수 있게 하는 글입니다.
체크박스와 토글 스위치를 마주할 때 도움이 되길.
REASIGN 드림
|
|
피드백은 아래 '댓글 남기기'버튼을 눌러 남겨주세요. 추천하고 싶은 영문 아티클 역시 링크를 남겨주시면 검토 후 번역하여 보내드립니다.
구독해주셔서 감사합니다.
|
|
|
|
|
