brunch

매거진 디자인 탐구생활

라이킷 40 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Potatohands Jan 20. 2023

1. 체크박스 vs 라디오 버튼 UX UI 가이드

[1] 인풋컨트롤

1. 체크박스 vs 라디오 버튼

언제 어떤 것들을 사용해야 하는가?

1) 라디오 버튼은 두 개 또는 그 이상의 옵션 중에서 상호 배타적이고 사용자는 무조건 한 개만 고를 수 있다. 다르게 이야기하면 선택되지 않은 다른 버튼을 선택했을 때 선택되어 있던 버튼은 선택이 해제된다.

2) 체크박스는 사용자나 선택할 수 있는 옵션들이 있는 리스트에서 아무것도 선택 안 할 수도, 한 개만 또는 여러 개를 선택을 할 수 있다. 각각의 체크박스들은 리스트에 있는 모든 체크박스들로부터 독립적으로 선택될 수 있어서 선택을 했다고 해서 다른 체크박스가 자동으로 해제되지 않는다

3) A stand-alone checkbox는 한 개의 옵션으로 사용자가 끄고 켤 수 있다.

예) 이메일 구독을 하겠다고 체크하고 해제하는 UI 참고

추가적인 가이드라인

4) 전형적인 기본 모양을 사용해라

체크박스는 작은 사각형의 체크 마크 또는 엑스(주로 서구사회) 마크가 선택했을 때 표시가 된다. 라디오 버튼은 작은 동그라미로 동그란 명안에 작은 동그라미가 선택되면 생성된다.

5) 그룹 중에서 선택해야 하는 것이라면 그룹처럼 보이게 해라

다른 선택지의 그룹들과 확연히 구분되도록 디자인한다. 같은 그룹인데 너무 떨어져 있다면 같은 그룹이라고 생각되지 않을 것이다.

- 선택해야 하는 항목의 리스트가 길다면 소제목으로 구분한다. 이렇게 소제목으로 구분하면 선택을 빠르게 할 수 있고 쉽게 이해할 수 있다. 하지만 소제목으로 구분하는 것의 리스크는 각 서브그룹이 아예 다른 선택그룹처럼 보일 수 있다는 것이 때문에 꼭 필요한 것이 아니라면 사용하지 않는다.

- 라디오버튼이 있는 리스트의 경우 소제목으로 구분하지 않는다. 하나의 리스트로 보이도록 한다.

6) 리스트는 수직적으로 배치한다.

한 줄에 한개의 선택지가 나올 수 있도록 배치한다. 만약 당신이 수평적인 레이아웃으로 여러개의 옵션을 각 열에 배치한다면 분명하게 각 버튼과 선택지 텍스트들의 간격을 주어야한다. 어떤 선택박스가 어떤 라벨을 선택하는 것인지 분명하게 해야한다. 예를 들어서 선택박스와 텍스트간격이 너무 좁다면 앞의 것을 선택하는지 뒤에것을 선택하는지 알기 어렵다.

7)긍정적이고 적극적인 워딩을 사용한다.

체크박스 옵션의 텍스트들에 긍적적이고 적극적인 단어를 사용해야 사용자가 체크박스를 선택했을때 어떤 일이 벌어질지 확실히 할 수 있다. 부정적인단어 예를 들어 "양상추 빼기 / 토마토 빼기 / 양파 빼기 / 마요네즈 없이" 라는 선택지로 쓰게되면 이것들을 제외하고 모두 넣어달라는 의미로 오해할 수 있다. "양상추 추가, 마요네즈 추가, 치즈 추가" 가 더 명확한 표현이다.

- 체크 박스 라벨은 사용자가 선택지를 선택했을때 어떤일이 벌어질지 또는 선택하지 않고 넘어갔을때 어떻게 될지 알 수 있도록 써야한다.

- 만약 분명하게 선택지 텍스트를 쓸 수 없다면 두개의 라디오버튼을 두고 한개는 기능 켜고 하나는 기능을 끄는 방식으로 두개의 선택지를 분명히 준다.

8) 가능하다면 드랍다운 버튼 보단 라디오 버튼을 사용한다.

