[UI/UX 원칙 #12] 폼에서 쓰는 체크박스와 토글 UX 원칙 가이드라인

폼에서 쓰는 체크박스와 토글 UX 원칙 가이드라인

닉 바비치의 [폼에서 쓰는 체크박스와 토글 UX 원칙 가이드라인] 소개하고자 합니다.

폼을 만들 때, 인터랙션 디자이너는 옵션 선택을 표시하는 UI 요소를 선택해야 하는 상황을 직면하게 됩니다. 물론 우리 모두 따르고 있는 경험법칙이 있습니다. 그렇긴 하지만 선택 컨트롤로 사용하려는 요소를 선택할 때 염두에 두면 좋을 몇 가지 고려사항이 있습니다.

옵션 선택은 체크박스, 토글, 라디오 버튼, 드롭다운 컨트롤 등으로 나타낼 수 있습니다. 이런 것들은 제대로만 사용되면 훌륭한 역할을 할 수 있습니다. 이번 글에서는 체크박스와 토글을 집중적으로 살펴보겠습니다.

체크박스

체크박스는 옵션이 리스트로 있을 때 사용되며 유저는 0개, 1개 혹은 여러 개 등 몇 개든 선택할 수 있습니다. 다른 말로 하면 각 체크박스는 리스트에 있는 다른 체크박스와 독립되어 있다는 뜻으로, 한 박스에 체크를 한다고 다른 것을 체크하지 않는 것은 아닙니다. 

즉, 체크박스는 여러 옵션 중에서 사용자가 원하는 만큼 선택할 수 있도록 해주며, 각 체크박스가 독립적으로 작동해야 합니다. 하나의 체크박스를 선택하더라도 다른 체크박스의 선택에 영향을 미치지 않아야 합니다.

토글

토글 스위치는 유저가 무언가를 끄거나 켤 수 있는 물리적 스위치를 나타냅니다. 

일반적인 토글 스위치는 하나의 액션을 나타내는 데 사용됩니다 (예: 무언가를 시작/정지시킴). 전기 스위치를 빗대어 표현한 것입니다.

즉, 토글 스위치가 유저가 무언가를 끄거나 켤 수 있는 물리적 스위치를 나타내는 이유는 사용자의 직관적인 이해를 돕기 위해서입니다. 전기 스위치는 간단하고 명확한 두 가지 상태(켜짐/꺼짐)를 제공하며, 이는 사용자가 원하는 동작을 쉽게 인식하고 조작할 수 있도록 합니다.

이러한 물리적 스위치의 개념을 디지털 환경에 적용함으로써, 사용자 인터페이스에서도 직관적인 조작이 가능해집니다. 즉, 사용자는 토글 스위치를 통해 복잡한 설정이나 기능을 간단히 제어할 수 있으며, 이는 사용자 경험을 향상시키는 데 도움이 됩니다. 

체크박스와 토글 사용 모범사례

1) 표준적인 비주얼 표현을 사용한다

체크박스에는 선택하면 체크마크나 X 표시가 나타나는 작은 네모를 사용해야 합니다. 

체크박스에 체크마크나 X 표시가 나타나는 이유는 사용자에게 선택의 상태를 명확하게 전달하기 위해서입니다. 체크박스는 간단한 방식으로 여러 옵션 중에서 선택하거나 선택 해제할 수 있는 기능을 제공합니다.

체크마크는 선택된 상태를, X 표시는 선택이 해제된 상태를 직관적으로 나타내므로 사용자는 빠르게 자신의 선택 상태를 인식할 수 있습니다. 이러한 시각적 요소는 사용자의 혼란을 줄이고, 인터페이스의 효율성을 높이는 데 효과적입니다.

토글이 온/오프 스위치처럼 보여야 하는 이유는 사용자에게 명확한 상태 전환을 제공하기 위해서입니다. 온/오프 스위치는 두 가지 상태(켜짐과 꺼짐)를 직관적으로 나타내며, 사용자가 현재 어떤 상태인지 쉽게 이해할 수 있도록 돕습니다

