답답한 디자인 패턴: 메가 드롭다운 호버 메뉴

복잡한 웹 사이트는 종종 복잡한 탐색에 의존합니다. 웹사이트에 수천 페이지가 있고 종종 마이크로 웹사이트와 수백 개의 하위 섹션이 결합되면 결국 탐색이 깊고 광범위해집니다. 그리고 이러한 복잡한 다단계 탐색 을 사용하여 다양한 옵션을 표시하려면 상당한 공간이 필요합니다. 많은 청중을 수용하고 진입점이 많은 대형 전자 상거래 소매업체와 대기업 사이트를 생각해 보십시오.

이러한 복잡성을 처리하는 일반적인 방법이 고객을 많은 양의 탐색에 빠르게 노출시키는 것이 당연합니다. 이것이 바로 메가 드롭다운 이 웹상에서 어느 정도 기관이 된 이유입니다. 메가 드롭다운 은 기본적으로 사용자의 작업에 표시되는 큰 오버레이입니다. 일반적으로 링크, 버튼, 썸네일 및 때로는 자체적으로 중첩된 드롭다운 및 오버레이가 혼합된 백을 포함합니다.

수십 년 동안 이러한 종류의 탐색에 대한 일반적인 동작은 마우스 를 가져갈 때 메뉴를 여는 것입니다. 그리고 수십 년 동안 이 패턴에 대한 일반적인 사용자의 불만은 하위 탐색이 열리고 닫히는 방법과 시기에 대한 확실성과 제어가 절대적으로 부족하다는 것이었습니다.

때로는 하위 메뉴 가 예기치 않게 나타나고 때로는 갑자기 사라지고 때로는 마우스 포인터가 이미 페이지의 매우 다른 부분 또는 다른 페이지에 있음에도 불구하고 잠시 화면에 머물러 있습니다.

메가 드롭다운 호버 메뉴가 짜증나는 이유는 무엇입니까?

메가 드롭다운이 사용하기 번거로울 수 있는 주된 이유 는 의도와 기대가 일치하지 않기 때문입니다. 호버 메뉴를 사용하여 마우스 동작을 추적하여 특정 의도를 추론하고 조치를 취하려고 하지만 고객은 페이지에 액세스할 때 매우 다른 목표와 매우 다른 제한 사항을 가질 수 있습니다.

고객의 행동은 일반적으로 예측할 수 없습니다. 비록 우리의 분석이 더 오랜 기간 동안 수집되고 정규화된 데이터 포인트에 대해 약간 다른 이야기를 할 수 있다고 하더라도 말입니다. 우리는 행동을 정확하게 예측할 수 있는 경우가 거의 없습니다.

일반적으로 탐색하는 일반적인 시나리오는 다음과 같습니다.

1. 고객은 카테고리 링크를 목표로 하고 해당 카테고리 의 하위 탐색 항목을 탐색하기 위해 직접 이동합니다.
2. 고객이 화면의 대상을 향해 마우스를 움직이고 있지만 마우스가 이동해야 하는 궤적은 메가 드롭다운을 여는 탐색 링크를 포함합니다 .

그러나 고려해야 할 다른 상황도 많이 있습니다. 몇가지 말하자면:

1. 고객이 검색 자동 완성을 입력하는 동안 메가 드롭다운 옵션을 찾고 싶어 합니다. 그렇게 하려면 계속해서 메가 드롭다운을 다시 열거나 나란히 배치된 별도의 탐색 탭을 사용해야 합니다.
2. 고객은 트랙패드(또는 마우스)를 사용 하여 대형 보조 디스플레이를 작동할 수 있으므로 포인터 움직임이 느리고 갑작스럽고 정확하지 않을 수 있습니다. 이로 인해 사용자가 페이지 상단의 CTA 또는 장바구니로 이동할 때 일시 중지할 때마다 메가 드롭다운이 무의식적으로 열리게 됩니다.
3. 고객은 카테고리 페이지 를 열려고 하여 카테고리 링크로 이동하여 클릭하지만 메가 드롭다운이 지연되어 나타나 깜박임을 경험합니다.
4. 메가 드롭다운 내 중첩된 하위 메뉴를 사용하여 고객은 현재 있는 카테고리 내에서 유사한 항목을 탐색하기를 원하지만 중첩으로 인해 메가 드롭다운을 계속해서 다시 열어야 하고 여행을 해야 합니다. 같은 호버 터널이 계속 반복됩니다.
5. 창의 크기를 조정하려고 할 때 창의 오른쪽 가장자리에 맞추려고 할 때 마우스 커서를 너무 가깝게 움직였기 때문에 호버 메뉴가 계속 표시되는 상황을 상상해 보십시오.
6. 사용자가 페이지의 콘텐츠를 평가하기 위해 천천히 아래로 스크롤하기 시작 하지만 메뉴가 계속 팝업됩니다. 그리고 사용자가 메가 드롭다운의 내용을 읽기 위해 커서를 치울 때마다 메뉴가 실수로 사라집니다.

