dropdown01

드롭다운 메뉴 5가지 팁



radio button


3개 이하의 선택옵션


때때로 드랍다운 메뉴 선택창에 2-3개 선택 옵션이있는 경우가 있는데 이는 전체적인 사용자 경험을 저하시킵니다. 사용자가 선택할 수있는 옵션이 3개 이하인 경우 라디오 버튼을 사용하는것이 좋습니다.

적은 선택지가 드랍다운 메뉴 선택창에 숨겨져있으면 사용자는 창을 열어봐야하는 번거로운 작업을 한번 더 해야하기때문입니다. 그렇기때문에 3개 미만의 선택지의 경우 라디오 버튼처럼 선택지를 노출시키고 사용자는 스캔후 바로 클릭하면되기 때문에 더욱 직관적인 사용자경험을줄 수 있습니다.







text input field


15개 이상의 선택옵션

한 메뉴에 15개 이상의 선택옵션이 있는경우 긴 목록을 스캔하고 스크롤해야하므로 사용자의 선택속도가 느려집니다. 때로는 선택지 목록이 너무 길어 메뉴가 전체 화면을 차지할 수 있습니다. 15개 이상의 선택지의 경우 그 수를 줄이거나 사용자가 자신의 데이터를 직접 입력 할 수 있도록 텍스트 필드를 사용해야합니다. 텍스트 필드를 사용하면 사용자가 드랍다운을 열 필요 없이 데이터를 정확히 빠르게 작성할 수 있습니다.







default label


드랍다운 내부 레이블 표시

드랍다운안에 사용자가 현재 무엇을 선택하고 있는지 명확하게 알려주는 레이블이 있어야합니다. 스크린리더(시각장애인이 웹사이트를 이용할때 쓰는 툴)를 사용하는 경우에는 단순히 “선택하세요”라는 표현은 정확하지않기 때문에 예를들어 “학교를 선택하세요” “직업을 선택하세요”등 무엇을 선택할건지에 관해 정확히 표기해야합니다. 이것이 WCAG 바로 국제 웹표준 기구에서 지정한 웹접근성 룰 (미국에선 ADA Compliance)과도 연관될 수 있기때문에 주의하는것이 좋습니다







default option in dropdown


디폴트 선택옵션 설정

대부분의 상황에서는 디폴트 선택옵션 설정을 안쓰는것이 좋습니다 왜냐하면 사용자가 실수로 선택옵션을 확인하지않고 버튼을 누를경우 잘못된 내용이 입력될 수 있기때문입니다. 디폴트 선택옵션을 쓰기위해선 사용자의 90% 이상이 해당 선택 옵션을 선택할것이라고하는 확실한 데이타가 있을때만 사용해야합니다.








group options in dropdown


선택지 그룹화


카테고리별로 선택지들이 나눠질수있는 경우에는 선택지를 그룹별로 분할(optgroup 태그) 하는것이좋습니다.이를 통해 사용자는 단시간에 각각의 그룹들을 스캔하여 원하는 선택옵션을 더 빨리 찾을 수 있습니다. 시각장애인과같은 웹접근성 사용자같은 경우 스크린 리더가 그룹레이블을 읽을 수 없기 때문에 그룹레이블을 선택지로 착각하고 읽는 그런 혼란을 줄 일이없습니다.





SNS 공유하기

Share on facebook
Share on twitter
Share on linkedin

매주 주말마다 새로운 디자인 뉴스레터를 받아보세요 📪

Scroll to Top