다단계 메뉴 디자인 모범 사례

탐색 및 검색 가능성은 사용자 경험 디자인의 핵심 측면입니다. 사용자가 원하는 곳으로 이동하거나 필요한 것을 찾을 수 없으면 좌절감을 느끼고 다른 곳을 찾기로 결정할 수 있습니다. 특히 복잡한 정보 아키텍처가 있는 웹 사이트에서 다단계 메뉴는 탐색 및 검색 가능성을 개선하여 제품 신뢰를 높이고 전환을 높이는 효율적인 웹 경험을 제공하는 효과적인 방법입니다.

사용되는 제품과 장치가 매우 다양하기 때문에 완벽한 다단계 메뉴를 제공하는 만능 솔루션은 없습니다. 그러나 모든 화면 크기에서 탐색 및 찾기를 향상시키는 다단계 메뉴를 구축하는 데 도움이 되는 경험적 규칙이 있습니다.

모든 크기의 화면을 위한 디자인 팁

좋은 다단계 메뉴는 명확하고 직관적인 방식으로 정보를 제공하여 사용자가 빠르게 이동해야 하는 곳으로 이동해야 합니다. 크기별 지침을 살펴보기 전에 모든 메뉴에 적용되는 몇 가지 사례를 살펴보겠습니다.

2단계 이하의 하위 메뉴를 사용하십시오. 2개 이상의 하위 메뉴 수준은 사용자를 혼란스럽게 하고 압도할 수 있습니다. 탐색을 상대적으로 평평하게 유지하면 사용자의 검색 가능성이 향상되고 사용자의 위치를 ​​기억하는 데 걸리는 인지 부하가 ​​줄어듭니다. 사이트의 페이지 구조가 깊다면 밀접하게 관련된 페이지의 상단에 로컬 탐색 메뉴를 추가하는 것을 고려하십시오. 예를 들어, 복잡한 비즈니스 지원 제품을 디자인하는 Zoho는 각 제품 페이지 상단, 메인 메뉴 바로 아래에 제품별 로컬 메뉴를 배치했습니다. 상단의 메인 메뉴는 Zoho의 핵심 제품을 나열하는 반면, 로컬 메뉴는 사용 사례 및 가격과 같은 더 자세한 정보가 있는 페이지에 대한 액세스를 제공합니다.

아이콘으로 하위 메뉴에 플래그를 지정합니다. 사용 가능한 하위 메뉴가 있을 때 항상 명확하게 하여 사용자의 기대치를 관리합니다. 익숙한 선택에는 작은 아래쪽 각도 아이콘 또는 삼각형 아이콘이 있습니다. 또한 하위 메뉴가 열려 있을 때 포인터 아이콘을 뒤집는 것을 고려하십시오.

정보를 직관적으로 구성합니다. 정보의 계층 구조가 사용자의 멘탈 모델과 일치하는지 확인하십시오. 예를 들어 전자 상거래 사이트에서 쇼핑객이 상품을 브랜드 또는 상품 유형별로 정리할 것으로 기대할 가능성이 더 높은지 여부를 고려하십시오. 사용자가 "신발" 카테고리를 클릭하면 하위 메뉴에 운동화, 샌들 및 부츠 옵션이 표시되기를 기대합니까? 아니면 매장에서 취급하는 모든 신발 브랜드를 나열하는 하위 메뉴가 표시되기를 기대합니까? 사용자 연구와 경쟁업체 연구를 모두 살펴보면 이를 명확하게 알 수 있습니다.

사용자가 항상 자신이 어디에 있는지 확인하십시오. 항상 사용자가 있는 페이지에 해당하는 기본 메뉴의 링크를 강조 표시하십시오. 현재 페이지가 하위 메뉴에 있는 경우 하위 메뉴 링크와 주 메뉴의 상위 항목도 강조 표시합니다. 예를 들어, 운전 면허증을 갱신하기 위해 정부 웹사이트를 사용하는 사람이 주 메뉴의 "주민" 링크에서 하위 메뉴의 "운전자 서비스" 링크로 이동한 다음 갱신 양식이 있는 페이지로 이동하는 경우 " 거주자” 및 “운전자 서비스” 링크는 강조 표시된 상태로 유지됩니다.

복사를 간단하게 유지하십시오. 메뉴는 영리한 말장난을 위한 장소가 아닙니다. 링크 레이블에 정보 냄새가 강한지 확인하십시오. 즉, 레이블 이름을 간단하고 설명이 포함되도록 유지하여 사용자가 클릭할 때 무엇을 찾을 수 있는지 바로 알 수 있습니다. 사본이 명확할수록 사용자는 필요한 것을 더 빨리 찾을 수 있습니다.

