34.드랍다운 디자인 가이드라인
요약:
드롭다운 박스와 메뉴는 과도하게 사용되면 다루기 번거롭지만, 옵션이나 명령 목록을 표시하는 데는 유용할 수 있다.
드롭다운은 효과적인 웹 디자인에서 분명히 필요한 요소이다. 하지만 과도하게 사용하거나 잘못 사용하면 많은 사용성 문제와 혼란을 초래한다. 디자이너들은 드롭다운을 다양한 목적으로 사용하며, 그 중 하나는:
• 명령 메뉴(Command menus): 선택된 옵션에 따라 동작을 실행하는 메뉴
- 네비게이션 메뉴 : 사용자를 새로운 페이지로 이동시는 경우
- 폼 필터링 : 사용자가 하나의 옵션을 선택하여 폼필드는 작성하도록 하는 경우
-속성 선택 : 사용자가 메뉴에서 선택가능한 값을 지정하도록 하는경우
원래 “드롭다운 박스(dropdown box)”와 “드롭다운 메뉴(dropdown menu)”라는 용어는 서로 혼용되어 사용되었지만, 시간이 지나면서 기능적 구분이 생겼다. 오늘날 드롭다운 메뉴는 주로 드롭다운의 **첫 두 가지 용도(내비게이션과 명령 목록)**를 다루며, 드롭다운 박스는 **폼 작성(form fill-in)이나 속성 선택(attribute selection)**에 주로 사용된다.
드롭다운 박스는 일반적으로 드롭다운 메뉴와 다르게 생겼다. 박스 옆에 화살표가 있고, 속성 선택이나 폼 데이터 입력에 사용된다. 이 컨트롤은 일반적으로 **필드 라벨(field label)**이나 **제목(title)**이 첫 항목 자리에서 표시되어, 사용자가 선택하기 전에 내용을 확인할 수 있게 한다.
MacOS와 Windows는 드롭다운 구현 방식이 다르지만, 두 경우 모두 **명령 메뉴(command menus)**와 **속성 선택 메뉴(attribute-selection menus)**는 다르다. 실제로 Macintosh Human Interface Guidelines는 명령을 위해 드롭다운 메뉴를 사용하지 말 것을 명시적으로 권장한다.
드롭다운 디자인 지침
드롭다운에는 분명 장점이 있다. 먼저, 화면 공간을 절약할 수 있다. 또한 표준 위젯이므로(불편하더라도) 사용자는 어떻게 다뤄야 하는지 알고 있다. 폼 작성이나 속성 선택에 사용될 경우, 드롭다운 박스는 허용된 선택지만 표시하므로 사용자가 잘못된 데이터를 입력하는 것을 방지할 수 있다.
이러한 장점에도 불구하고, 디자이너가 드롭다운을 덜 사용하면 웹 사용성이 향상될 수 있다. 이를 위해 드롭다운 디자인 지침은 다음과 같다:
1. 상호작용 메뉴(interacting menus)를 피할 것:
한 메뉴의 옵션이 같은 페이지의 다른 메뉴에서 선택한 항목에 따라 변경되는 경우, 사용자는 매우 혼란스러워진다. 선택 항목이 다른 위젯에 의존할 경우 원하는 옵션을 찾기 어려워지는 경우가 많다.
2.선택할 수 없는 옵션은 제거하지 말고 회색으로 표시(비활성화) 한다. 선택할 수 없는 항목도 화면에 그대로 보여야 한다. 추가로 UX를 향상시키려면, 사용자가 회색 처리된 옵션 위에 1초 이상 마우스를 올려놓으면, 해당 옵션이 왜 비활성화되었는지와 활성화 방법을 설명하는 **짧은 툴팁(balloon help)**을 표시하는 것을 고려할 수 있다.
비활성화된 항목을 제거하면 인터페이스의 공간적 일관성(spatial consistency)이 사라지고, 학습하기 어려워진다.
3. 스크롤이 필요한 아주 긴 드롭다운은 사용자가 한눈에 모든 선택지를 확인할 수 없게 만든다. 또한 마우스를 드롭다운 영역 밖으로 벗어나지 않도록 신중하게 이동해야 한다.
(이는 Steering Law의 사례로, 사용자가 포인팅 장치를 터널을 통해 이동하는 데 걸리는 시간은 터널의 길이와 폭에 따라 달라진다는 법칙이다. 터널이 길고 좁을수록 포인터를 한쪽 끝에서 다른 끝으로 이동하는 데 시간이 더 걸린다. 이 법칙은 Fitts’ Law에서 유도되며, 인간-컴퓨터 상호작용(HCI) 수업에서 다룬다.)
가능하면 많은 항목을 드롭다운에 넣고 싶은 유혹을 참는 것이 좋다.
항목이 많다면, 다음과 같은 대안적 표시 방법을 고려할 수 있다:
• 전통적인 링크의 HTML 리스트
• 메가메뉴: 선형이 아닌 2차원 구조로, 마우스 관리가 쉽고 메뉴 내부 항목에 더 빠르게 접근 가능
4. 사용자가 입력하는 것이 더 빠른 경우에는 드롭다운 박스를 피한다.
전형적인 사례로는 미국 우편 주소를 위한 주(state)나 국가(country) 목록이 있다. 사용자가 스크롤하는 드롭다운에서 주를 선택하는 것보다, 예를 들어 “NY”라고 직접 입력하는 것이 훨씬 빠르다.
제한된 옵션이 있는 필드에 자유 입력을 허용하면, 백엔드에서 **데이터 검증(data validation)**이 필요하지만, 사용성 측면에서는 이 방법이 종종 최선이다.
(이는 우리가 관찰한 체크아웃 폼에서 주 드롭다운 사용 시 발생하는 오류가 많았기 때문에, 전자상거래 사용성 지침 중 하나로 포함된 사례이다.)
5. 사용자에게 매우 익숙한 데이터에는 드롭다운 박스를 피한다. 예를 들어 생년월일의 일, 월, 연도가 해당된다. 이러한 정보는 사용자의 손에 거의 자동으로 입력되는 경우가 많으며, 긴 메뉴에서 해당 옵션을 찾아야 하는 것은 번거롭고 이전 지침을 위반하며, 사용자의 부담을 더 늘릴 수 있다.
6.드롭다운이 열려 있을 때 메뉴 라벨이나 설명을 항상 표시하도록 한다. 메뉴 제목은 사용자가 무엇을 선택하고 있는지 상기시켜 범위와 방향을 제공한다. 메뉴가 열릴 때 라벨이 가려지거나 사라지면, 사용자는 작업을 수행하기 전에 무엇을 선택해야 하는지 기억해야 한다. 또한, 사용자의 작업을 언제든 방해할 수 있는 중단 상황도 고려해야 한다.
7. 데스크톱에서는 글로벌 내비게이션 옵션을 드롭다운 메뉴에 넣지 않는다.
사이트의 최상위 카테고리를 숨기면 사용자 성공에 부정적인 영향을 미칠 수 있다.
8. 드롭다운 내 탐색을 위해 키보드 입력을 지원한다.
드롭다운(메뉴와 박스 모두)은 마우스 입력뿐 아니라 키보드 입력도 지원해야 한다.
• 드롭다운 메뉴에서는 **접근 키(access key)**를 사용하여 사용자가 마우스를 쓰지 않고도 보이는 옵션을 빠르게 선택할 수 있어야 한다.
• 드롭다운 박스에서는 사용자가 특정 글자를 입력하면, 해당 글자로 시작하는 옵션으로 빠르게 이동할 수 있어야 한다.
이러한 대체 입력 방법은 긴 드롭다운 목록으로 인한 문제를 완화하고, 시각장애 사용자 접근성도 향상시킨다.
⸻
결론
얼마 전, 웹 사용성 방법론에 대한 발표의 일환으로 소규모 사용자 테스트를 진행했다.
등록 페이지에서, 테스트 참가자는 주소를 입력해야 했는데, 거리 이름(street name) 입력 필드는 텍스트 필드였지만, 거리 유형(street type: Avenue, Boulevard, Court, Drive 등)은 드롭다운 메뉴였다.
결과는? 사용자는 항상 해오던 대로 전체 주소를 텍스트 필드에 입력했다. 드롭다운 메뉴가 갑자기 나타나면서 놀랐고, 이미 입력한 주소 일부를 삭제하고 다시 입력해야 했다.
수백 명 앞에서 진행한 이 작은 연구는, 단 한 명의 사용자를 대상으로 한 테스트만으로도 중요한 사실을 명확히 보여줄 수 있다는 것을 보여준다. 이러한 혼란을 직접 보면, 몇 번의 키 입력을 줄여주기 위해 “도움이 되는” 드롭다운 메뉴를 사용하는 것이 도움이 되기보다 해가 될 수 있다는 사실을 깨닫게 된다.
따라서 자신의 디자인에 이러한 지침을 적용하면 사이트 내비게이션을 개선하고, 작업 성공률을 높일 수 있다.
정확한 내용은 아래 원문 링크를 확인해주세요
https://www.nngroup.com/articles/drop-down-menus/