문제는 이러한 모든 의도와 이러한 모든 사고를 지원 해야 하지만 동시에 이러한 경우에 대해 짜증나고 실망스러운 경험을 만들지 않도록 해야 한다는 것입니다. 물론 디자이너이자 개발자로서 우리는 이 문제를 해결하기 위해 여러 기술을 발명했습니다.

호버 진입/퇴장 지연

첫 번째 솔루션 중 하나이자 여전히 가장 일반적인 솔루션 중 하나는 호버 진입/종료 지연을 도입하는 것입니다. 메뉴 가 열리지 않고 너무 일찍 닫히지 않도록 해야 합니다. 이를 달성하기 위해 일반적으로 약 0.5초의 지연을 도입합니다. 이는 고객에게 다음을 위해 약 0.5초의 버퍼 를 제공함을 의미합니다.

• 필요한 경우 원격 목표로 궤적을 교차하거나
• 메가 드롭다운 카테고리 링크에 남아 탐색을 탐색할 의사가 있음을 나타냅니다.
• 실수로 메가 드롭다운의 경계를 벗어난 경우 실수를 수정합니다.

즉, 고객이 메가 드롭다운 오버레이 내에 있는 한 계속 표시됩니다. 그리고 고객이 최소 0.5초 동안 하위 탐색 오버레이 외부로 마우스 커서를 이동하면 오버레이를 숨깁니다.

페이지가 실수로 깜박이 는 문제를 해결하는 동안 사용자가 메가 드롭다운을 0.5초 이상 떠난 경우 지연 이 발생합니다. 결과적으로 전체 사이트에서 메가 드롭다운과의 모든 상호 작용이 느려집니다. 불행히도, 특히 탐색을 많이 사용하는 경우 매우 빠르게 눈에 띄게 됩니다.

일부 구현은 메가 드롭다운의 출현을 덜 갑작스럽게 만들기 위해 페이드 인/페이드 아웃 전환을 추가하지만 실제로는 진입/종료 지연이 0.8-0.9초로 증가하여 더 눈에 띄게 도입됩니다. 지연. 그 예는 100ms 페이드 인 지연과 300ms 페이드 아웃 전환이 있는 ADAC.de입니다. (단, 메가 드롭다운의 다른 범주 간에 전환할 때는 전환이 적용되지 않습니다.)

분명히 오버레이가 더 오래 표시될수록 오버레이를 의도적으로 벗어나려는 사람들에게 더 가혹한 처벌을 가합니다. 실제로 이것은 사용자의 동작과 UI의 응답 사이에 피상적인 타임아웃을 도입함에 따라 문제가 됩니다.

용서하는 마우스 이동 경로: 궤적 삼각형

지연을 도입하는 대신 고객이 여행하게 될 경로에 대해 더 관대해지도록 노력할 수 있습니다. 마우스 움직임은 본질적으로 부정확하기 때문에 좌절을 최소화하기 위해 좁은 호버 터널 을 피하고 이동 통로를 더 크게 만들 수 있습니다.

예를 들어, 마우스 포인터의 현재 위치를 메가 드롭다운 영역의 가장자리와 연결하는 궤적 삼각형 을 만든 Amazon의 삼각형 기술을 사용할 수 있습니다. 해당 영역이 오른쪽의 범주 옆에 표시되어야 하는 경우(아래 이미지에 표시된 대로) 마우스 포인터를 범주가 나열되는 컨테이너의 오른쪽 상단 및 오른쪽 하단 가장자리에 연결합니다.