가독성을 우선시합니다. 간단한 산세리프체를 사용하고 항목 주위에 적절한 간격을 두어 어수선하지 않도록 합니다. 메뉴 뒤에 있는 모든 것을 차단할 수 있을 만큼 배경이 불투명한지 확인합니다. 그러나 사이트의 전반적인 브랜딩을 무시하지 마십시오. 가독성이 우선이지만 메뉴의 스타일이 사이트의 나머지 모양과 느낌을 보완하는지 확인하십시오.

클릭 및 탭하기가 가능하도록 합니다. 미세 운동 조절 장애가 있는 사용자가 메뉴에 액세스할 수 있도록 하려면 Google의 머티리얼 디자인 가이드라인을 따르고 클릭 가능한 요소의 형식을 48 x 48픽셀 이상으로 지정하세요.

데스크탑을 위한 디자인 팁

모바일에 대한 추세가 증가하고 있음에도 불구하고 클라이언트가 완전한 기능을 갖춘 데스크톱 사이트를 필요로 하는 이유는 여전히 많습니다. 예를 들어, 대학이나 금융 기관의 웹 사이트와 같은 모바일 사이트에서 가능한 것보다 더 많은 정보를 온라인에서 제공해야 할 수 있습니다. 또는 연구에 따르면 사용자가 단순히 데스크톱에 더 많이 의존하는 것으로 나타났습니다.

데스크탑 메뉴는 스캔하기 쉽고 명확한 상호 작용을 제공하며 당연히 반응해야 합니다. 또한 재방문자에게 직관적인 경험을 제공하기 위해 모바일 사이트와 최대한 일관성을 유지해야 합니다.

메뉴는 마우스 오버가 아니라 클릭 시 열려야 합니다. 가장 기본적인 결정 중 하나는 사용자가 사이트 메뉴에 액세스하는 방법입니다. 단순히 상위 항목(카테고리 이름) 위로 포인터를 가져가면 메뉴가 표시될 것입니까 아니면 사용자가 클릭해야 합니까?

호버 접근 방식이 널리 사용되지만 클릭하여 열기는 메뉴가 모든 장치에서 안정적이고 직관적으로 작동하도록 하는 가장 좋은 방법입니다. 클릭 접근 방식을 사용하면 웹사이트가 기존 컴퓨터 모니터와 터치스크린 모두에서 더 일관되게 작동할 수 있으며 다음을 포함하여 호버 접근 방식에서 발생하는 많은 좌절을 피할 수 있습니다.

• 좁은 호버 터널. 호버 터널은 메뉴를 열어 놓은 상태에서 마우스가 탐색해야 하는 경로입니다. 너무 좁으면 사용자가 원하는 링크에 도달하기 전에 메뉴가 사라질 수 있습니다.
• 우연한 열림. 호버 메뉴는 사용자가 페이지의 다른 위치로 이동하는 도중 탐색을 시도하는 경우 실수로 열리기 쉽습니다. 짧은 지연을 설정하면 해당 문제가 해결되지만 사용자가 메뉴를 열려고 할 때 좌절감을 유발할 수 있습니다.
• 터치스크린의 일관성 없는 UX. 호버 메뉴는 터치스크린에서 작동하지 않습니다. 터치스크린을 감지하고 탭하여 여는 방식으로 전환하려면 코드 수정이 필요합니다. 랩톱과 태블릿 사이의 경계가 점점 모호해짐에 따라 이러한 해결 방법은 쓸모없게 될 수 있습니다.
• 클릭 가능한 항목에 대한 질문입니다. 호버 메뉴를 사용하면 사용자는 클릭을 시도할 때까지 상위 링크를 클릭할 수 있는지 여부를 항상 알 수 없습니다. 그것은 직관적인 것과 반대입니다.
• 접근성. 호버 메뉴는 스크린 리더를 사용하거나 키보드를 통해 탐색하는 사용자에게 문제를 일으킬 수 있습니다.

올바른 레이아웃 선택: 드롭다운 대 메가 메뉴. 데스크탑 사이트가 전통적인 메뉴 레이아웃(페이지 상단에 위치한 수평 메뉴 모음)을 사용하는 경우 고려할 수 있는 두 가지 유형의 하위 메뉴, 즉 표준 단일 열 드롭다운 또는 다중 열 메가 메뉴가 있습니다.

