선택 컨트롤 요소의 UI 디자인 방법

 

 

“토글"이라는 단어는 활성화될 때마다 두 가지 상태가 번갈아 나타나는 짧은 손잡이가 있는 스위치를 가리킵니다. 조명을 '전환'할 때마다 이 스위치를 접하게 됩니다.

'라디오 버튼'은 일반적으로 다이얼 아래에 방송국 사전 설정을 기계적으로 저장할 수 있는 버튼 세트가 있어 사용자가 방송국 간에 더 빠르게 전환할 수 있었던 자동차 라디오에서 유래한 단어입니다. 이 버튼 중 하나를 누르면 다른 버튼을 누를 때까지 버튼이 꺼진 상태로 유지되었습니다.

 

 

 

체크박스
하나 또는 여러 개의 독립적인 옵션이 있고 사용자가 없음, 하나 또는 여러 개를 포함하여 원하는 만큼 선택할 수 있는 경우에 사용됩니다.

라디오 버튼

상호 배타적인 두 개 이상의 옵션 목록이 있고 사용자가 그 중 하나만 선택해야 하는 경우에 사용됩니다.

토글 스위치

상호 배타적인 두 가지 옵션이 있고 항상 기본값이 있는 경우에 사용됩니다. 토글 선택은 즉시 적용됩니다.

 

 

 

초이스 칩

라디오 버튼을 대체할 수 있는 소형 칩입니다. 최소 두 가지 옵션이 포함된 선택 칩은 사용자가 선택할 수 있는 단일 선택을 나타냅니다.

다중 선택 칩

체크박스의 컴팩트한 대안입니다. 사용자가 여러 옵션을 선택할 수 있으며 주로 모바일에서 필터링하는 데 사용됩니다.

선택 컨트롤은 오랫동안 사용자 인터페이스에서 사용되어 왔기 때문에 그 작동 방식에 대한 기대치가 높습니다. 다음은 상황에 맞는 올바른 유형을 선택하기 위해 따를 수 있는 간단한 치트 시트입니다.

 

NNG 기사 “체크박스 대 라디오 버튼”에서 영감을 얻었습니다.

 

 

상태
체크박스 및 라디오 버튼은 선택하거나 선택 해제할 수 있으며, 토글은 끄거나 켤 수 있습니다. 모두 활성화, 비활성화, 호버링, 포커스, 눌림 상태가 있습니다. 많은 것처럼 보이지만 안정적인 상호 작용을 위해 이러한 모든 상태를 만드는 것이 좋습니다.

 

 

 

 

불확정 상태를 잊지 마세요.

상태는 선택하지도 선택하지도 않은 확인란의 상태입니다. 상태가 완전히 결정되지 않았기 때문에 이름이 불확정입니다. 여러 개의 자식이 있는 상위 확인란이 있고 그 중 일부는 선택되어 있고 일부는 선택되지 않은 시나리오를 처리하기 위해 만들어졌습니다.

 

 

 

 

토글 스위치의 오용 방지

토글로 계층 구조를 만들지 마세요. 시각적으로 산만하고 모든 하위 옵션이 켜짐/꺼짐이라는 잘못된 인상을 줄 수 있습니다.

 

 

 

 

선택 사항이 즉시 적용될 때 토글 사용

토글 스위치는 디지털 온/오프 스위치입니다. 토글 스위치로 트리거된 모든 효과는 즉시 적용되어야 합니다. 그렇지 않은 경우에는 토글 스위치를 단일 확인란으로 대체하는 것이 좋습니다.

 

 

정통적이지 않은 스타일링은 사용자에게 혼란을 줄 수 있습니다.

디자인하는 플랫폼의 표준에서 벗어난 스타일은 사용자에게 추가적인 인지적 부하를 가중시킵니다. 라디오 버튼과 쉽게 혼동할 수 있는 원형 체크박스를 자주 봅니다.

 

 

 

세로 목록에 옵션을 표시하면 사용자가 쉽게 스캔할 수 있습니다.

왼쪽으로 정렬된 컨트롤과 레이블은 서로 가깝게 배치할 때 가장 잘 작동합니다. 이렇게 하면 가장 빠른 완료 시간과 실수를 줄일 수 있습니다. 오른쪽에 정렬된 컨트롤은 라벨과 버튼이 너무 멀리 떨어져 있으면 안 되므로 모바일에서 몇 가지 이점이 있습니다. 버튼이 오른쪽 가장자리에 가까워지면 기기를 한 손으로 잡았을 때 더 쉽게 닿을 수 있습니다. 또한 선택 시 손가락으로 레이블을 가리지 않습니다.

 

 

 

세로 공간이 문제가 되는 경우 칩을 고려하세요.

어떤 컨트롤을 선택했는지 확인하기 어려운 상황을 방지해야 합니다(버튼과 레이블의 간격을 두어야 합니다). 옵션을 시각적으로 명확하게 구분하려면 칩을 사용하는 것이 좋습니다.

 

 

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

모든 옵션을 영구적으로 표시하여 사용자가 쉽게 비교할 수 있도록 하면 인지 부하를 줄이고 양식을 더 투명하게 만들 수 있습니다.

 

 

옵션이 많거나 유사한 경우 드롭다운 사용

옵션의 수가 6~7개 이상이면 사용자가 모든 옵션을 기억할 수 없으므로 드롭다운에 넣는 것을 고려해야 합니다. 확대/축소 - 10%, 20%, 30% 등과 같이 예측 가능하거나 유사하거나 증분되는 옵션도 마찬가지입니다.

 

 

 

기본적으로 라디오 버튼이 선택되어 있는 것이 좋습니다.

사용자가 라디오 버튼을 선택한 후에는 선택을 취소하거나 원래 상태로 되돌릴 수 없습니다. 사용자가 선택을 자제해야 하는 경우에는 “없음”이라는 레이블이 붙은 라디오 버튼을 제공해야 합니다. 옵션 목록을 논리적인 순서로 구성하고 제안 기능을 활용하세요.

 

명확한 레이블을 작성하고, 네거티브를 피하세요

사용자가 어떤 일이 일어나지 않도록 하기 위해 상자를 선택해야 하는 상황을 피하세요.

 

 

선택한 옵션을 강조 표시하여 사용자의 주의를 끌기

선택한 옵션을 다른 옵션과 시각적으로 구분할 수 있으며, 특히 데이터 테이블에서 행을 선택할 때 중요합니다.

 

 

일괄 선택 및 지우기 지원

사용자가 한 번에 여러 항목을 선택하거나 지우는 것이 쉬워야 합니다.

 

 

 

안정적인 상호작용을 위해 클릭 가능한 영역을 충분히 크게 만드세요.

넉넉한 클릭/탭 가능 영역에 버튼과 레이블을 모두 포함하세요. 피츠의 법칙에 따르면 대상의 크기는 중요한 역할을 합니다. 확인란과 라디오 버튼은 일반적으로 크기가 작아서 특히 모바일에서 클릭하거나 탭하기 까다로울 수 있습니다.

 

 

 

 

출처:

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