사용자에게 제공되는 UI는 기본적으로 어떠한 선택을 하도록 유도하거나 특정 기능들을 사용하기 위한 옵션들을 선택하는 기능들을 내포하고 있다. 가장 심플한 방법이며 GUI 구현을 위한 어떤 개발 언어나 프레임워크를 사용하는가와 관계없이 항상 기본 위젯으로 제공되는 선택 방식인 Radio Button과 Drop-Down 방식의 적절한 사용 방법에 대한 기본적인 몇가지 규칙이 있다.
Radio Button
우선 라디오 버튼을 사용하기 적절한 케이스는 아래와 같다.
- When You Want to Emphasize Options
- When You Have Less Than 5 Options
- When Comparison of Options Needs to Make Clear
- When Visibility and Quick Response Is A Priority
Rule #1: When You Want to Emphasize Options
이 첫번째 규칙의 경우는 제작자가 제공하는 모든 옵션들을 강조하고 싶을 때 라디오 버튼이 더 효율적이라는 것을 시사한다.
위 그림에서 확인할 수 있듯 라디오 버튼은 특정한 기본 디폴트값이나 추천 옵션이 명확하게 강요되는 느낌은 아니다. 반대로 오른쪽 드랍 다운 방식은 가장 먼저 기본 값으로 잡혀있는 값을 대부분의 사용자가 선택하기를 원할 때 더 적절하다. 우리도 경험상 드랍 다운 방식에서 기본 값이 크게 거부감이 들지 않는다면 그대로 두고 넘어간다는 것을 어렴풋이 기억이 날 것이다.
또한 드랍 다운 방식은 아래에 어떤 옵션들이 있을 지 대충 첫 기본값을 보고 어느정도 유추가 가능하기에 옵션들을 표출하지 않아도 사용자에게 불편함을 주지 않지만 만약 사용자에게 예측하기 힘든 옵션들이 있다면 편의성을 위해서라도 라디오 버튼으로 표출해주는 것이 더 좋을 수 있다. 같은 맥락으로 제작자가 제시한 모든 옵션을 사용자가 읽어보길 원할 때 라디오 버튼이 더 효과적이다.
Rule #2: When You Have Less Than 5 Options
만약 옵션이 5개 이하라면 드랍다운보다 한눈에 직관적으로 모든 옵션을 확인할 수 있도록 라디오 버튼으로 선택지를 제공해주는 것이 좋다. 상황에 따라 다를 수 있지만 우리가 시험 칠 때도 5지 선다형, 4지 선다형 객관식 선택을 봐와서 5개 이하의 선택지를 한눈에 확인하는 것은 매우 익숙한 환경일 것이다.
Rule #3: When Comparison of Options Needs to Make Clear
만약 여러 가격 옵션들이 있다면 사용자는 자신이 원하는 기능이 어떤 요금제에 포함되어있는지 한 눈에 비교하고 선택을 원할 가능성이 높다. 이런 상황에 드랍 다운 방식으로 선택지를 제시하게 되면 사용자는 선택에 어려움을 겪게 된다. 라디오 버튼의 특성은 여러 옵션을 한 눈에 확인이 가능하다는 점인데 이 장점을 활용하는 디자인이 사용자의 의사 결정 과정에 더 도움이 된다.
Rule #4: When Visibility and Quick Response Is A Priority
이번 규칙은 우리가 설문조사 요청을 받을 때 가장 많이 보게된 유형일 것이다. 이번엔 먼저 아래의 예시를 보자.
설문조사나 상태를 점검하기 위해 여러 긴 Form 형태의 설문지의 경우 이렇게 빠르게 사용자가 옵션을 선택하고 넘어갈 수 있게 구성하는 것이 좋다. 만약 드랍 다운 방식이라면 한 설문마다 화살표 버튼을 눌러 아래의 다른 옵션들을 확인하여야 하는데 이는 결국 사용자에게 하나의 동작을 더 요구하게 되므로 결정적으로 사용자가 사용하기 귀찮은 응용 프로그램이 될 것이다.
Drop-Down
이번엔 Drop-Down을 사용하기 적절한 상황은 아래와 같다.
- When Default Option Is The Recommended Option
- When A Large Number of Familiar Options Are Available
- When You Have More Than 7 Options
Rule #5: When Default Option Is The Recommended Option
1번 규칙과는 다르게 기본 값의 선택을 유도하고 싶거나 사용자가 대부분의 경우 이 기본 값을 선택해야하는 경우 드랍 다운 방식으로 선택 방식을 제공하는 것이 좋다. 이 역시 사용자의 행동을 한 단계 줄이며 제작자의 의도대로 이점을 가져올 수 있는 방안이다.
Rule #6 A Large Number of Familiar Options Are Available
제공되는 옵션에 대한 카테고리가 명확하고 첫 기본 값을 통해 다른 옵션들을 쉽게 유추할 수 있다면 드랍 다운 방식을 제공하는 것이 좋은 구성이 될 수 있다. 또한 나란히 선택지를 배치하여 사용자가 비교 후 선택할 필요성이 크지 않은 경우에도 드랍 다운 방식이 어울린다.
Rule #7 When You Have More Than 7 Options
4지 선다, 5지 선다는 우리에게 익숙한 편이다. 하지만 선택지가 5개가 넘어가는 등 너무 많은 옵션을 라디오 버튼으로 제공한다면 오히려 가독성이 떨어지게 된다. 이 경우도 6번 규칙의 경우처럼 카테고리가 명확하고 아래의 옵션들이 대충 유추가 가능하다. 국가를 선택해야하는 경우 라디오 버튼으로 선택지를 제공한다면 국가 선택만을 위해 3페이지 이상이 필요할 수도 있다.
결국 우리는 사용자 경험을 해치지 않는 방향으로 시스템을 구성하고 UI를 제공하여야 한다. 사용자에게 항상 선택을 받아야하고 이는 결국 매출에도 영향을 끼치게 된다. 모든 상황에 적용되는 규칙은 아닐 수 있지만 개발자 또는 기획자라면 자신이 구현하고 있는 시스템의 목적과 성향에 맞추어 라디오 버튼, 드랍 다운 등의 선택지를 적절히 배치하고 이외에도 체크 박스 등 여러 옵션을 고려할 수 있어야 한다.
참고 자료
https://blog.prototypr.io/7-rules-of-using-radio-buttons-vs-drop-down-menus-fddf50d312d1