라디오버튼은 인지하는데 오랜시간이 걸리지 않는다. 왜냐하면 모든 선택지를 사용자가 계속 볼 수 있어 쉽게 인지 할 수 있다. 라디오 버튼은 마우스를 정교하게 조작하는 것을 어려워하는 사용자들도 쉽게 조작 할 수 있다.

9)항상 디폴트 선택지를 라디오 버튼 리스트에서는 제공한다.

라디오 버튼은 항상 한개의 옵션을 선택하도록 하는 것이기 때문에 기본 선택지 없이 보여주는 것은 지양한다. (하지만 이와는 반대로 체크박스의 경우 자주 선택하지 않고도 넘어갈 수 있도록 허용한다)

10) 라디오 버튼은 정확하게 한개만 선택하도록 되어야 하기 때문에 분명하게 옵션들을 이해할 수 있어야하고 분명하게 구분되어야한다.

나이가 많으신 사용자분들에게 예를 들어 '은퇴했음'이라는 옵션을 주지 않고 한개의 직업을 고르도록 하면 해당 질문에 제대로 체크를 못하게된다. 만약 선택 할 수 있는 것이 절대 없는 없이라면 '기타'라고 선택할 수 있도록 제공하고 기타를 선택한 후 타이핑 필드를 제공한다.

11)사용자가 버튼 또는 박스를 스스로 클릭 또는 터치로 선택 할 수 있도록 한다.

큰 버튼일 수록 빨리 클릭 할 수 있다. (피츠의 법칙에 의하면)

HTML을 사용하고 있다면 체크박스 또는 라디오버튼영역만 선택되도록 코딩하는 것이 아닌 라벨 텍스트 영역까지 선택되도록 범위를 넓힐 수 있다.

버튼 또는 라벨의 실제 크기보다 클릭이 가능한 범위를 조금 더 몇픽셀 키우는 것이 에러를 줄일 수 있음을 우리는 테스트를 통해 알아냈다.

12)체크박스와 라디오 버튼은 설정을 바꾸기 위한 용도로만 쓰고 액션버튼(선택했을때 바로 화면이 바뀌거나 동작하는 등)으로 사용하지 않는다.

체크박스 또는 라디오버튼을 선택하는 동안에는 화면이 전화되거나 다른 효과가 일어나면안된다. 체크박스 또는 라디오버튼의 선택을 마친 뒤 아래 '완료' '다음으로' 또는 '마침' 등의 해당 체크선택 활동을 종료 한 뒤 페이지 변화가 일어나야한다.

- 만약 사용자가 뒤로가기 버튼을 눌렀을때 선택했었던 라디오 또는 체크 박스들이 없어진지거나 최초의 상태로 원복되어야한다. (초기화 버튼을 두면 되지 않느냐는 말도 있지만 글쓴이는 뒤로가기 버튼이 있기에 불필요하다고 말했다. 하지만 실제로 UX UI 디자인을 하면서 20여개를 선택 할 수 있는 옵션페이지였는데 초기화를 두어 한 부분만 다시 선택 할 수 있도록 했다.)

다양한 인터페이스 디자인 패턴에 대한 가이드라인에 대한 내용을 번역하고 옮기면서

내가 경험했던 UX UI디자인에 대한 지식들도 정리하고 공부하는 시간을 갖어보려고 한다!

오래된 아티클이어도~ 클래식은 클래스가 다르다!

이글에서는 인풋컨트롤에서 체크박스 vs 라디오버튼 UX UI를 다루었다.

[1] 인풋컨트롤

1.체크박스 vs 라디오버튼

------아래는 앞으로 번역하며 공부할 내용------
2.토클스위치 가이드라인

3.폼에서 체크박스 vs 스위치

4. 스탭 UX UI 입력 디자인 가이드라인

5. 날짜 입력 폼의 UX 디자인 가이드라인

6. 스플릿 버튼 (드랍다운 또는 다른 기능 선택버튼)정의

7. 슬라이더, 노브 (동그란 벨브모양 컨트롤러는 왼쪽 오른 쪽으로 돌릴 수 있는 것), 메트릭스 (x,y 도표 위에 있는 선을 컨트롤 하는 것)

8. 체크 리스트 모바일 입력 필드