유저와 컨트롤 사이의 미묘한 애니메이션과 같은 시각적 피드백은 사용자에게 상호작용의 결과를 명확히 전달하고, 보다 몰입감 있는 경험을 제공합니다.

UI 컨트롤이 액정 뒤에 있어도 만질 수 있는 것처럼 보이게 하는 것은 사용자의 직관적인 조작을 돕고, 실제 물리적 객체와의 상호작용을 유사하게 느끼게 합니다. 이는 특히 모바일 앱에서 중요한데, 화면이 작고 터치 기반 인터페이스인 만큼 사용자가 쉽게 조작할 수 있도록 하는 것이 필요합니다. 이러한 요소들은 사용자 경험을 향상시키고, 앱의 사용성을 높이는 데 효과적입니다.

2) 리스트를 세로로 배치한다

리스트는 한 줄에 하나씩 세로로 보여줘야 합니다. 이는 가독성을 높이고 사용자에게 명확한 선택을 제공하기 위해서입니다. 세로 배치는 각 항목을 독립적으로 인식하게 하여 혼란을 줄이고, 사용자가 쉽게 선택할 수 있도록 돕습니다.

토글과 체크박스의 경우, 각 옵션이 명확하게 구분되어야 하며, 사용자가 어떤 선택을 하고 있는지 쉽게 이해할 수 있어야 합니다. 만약 가로 배치를 사용해야 한다면, 레이블과 버튼 사이에 적절한 공간을 두어 각 항목의 관계를 분명하게 해야 합니다. 이는 사용자가 선택할 때 실수를 줄이고, 사용자 경험을 향상시키는 데 효과적입니다. 

아래는 각 선택지가 너무 가까이 붙어있는 잘 못된 사례입니다.

3) 토글에서 현 상태는 컨트롤 밖에서 보여줘야 한다

토글을 디자인할 때 상태-액션이 모호하면 안 됩니다. 아래는 iOS6 스위치 디자인 사례인데 파란색에 ‘ON’이라고 적혀있는 상태 표시를 주목해보죠.

어떤 스위치가 현재 ON 상태인지 말할 수 있는가? 어떤 슬라이더를 움직이거나 클릭하거나 탭 하면 켜지겠는가? 여기 보이는 “ON”은 상태(형용사)인가 액션(동사)인가? 불분명합니다.

유저를 헷갈리게 해서는 안 되며 액션과 상태를 명확히 구분해주는 것이 중요합니다. 사실, 이런 디자인은 친절하게 현재 상태를 강조해 줌으로 개선할 수 있습니다.

4) 체크박스 레이블은 긍정의 단어를 쓴다

체크박스 레이블에 긍정적이고 동적인 문구를 사용하는 이유는 사용자가 선택할 때 어떤 긍정적인 결과가 발생할지를 명확히 전달하기 위해서입니다. 긍정적인 문구는 사용자가 체크박스를 선택했을 때의 이점을 강조하여, 더 나은 경험을 제공합니다.

예를 들어, "이메일 수신 동의"와 같은 긍정적인 문구는 사용자가 선택함으로써 어떤 행동이 발생할지를 분명히 이해하게 해줍니다. 반면, "이메일을 더 이상 받지 않음"과 같은 부정문은 사용자가 체크박스를 선택해야만 특정 결과를 피할 수 있다는 혼란을 야기할 수 있습니다. 이러한 혼란은 사용자 경험을 저해하고, 사용자가 원하지 않는 행동을 하게 만들 수 있기 때문에 긍정적인 표현이 더 효과적입니다.

5) 체크박스를 선택하기 쉽도록 만든다. 

체크박스의 타깃 영역을 키우기 위해 레이블이나 문구를 클릭할 수 있게 만들어야 하는 이유는 사용자 편의성을 높이고 실수를 줄이기 위해서입니다. 체크박스는 본래 크기가 작기 때문에, 사용자가 정확하게 클릭하거나 탭하기 어려울 수 있습니다.

