라디오버튼 UX디자인

어떻게 디자인 해야 잘했다고 소문이 날까?

(출처 : https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc#.2y2laa31b의 기사를 번역 및 가공한 컨텐츠 입니다.)

---

라디오 버튼은 폼의 필수 요소입니다.

이 버튼은 서로 다른 두 개 이상의 선택지가 있고 사용자가 하나의 옵션을 선택해야 하는 경우에 사용됩니다.
즉, 선택되지 않은 라디오 버튼을 선택하면 이전에 선택된 다른 라디오 버튼의 선택이 취소됩니다.

라디오 버튼

라디오 버튼은 올바르게 사용될 때 훌륭한 UI입니다.
키보드만으로 웹을 사용할 때와 크로스 플랫폼 측면에서 하나의 선택만을 알려주기 때문에 사용자가 잘못된 데이터를 입력하는 것을 방지하는 좋은 컴포넌트입니다.
이 기사에서는 사용성 테스트를 통해 제작된 라디오 버튼에 대한 실용적인 가이드 라인을 살펴보겠습니다.

라디오 버튼은 어떻게 그 이름을 얻게 되었을까?

라디오 버튼은 오래된 자동차 라디오에 주파수를 변경하기 위해 사용된 물리적 버튼의 이름을 따서 명명되었습니다. 버튼 중 하나를 누르면 다른 버튼이 튀어나오고 "누른 상태"버튼을 눌러야 선택이 해지됩니다. 소프트웨어 라디오 단추는 이러한 실제 라디오 단추를 본떠서 모델링되었습니다.

한 번에 하나의 버튼 만 누를 수 있습니다. 이미지 출처 : Tumblr

라디오 버튼 모범 사례

설정에 대해서만 라디오 버튼 사용
라디오 버튼은 명령을 수행하는 작업 버튼이 아니라 설정만 변경하는 것이 좋습니다.
또한, 사용자가 최종 액션 버튼 (예 : "진행"또는 "저장” 버튼)를 클릭할 때까지 변경된 설정이 적용되지 않아야 합니다. 사용자가 [뒤로] 또는 [취소] 단추를 클릭하면 라디오 단추에 대한 변경 사항이 무시되고 원래 설정이 복원돼야 합니다.

라디오 버튼이 여러 가지 최종 액션의 방식으로 표현되기 보다 최종 액션들의 실행방법에 영향을 주는 방식으로 나타내는 것이 좋습니다. 이렇게 하면 사용자는 하나의 인터렉션으로 올바른 명령을 선택할 수 있습니다.

단일 탭 동작으로 버튼을 선택합니다. 이미지 크레딧 : LukeW

옵션에 대한 논리적 순서

옵션을 논리적인 순서로 나열해야 합니다.

예를 들어, 가장 단순한 것부터 가장 복잡한 것, 선택할 가능성이 가장 크거나 가장 복잡한 것 또는 위험도가 높은 순서대로 나열해야 합니다.

알파벳 순서는 언어에 따라 달라서 지역화할 수 없으므로 권장하지 않습니다.

옵션은 포괄적이고 명확하게 구분되어야 합니다.

라디오 버튼에 대한 가장 큰 사용성 문제는 모호하거나 잘못 이해될 수 있는 레이블 또는 일반 사용자가 이해하기 어려운 옵션을 설명하는 것입니다.

상황별 도움말은 후자의 문제를 완화할 수 있지만 가장 중요한 것은 사용자가 직접 인터렉션을 할 수 있도록 명확한 옵션을 사용하는 것입니다.

디폴트 항목 항상 제공

UI 디자인의 10가지 휴리스틱 중 하나는 사용자가 자신의 액션을 취소하고 다시 실행할 수 있어야 한다는 것입니다. 즉, 사용자가 UI 컨트롤을 원래 상태로 되돌릴 수 있어야 합니다.

라디오 버튼의 경우 라디오 버튼에는 항상 하나의 옵션이 미리 선택되어 있어야 합니다.

데이터 또는 시스템 액세스 손실을 방지하기 위해 가장 안전한 옵션을 디폴트로 선택해 두면 좋습니다.

안전과 보안이 요인이 주요요소가 아닌 경우 가장 가능성이 크거나, 편리한 옵션을 선택하는 것이 권장됩니다.

사용자가 선택을 자제해야 하는 경우 "선택 안 함"과 같은 선택 항목에 라디오 버튼을 제공해야 합니다. 명시적으로 중립적인 옵션을 제공하는 것은 선택하지 않는 행위를 암시적으로 요구하는 것보다 훨씬 낫습니다.

목록의 세로배치

수평 라디오 버튼은 스캔하기가 어렵습니다.
또한, 레이블의 앞과 뒤에 모두 라디오 버튼이 존재하는 경우 라디오 버튼이 어떤 라벨과 일치하는지 인지하는 것을 어렵게 만들 수 있습니다.

라디오 버튼을 한 줄에 하나씩 수직으로 배치하는 것이 더 안전하고 좋습니다.

한 줄에 여러 옵션이 있는 가로 레이아웃이 여전히 필요한 경우 버튼과 레이블의 간격을 연관성 있게 지정하여 어떤 레이블을 선택해야 하는지 분명하게 알 수 있도록 해야 합니다.

예를 들어, 항목 4를 클릭하기 위해 라디오 버튼을 볼 때, 어떤 게 4인지 헷갈리는 상황을 방지해야 합니다.

나쁜 예 : 수평 라디오 버튼

클릭 타겟으로 라벨 태그 사용

라디오 버튼은 본질적으로 작기 때문에 Fitts의 법칙에 따라 클릭하거나 탭 하는 것이 어려울 수 있습니다. 대상 영역을 확대하려면 사용자가 해당 버튼뿐만 아니라 레이블 또는 관련 단어를 클릭하거나 탭 하여 옵션을 선택하게 하십시오. 버튼 자체 또는 라벨을 클릭하여 옵션을 선택할 수 있습니다.

왼쪽 : 제한된 지역 만 클릭 할 수 있습니다. 오른쪽 : 라벨 태그도 클릭 가능합니다.

Duolingo 앱에서 좋은 수평 라디오 버튼을 찾을 수 있습니다. 그들은 고전적인 수평 라디오 버튼을 사용했지만 타겟을 시각적으로 구별할 수 있으며 터치 지원 장치에 충분하도록 만들었습니다.

수평 라디오 버튼의 좋은  예

드롭다운 메뉴보다 라디오 버튼 사용

가능하면 드롭다운 메뉴가 아닌 라디오 버튼을 사용하는 것이 좋습니다. 라디오 버튼은 사용자가 쉽게 비교할 수 있도록 모든 옵션을 표시하므로 인지 부하가 적습니다.
옵션이 7 개 미만인 경우에도 라디오 버튼 사용을 고려해야 합니다. 사용자는 이 정보를 표시하기 위해 아무것도 클릭하지 않고도 (또는 입력하지 않고) 옵션의 수와 각 옵션의 종류를 즉시 탐색 할 수 있습니다.

왼쪽 : 성별 드롭 다운 메뉴. 오른쪽 : 성별 라디오 버튼

중첩 피하기

다른 라디오 버튼이나 확인란을 사용하여 라디오 버튼을 중첩하지 마십시오. 혼동을 피하기 위해 모든 옵션을 같은 레벨로 명시해야 합니다.

중첩된 옵션을 사용하면 불필요한 복잡성이 추가됩니다.

애니메이션 및 시각적 피드백 사용

잘 디자인된 애니메이션은 멋진 경험을 만듭니다. 라디오 버튼과 같은 사용자 인터페이스 요소는 글래스 레이어 뒤에 있지만 실제로 볼 수 있어야 합니다. 시각 및 동작 신호는 입력을 즉시 확인하고 사용자 입력에 대한 시각적인 반응을 통해 응답에 정확도를 추가합니다.

이미지 출처 :  Dribbble

체크 박스가 더 나은 선택일까요?

두 가지 옵션 만 있는 경우 대신 하나의 체크박스를 사용할 수 있습니다.
체크 박스는 단일 옵션을 켜거나 끄는 데만 사용되는 반면 라디오 버튼은 완전히 다른 많은 옵션에 사용할 수 있습니다.

체크박스 컨트롤, 이미지 출처 : Material Design

두 가지 해결책이 모두 가능하다면 다음과 같은 순간을 기억해야 합니다 :

대안
체크박스의 의미가 완전히 확실하지 않은 경우 라디오 버튼을 사용하는게 좋습니다.
아래 예제에서 선택 사항은 반대이므로 라디오 버튼이 이 옵션에 더 적합합니다.

문서 방향 선택 (가로 또는 세로)

위저드

선택옵션이 여러개라도, 강하게 하나를 유도해야 하는 위저드 페이지에서 라디오 단추를 사용해야 합니다.

디폴트 값이 있는 라디오 버튼은 사용자에게 강력한 제안을 합니다.

디폴트 옵션은 유저가 최선의 결정을 하도록 유도 할 수 있으며, 진행될 때 유저의 자신감을 높일 수 있습니다.

옵션을 강력히 권장하는 경우 레이블에 "(권장)"을 추가하십시오. 이미지 출처 : dropbox

간단한 예 또는 아니오 대답

하나의 간단한 질문이 있을 때 체크 박스를 사용하면 사용자가 "예"또는 "아니오."중 하나를 대답할 것입니다.

간단한 질문은 checkbox 형식으로 할 수 있습니다.

결론

라디오 버튼을 디자인할 때 디자인 표준을 따르는 것이 가장 중요합니다.

이는 유저가 컨트롤이 수행할 작업과 작동 방법을 예측할 수 있는 능력을 향상시키기 때문입니다.

조심해서 디자인해야합니다. 라디오 버튼은 페이퍼 프로토타이핑을 사용하여 테스트하기 쉬우므로 사용자가 컨트롤을 이해하고 올바르게 사용할 수 있는지 완벽하게 이해하고 확인하기 전에 구현부터 먼저 시작할 필요가 없습니다.