사용자가 삼각형 또는 전체 메가 드롭다운 영역 내에 있는 한 오버레이는 계속 표시됩니다. 사용자가 삼각형 외부 로 이동하도록 선택하면 메가 드롭다운 오버레이의 콘텐츠가 그에 따라 변경됩니다. 물론 사용자가 카테고리 목록 외부로 완전히 이동하면 즉시 완전히 사라집니다.

Chris Coyier는 "Aim-Aware Menus"에 대한 Alexander Popov의 바닐라 JavaScript 데모와 함께 드롭다운 메뉴에 대한 자신의 게시물에서 이 기술의 기술적 복잡성을 강조합니다.

이 기술을 사용하여 하위 탐색이 갑자기 사라졌다가 다시 나타나는 마찰을 최소화합니다 . 그러나 카테고리 링크가 서로 너무 가깝게 위치하거나 더 큰 버튼 위로 마우스를 가져가서 호버 메뉴를 표시하는 경우 효과가 없을 수 있습니다. SVG 경로 출구 영역으로 조금 더 나은 작업을 수행할 수 있습니다.

SVG 경로 출구 영역

이전 기술로 궤적 삼각형을 계산할 때 때때로 우리는 마우스 포인터의 정확한 위치를 추적할 뿐만 아니라 항상 포인터가 움직일 때마다 삼각형을 다시 계산합니다 . 전체 SVG 오버레이 영역 을 한 번 계산하고 항상 삼각형을 다시 계산하지 않고도 마우스 포인터가 그 안에 있는지 여부를 추적하여 전략을 개선할 수 있습니다. 그 좋은 예는 화면에서 탐색 항목의 위치를 ​​기반으로 SVG를 사용하여 영역을 동적으로 그리는 Hakim el Hattab의 구현입니다.

Hakim의 솔루션은 실제로 반응하므로 하위 탐색이 화면에 맞지 않으면 전체 너비 또는 높이로 표시 되는 기본 탐색 항목 옆에 떠 있게 됩니다. SVG 경로 영역은 그에 따라 다시 계산되지만 사용자가 세로 또는 가로로 스크롤하는 경우에만 해당됩니다. 메뉴 패턴의 Hakim 디버그 보기 모드에서 작동하는 기술의 작동 데모를 볼 수 있습니다.

이 옵션은 정확하고 호버 지연에서 본 지연을 완전히 제거하지만 고객이 실수로 모든 탐색 항목에서 메가 드롭다운을 열도록 요청하는 큰 범주 목록을 가로질러 이동할 때 깜박임을 유발합니다.

다시 말하지만, 문제의 근본 원인은 고객이 메가 드롭다운을 열고 닫는 시기를 제어 할 수 없으며 이러한 메뉴가 언제 나타나거나 사라질지 종종 이해하지 못한다는 것입니다. 이러한 예측 가능성의 부족은 종종 실수와 좌절로 이어집니다. 그러나 때때로 메가 드롭다운에는 더 숨겨진 접근성 문제가 있습니다.

Hover에서 열리는 메가 드롭다운의 함정

위에서 언급했듯이 위에 나열된 모든 기술은 동일한 목표를 공유합니다. 그들은 마우스 움직임의 속도, 단일 영역에 머무르는 시간 또는 화면의 정확한 위치에 대한 몇 가지 관찰에 의존하여 탐색 메뉴를 열고 닫으 려는 사용자의 의도를 예측 하려고 시도합니다. 이러한 예측 은 일부 고객의 경우 어느 시점에서 실패할 것이며 이에 대해 할 수 있는 일은 많지 않습니다.

호버에서 열리는 메가 드롭다운에는 많은 접근성 문제가 있습니다. 분명히 우리는 키보드 전용 사용자를 위한 메가 드롭다운 내 탐색을 지원해야 하며 항목이 화면 판독기에도 적절하게 발표되도록 해야 합니다. 그러나 일반적인 레이아웃 측면에서도 메가 드롭다운이 배치되는 위치에 주의해야 합니다.

메가 드롭다운으로 인해 검색이 중단됨

중요한 기능이 메가 드롭다운 탐색에 충분히 가깝게 표시되면 일반적으로 많은 문제와 불만이 발생합니다. 예를 들어, 검색 막대가 메가 드롭다운 영역 위에 표시 되면 결국 엄청난 마찰과 좌절을 초래할 것입니다.