피츠의 법칙에 따르면, 목표물이 작을수록 클릭하기 어려워지므로, 더 큰 클릭 가능한 영역을 제공함으로써 사용자가 선택할 확률을 높일 수 있습니다. 레이블이나 문구를 클릭 가능하게 하면 사용자는 자연스럽게 더 넓은 영역을 이용할 수 있어, 선택 과정에서의 불편함을 줄이고 사용자 경험을 향상시킬 수 있습니다. 이는 특히 모바일 환경에서 더욱 중요하게 작용합니다

6) 체크박스는 설정을 변경할 때만 이용하고 액션 버튼에는 사용하지 않는다

체크박스는 설정을 변경할 때만 사용하는 이유는 그 기능의 본질적인 차이에 있습니다. 체크박스는 주로 상태를 나타내는 데 사용되며, 사용자가 선택한 옵션이 활성화되었는지 여부를 보여줍니다. 반면, 토글 스위치는 특정 액션을 나타내며, 상태의 변화를 직관적으로 전달합니다.

예를 들어, 무선 인터넷이 켜져 있는지 확인할 때 토글 스위치는 "켜짐"과 "꺼짐" 상태를 명확하게 보여주어 사용자가 즉시 이해할 수 있도록 돕습니다. 하지만 체크박스를 사용하면 사용자가 무선 인터넷을 켜려면 체크 표시를 해야 하는지 혼란스러울 수 있습니다. 이러한 혼란은 사용자 경험을 저해할 수 있으므로, 액션을 취할 때는 토글 스위치가 더 적합한 컨트롤로 여겨집니다.

7) 체크박스와 토글의 인터랙션 보여주기

체크박스와 토글 스위치의 인터랙션 차이는 사용자 경험(UX)에서 매우 중요한 요소입니다. 토글 스위치는 즉각적인 변화를 제공해야 하는데, 이는 사용자가 스위치를 조작했을 때 바로 결과를 확인하고 피드백을 받을 수 있도록 하기 위함입니다.

실생활에서 스위치를 조작했을 때 즉시 변화가 발생하는 것에 익숙한 사용자들은, 디지털 환경에서도 동일한 기대를 가지고 있습니다. 예를 들어, 전등 스위치를 켰을 때 즉시 불이 켜지듯이, 토글 스위치도 즉각적으로 상태가 변경되어야 합니다.

반면에 체크박스는 설정 변경이 나중에 반영될 수 있으며, 사용자가 의도적으로 "저장" 버튼을 눌러야 결과가 적용됩니다. 이러한 구조는 사용자가 설정을 신중하게 검토하고 최종 결정을 내리는 데 도움을 주지만, 즉각적인 피드백을 제공하지 않기 때문에 사용자에게 혼란을 줄 수 있습니다. 결국, 즉시 변화가 반영되는 것이 좋은 UX를 제공하는 이유는 사용자가 자신의 행동에 대한 결과를 즉시 확인할 수 있도록 하여 더 나은 상호작용 경험을 제공하기 위함입니다

그리고 체크박스는 유저가 변경 사항을 반영하기 위해 추가 스텝을 밟아야 할 때 이용하는 것이 효과적입니다. 

이는 사용자가 설정을 신중하게 검토하고 선택할 수 있도록 도와주기 때문입니다. 체크박스는 일반적으로 특정 옵션이나 기능을 활성화하거나 비활성화하는 방식으로 사용되며, 보통 "저장" 버튼이나 제출 버튼을 눌러야만 변경 사항이 적용됩니다.

이러한 추가 스텝은 사용자가 자신의 선택을 다시 한번 확인하고, 실수로 잘못된 설정을 적용하는 것을 방지하는 역할을 합니다. 예를 들어, 중요한 설정이나 개인 정보와 관련된 옵션의 경우, 사용자가 변경 사항을 신중하게 고려하도록 유도할 수 있습니다.

결국, 체크박스를 통한 추가 스텝은 사용자가 변화에 대한 책임을 느끼고, 의도한 대로 설정을 조정할 수 있도록 돕는 효과적인 방법입니다. 이는 사용자 경험을 더욱 안전하고 명확하게 만들기 위한 전략 중 하나입니다