상위 카테고리에 8개 미만의 링크가 포함된 경우 드롭다운 사용을 고려하십시오. 드롭다운 메뉴가 세로 스크롤이 필요할 만큼 길면 정보를 다르게 구성하는 것을 고려해야 합니다. 아마도 메가 메뉴로 또는 상위 범주를 구체화하여 정보를 구성하는 것입니다.

메가 메뉴는 일반적으로 브라우저의 너비를 확장할 수 있는 넓은 레이아웃을 사용하는 중첩 메뉴 유형입니다. 하위 메뉴에 열로 그룹화할 수 있는 다양한 링크가 포함된 경우 이 유형의 메뉴를 사용해야 합니다. 일반적으로 대형 전자 상거래 사이트에서 이와 같은 메뉴를 볼 수 있습니다.

메가 메뉴를 디자인할 때 다음 사항을 고려하십시오.

• 정보를 더 쉽게 스캔할 수 있도록 이미지 또는 아이콘을 추가합니다.
• 그룹 관련 페이지에 헤드라인을 추가합니다.
• 범주 이름이 자명하지 않은 경우 설명을 추가합니다.

메가 메뉴는 모바일에서 읽고 탐색하기 어려울 수 있지만 때로는 더 큰 화면에서 UX가 개선되어 모바일 장치에 대한 정보를 재구성하기 위해 추가 작업을 수행할 가치가 있습니다.

명확한 호버 상태를 추가합니다. 클릭하여 열 수 있는 메뉴를 사용하더라도 모든 클릭 가능한 요소에 대한 명확한 호버 상태를 포함하여 상호 작용을 만족스럽게 만들고 사용자에게 링크가 활성화되어 있음을 안심시킵니다. 클릭 가능한 영역의 배경을 약간 더 어둡게 만들어 호버 상태를 나타낼 수 있습니다. 마우스 오버 영역이 클릭 가능한 영역과 일치하는지 확인하십시오. 테스트 결과 사용자에게 더 많은 지침이나 컨텍스트가 필요한 것으로 나타나면 중요한 내용을 차단하지 않는 한 더 설명적인 레이블 이름이나 도구 설명을 추가하는 것이 좋습니다.

클릭하여 하위 메뉴를 닫습니다. 사용자가 다른 곳을 클릭하거나 다른 하위 메뉴를 열 때 메뉴를 닫아 직관적으로 유지하십시오. 이것이 양식에서 드롭다운 입력 필드가 작동하는 방식이므로 대부분의 사용자는 이것이 익숙할 것입니다.

데스크탑에서 키보드 탐색을 활성화합니다. 모든 사람이 마우스를 사용하여 탐색하는 것은 아니므로 메뉴에서는 사용자가 키보드만 사용하여 탐색할 수 있어야 합니다. 즉, 사용자가 한 눈에 볼 수 있도록 모든 링크에 뚜렷한 초점 상태가 있어야 합니다. 일반적으로 더 어두운 색상의 프레임은 초점이 맞춰진 상태를 나타내는 데 적합합니다.

모바일 화면을 위한 디자인 팁

아직 모바일 우선 디자인을 하고 있지 않다면 핸드헬드 장치에 맞게 메뉴를 최적화해야 합니다. 전통적인 메뉴 레이아웃은 매우 작은 화면에서 잘 작동하지 않습니다. 단순히 데스크탑 메뉴 표시줄을 축소하면 아무도 읽을 수 없습니다. 이 지침은 작은 화면으로 성공적으로 전환하는 데 도움이 됩니다.

메인 메뉴를 단순화합니다. 스마트폰 화면이 너무 작기 때문에 데스크탑 메뉴에서 찾을 수 있는 정보의 대부분은 처음에는 숨겨져 있어야 합니다. 주 메뉴 표시줄은 매우 단순해야 하지만 찾기 쉽도록 가장 중요한 링크를 표시하는 것이 좋습니다. 메뉴바를 화면 하단이나 상단에 부착할 수 있습니다.

메뉴 트리거를 추가합니다. 모바일 메뉴의 전체 또는 일부가 숨겨져 있을 수 있으므로 사용자는 이를 찾을 수 있는 방법이 필요합니다. 메뉴 표시줄이나 손이 닿기 쉬운 플로팅 버튼에 햄버거 아이콘을 추가하는 것은 많은 사용자가 인식할 수 있는 인기 있는 솔루션입니다. 그러나 햄버거 메뉴가 유일한 선택은 아닙니다. 예를 들어 나이가 많은 사용자를 위해 디자인하는 경우 "메뉴"라는 단어가 있는 상자를 사용하는 것이 좋습니다. 또는 사이트의 기능을 더 눈에 띄게 만들고 싶다면 대신 상단이나 하단의 탭 메뉴에 표시할 수 있습니다.