충분히 긴 호버 진입/퇴장 지연이 사용되지 않는 한 메가 드롭다운 오버레이는 아래의 Sauraus.com의 경우와 같이 항상 검색과 검색 결과 사이에 방해가 됩니다. 사용자가 검색 창에서 결과를 향해(그리고 뒤로) 이동할 때마다 메가 드롭다운이 방해가 됩니다.

지연과 함께 나타나는 여러 하위 탐색

호버 지연 시 여러 하위 탐색 이 차례로 열리면 경험이 번거로울 것입니다. 실행 중인 불행한 예는 아래 Vodafone 웹사이트입니다. 이 경우 모든 탐색 항목이 카테고리에 대한 독립형 링크 역할도 하는 경우(메가 드롭다운을 여는 것 외에도) 웹사이트 전체에서 엄청난 클릭 이 예상됩니다.

위의 예에서 4개의 탐색 수준이 서로 아래에 표시되고 그 중 2개는 300ms 전환 으로 호버링 시 열립니다. 동시에 각 카테고리 제목은 카테고리 페이지로 연결되는 링크이기 때문에 사용자는 카테고리 페이지로 바로 이동할 수도 있습니다. 그러나 일단 클릭하고 새 페이지가 표시되기를 기다리는 동안 호버 메뉴는 잠시 반쯤 깨진 모양이 됩니다. 종종 고객이 등록할 적절한 보기로 전환할 시간이 충분하지 않습니다.

여기에 사용자의 약간 오래된 장치의 메모리 또는 처리 문제, 몇 가지 무거운 브라우저 확장 및 백그라운드에서 실행 중인 바이러스 백신 검사를 추가하면 전반적인 경험이 금세 견딜 수 없게 됩니다.

또한 4단계 탐색은 3단계 탐색이 이미 열려 있는 경우 hover 시에만 나타나고 3단계 탐색은 2단계 탐색이 이미 열려 있는 경우에만 나타나므로 4단계 페이지 간 이동을 위해 레벨에서 사용자는 탐색을 계속해서 다시 열어야 하고 이전에 클릭한 위치를 기억하여 4번째 레벨로 터널링해야 합니다.

우리는 기본적으로 앞서 이야기 한 지연 및 호버 터널 문제를 곱하여 항상 사용자가 탐색이 나타날 때까지 기다리게 하고 탐색 이 나타나면 호버 코리더 내에서 매우 정확하도록 요청합니다. 거기에서 좌절감이 오는 것입니다.

이러한 종류의 복잡한 탐색을 처리해야 하는 경우 두 가지가 아닌 하나의 호버 메뉴만 사용할 때 문제가 사라지는지 테스트해 볼 가치가 있습니다. 그 메뉴는 약간 더 크고 열 안에 모든 옵션을 포함합니다. 또는 가능하면 모든 범주에 대해 해당 범주 내의 모든 탐색 옵션을 영구적 탐색 모음 (사이드바 또는 고정 상단 표시줄)으로 표시하는 것을 고려하십시오. 일반적으로 이러한 모든 문제를 완전히 제거해야 합니다.

너무 많은 일을 하는 카테고리 제목

이전에 보았듯이 카테고리 제목에는 두 가지 다른 기능 이 있는 경우가 있습니다. 한편으로 각 카테고리 제목은 카테고리 페이지에 연결되어 고객이 클릭하여 페이지로 바로 이동할 수 있습니다. 반면에 메가 드롭다운 오버레이를 열 수도 있습니다. 따라서 사용자가 충분한 시간 동안 제목 위로 마우스를 가져가면 메가 드롭다운이 열리지만 사용자가 이미 링크를 클릭했을 수 있으며 이로 인해 깜박임이 발생합니다. 고객의 경우 인터페이스가 실제로 힌트를 제공하지 않으면 올바른 기대치를 갖기가 어렵습니다.

이 문제를 해결하기 위한 몇 가지 옵션이 있습니다.

1. 카테고리 제목이 링크임을 나타내려면 해당 제목에 밑줄 을 긋는 것이 도움이 될 수 있습니다.
2. 카테고리 제목과 드롭다운을 더 명확하게 구분하려면 세로 구분 기호(예: 세로선)와 아이콘(갈매기 모양)을 추가하고,
3. 메가 드롭다운만 여는 카테고리 제목을 그대로 두고 메가 드롭다운 오버레이 내 에서 카테고리의 "홈" 섹션에 대한 링크를 추가합니다 . 대신 눈에 띄는 "모든 옵션 보기" 버튼이 될 수도 있습니다(위의 Guardian 예 참조).

