UX Planet에 올라온 Nick Babich의 글 UX Design: Checkboxand Toggle in Forms를 전문 번역한 글입니다.
폼을 만들 때, 인터랙션 디자이너는 옵션 선택을 표시하는 UI 요소를 선택해야 하는 상황을 직면하게 됩니다. 물론 우리 모두 따르고 있는 경험법칙이 있습니다. 그렇긴 하지만 선택 컨트롤로 사용하려는 요소를 선택할 때 염두에 두면 좋을 몇 가지 고려사항이 있습니다.
옵션 선택은 체크박스, 토글, 라디오 버튼, 드롭다운 컨트롤 등으로 나타낼 수 있습니다. 이런 것들은 제대로만 사용되면 훌륭한 역할을 할 수 있습니다. 이번 글에서는 체크박스와 토글을 집중적으로 살펴보겠습니다.
체크박스
체크박스는 옵션이 리스트로 있을 때 사용되며 유저는 0개, 1개 혹은 여러 개 등 몇 개든 선택할 수 있습니다. 다른 말로 하면 각 체크박스는 리스트에 있는 다른 체크박스와 독립되어 있다는 뜻으로, 한 박스에 체크를 한다고 다른 것을 체크하지 않는 것은 아닙니다.
체크박스는 레이블과 함께 사용합다.
즉, 체크박스는 여러 옵션 중에서 사용자가 원하는 만큼 선택할 수 있도록 해주며, 각 체크박스가 독립적으로 작동해야 합니다. 하나의 체크박스를 선택하더라도 다른 체크박스의 선택에 영향을 미치지 않아야 합니다.
토글
토글 스위치는 유저가 무언가를 끄거나 켤 수 있는 물리적 스위치를 나타냅니다.
일반적인 토글 스위치는 하나의 액션을 나타내는 데 사용됩니다 (예: 무언가를 시작/정지시킴). 전기 스위치를 빗대어 표현한 것입니다.
토글은 전등 스위치로 흔히 이용됩니다
즉, 토글 스위치가 유저가 무언가를 끄거나 켤 수 있는 물리적 스위치를 나타내는 이유는 사용자의 직관적인 이해를 돕기 위해서입니다. 전기 스위치는 간단하고 명확한 두 가지 상태(켜짐/꺼짐)를 제공하며, 이는 사용자가 원하는 동작을 쉽게 인식하고 조작할 수 있도록 합니다.
이러한 물리적 스위치의 개념을 디지털 환경에 적용함으로써, 사용자 인터페이스에서도 직관적인 조작이 가능해집니다. 즉, 사용자는 토글 스위치를 통해 복잡한 설정이나 기능을 간단히 제어할 수 있으며, 이는 사용자 경험을 향상시키는 데 도움이 됩니다.
체크박스와 토글 사용 모범사례
1) 표준적인 비주얼 표현을 사용한다
체크박스에는 선택하면 체크마크나 X 표시가 나타나는 작은 네모를 사용해야 합니다.
체크박스에 체크마크나 X 표시가 나타나는 이유는 사용자에게 선택의 상태를 명확하게 전달하기 위해서입니다. 체크박스는 간단한 방식으로 여러 옵션 중에서 선택하거나 선택 해제할 수 있는 기능을 제공합니다.
체크마크는 선택된 상태를, X 표시는 선택이 해제된 상태를 직관적으로 나타내므로 사용자는 빠르게 자신의 선택 상태를 인식할 수 있습니다. 이러한 시각적 요소는 사용자의 혼란을 줄이고, 인터페이스의 효율성을 높이는 데 효과적입니다.
체크박스 컨트롤 선택 상태 및 선택 해제상태. Image credit: Material Design
토글이 온/오프 스위치처럼 보여야 하는 이유는 사용자에게 명확한 상태 전환을 제공하기 위해서입니다. 온/오프 스위치는 두 가지 상태(켜짐과 꺼짐)를 직관적으로 나타내며, 사용자가 현재 어떤 상태인지 쉽게 이해할 수 있도록 돕습니다
토글 컨트롤 선택 및 선택 해제 상태. Image credit: Material Design
유저와 컨트롤 사이의 미묘한 애니메이션과 같은 시각적 피드백은 사용자에게 상호작용의 결과를 명확히 전달하고, 보다 몰입감 있는 경험을 제공합니다.
UI 컨트롤이 액정 뒤에 있어도 만질 수 있는 것처럼 보이게 하는 것은 사용자의 직관적인 조작을 돕고, 실제 물리적 객체와의 상호작용을 유사하게 느끼게 합니다. 이는 특히 모바일 앱에서 중요한데, 화면이 작고 터치 기반 인터페이스인 만큼 사용자가 쉽게 조작할 수 있도록 하는 것이 필요합니다. 이러한 요소들은 사용자 경험을 향상시키고, 앱의 사용성을 높이는 데 효과적입니다.
iOS 7/8 토글 버튼Source: Dribbble
2) 리스트를 세로로 배치한다
리스트는 한 줄에 하나씩 세로로 보여줘야 합니다. 이는 가독성을 높이고 사용자에게 명확한 선택을 제공하기 위해서입니다. 세로 배치는 각 항목을 독립적으로 인식하게 하여 혼란을 줄이고, 사용자가 쉽게 선택할 수 있도록 돕습니다.
토글과 체크박스의 경우, 각 옵션이 명확하게 구분되어야 하며, 사용자가 어떤 선택을 하고 있는지 쉽게 이해할 수 있어야 합니다. 만약 가로 배치를 사용해야 한다면, 레이블과 버튼 사이에 적절한 공간을 두어 각 항목의 관계를 분명하게 해야 합니다. 이는 사용자가 선택할 때 실수를 줄이고, 사용자 경험을 향상시키는 데 효과적입니다.
아래는 각 선택지가 너무 가까이 붙어있는 잘 못된 사례입니다.
Four’를 선택하기 위해 어떤 버튼을 클릭해야 하는지 정확히 알기 어렵습니다.
3) 토글에서 현 상태는 컨트롤 밖에서 보여줘야 한다
토글을 디자인할 때 상태-액션이 모호하면 안 됩니다. 아래는 iOS6 스위치 디자인 사례인데 파란색에 ‘ON’이라고 적혀있는 상태 표시를 주목해보죠.
적혀있는 레이블이 현 상태인지 선택하면 실행되는 액션인지 레이블(가령 ‘ON’)이 불명확하다.
어떤 스위치가 현재 ON 상태인지 말할 수 있는가? 어떤 슬라이더를 움직이거나 클릭하거나 탭 하면 켜지겠는가? 여기 보이는 “ON”은 상태(형용사)인가 액션(동사)인가? 불분명합니다.
유저를 헷갈리게 해서는 안 되며 액션과 상태를 명확히 구분해주는 것이 중요합니다. 사실, 이런 디자인은 친절하게 현재 상태를 강조해 줌으로 개선할 수 있습니다.
텍스트의 색상이 현 상태를 나타냅니다 (밝은 색=ON)
4) 체크박스 레이블은 긍정의 단어를 쓴다
체크박스 레이블에 긍정적이고 동적인 문구를 사용하는 이유는 사용자가 선택할 때 어떤 긍정적인 결과가 발생할지를 명확히 전달하기 위해서입니다. 긍정적인 문구는 사용자가 체크박스를 선택했을 때의 이점을 강조하여, 더 나은 경험을 제공합니다.
예를 들어, "이메일 수신 동의"와 같은 긍정적인 문구는 사용자가 선택함으로써 어떤 행동이 발생할지를 분명히 이해하게 해줍니다. 반면, "이메일을 더 이상 받지 않음"과 같은 부정문은 사용자가 체크박스를 선택해야만 특정 결과를 피할 수 있다는 혼란을 야기할 수 있습니다. 이러한 혼란은 사용자 경험을 저해하고, 사용자가 원하지 않는 행동을 하게 만들 수 있기 때문에 긍정적인 표현이 더 효과적입니다.
체크박스는 긍정문으로 써야지 “…않음”같은 부정문은 부적절합니다.
5) 체크박스를 선택하기 쉽도록 만든다.
체크박스의 타깃 영역을 키우기 위해 레이블이나 문구를 클릭할 수 있게 만들어야 하는 이유는 사용자 편의성을 높이고 실수를 줄이기 위해서입니다. 체크박스는 본래 크기가 작기 때문에, 사용자가 정확하게 클릭하거나 탭하기 어려울 수 있습니다.
피츠의 법칙에 따르면, 목표물이 작을수록 클릭하기 어려워지므로, 더 큰 클릭 가능한 영역을 제공함으로써 사용자가 선택할 확률을 높일 수 있습니다. 레이블이나 문구를 클릭 가능하게 하면 사용자는 자연스럽게 더 넓은 영역을 이용할 수 있어, 선택 과정에서의 불편함을 줄이고 사용자 경험을 향상시킬 수 있습니다. 이는 특히 모바일 환경에서 더욱 중요하게 작용합니다
유저가 체크박스나 레이블 중 아무거나 클릭해도 해당 옵션을 선택할 수 있게 해 줍니다
6) 체크박스는 설정을 변경할 때만 이용하고 액션 버튼에는 사용하지 않는다
체크박스는 설정을 변경할 때만 사용하는 이유는 그 기능의 본질적인 차이에 있습니다. 체크박스는 주로 상태를 나타내는 데 사용되며, 사용자가 선택한 옵션이 활성화되었는지 여부를 보여줍니다. 반면, 토글 스위치는 특정 액션을 나타내며, 상태의 변화를 직관적으로 전달합니다.
예를 들어, 무선 인터넷이 켜져 있는지 확인할 때 토글 스위치는 "켜짐"과 "꺼짐" 상태를 명확하게 보여주어 사용자가 즉시 이해할 수 있도록 돕습니다. 하지만 체크박스를 사용하면 사용자가 무선 인터넷을 켜려면 체크 표시를 해야 하는지 혼란스러울 수 있습니다. 이러한 혼란은 사용자 경험을 저해할 수 있으므로, 액션을 취할 때는 토글 스위치가 더 적합한 컨트롤로 여겨집니다.
와이파이 같은 서비스나 하드웨어 구성요소를 켜거나 끌 때는 토글 스위치를 이용합니다
7) 체크박스와 토글의 인터랙션 보여주기
체크박스와 토글 스위치의 인터랙션 차이는 사용자 경험(UX)에서 매우 중요한 요소입니다. 토글 스위치는 즉각적인 변화를 제공해야 하는데, 이는 사용자가 스위치를 조작했을 때 바로 결과를 확인하고 피드백을 받을 수 있도록 하기 위함입니다.
실생활에서 스위치를 조작했을 때 즉시 변화가 발생하는 것에 익숙한 사용자들은, 디지털 환경에서도 동일한 기대를 가지고 있습니다. 예를 들어, 전등 스위치를 켰을 때 즉시 불이 켜지듯이, 토글 스위치도 즉각적으로 상태가 변경되어야 합니다.
반면에 체크박스는 설정 변경이 나중에 반영될 수 있으며, 사용자가 의도적으로 "저장" 버튼을 눌러야 결과가 적용됩니다. 이러한 구조는 사용자가 설정을 신중하게 검토하고 최종 결정을 내리는 데 도움을 주지만, 즉각적인 피드백을 제공하지 않기 때문에 사용자에게 혼란을 줄 수 있습니다. 결국, 즉시 변화가 반영되는 것이 좋은 UX를 제공하는 이유는 사용자가 자신의 행동에 대한 결과를 즉시 확인할 수 있도록 하여 더 나은 상호작용 경험을 제공하기 위함입니다
iOS에서 와이파이 켜기
그리고 체크박스는 유저가 변경 사항을 반영하기 위해 추가 스텝을 밟아야 할 때 이용하는 것이 효과적입니다.
이는 사용자가 설정을 신중하게 검토하고 선택할 수 있도록 도와주기 때문입니다. 체크박스는 일반적으로 특정 옵션이나 기능을 활성화하거나 비활성화하는 방식으로 사용되며, 보통 "저장" 버튼이나 제출 버튼을 눌러야만 변경 사항이 적용됩니다.
이러한 추가 스텝은 사용자가 자신의 선택을 다시 한번 확인하고, 실수로 잘못된 설정을 적용하는 것을 방지하는 역할을 합니다. 예를 들어, 중요한 설정이나 개인 정보와 관련된 옵션의 경우, 사용자가 변경 사항을 신중하게 고려하도록 유도할 수 있습니다.
결국, 체크박스를 통한 추가 스텝은 사용자가 변화에 대한 책임을 느끼고, 의도한 대로 설정을 조정할 수 있도록 돕는 효과적인 방법입니다. 이는 사용자 경험을 더욱 안전하고 명확하게 만들기 위한 전략 중 하나입니다
유저가 변화를 적용하기 위해 “제출”이나 “다음” 버튼을 클릭해야만 할 때 체크박스를 이용합니다
UX 실무에 필요한 모든 UX 원칙을 담았어요! UX 디자인 원칙까지 실무에서 바로 활용할 수 있도록 ✏️
PM이라면 반드시 알아야 하는 UX 원칙 가이드라인 원칙
본 강의는UI, 인터랙션에서 UX 디자인 원칙까지 실무에서 바로 활용할 수 있는 내용들을 정리한 강의입니다. UX 실무에 필요한 모든 UX 원칙을 담았습니다!
UX 원칙 가이드 다양한 실무 Case Study 외 관련 이론에 대한 UX 원칙 가이드 개념을 명확히 정립하는 시간을 갖게 됩니다.
이런걸 배워요
UX 디자인 원칙 가이드 정립
컴포넌트 UX 원칙
UX 문제 정의 / UX 분석 노하우
자사 제품 분석 / 경쟁사 제품 분석 노하우
[챌린지] UX 디자인 가이드라인 수강 신청 시 주의 사항
플립드 러닝(Flipped Learning) 수업 방식으로 인해, 선착순 10명입니다. (수업 관련 외 Case Study 강의 및 Q&A 집중!!!! 소수 정예 수업!!!)
[챌린지] UX 디자인 가이드라인 프로그램 소개
폼 입력 행위 작업 줄이기, Context 내비게이션, 행동유도버튼의 어포던스, 간결성, 주목성, 인식성 등 필수!!!! 깊게 강의할 예정입니다.
총 4회, 총 12시간, 줌 Live 강의 형태로 진행합니다 🔥 (1주차 Live 수업: 3시간) (2주차 Live 수업: 3시간) (3주차 Live 수업: 3시간) (4주차 Live 수업: 3시간) 매회 Live 수업은, [VOD 커리큘럼 관련] 수업 관련 외 Case Study 및 Q&A 중심으로 수업이 진행됩니다.
개인 사정으로 인해 Live 수업 미참석를 위해 강의 종료 후 24시간 이내 녹화본 제공합니다.
수업 당일 라이브클래스에 강의 자료 PDF 제공합니다.
수강 정원: 선착순 10명입니다.
수강료 : 98,000원
VOD & Live 수업 녹화본(다시보기) 영상 시청 기간은, 수강 신청 이후 365일 입니다
[챌린지 혜택 !!!!]
챌린지 도전에 성공한 수강생 모두에게, 다른 챌린지 UX 과정 50% 할인 쿠폰 드립니다. (예. 98,000원 > 챌린지 도전 성공한 수강생에게 드리는 할인 쿠폰 50% 적용 시 > 49,000원)
[챌린지 성공 시, 50% 할인 쿠폰 적용, 또 다른 챌린지 UX 수강 과정은 다음과 같습니다] 챌린지 1. 휴리스틱 평가 (10월 오픈 예정) 챌린지 2. 사용성 테스트 (10월 오픈 예정) 챌린지 3. UX 리서치 (11월 오픈 예정) 챌린지 4. UX 인지심리학 A-Z (11월 오픈 예정) 챌린지 5. UX 디자인 설계 A-Z (11월 오픈 예정) 챌린지 6. UX 디자인 첫걸음 (11월 오픈 예정)
[챌린지 > 성공 기준]
아래 3가지 조건, 모두 충족되어야 합니다
1. VOD(총 209개) 80% 이상 수강
2. Live 수업 총 4회 중 3회 이상 출석 (사정상 Live 수업 참석 못하는 경우, Live 녹화본 다시보기 완료시 출석 인정)
3. 총 4회 Live 수업 중 1회 이상 질문하신 분 (VOD 강의 내용 중 궁금한 것 미리 체크한 후 !!!! Live 수업할 때 강사님께 질문 하면 됩니다 ㅎㅎ)
[챌린지] UX 디자인 가이드라인 과정은 플립드 러닝(Flipped Learning) 수업 방식으로 진행됩니다.
플립드 러닝(Flipped Learning) 수업이란? 플립드 러닝은 전통적인 수업 방식과 반대로, 수강생들이 수업 전에 비디오나 자료를 통해 기본 개념을 사전에 학습하고, 수업 시간에는 그 내용을 바탕으로 심화 학습, 토론, 문제 해결 등을 진행하는 방식입니다. 이 접근법은 수강생들이 능동적으로 참여하고, 개인의 학습 속도에 맞춰 공부할 수 있도록 돕습니다.
플립드 러닝(Flipped Learning) 수업 방식을 적용했을 때 수강생이 얻는 기대효과
1) 기본 이해도 향상 VOD 영상을 통해 수업의 기본 개념이나 내용을 미리 학습함으로써, 수강생은 Live 수업에서 다루어질 내용을 더 잘 이해할 수 있습니다. 이는 수업에 대한 자신감을 높입니다.
2) 질문 준비 VOD를 시청한 후, 수강생은 궁금한 점이나 이해가 안 되는 부분을 정리할 수 있습니다. 이를 통해 Live 수업에서 더 효과적으로 질문하고, 강사와의 상호작용을 극대화할 수 있습니다.
3) 시간 활용의 효율성 VOD 영상을 통해 수업의 기본 내용을 미리 습득하면, Live 수업에서는 더 심화된 내용이나 사례 중심의 활동에 집중할 수 있습니다. 이는 수업 시간을 더 효율적으로 활용하는 데 도움이 됩니다.
4) 개별 학습 속도 조절 수강생은 자신의 속도에 맞춰 VOD를 시청할 수 있으므로, 개념을 천천히 이해하고 반복해서 학습할 수 있습니다. 이는 각자의 학습 스타일에 맞춰 학습 효과를 극대화할 수 있게 합니다.
5) 집중력 향상 미리 VOD를 시청한 수강생은 Live 수업에서 이미 알고 있는 내용을 반복적으로 듣지 않게 되어, 더 집중할 수 있습니다. 새로운 정보나 심화된 내용을 듣는 데 더 많은 에너지를 쏟을 수 있습니다.
6) 상호작용의 질 향상 미리 학습한 수강생들은 Live 수업 중 보다 적극적으로 참여할 가능성이 높습니다. 이는 강사와의 상호작용을 더욱 풍부하게 만들어, 전체적인 수업의 질을 높이는 데 효과적입니다.
이제부터 [UX 원칙 가이드 1기] 플립드 러닝(Flipped Learning) 세부 커리큘럼에 대해 알아볼까요?
댓글
의견을 남겨주세요