메뉴를 사이드바에 넣습니다. 모바일 메뉴를 디자인하는 방법에는 여러 가지가 있습니다. 어떤 상황에서도 작동하는 전체 너비 레이아웃을 사용할 수 있습니다. 링크가 몇 개 없을 때 가장 좋은 하단 서랍. 또는 하위 메뉴가 없는 작은 메뉴를 위한 미래 지향적인 옵션인 원형 코너 메뉴입니다. 좋은 옵션은 어둡고 반투명한 배경의 사이드바를 사용하여 페이지 콘텐츠를 차단하여 방해 요소를 제거하고 사용자가 쉽게 탭하여 닫을 수 있도록 하는 것입니다. 또한 이상한 경험을 피하기 위해 왼쪽에서 슬라이드 애니메이션을 사용하는 것이 좋습니다. 사이드바 및 하단 서랍 메뉴의 경우 메뉴가 세로로 스크롤 가능하여 작은 화면이나 가로 모드에서 잘리는 것이 없는지 확인하십시오.

사용자가 메뉴를 쉽게 닫을 수 있습니다. 사용자는 직관적으로 메뉴를 눌러 메뉴를 닫을 수 있지만 X 버튼을 추가하는 것도 고려할 수 있습니다. 햄버거 아이콘을 X로 바꾸거나 메뉴의 오른쪽 상단에 추가할 수 있습니다.

단일 하위 메뉴에 확장 섹션을 사용합니다. 메뉴에 한 수준의 하위 메뉴만 있는 경우 확장 섹션을 사용하는 것이 좋습니다. 상위 항목 아래로 확장하고 명확성을 위해 다른 배경색을 사용할 수 있습니다. 사용자가 동시에 여러 하위 메뉴를 확장하도록 허용할 수도 있습니다. 하위 메뉴를 사용할 수 있음을 나타내기 위해 상위 항목의 오른쪽에 아래쪽 각도 또는 삼각형 아이콘을 사용하는 것이 좋습니다.

메가 메뉴와 여러 하위 메뉴를 겹치는 메뉴로 교체합니다. 하나 이상의 하위 메뉴를 확장하거나 메가 메뉴를 재구성해야 하는 경우 중복 접근 방식을 선택하십시오. 상위 메뉴 아래 또는 옆에 하위 메뉴를 확장하는 대신 하위 메뉴가 상위 메뉴를 대체하도록 하십시오. 이 접근 방식을 사용하면 첫 번째 수준을 제외한 모든 패널에 "뒤로" 링크를 포함해야 합니다. 최상위 메뉴의 경우 상위 항목에 대해 직각 아이콘 또는 오른쪽 화살표를 사용하는 것을 고려하십시오.

하위 메뉴를 미리 엽니다. 데스크탑에서는 현재 페이지와 그 상위 페이지를 강조 표시하는 것이 도움이 됩니다. 작은 화면에서는 한 단계 더 나아가는 것을 고려하십시오. 사용자가 탭하여 주 메뉴를 열고 현재 보고 있는 페이지가 하위 메뉴 내에 있는 경우 하위 메뉴도 자동으로 여는 것을 고려하여 사용자가 나머지 메뉴 항목에 상대적인 위치를 이해할 수 있습니다.

명확하고 일관성 있게 유지

탐색은 고객 경험의 중요한 구성 요소입니다. 사용자는 물건 찾기에 참여하거나 필요 이상으로 메뉴를 탐색하는 데 더 많은 시간을 보내고 싶어하지 않습니다. 필요한 것을 쉽게 찾을 수 없는 경우 지원 전화로 고객의 리소스를 묶거나 더 심하게는 다른 곳에서 비즈니스를 수행할 수 있습니다.

잘 디자인된 다단계 메뉴는 복잡한 정보 아키텍처를 가진 모든 웹사이트의 핵심 구성 요소입니다. 이러한 지침이 사용자 연구 및 테스트를 대체해서는 안 되지만 다양한 사용 사례에서 도움이 될 것입니다.

Toptal 블로그에서 더 읽어보기:

• 정보 아키텍처에 대한 종합 가이드
• 반응형 디자인: 모범 사례 및 고려 사항
• 모바일을 위한 정보 아키텍처 원칙(인포그래픽 포함)