위에서 언급했듯이 때로는 메뉴가 오버레이를 여는 반면 카테고리 제목은 링크임을 나타내는 데 사용되는 추가 아이콘 을 볼 수 있습니다. 사용성 테스트에서 아이콘이 있을 때마다(어떤 아이콘이 있는지는 중요하지 않음) 사용자는 종종 아이콘을 클릭할 때 표시되는 작업과 표시되는 작업을 정신적으로 구분하는 것을 확인했습니다. 카테고리 제목을 클릭하여

전자의 경우 일반적으로 드롭다운이 열릴 것으로 예상하고 후자의 경우 카테고리 페이지가 나타날 것으로 예상합니다. 더 중요한 것은 메뉴 가 가리키기보다는 탭/클릭 으로 열릴 것으로 기대하는 것 같습니다.

Mailchimp는 위에서 설명한 대부분의 문제를 피하는 메가 드롭다운의 좋은 예이며 카테고리 제목은 메가 드롭다운을 여는 역할만 합니다. 드롭다운은 키보드 사용자 가 :focus 스타일로 액세스할 수 있습니다. 선택되면 각 카테고리가 밑줄 이 그어진 것으로 강조 표시되며, 특히 밑줄이 탐색 상단의 "가격 책정" 링크와 정확히 동일하기 때문에 제목이 링크로 바뀌었다고 생각하는 사람들이 있을 수 있습니다. 아마도 배경색으로 강조 표시하면 좀 더 방탄이 될 것입니다. 호버 메뉴에 대해 고려할 훌륭한 참조 예입니다.

일반적으로 여러 기능으로 카테고리 제목에 과부하가 걸리는 것을 피하는 것이 좋은 생각인 것 같습니다. 이것은 메가 드롭다운 메뉴뿐만 아니라 아코디언이나 툴팁을 포함한 거의 모든 메뉴에 적용됩니다. 전체 영역 은 탭하거나 클릭할 때 탐색 옵션을 표시하는 확장 역할을 해야 합니다. 대부분의 경우 이 방법이 더 간단하고 덜 답답합니다.

더 나은 메가 드롭다운 디자인: 탭/클릭 메뉴

많은 대기업이 고객을 사이트에서 사용할 수 있는 다양한 옵션에 신속하게 노출하기를 원하기 때문에 메가 드롭다운이 마우스를 가져갈 때 자주 열리는 일반적인 이유 중 하나입니다. 마우스를 가져가면 탐색 옵션이 변경되므로 더 많은 옵션을 더 빠르게 표시할 수 있으며 고객은 더 많은 옵션을 더 빠르게 탐색할 수도 있습니다. 그렇기 때문에 예를 들어 대형 탐색 오버레이가 없는 대형 전자 상거래 소매업체를 상상하기 어렵습니다.

그러나 호버 탐색이 탭/클릭 탐색 으로 대체된 경우 참여 시간과 클릭률이 동일하게 유지되는지(또는 증가하는지) 테스트하는 것이 좋습니다. 사실, 위에 나열된 대부분의 문제는 다음과 같이 하면 쉽게 해결할 수 있습니다. 메가 드롭다운 오버레이는 사용자가 이 특정 작업을 명시적으로 프롬프트할 때만 열리고 닫힙니다. 따라서 마우스 포인터를 추적하거나 호버 진입/종료 지연을 미세 조정할 필요가 없습니다. 게다가 모바일에서는 호버링이 없기 때문에 모바일용 탭/클릭 시 메뉴를 열 수 있는 옵션을 제공해야 하므로 더 큰 화면에서도 이 방식으로 유지할 수 있습니다.

이에 대한 좋은 예는 베를린 유대인 박물관 웹사이트입니다. 상단 탐색 모음은 탭 및 클릭 시 메가 드롭다운 메뉴를 열 뿐만 아니라 아이콘 기반 사이드바 탐색도 열 수 있습니다. 또한 사용자가 오버레이를 능동적으로 열고 닫아야 하기 때문에 선택한 카테고리 를 :focus / :active 스타일로 강조 표시할 수 있습니다.

