라디오 버튼

화면에서 어려운 것은 선택지를 늘어놓는 일이 아니라 하나만 골라야 한다는 규칙을 누르기 전에 알려 주는 일입니다. 안내 문구로 하나만 선택하라고 적어 두면 읽지 않는 사람이 둘을 누릅니다. 그러면 다음 화면에서 오류가 뜨고, 사용자는 왜 안 되는지를 누른 뒤에야 알게 됩니다.

요금제 고르는 화면을 네모난 체크 칸으로 만들어 두면 이 일이 실제로 벌어집니다. 팀 플랜과 비즈니스 플랜을 둘 다 체크하고 다음을 누른 사람이 나오고, 결제 금액이 이상하다는 문의가 들어옵니다. 만든 쪽에서는 하나만 고르는 질문이라는 것이 당연했지만 화면은 그 사실을 말하지 않았습니다.

이름은 옛 자동차 라디오의 주파수 버튼에서 왔습니다. 여섯 개가 나란히 붙어 있고 하나를 누르면 앞서 눌려 있던 것이 튀어 올라오는 구조입니다. 규칙을 문장으로 설명할 필요가 없었습니다. 손으로 눌러 보면 하나만 들어간다는 것이 그 자리에서 드러났습니다. 화면 위의 이 요소도 같은 일을 합니다.

같은 질문에 속한 여러 개가 한 묶음을 이루고, 그 묶음 안에서 동그라미가 채워지는 것은 언제나 하나입니다. 다른 것을 고르면 앞서 고른 것이 자동으로 풀립니다. 사용자가 무언가를 끄는 동작을 따로 하지 않는다는 점이 이 요소의 성질입니다.

제구실을 하게 만드는 규칙은 다섯입니다.

1. 묶음에 질문을 붙입니다. 선택지 셋만 덜렁 놓여 있으면 무엇을 고르는 중인지 알 수 없습니다. 요금제라는 제목이 셋 위에 있어야 합니다.
2. 기본값을 하나 미리 골라 둡니다. 비워 두면 그 질문을 지나치는 사람이 생깁니다. 다만 미리 골라 둔 항목은 추천으로 읽히니, 값이 판단에 영향을 주는 질문에서는 어느 것을 기본으로 둘지 따로 정합니다.
3. 아무것도 안 고른 상태로는 되돌아갈 수 없다는 점을 염두에 둡니다. 되돌릴 길이 필요하면 선택 안 함이라는 항목을 하나 넣습니다.
4. 선택지 수를 둘에서 일곱 사이로 둡니다. 하나뿐이면 고를 것이 없으니 다른 요소를 써야 하고, 열두 개를 펼치면 질문 하나가 화면 절반을 먹습니다. 그럴 때는 접어 두는 셀렉트나 입력하며 후보를 좁히는 콤보박스로 바꿉니다.
5. 글자를 눌러도 선택되게 만듭니다. 동그라미는 지름 20픽셀 안쪽인데 옆의 글자는 그보다 훨씬 넓습니다. 글자가 눌리지 않으면 휴대폰에서 두세 번 헛손질을 하게 됩니다.

키보드로 쓰는 경로도 다릅니다. 탭을 누르면 묶음 하나를 통째로 건너뛰고, 묶음 안에서 항목을 옮기는 것은 방향키입니다. 탭으로 항목 하나하나를 지나가게 만들면 선택지가 여섯인 질문에서 탭을 여섯 번 눌러야 다음 칸으로 갑니다.

반영되는 시점도 함께 정합니다. 켜고 끄는 두 상태를 오가는 토글은 누르는 즉시 반영되는 자리에 쓰지만, 라디오 버튼은 대개 저장을 누를 때 한꺼번에 반영됩니다. 이 요소를 저장 버튼 없는 화면에 두면 사용자가 무엇이 저장됐는지 모르는 상태가 됩니다.

