본문 바로가기
ᴜx/ᴀʀᴛɪᴄʟᴇ

라디오 버튼과 체크박스가 공존할 수 없는 이유

by jinx2a 2020. 3. 24.
반응형

라디오 버튼과 체크박스는 오랫동안 사용자 혼란을 일으키는 구성요소였다. 이 요소들은 종종 같은 맥락에서 사용되지만, 완전히 다르게 보인다. 디자이너와 개발자들은 그 차이를 알고 있지만, 그것은 그들이 일을 통해 그것을 배웠기 때문이다. 그 차이를 전혀 배우지 못한 사용자들은 어떨까?

사용자에게 차이점을 가르쳐야 한다는 사실은 이 두 요소가 직관적이지 않다는 것을 보여준다. 그들의 외관만으로는 기능면에서 약간의 차이가 있다는 것을 전달할 수 없다. 이 시각적 단서는ㅡ점과 체크마크ㅡ 옵션 선택 이외의 사용자에게 특별한 의미를 부여하지 않는다. 따라서, 라디오 버튼과 체크박스의 공존은 UX의 일관성 원칙을 위반한다.

디자이너와 개발자들은 항상 그래왔기 때문에 그들의 공존에 의문을 제기해 본 적이 없다. 그러나 이들의 공존이 사용자 혼란을 야기하고 UX 원칙을 위반한다면, 논리적으로 분석하고 다시 생각해 볼 가치가 있다.

 

 

 

 


일관성의 위반

UX 일관성 원칙은 기능성과 용도가 동일한 구성요소는 외관이 균일해야 한다고 규정하고 있다. 라디오 버튼과 체크박스는 기능이 비슷하고 같은 맥락에서 사용되지만 외관상으로는 균일한 것이 없다.

 

 

라디오 버튼은 상호 배타적인 선택을 나타내는 반면, 체크박스는 상호 포괄적인 선택을 나타낸다. 이 두 가지는 일반적으로 목록에서 옵션을 선택하기 위해 양식에서 함께 사용된다. 그러나, 라디오 버튼은 내부에 점이 있는 원이고, 체크박스는 두 개의 다른 시각적 단서 안에 체크 표시가 있는 사각형이다.

어떤 사람들은 그들의 기능이 다르기 때문에 다르게 보여야 한다고 말할지도 모른다. 그러나 정확히 말하면 그들의 기능은 약간 다를 뿐이고, 둘 다 같은 용법을 가지고 있어 다른 모습을 정당화하기에 충분하지 않다. 그렇게 하는 것은 사용자들을 혼란스럽게 할 수 있는 불일관성을 나타낸다.

 

 

 

 


상호 배타성/포괄성은 사용자 관심사가 아님

일반적인 사용자에게 상호 배타적이거나 포괄적인 옵션이 무엇인지 물어본다면, 그들은 아마도 당신에게 말할 수 없을 것이다. 인터페이스를 사용할 때 상호 배타성이나 포괄성에 대해 생각하지 않기 때문이다. 오직 디자이너와 개발자들만이 인터페이스를 설계해야 하기 때문에 이것에 대해 생각한다.

사용자는 라벨만 읽고 원하는 옵션을 선택하기만 하면 된다. 그들은 요소의 기능이 아니라 라벨에 적힌 것에 초점을 맞추고 있다. 따라서 상호 배타성과 포괄성은 구성 요소 자체가 아니라 그들이 읽는 라벨에 표시되어야 한다. 디자이너와 개발자들은 그들의 사고방식을 사용자에게 강요하고 있다.

 

 

 

 


사용자가 하나 또는 여러 개를 선택할 수 있다는 것을 아는 방법

구성요소의 라벨은 사용자가 여러 옵션을 선택할 수 있는지 아니면 하나만 선택할 수 있는지를 표시한다. 사용자가 여러 옵션을 선택할 수 있는 경우 라벨은 복수 형태로 표시된다. 사용자가 하나의 옵션만 선택할 수 있는 경우 라벨은 단수 형태로 표시된다. 상호 배타적이고 포괄적인 구성요소에 레이블을 붙일 때 올바른 명사 형식을 사용해라. 라벨은 잊어버리기 쉽지만 가장 중요하다.

 

 

레이블 명사의 양식은 체크 표시와 점보다 상호 배타성/포함성에 대한 더 명확한 신호다. 체크 표시와 점은 설계자, 개발자 및 기술에 정통한 사용자들에게만 익숙한 관습에 의한 것이며. 이외의 상호 배타성/포괄성을 의미하지 않는다. 동일한 맥락에서 사용되는 다른 요소들을 보는 일반 사용자들은 시각적 차이가 무엇을 의미하는지 궁금해할 것이다. 이러한 모순은 그들의 임무를 망칠 만큼 심각하지는 않지만, 그것은 확실히 그들의 주의를 딴 데로 돌리게 한다.

 

 

 

 

 


원형의 체크버튼 사용으로 대체

사용자는 일관성 있고 일관된 옵션 목록에서 선택할 수 있는 구성 요소가 필요하다. 라디오 버튼과 확인란을 사용하는 대신 원형의 체크 버튼을 사용해라. 원형의 체크 버튼은 라디오 버튼의 외부 모양과 확인란의 체크 표시 신호를 결합한다.

 

 

체크 표시는 점보다 선택하기 위한 훨씬 강한 신호기여서 사용된다. 그것은 일반적으로 긍정 혹은 "예"의 상징으로 알려져 있다. 점은 임의의 의미를 담을 수 있는 약한 시각적 신호다.

원형의 윤곽은 체크박스와 구별하는데 도움이 된다. 또한 배경이 있는 아이콘은 대부분 원 안에 있기 때문에 더 호소력이 있고 알아보기 쉽다는 장점이 있다.

옵션 목록을 선택하기 위한 단일 구성요소가 있는 경우, 사용자는 더 이상 라디오 버튼과 확인란의 차이로 인해 주의가 산만해지지 않는다. 그들은 라벨에 더 초점을 맞추고 그들에게 가장 적합한 옵션을 선택할 수 있다. 사용자가 한 가지 옵션만 선택할 수 있는지는 중요하지 않다. 그들은 부품의 종류가 아니라 라벨이 지시하는 것에 따라 선택을 할 것이다.

 

 

 

 


이전 설계 사례의 발전

라디오 버튼과 체크박스는 오랫동안 공존해왔다. 어떤 사람들은 그들의 장수를 그들의 공존을 정당화하기 위해 사용할지도 모른다. 그러나 그 후 많은 과거의 설계 관행은 UX에 대한 이해도 향상되어 발전해 왔다. 예를 들어, 양식을 지우는 재설정 버튼, 필수 필드의 빨간색 별표, 비밀번호 확인 필드는 오늘날 거의 모두 사라졌다. 라디오 버튼과 체크박스는 인생의 대부분의 것과 마찬가지로 인터페이스 설계도 계속 진화하기 때문에 곧 같은 일을 할 수 있다.

 

 

 

 

-

저자 : Anthony
원문 링크: https://uxmovement.com/forms/why-radio-buttons-and-checkboxes-cant-co-exist/

 

반응형

댓글