웹 사이트는 메뉴를 열거나 닫을 수 있음을 나타내는 아이콘을 사용하지 않으며 메뉴 옵션은 별도의 페이지로 연결되는 링크가 아닙니다. 이것은 전반적인 경험을 매우 차분하고 예측 가능하게 만들지만, 호버 메뉴에 비해 탐색 옵션을 노출하는 속도가 느릴 수 있습니다.

그러나 웹 사이트에는 표시할 탐색 옵션이 많지 않기 때문에 매우 잘 작동하는 것 같습니다. 탭/클릭 시 열리는 액세스 가능한 메가 드롭다운에서 작업할 때 염두에 두면 좋은 참조 예 입니다.

탐색이 좀 더 많다면 약간 더 발전된 예가 Allianz.de입니다. 하나의 대형 메가 드롭다운 오버레이를 사용하는 대신 하위 탐색이 더 작은 드롭다운으로 그룹화됩니다. 그러나 메뉴에 항상 각 범주에 대한 모든 옵션이 표시되는 것은 아닙니다. 대신 가장 중요한 옵션 이 강조 표시되며 하단에 모든 옵션을 볼 수 있는 링크가 있습니다. 누락될 수 있는 유일한 세부 정보는 클릭 시 드롭다운 메뉴가 표시됨을 나타내는 갈매기 모양입니다.

모바일에서 메가 드롭다운은 탐색 계층을 나타내기 위해 색상 대비 및 들여쓰기를 잘 선택하는 아코디언 그룹입니다 . 각 아코디언은 한 번에 4개 이상의 탐색 항목을 표시하지 않습니다. 잘 작동하는 복잡한 메가 드롭다운 탐색에 대한 훌륭한 참조 예입니다.

기술적인 구현을 찾고 있다면 In Praise of the Unambiguous Click Menu를 확인할 수 있습니다. 여기에서 Mark Root-Wiley는 접근 가능한 클릭 메뉴를 구축하는 방법을 보여줍니다. 아이디어는 li:hover > ul 및 li:focus-within > ul 을 사용하여 하위 메뉴를 표시하는 CSS 전용 호버 메뉴로 메뉴 구축을 시작하는 것입니다.

그런 다음 JavaScript를 사용하여 <button> 요소를 만들고 aria 속성을 설정하고 이벤트 핸들러를 추가합니다. 최종 결과는 CodePen의 코드 예제와 GitHub 리포지토리로 제공됩니다. 이것은 메뉴를 위한 좋은 출발점이 되어야 합니다.

아코디언 대 오버레이 대 모바일의 분할 메뉴

탭/클릭의 모든 메가 드롭다운이 제대로 수행되는 것은 아닙니다. Target.com은 다중 열 레이아웃을 피하고 한 번에 한 수준의 탐색만 표시하는 액세스 가능한 대형 탐색의 또 다른 흥미로운 예입니다. 모두 탭/클릭으로 여는 것입니다.

드롭다운은 한 번에 하나의 열에만 옵션을 표시하므로 범주 내에서 이동할 때 항상 화면 의 동일한 오버레이 내에서 집중할 수 있습니다. 선택한 모든 섹션이 전체 열을 차지합니다. 경험은 예측 가능하고 차분하지만 다시 한 번 고객은 한 번에 더 적은 탐색을 볼 수 있습니다.

덴마크의 대중 교통 서비스 웹사이트인 Dinoffentligetransport.dk는 대신 여러 열 을 사용합니다. 상단의 탐색은 갈매기 모양 아이콘으로 보완되고 탭/클릭으로도 열립니다.

일부 다른 구현에서는 여러 오버레이가 서로 위에 나타나는 것을 볼 수 있습니다. 사실, Unilever의 경우가 그렇습니다(아래 예). 메가 드롭다운은 탭/클릭 시 열리며 동시에 여러 갈매기 모양이 표시됩니다. 각 갈매기 모양은 무엇을 나타냅니까? 고객이 클릭할 때 무엇을 기대해야 합니까?

"우리 브랜드" 는 별도의 페이지 로 연결되고 그 아래의 각 레이블은 메가 드롭다운 위에 새 탐색 오버레이를 엽니다. "모든 브랜드"에는 밑줄이 표시되지만 나머지 탐색 옵션에는 밑줄이 표시되지 않습니다. 메뉴를 만드는 디자이너의 의도를 엿볼 수 있다. 실제로 "모든 브랜드" 는 링크이고 다른 레이블은 오버레이를 엽니다.