동시에 둘을 고를 수 없는 값이 이 요소의 자리입니다. 요금제, 배송 방법, 결제 수단이 그렇습니다. 설문에서 하나만 답하는 문항, 설정 화면에서 셋 안쪽의 모드를 고르는 자리도 여기 들어갑니다.

페이지덱에서는 문서 공개 범위가 이 모양입니다. 전체 공개와 팀 안에서만과 나만 보기 셋이 나란히 펼쳐져 있고, 어느 하나를 고르면 나머지가 풀립니다. 셋을 동시에 고를 수 없는 값이고 개수가 적어서 접지 않고 펼쳐 둡니다.

반대로 쓰지 않아야 하는 자리가 넷 있습니다.

1. 여러 개를 함께 고를 수 있는 질문. 받을 알림 종류를 셋 다 켤 수 있다면 체크박스입니다.
2. 선택지가 여덟을 넘는 질문. 나라 이름처럼 후보가 많으면 접거나 검색하게 합니다.
3. 켜고 끄는 한 가지뿐인 설정. 이런 자리에 라디오 버튼 두 개를 놓으면 토글 하나가 할 일을 둘로 늘리는 셈입니다.
4. 목록을 미리 만들 수 없는 값. 이름이나 검색어는 글자를 직접 받는 인풋이 맡습니다.

"이건 하나만 고르는 질문인데 체크박스로 되어 있어요. 라디오로 바꿔야 합니다."

화면의 모양이 규칙과 어긋나 있으니 모양을 규칙에 맞추자는 지적입니다.

"선택지가 열두 개면 화면을 다 먹어요. 셀렉트로 접죠."

같은 질문이라도 개수가 늘면 다른 요소를 써야 한다는 판단입니다.

"기본값을 뭘로 둘까요? 안 고른 상태로 시작하면 그냥 넘어갑니다."

비워 두는 것도 선택이고 완료율에 영향을 준다는 뜻입니다.

페이지덱에서 민서가 공개 범위 화면을 고칠 때 셋 가운데 기본값을 팀 안에서만으로 두기로 정했습니다. 전체 공개를 기본으로 두면 실수로 밖에 열리는 문서가 생기고, 나만 보기를 기본으로 두면 함께 쓰는 제품에서 매번 손으로 바꿔야 하기 때문입니다.

태오는 구현하면서 글자 영역까지 눌리게 하고 방향키로 셋을 오갈 수 있게 맞췄습니다. 이 두 가지가 빠지면 화면은 같아 보이지만 휴대폰과 키보드에서 쓰기 어려워집니다.

선택지를 접어 두는 쪽이 언제나 깔끔하다고 보는 경우가 많습니다. 화면에 놓이는 줄이 줄어드니 정돈돼 보이기 때문입니다. 그런데 접어 두면 사용자가 목록을 여는 동작을 한 번 더 해야 하고, 무엇이 후보인지 열기 전에는 모릅니다. 선택지가 셋이라면 펼쳐 두는 쪽이 동작 하나를 줄이고 셋을 나란히 견주게 해 줍니다. 이 구별을 놓치면 셋짜리 질문까지 다 접어 두게 되고, 사용자는 요금제 셋을 비교하려고 목록을 세 번 여닫습니다.

기본값을 비워 두는 것이 중립이라고 보는 오해도 흔합니다. 하나를 미리 골라 두면 그쪽으로 유도하는 것처럼 보이니 아무것도 안 고른 상태가 공정해 보입니다. 그런데 비워 둔 질문은 지나치기 쉽습니다. 다음 화면에서 오류를 띄워 되돌려 보내면 그 자리에서 이탈하는 사람이 생기고, 그 손실은 기본값 하나를 잘못 고른 경우보다 큽니다. 유도가 걱정되는 질문이라면 기본값을 비우는 대신 가장 많이 쓰이는 값이나 가장 안전한 값을 골라 두고 그 이유를 옆에 한 줄로 적습니다.