brunch

라이킷 109 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by BUNDI Aug 04. 2020

UI 해부학 - 옵션을 선택하세요

근데 어떻게요?

https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546

Selection controls — UI component series

Making choices never was more satisfying. A detailed look at checkboxes, radio buttons, and toggles design.

uxdesign.cc

* 지금부터는 위 글에 대한 번역입니다.

* 의역이 몇 부분 포함되어있으니 원문이 궁금하신 분은 확인해보시길 추천합니다.

Selection Cotrol에 대해서

UI 컴포넌트 시리즈

'Toggle'이라는 단어는 짧은 핸들이 달린 스위치를 말하며, 두 개의 상태를 각각 번갈아가며 활성화시킬 수 있습니다. 가장 쉽게 볼 수 있는 Toggle은 전등 스위치입니다.

'Radio Button'은 차의 라디오에 달린 버튼에서 유래되었습니다. 운전자는 라디오 아래 달린 버튼들을 눌러 빠르게 주파수를 변경할 수 있었습니다. 한 가지 버튼을 누르면 다른 버튼을 누르기 전까지 버튼이 눌려져 있습니다.

Checkbox

체크박스는 한 가지 또는 여러 가지의 옵션들이 있고, 이 옵션 중 하나 또는 여러 개 또는 아무것도 선택하지 않을 수 있을 때 사용됩니다.

Radio Buttons

라디오 버튼은 두 가지 이상의 옵션이 있고, 사용자가 오직 한 가지의 옵션만을 선택해야 할 때 사용됩니다.

Toggle Switches

서로 배타적인 두 가지 옵션이 있고, 이 옵션들 사이에는 항상 디폴트 상태가 존재합니다. 특히 Toggle방식은 상태를 빠르게 전화할 수 있는 것이 특징입니다.

Choice Chips

Radio Button의 간소화된 버전입니다. 두 가지 이상의 옵션을 가지고 있으며, 사용자는 한 가지의 옵션만을 선택할 수 있습니다.

Multi-Select-Chips

Checkboxe의 간소화된 버전입니다. 사용자들은 여러 옵션을 선택할 수 있습니다. 주로 모바일 화면에서 '필터'기능에 사용됩니다.

이처럼 선택에 관련된 내용들은 오래전부터 사용되어왔습니다. 그리고 어떤 상황에서 어떤 양식이 주로 사용되는지에 대한 경험치도 쌓여왔습니다. 여기 한눈에 보고 바로 적용해볼 수 있는 도표를 확인해보세요.

상태

Checkbox와 Radio Button은 선택되거나 선택되지 않을 수 있습니다. Toggle 은 ON / OFF 상태 중 선택할 수 있습니다. 이들 모두 Enable (활성화) / Disable (비활성화) / Hover (마우스 포인터가 올라갔을 때) / Focused (입력 중일 때) / Pressed States (눌렀을 때)의 상태를 가지고 있습니다. 물론 이런 상태들의 개수가 많을 수 있지만 이들을 모두 고려하는 것이 인터랙션 측면에서 좋습니다.

Indeterminate (규정할 수 없는)

상태도 잊지 마세요

Checkbox의 상태는 '체크가 안된 상태 / 체크된 상태' 중 하나를 가집니다. 하지만 이렇게 규정되지 않을 때도 있습니다. 부모 Checkbox가 있고 여러 개의 자식 Checkbox가 있다면, 자식 몇 가지는 체크되고 몇 개는 안되어있을 수 있기 때문입니다.

Toggle 스위치는 잘못 사용하지 말아 주세요

Toggle로 부모-자식으로 구성된 요소를 만들지 마세요. 자식 요소들이 모두 ON/OFF 되었다는 인상을 줄 수 있습니다.

부모-자식 구성이 필요한 부분에는 Toggle 사용 금지

Toggle은 효과가 바로 나타나는 부분에 사용하세요

Toggle은 디지털 On / Off 스위치입니다. Toggle을 건드리는 옵션은 그 효과가 즉석에서 나타나야 합니다. 그런 것이 아니라면 Toggle을 하나의 Checkbox로 대체하는 것이 좋습니다.

바로 효과가 나타나는 부분은 Toggle 사용 권장

통용되지 않는 스타일은

사용자를 혼란스럽게 합니다.

널리 통용되는 방법에서 벗어나 디자인하는 것은 사용자들에게 인지적 하중을 추가시킵니다. 저는 종종 동그라미로 만들어진 Checkbox를 발견하곤 하는데, 이 경우 Radio Button과 혼동할 여지가 있습니다.

옵션들을 세로로 나열하는 것은, 옵션들을 빠르게 살펴보는데 도움을 줍니다.

널리 통용되는 디자인을 사용합시다

왼쪽으로 정렬된 Control

(Checkbox, Radio Button과 같은 선택 영역) 들과

Label들은 서로 가까이 붙어있을 때 가장 효과가 좋습니다.

서로 가깝게 배치했을 때 사용자들은 실수를 적게 함과 동시에 해당 업무를 빠르게 수행해 나갈 수 있습니다. 오른쪽으로 정렬된 방식은 모바일 화면에서 이점을 가집니다. 화면이 작기 때문에 Control과 Label이 크게 떨어지지 않으면서, Control 영역을 터치할 때 손가락이 Label을 가리지 않게 할 수 있습니다.

위치에 따른 인지도

가로로 배열해야 할 때 Chip을 사용하세요

어떤 Control이 선택되었는지 구별하기 어려운 상황은 반드시 피해야 합니다. 특히 가로로 Control을 배열해야 할 때는 각 선택사항 사이에 공간을 두어 구분해주세요. 특히 Chip을 사용하게 되면 각각의 옵션을 구분 지을 수 있습니다.

가로로 Control을 배치할 때 고려할만한 Chips

가능하다면 Dropdown 보다는

Radio Button을 사용하세요.

선택 가능한 모든 옵션을 노출시켜주세요. 사용자들은 쉽게 어떤 옵션이 있는지 확인하며 선택하고, 선택을 바꿀 수 있습니다. 이렇게 하면 인지적 부담을 크게 덜어줄 수 있습니다.

Dropdown은 서로 유사한 여러 개의 옵션에 사용하세요

Dropdown 보다는 Radio Button

만약 옵션의 개수가 6~7개 정도라면

Dropdown을 사용해보세요.

왜냐하면 그렇게 개수가 늘어나게 되면 옵션을 모두 노출하더라도 사용자의 머릿속에 오래 남지 않기 때문입니다. 마찬가지로 Dropdown은 옵션들이 예측 가능하거나, 비슷하거나, 점차 증가하는 (10%, 20%, 30%...) 옵션들에 사용될 수 있습니다.

선택지가 많을 때는 Radio Button 보다 Dropdown

Radio Button을 사용할 때는,

디폴트로 선택된 항목이 있는 것이 좋습니다

Radio Button은 일단 선택하면 아무것도 선택되지 않은 상태로 돌아갈 수 없습니다. 때문에 한 가지는 반드시 선택해야 한다는 힌트로, 디폴트 상태일 때 한 가지 옵션을 선택해서 보여주는 것이 좋습니다. 만약 사용자가 아무런 선택을 하고 싶지 않다면, 'None'이라는 옵션을 만들어 제공하는 것이 바람직합니다. 논리적 구조에 따라 필요한 옵션을 생각해보고, 필요한 제안들을 고민하세요.