이러한 모든 옵션이 있는 상태 에서 모바일 에서 메가 드롭다운 탐색을 표시하려면 어떻게 해야 합니까? 결과적으로 모바일에서 이러한 메가 드롭다운 오버레이를 그룹화하는 것은 어렵습니다. 일반적으로 다른 레벨을 다르게 강조 표시하고 쉽게 구별할 수 있도록 공간이나 시각적 보조 장치가 충분하지 않습니다. 위의 예에서 우리가 실제로 어떤 페이지에 도착했는지 파악하는 데 시간이 걸릴 수 있습니다.

Dinoffentligetransport.dk에서 볼 수 있듯이 현재 우리가 어떤 수준에 있고 아코디언 방식으로 어떤 옵션이 있는지 이해하는 것이 조금 더 쉽습니다. 그러나 고객을 카테고리 페이지로 유도할 때 각 하위 섹션 내의 링크에 밑줄을 긋는 것이 좋습니다. 또한 전체 범주 표시줄을 클릭할 수 있어야 하고 아코디언을 확장해야 합니다.

위의 예에서 대부분의 경우 한 번에 제한된 양의 탐색 섹션을 표시할 수 있습니다. 그러나 각 섹션의 제목이 비교적 짧다 면 화면을 가로로 분할하여 동시에 여러 레벨을 표시할 수 있습니다. LCFC.com은 이러한 패턴이 실제로 실행되고 있는 좋은 예입니다.

어떤 옵션이 가장 효과적입니까?

내 개인적인 경험에 따르면 모바일에서 메가 드롭다운 구현을 비교할 때 수직 아코디언은 오버레이(단일 열 또는 다중 레이어)보다 빠르고 예측 가능한 것으로 보입니다. 그리고 분할 메뉴 는 아코디언보다 빠르고 예측 가능한 것으로 보입니다.

아코디언과 분할 메뉴가 제공하는 몇 가지 장점 이 있습니다.

• 상위 페이지로 돌아가기 위해 "뒤로" 버튼을 표시할 필요가 없습니다.
• 눈은 이동할 때마다 탐색 메뉴의 상단과 섹션의 하위 탐색 사이를 이동할 필요가 없습니다.
• 고객은 여러 레벨 사이를 더 빠르게 탐색할 수 있습니다. "뒤로"를 여러 번 누르는 대신 관심 있는 아코디언으로 이동할 수 있습니다.
• 고객은 동시에 여러 섹션을 탐색할 수 있습니다(다른 아코디언이 열렸을 때 구현에서 자동으로 하나의 아코디언을 닫지 않는 한). 오버레이로는 불가능합니다.

일반적으로 아코디언과 분할 메뉴가 더 나은 옵션으로 보입니다 . 하지만 내비게이션이 많을 때는 제대로 작동하지 않는 것 같습니다. 각 카테고리에 6-7개 이상의 항목 이 있을 때마다 다른 아코디언 내(또는 별도의 페이지에서) 6-7개 항목 아래에 "모두 찾아보기" 버튼을 추가하거나 대신 오버레이를 사용하는 것이 좋습니다.

따라서 탐색의 양에 따라 분할 메뉴로 시작할 수 있습니다. 그런 다음 실행 가능하지 않은 경우 아코디언으로 이동하고 탐색이 여전히 복잡해지면 결국 아코디언을 오버레이로 바꿉니다.

메가 드롭다운이 결국 필요하지 않을 때

우리는 이전 기사에서 이미 Gov.uk 팀의 작업을 참조했지만 그들의 통찰력은 메가 드롭다운의 맥락에서도 가치가 있습니다. 대규모 다중 레벨 탐색의 경우 팀은 양식 전문가 Caroline Jarrett의 페이지당 한 가지 원칙에 따라 결과를 채택하기로 결정했습니다. Caroline에 따르면 "디자이너의 관점에서 자연스럽게 '함께 가는' 질문은 [...] 사용자를 위해 같은 페이지에 있을 필요가 없습니다." Caroline은 주로 웹 양식 디자인에 이를 적용했지만 탐색 컨텍스트에도 적용할 수 있습니다.

