라디오 버튼 UX 설계 10원칙
UX 디자인 배우기 #43
Today UX 아티클
UX Planet에 올라온 Nick Babich의 글 Radio Buttons UXDesign를 전문 번역한 글입니다.
라디오 버튼은 폼(forms)의 기본 요소입니다. 상호 배타적인 2개 이상의 옵션으로 구성된 리스트가 있는데 유저가 딱 하나만 선택해야 할 때 이용됩니다. 다른 말로 하면, 선택되지 않은 라디오 버튼을 클릭하면 리스트에서 이전에 선택되었던 버튼이 해제되는 겁니다.
일반적인 라디오 버튼 컨트롤라디오 버튼은 제대로 이용하면 유저가 잘못된 데이터를 입력하지 않게 해주는 훌륭한 역할을 합니다. 왜냐하면 적법한 선택지만 보여주고 많은 멋진 기능(예: 키보드 내비게이션과 안정적인 렌더링)과 함께 이용되기 때문입니다. 이번 글에서는 사용성 테스트를 통해 만든 라디오 버튼의 실용적인 가이드라인을 살펴보겠습니다.
라디오 버튼이란 이름을 어떻게 갖게 되었을까?
라디오 버튼은 옛날에 자동차 라디오에서 방송을 바꿀 때 이용하던 물리적인 버튼에서 따온 이름입니다. 버튼 중 하나를 누르면 다른 버튼이 튀어 올라와서, “눌려진” 버튼이 하나만 남게 해주는 식으로 작동합니다. 소프트웨어 라디오 버튼은 이런 실제 라디오의 버튼을 본떠서 만들어졌습니다.
한 번에 하나의 버튼만 눌려있을 수 있습니다.라디오 버튼 UX 설계 원칙
라디오 버튼은 설정에서만 이용한다
라디오 버튼은 설정(settings)을 변경할 때만 이용하고, 명령을 수행하는 액션 버튼으로는 이용하지 않습니다. 또한 변경된 설정은 유저가 명령 버튼(“완료” 혹은 “저장”)을 클릭할 때까지 반영되면 안 됩니다. 만일 유저가 뒤로 가기 혹은 취소 버튼을 누르면, 해당 페이지에서 라디오 버튼으로 바꾼 모든 변경 사항은 취소되고 본래 설정으로 돌아가야 합니다.
만일 라디오 버튼을 명령이 수행되는 방식에 영향을 미치기 위해서만 이용되었다면, 라디오 버튼이 아닌, 다양한 명령어를 보여주는 것이 더 나을 수도 있습니다. 그렇게 하면 유저가 한 번의 인터랙션으로 정확한 명령을 선택할 수 있게 해주기 때문입니다.
버튼 인풋은 한 번 탭 하는 액션으로도 선택할 수 있게 해줍니다. Image credit: LukeW옵션은 논리적 순서로
옵션은 반드시 논리적 순서를 가지고 정렬해야 합니다. 예를 들면 가장 많이 선택되는 항목에서 가장 적게 선택되는 항목 순으로, 혹은 간단한 옵션에서 복잡한 옵션 순으로, 가장 리스크가 적은 옵션에서 높은 옵션 순으로 정렬합니다. 알파벳 순서는 추천하지 않습니다. 알파벳 순으로 하면 언어에 의존하게 되고 현지화할 수 없기 때문입니다.
옵션은 포괄적이면서 명확히 구분되어야 한다
라디오 버튼의 가장 큰 사용성 문제는 불명확하거나 오해의 소지가 있는 레이블이나 일반 유저가 이해할 수 없게 쓰인 옵션에서 발생합니다. 상황별 도움을 주면 추후 발생할 문제를 완화시킬 수 있지만, 중요한 인터랙션 컨트롤 같은 경우에는 유저에게 테스트하는 것이 가장 좋습니다.
항상 기본 선택이 된 상태로 보여준다
UI 디자인의 10가지 휴리스틱 중 하나를 보면 유저가 자신의 행동을 취소하거나 다시 할 수 있게 해줘야 한다고 나옵니다. 즉, 사람들이 UI 컨트롤을 본래 상태로 되돌릴 수 있게 해줘야 한다는 겁니다. 라디오 버튼의 경우에는, ‘라디오 버튼에는 언제나 하나의 미리 선택된 항목이 있어야 한다’는 입니다. 가장 안전한 (데이터 손실이나 시스템 접근에 생길 문제를 방지해줄) 옵션이면서 가장 보안 및 정보보호가 철저한 옵션을 선택하면 됩니다. 만일 안전과 보안이 핵심 요소가 아니라면, 가장 많이 선택할 옵션이나 편한 옵션을 선택하면 됩니다.
유저가 선택하길 꺼려할 수도 있는데, 이에 대해서도 가령 “해당 사항 없음” 같은 레이블로 선택권을 줘야 합니다. 유저가 선택할 수 있는 분명하면서도 중립적인 옵션을 제공하는 것은 리스트에서 아무것도 선택하지 않는 암묵적 행동을 요구하는 것보다 훨씬 더 낫습니다.
리스트는 세로로 보여주려고 노력한다
가로 라디오 버튼은 때때로 훑어보거나 현지화하기가 어렵습니다. 라디오 버튼의 가로 배치는 어떤 레이블이 해당 버튼과 연결되는지, 앞이랑 이어지는지 뒤랑 이어지는지 헷갈리게 만듭니다. 때문에 라디오 버튼은 세로로 배치하는 것이 안전합니다.
한 줄에 하나의 선택지만 보여주면서 세로로 리스트를 만들도록 노력해보세요. 그래도 한 줄에 여러 옵션이 들어가는 가로 레이아웃이 필요하다면, 버튼과 레이블 사이의 공간을 잘 만들어 어떤 레이블이 어떤 버튼과 연결되는지 명확하게 만들어야 합니다. 예를 들어, 아래 사례 같은 경우 ‘Four’라는 옵션을 선택하려면 어떤 버튼을 눌러야 할지 명확하지 않습니다.
나쁨: 가로라디오 버튼레이블 태그를 클릭 타깃으로 이용한다
라디오 버튼은 본래 작기 때문에 피츠의 법칙에 따르면 클릭하거나 탭 하기 어려울 수 있습니다. 타깃 영역을 크게 만들기 위해 유저가 버튼뿐만 아니라 레이블 혹은 같이 나오는 문구를 눌러도 옵션을 선택할 수 있게 만들어야 합니다. 버튼 자체나 레이블 둘 중 하나를 눌러도 옵션을 선택하게 해주는 겁니다.
왼쪽: 제한된클릭 영역. 오른쪽: 넓은 클릭 가능 영역좋은 가로 라디오 버튼은 Duolingo app에서 찾을 수 있습니다: 여기서는 클래식 가로형 라디오 버튼을 이용했지만, 타깃을 시각적으로 구분되게 만들었고, 터치가 되는 디바이스에서도 문제가 없도록 충분히 크게 만들었습니다.
좋음: 가로라디오 버튼드롭다운 대신 라디오 버튼을 쓴다
가능하다면 드롭다운 메뉴보다 라디오 버튼을 사용하세요. 라디오 버튼은 모든 옵션을 보여주어 유저가 쉽게 비교할 수 있어서인지 부하가 더 적다고 합니다.
옵션이 7개 이하인 경우 라디오 버튼 이용을 반드시 고려해야 합니다. 얼마나 많은 옵션이 있고 각각 어떤 옵션인지 알아보기 위해 클릭(혹은 타이핑)을하지 않고도 즉시 훑어볼 수 있기 때문입니다.
왼쪽: 드롭다운메뉴로 선택하는 성별. 오른쪽: 라디오 버튼으로 선택하는성별.옵션 내 또 다른 옵션을 만들지 않는다
라디오 버튼 항목 안에 다른 라디오 버튼이나 체크박스를 이용해 또 다른 옵션을 만들지 않아야 합니다. 혼선을 주지 않기 위해 모든 옵션은 하나의 레벨로 제공해야 합니다.
옵션 속 옵션을 만들면 불필요한 복잡성이 더해집니다.애니메이션과 시각적 피드백을 사용한다
잘 디자인한 애니메이션은 심혈을 기울여 만든 듯한 느낌을 경험하게 해줍니다. 라디오 버튼 같은 유저 인터페이스 요소는 유리 스크린 뒤에 있다 할지라도 만질 수 있는 것처럼 보여야 합니다. 시각적 단서와 모션 단서는 인풋을 즉시 받아들이고 유저의 인풋에 대한 시각적 리액션을 해주어 명확성을 더해줍니다.
Image credit: Dribbble체크박스가 더 나은 선택일 수도 있을까?
만일 옵션이 두 개밖에 없다면, 라디오 버튼 대신 1개의 체크박스만 쓸 수 도 있습니다. 하지만, 체크박스는 하나의 옵션을 켜거나 끌 때만 적합한 반면, 라디오 버튼은 완전히 다른 대체 옵션에도 사용할 수 있습니다.
체크박스 컨트롤. Image credit: Material Design옵션에 두 가지 솔루션이 있다면, 다음 상황을 기억해야 합니다:
대체 선택지. 체크박스의 뜻이 완전히 명확하진 않다면 라디오 버튼을 이용해야 합니다. 아래 사례를 보면 두 선택지가 정반대여서 이경우에는 라디오 버튼을 선택하는 것이 더 낫습니다.
마법사. 마법사 페이지에는 선택지를 분명하게 보여주기 위해 라디오 버튼을 사용해야 합니다. 물론 체크박스도 괜찮긴 하지만 말입니다. 디폴트로 특정 버튼이 선택된 상태로 디자인하면 유저에게 강력한 제안을 할 수 있습니다. 디폴트 선택은 유저가 더 나은 선택을 할 수 있게 해 주고, 확신을 가지고 진행할 수 있기 때문입니다.
어떤 옵션을 강력히 추천한다면, “(추천)”이라는 문구를 레이블에 추가합니다. Image credit: Dropbox네 또는 아니오. 유저가 “네” 혹은 “아니오”로 유저가 단순하게 대답할 수 있는 하나의 질문이 있을 땐 체크박스를 쓰는 것이 맞습니다.
단순한 질문은 체크박스 형식으로 물어볼수 있다.결론
라디오 버튼을 디자인할 때, 디자인 표준을 따르는 것이 가장 중요합니다. 그러면 그 컨트롤이 어떤 기능을 할 것인지 어떻게 조작하면 될지 유저가 예측 능력을 강화해줄 수 있기 때문입니다. 반대로 기준을 무시하면 마치 경고 없이 아무 일이나 발생하는 것처럼 인터페이스가 불안정해질 수 있습니다.
디자인은 신중하게 해야 합니다. 라디오 버튼은 종이 프로토타이핑을 이용해서도 쉽게 테스트할 수 있으니, 유저가 이 컨트롤을 이해했는지 제대로 이용할 수 있는지 꼭 확인받아야 합니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
줌 Live 강의 수강생 모집 중
(매월 Live 3-4개 강좌 오픈하고 있습니다)
인프런 20개 UX 인터넷(VOD) 강좌 수강생 모집 중
(평생 수강)
https://www.inflearn.com/users/196290
