brunch

라이킷 42 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김준범 Aug 05. 2020

Selection controls

UI component series

"toggle"이라는 말은 특정 동작을 하는 두 가지 상태 사이를 전환시키는 짧은 손잡이가 달린 스위치를 뜻하는 말이다. 라이트를 "switch"할 때마다 마주치는 단어이다.

"Radio button"이라는 말은 자동차 라디오에서 스테이션을 빨리 전환할 수 있도록 스테이션의 프리셋을 저장할 수 있는 다이얼 밑에 달린 버튼들에서 유래한 말이다. 눌러진 버튼은 다른 버튼이 눌러지기 전까지는 눌러진 상태가 유지된다.

체크박스는 하나 또는 다수의 독립적인 옵션들이 있어서 사용자가 선택하지 않거나, 하나 또는 여러 개를 선택할 수 있을 때 사용된다.

라디오 버튼은 상호 간에 배타적인 두 개 이상의 옵션이 있어서 그중 하나만을 선택할 수 있을 때 사용된다.

토글스위치는 상호 배타적인 두 가지의 옵션이 있고 기본값이 존재할 때 사용된다. 토글 된 선택은 즉시 효력을 발휘한다.

Choice chips는 라디오 버튼이 단순하게 변형된 형태이다. 최소한 두 가지 옵션이 있고, 사용자는 한 가지 선택만 할 수 있다.

Multi-select chips는 체크박스가 단순하게 변형된 형태이다. 사용자는 다수의 선택을 할 수 있고 주로 모바일에서 필터링을 하는 데 사용된다.

Selection control은 사용자 인터페이스에서 오랜 시간 동안 사용되어 왔기 때문에 사용자는 그것들이 동작하는 방법을 확실히 예측하고 있다. 다음은 상황에 맞는 타입을 사용하기 위해 참고할 수 있는 표이다.

States

체크박스와 라디오 버튼은 선택된 상태와 선택되지 않은 상태가 있고, 토글은 끈 상태와 켠 상태가 있다. 모두 다 enabled, disbled, hover, focused 그리고 pressed 상태를 가지고 있다. 상태의 종류가 많아 보이기는 하지만 확실한 인터렉션을 위해 모든 상태를 만드는 것이 좋다.

중간 상태(indeterminate state)도 있다.

체크가 된 것도 아니고 체크가 안된 것도 아닌 상태이다. 이 상태는 확실히 정해진(determined) 상태가 아니라서 중간(indeterminate) 상태라고 불린다. 어떤 것은 선택되어 있고, 어떤 것은 선택되어 있지 않은 자식 체크박스를 가지고 있는 부모 체크박스를 표현하기 위해 만들어진 체크박스이다.

잘못된 토글스위치 사용

토글 스위치로 계층 구조를 만들면 안 된다. 시각적으로 혼란스러워 보이며, 모든 자식 옵션들이 On/Off 된 것처럼 잘못된 정보를 전달할 수 있다.

선택된 항목이 즉각적으로 동작해야 할 때 토글을 사용하라.

토글스위치는 디지털 on/off 스위치라고 할 수 있다. 토글스위치로 선택된 동작은 즉각적으로 동작해야 한다.

정통을 벗어난 스타일은 사용자를 혼동스럽게 만든다.

플랫폼의 표준 디자인에서 벗어난 디자인은 사용자에게 추가적인 인지를 필요로 한다. 라디오 버튼과 쉽게 혼동될 수 있는 둥근 형태의 체크박스가 그러한 예이다.

세로로 정렬된 형태가 스캔하기 쉽다.

좌측으로 정렬된 컨트롤과 레이블이 가장 좋다. 가장 빨리 파악할 수 있으며, 실수를 적게 유발한다. 우측 정렬된 컨트롤은 모바일에 적합하긴 하지만, 레이블과 버튼이 너무 멀리 떨어져 있으면 좋지 않다. 버튼을 우측 모서리 근처에 두면 한 손으로 디바이스를 쥐었을 때 누르기 쉬워진다. 그리고 손가락으로 선택을 하는 동안 레이블을 가리지도 않는다.

세로 공간이 부족하다면 chips를 사용해라.

어떤 컨트롤이 선택되었는지 구분하기 어렵게 만들면 안 된다. 시각적으로 옵션들을 확실히 구분하려면 chips를 사용해라.

가능하면 드롭다운 메뉴보다는 라디오 버튼을 사용해라.

모든 옵션들을 볼 수 있게 하면 사용자는 쉽게 그것들을 비교할 수 있고 인지부하를 줄일 수 있어 폼을 더욱 명확하게 볼 수 있도록 할 수 있다.

옵션의 수가 많거나 비슷하다면 드롭다운을 사용해라.

옵션의 개수가 6~7개보다 많다면 사용자는 그것들을 어차피 한눈에 인지하기 어렵기 대문에 드롭다운 안에 적용하는 것이 좋다. 줌 배율( 10%, 20%, 30%)과 같이 예측 가능하고 유사하고, 점차적으로 증가하는 옵션에도 드롭다운을 적용하는 것이 좋다.

라디오 버튼에 기본으로 선택된 옵션을 제공하라.

사용자는 라디오 버튼을 한 번 선택하면 아무것도 선택되지 않은 상태로 변경하거나 원래의 상태로 되돌릴 수 없다. 사용자가 선택하는 것을 그만 두기를 원한다면, "없음"으로 표기된 라디오 버튼을 제공해야 한다. 옵션의 리스트를 논리적인 순서로 구성하면 더 효과적인 제안을 할 수 있다.