따라서 아이디어는 복잡한 메가 드롭다운을 완전히 피하고 고객에게 한 페이지에서 다른 페이지로 웹사이트의 도랑을 탐색할 수 있는 명확하고 구조화된 방법을 제공하는 것입니다. Gov.uk의 경우 방문자를 목표를 향해 예측 가능한 단계로 안내하는 잘 고려된 정보 아키텍처 및 가이드를 통해 발생하는 것 같습니다.

Kanton Zurich도 같은 패턴을 사용하고 있습니다. 메가 드롭다운 탐색 레이어 대신 모든 옵션이 구조화된 방식으로 표시되며, 주요 주제는 상단에 "인기 주제"로 표시되고 각 섹션 내의 탐색은 상단에 고정 탐색 모음으로 표시됩니다.

대안적인 접근 방식은 "I-want-to" 탐색 패턴 을 사용하는 것입니다. 기존의 탐색 외에도 고객이 원하는 탐색 쿼리를 구성하고 찾고 있는 페이지로 바로 이동할 수 있도록 "탐색 드롭다운"을 제공할 수 있습니다. 기본적으로 사용자가 웹 사이트에서 수행하거나 찾을 작업을 선택할 수 있도록 다른 드롭다운 아래에 나타나는 일련의 드롭다운입니다.

한동안 이 패턴은 Commonbond(위의 비디오 참조)에서 사용되었으며 Corkchamber.ie에서도 사용되었습니다. 메가 드롭다운을 전혀 사용하지 않고도 깊은 탐색 수준에 대한 액세스를 제공하는 흥미롭지만 틀에 얽매이지 않는 방법입니다.

메가 드롭다운 탐색 디자인 체크리스트

우리가 메가 드롭다운 메뉴에 대한 대화를 꺼낼 때마다 모든 사람들이 소수의 그룹에 정착하는 것처럼 보입니다. 어떤 동료는 호버를 선호하고, 다른 동료는 탭 앤 클릭을 선호하고, 일부는 둘 다 선호하고, 다른 동료는 거기에 있는 한 상관하지 않습니다. 카테고리 링크이자 메뉴를 여는 아이콘입니다.

한 가지 접근 방식이 항상 다른 접근 방식보다 낫다고 말할 수는 없지만 기술 구현 및 UX 측면 에서 탭/클릭으로 메뉴를 열면 일반적으로 간단한 구현을 허용하면서 문제가 덜 발생하고 좌절감이 줄어듭니다. 예측 가능하고 차분한 탐색에서 호버 메뉴로 이동하기 전에 먼저 탭/클릭 동작을 유지하고 참여도를 측정하고 호버가 필요한지 연구할 수 있습니다.

그리고 항상 그렇듯이 메가 드롭다운을 디자인하고 구축할 때 염두에 두어야 할 몇 가지 일반적인 사항은 다음과 같습니다.

• 중요하고 자주 사용하는 항목을 메가 드롭다운 탐색(예: 검색 창, CTA, 장바구니 아이콘) 가까이에 두지 마십시오(마우스를 가져가면),
• 메가 드롭다운 내에서 여러 하위 탐색이 지연되면서(호버링하는 경우) 차례로 나타나는 것을 피합니다 .
• 여러 기능으로 카테고리 제목을 오버로드하지 마십시오 .
• 카테고리 제목에 밑줄을 쳐서 카테고리 페이지에 대한 링크로 식별합니다(물론 카테고리 페이지에 링크된 경우).
• 가능하다면 카테고리를 직접 연결하는 대신 각 하위 카테고리 내에 "홈" 링크 또는 "모두 찾아보기" 버튼 을 추가하세요.
• 수평 오버레이를 피하고 수직 아코디언 및 분할 메뉴로 대체하는 것을 고려하십시오.
• 카테고리 제목이 클릭 시 메가 드롭다운을 트리거함을 나타내는 아이콘을 추가하고 (예: 갈매기 모양), 항상 탭하기 편리하도록 충분히 크게 만드십시오(예: 50×50px).
• 메가 드롭다운이 나타나거나 사라질 때(최대 300ms) 긴 페이드 인/페이드 아웃 전환을 피하십시오 .
• 메가 드롭다운 대신 또는 추가로 구조화된 가이드 또는 탐색 쿼리("원하는" 탐색 패턴)를 테스트하는 것을 고려하십시오.
• 가능하면 메가 드롭다운 호버 메뉴를 피하세요 .