UI 공부3. 라디오 버튼(Radio Button)
아는 것도 다시 보는 신입 UX기획자의 공부 노트
신입 UX기획자의 공부 노트
현명한 선택을 위한 UI 컴포넌트 잘 사용하기! 의 마지막의 주자는 라디오 버튼(Radio Button)입니다.
토큰, 체크 박스, 라디오 버튼은 모두 차이를 알고 사용하는 것이 중요하기 때문에 연속으로 다루고 털어(?) 내려고 합니다.
*새롭게 알게 되는 내용은 날짜를 달고 추가하려고 합니다^^
21.04.18
라디오 버튼은 사용자가 한 세트를 이루는 선택지 중 1가지를 선택할 때 사용하는 UI 컴포넌트입니다. 또한, 모든 선택지가 노출되어야 할 경우에 사용합니다.
참고) 드롭다운
*만약 선택지가 너무 많은 경우나 선택지를 모두 노출하지 않아도 되는 경우에는 드롭 다운 컴포넌트를 권장합니다.
다만, 드롭 다운은 여러 선택지를 선택 가능한 경우도 있어 기획하실 때 단일 선택의 경우와 복수 선택의 경우를 잘 구분할 수 있도록 그리시면 좋을 것 같습니다.
https://www.pinterest.co.kr/pin/316096467577576706/라디오 버튼 vs 토글
라디오 버튼은 선택지가 2가지일 경우에 토글과 대체되어 사용되기도 합니다.
하지만, 화면을 효율적으로 사용하기 어렵고.. 애매한 사용성을 제시하게 되어 비추합니다.
예를 들어,
토글은 기능의 On/Off를 할 때에 주로 사용하기 때문에 이를 라디오 버튼으로 사용할 때엔
기능을 사용하시겠습니까?
1. 예
2. 아니오
공간을 좀 차지하지만, 이런 식으로 풀 수는 있습니다. 그리고 설문지를 할 때엔 저렇게 많이 쓰죠!
(모바일 앱의 기능에서는 예/아니오, 기능의 On/Off는 토글을 사용하는 것이 정석입니다.)
하지만, 질문의 내용이 달라져서
성별을 선택해주세요.
1. 남
2. 여
라고 했을 때에는 라디오 버튼을 사용해야 하고, 토글 스위치 사용은 비추천합니다.
(개발자 분들께서는 저 사례를 토글 스위치로 개발/구현할 수 있지만, 토글이 적절하게 쓰인 사례로 볼 수 없습니다.)
UX/UI를 처음 공부하는 햇병아리 시절 라디오 버튼, 체크 박스의 차이를 몰라서 개발자와 이야기하다가 살짝 민망했던 경험이 있는데 사용자에게 좋은 선택 경험을 제공하고, 개발자와 능숙한 소통을 위해 차이를 알아두시면 좋을 것 같습니다!
요약하자면, 라디오 버튼은
1. 여러 세트 중 한 가지 선택만 가능
2. 모든 선택지 노출
여태까지 다루었던 토글, 체크박스, 라디오 버튼의 차이를 다시 정리해보겠습니다.
토글 : 한 가지 기능(주제)에 대한 스위치를 켜고 끄는 개념
라디오 버튼 : 한 가지 주제에 대해 여러 선택지가 존재하고, 그 선택지 중에 1가지만 선택이 가능함
체크 박스 : 한 가지 주제에 대해 여러 선택지가 존재하고, 그 선택지 중에 1가지 이상이 선택 가능함
Google material design - radio button (안드로이드/iOS 차이)그리고
제가 그냥 재미 삼아..
모두 이해하셨는지 스스로 깨닫는 시간을 갖기 위해 3가지 상황 퀴즈를 내보겠습니다.
(출연자 : 비유, 선비)
1. 오늘 치킨 하나 시키자. 어떤 치킨 시킬까?
a. 교촌
b. BHC
c. BBQ
d. 푸라닭
비유 : 오늘 푸라닭 먹자!
선비 : 그래!
(푸라닭 마음에 안 드시면 여러분들은 각자의 맘 속 치킨을 선택하신 걸로><)
▶ 토글/라디오 버튼/체크박스 중 어떤 것일까요?!
2. 오늘 먹부림을 부려보자. 뭐 먹을까?
a. 피자
b. 치킨
c. 닭발
d. 떡볶이
e. 마라탕
비유 : 너무 배고파. 치킨이랑 마라탕 먹자.
선비 : 피자도 먹고 싶은데.. 치킨이랑 피자 먹고, 마라탕은 안주로 시켜먹자.
비유 : 그래!
▶ 토글/라디오 버튼/체크박스 중 어떤 것일까요?!
3. 콜라 시킬까? (답 2개)
a. 응
b. 아니
▶ 토글/라디오 버튼/체크박스 중 어떤 것일까요?!
정답은 긁어서 확인해주세요 :D
1. 라디오 버튼 2. 체크박스 3. 토글, 라디오 버튼
질문이나 피드백 주실 내용은 댓글 부탁드립니다.
공부하러 오신 여러분들 모두 화이팅입니다. 감사합니다!ㅎㅎ
