brunch

매거진 UX 디자인의 모든 것

라이킷 54 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

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

폼에서 쓰는 체크박스와 토글 UX 설계 7원칙

UX 디자인 배우기 #33

Today UX 아티클

UX Planet에 올라온 Nick Babich의 글 UX Design: Checkboxand Toggle in Forms를 전문 번역한 글입니다.

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

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

체크박스

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

체크박스는 레이블과 함께 씁니다.

토글

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

스위치는 간단하면서도 180도 반대되는 두 가지 선택지를 지원합니다

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

토글은 전등 스위치로 흔히 이용됩니다

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

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

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

체크박스 컨트롤 선택 상태 및 선택해제상태. Image credit: Material Design

토글은 온/오프 스위치처럼 보여야 합니다.

토글 컨트롤 선택 및 선택해제 상태. Image credit: Material Design

유저와 컨트롤 사이의 인터랙션을 위해 분명한 시각적 피드백을 제공해야 합니다. 미묘한 애니메이션은 공을 들여 만든 느낌을 갖게 합니다. UI 컨트롤이 액정 뒤에 있어도 분명히 만질 수 있는 것처럼(tangible) 보여야 합니다. 이는 모바일 앱에서 특히 중요합니다.

iOS 7/8 토글 버튼Source: Dribbble

리스트를 세로로 배치한다

리스트는 한 줄에 하나씩 세로로 보여줘야 합니다. 이 룰은 토글과 체크박스에 모두 적용됩니다. 만일 여러 옵션을 한 줄에 보여주는 가로 배치를 사용해야만 한다면, 어떤 레이블이 어떤 선택과 연결되는지 분명히 알 수 있도록 레이블과 버튼 사이에 적절한 공간을 줘야 합니다. 아래는 각 선택지가 너무 가까이 붙어있는 사례입니다.

‘Four’를 선택하기 위해 어떤 버튼을 클릭해야 하는지 정확히 알기 어렵습니다.

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

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

적혀있는 레이블이 현 상태인지 선택하면 실행되는 액션인지 레이블(가령 ‘ON’)이 불명확하다.

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

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

텍스트의 색상이 현 상태를 나타냅니다 (밝은 색=ON)

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

체크박스 레이블에는 긍정적이면서 동적인 문구를 사용해야 유저가 체크 박스를 선택할 때 어떤 일이 일어날지 명확해집니다. “이메일을 더 이상 받지 않음” 같은 부정문은 피해야 합니다. 무언가 발생하지 않게 하기 위해 박스를 체크해야 한다는 의미를 전달할 수 있기 때문입니다.

체크박스는 긍정문으로 써야지 “…않음”같은 부정문은 부적절합니다.

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

체크박스는 본래 매우 작아서 피츠의 법칙에 따르면 클릭하거나 탭 하기 어려울 수 있습니다. 타깃 영역을 키우기 위해서 유저가 작은 사각형뿐만 아니라 레이블 혹은 따라 나오는 문구를 클릭하거나 탭 해도 옵션을 선택할 수 있게 만들어야 합니다.

유저가 체크박스나 레이블 중 아무거나 클릭해도 해당 옵션을 선택할 수 있게 해 줍니다

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

둘 중 하나를 선택하는 옵션을 만드는 경우, 체크박스와 토글스위치의 가장 큰 차이는 ‘체크박스는 상태를 나타내는 것이고 토글스위치는 액션을 나타낸다’는 것입니다. 액션을 취하는 데 물리적 스위치를 쓸 수 있다면, 토글스위치 역시 액션에 가장 적합한 컨트롤입니다.

아래 사례를 보면 무선 인터넷이 켜져 있다는 건 토글스위치가 더 명확하게 전달하고 있습니다. 반면 체크박스 사례에서는 유저가 무선 인터넷이 켜져 있는지, 켜려면 체크 표시를 해야 하는지 생각을 해봐야 합니다.

와이파이 같은 서비스나 하드웨어 구성요소를 켜거나 끌 때는 토글 스위치를 이용합니다

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

체크박스의 인터랙션(예를 들면 양식 제출의 한 부분으로)은 나중에 일어날 수 있지만, 토글스위치의 인터랙션은 즉시 이뤄져야 합니다.

스위치에 의해 변경된 설정은 즉시 반영하는 것이 좋은 UX입니다. “저장”을 누르거나 이전 스크린으로 돌아간 후에 보여주는 것만 좋은 UX가 아닙니다. 우리는 실생활에서 쓰는 스위치에 대해서도 즉시 변화가 반영될 것이라는 기대를 가지고 있습니다. (예를 들어 우리는 전등이 즉시 켜질 것을 알고 있다.)

iOS에서 와이파이 켜기

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

유저가 변화를 적용하기 위해 “제출”이나 “다음” 버튼을 클릭해야만 할 때 체크박스를 이용합니다

결론

인터페이스를 디자인할 때는 인터페이스 요소를 선택함에 있어서 일관성을 유지하고 예측 가능하게 만들어야 한다. 디자인 기준을 잘 따르면 그 컨트롤이 어떤 기능을 할 것인지 어떻게 조작하면 될지 유저가 예측하는 능력을 강화할 수 있습니다. 반대로 기준을 무시하면 마치 경고 없이는 아무 일도 발생할 수 없는 것처럼 인터페이스가 불안정해질 수 있습니다.