상단과 측면 내비게이션 중 어느 것이 더 적합할까요?

 

연구 결과는 어떻게 나왔을까요?

앱의 탐색 레이아웃을 선택할 때는 일반적으로 기본, 보조, 3차 탐색 계층의 위치를 정의해야 합니다. Jennifer Rose Kingsburg의 “웹 디자인을 위한 3단계 메뉴 탐색 구조 비교” 연구에 따르면 왼쪽에 기본 탐색을 배치하면 많은 이점이 있는 것으로 나타났습니다. 16명의 사용자를 대상으로 한 두 개의 연구에서 각각 탐색 시간, 선호도, 선택 오류를 측정했습니다. 이 연구에 대한 간략한 요약은 여기에서 확인할 수 있습니다. 이 연구는 17년 전에 이루어졌으며 그 사이 경험과 패러다임이 크게 발전했다는 점을 참고해주세요.

 

 

 

 

왼쪽 탐색이 스캔하기 쉬움

시선추적 연구에 따르면 사람들은 웹페이지를 F자 패턴으로 스캔하는 것으로 나타났습니다.
그런 점에서 상단과 왼쪽 탐색 모두 잘 배치된 것으로 보입니다.
왼쪽 탐색은 수직 스캔 방향을 용이하게 하여 속도를 크게 향상시키고 시각적 고정이 덜 필요하므로 여러 탐색 링크를 동시에 볼 수 있습니다. (오른쪽에서 왼쪽으로 쓰는 시스템을 위해 측면 탐색을 오른쪽에 배치할 수 있습니다.)

 

 

상단 탐색으로 공간 절약

일반적인 노트북 화면과 탐색 구성 요소가 차지하는 부분을 살펴보면 왼쪽 탐색이 상단 탐색보다 3배 더 많은 공간을 차지하는 경우가 많습니다. 여기에 검색이나 알림 또는 프로필과 같은 기타 요소를 위한 헤더 공간을 추가합니다. 왼쪽 탐색은 페이지 공간의 25%를 쉽게 차지할 수 있습니다. 공간을 절약하기 위해 측면 탐색을 축소하는 것도 긴 레이블을 일관되게 맞출 수 없고 아이콘만 있는 탐색은 사용자 메모리에 너무 많은 부담을 주기 때문에 항상 효과가 있는 것은 아닙니다.

 

 

 

확장하기 쉬운 사이드 탐색

디바이스와 글꼴 크기에 따라 달라질 수 있지만 일반적으로 스크롤은 말할 것도 없고 사이드 탐색에 표시되는 탐색 링크의 수는 최소 두 배 이상 늘어날 수 있습니다(스크롤은 제외). 사이드 탐색은 정보 아키텍처에 논리적으로 여러 버킷으로 그룹화할 수 없는 최상위 항목이 많을 때 더 효과적입니다. 또한 제품이 성장함에 따라 더 많은 항목을 추가하기가 훨씬 쉬워집니다.

 

 

사용자 지정 가능한 탐색 구조를 지원하는 사이드 내비게이션

사이드 탐색의 확장성 덕분에 사용자가 직접 탐색을 구성할 수 있는 유일한 선택입니다. 가변 메뉴는 Slack의 채널, Outlook의 폴더, Drive 또는 Confluence의 계층적 메뉴 등 매우 일반적입니다.

 

 

 

데스크톱과의 일관성

기본 애플리케이션 버전이 있는 경우 웹 앱도 이와 일관성을 유지하기를 원할 것입니다. 사이드바는 일반적으로 메뉴 모음(메뉴에는 명령, 속성 또는 상태 등의 항목 목록이 표시됨)을 위해 상단 영역이 예약되어 있기 때문에 macOS 및 Windows 애플리케이션 모두에서 기본 탐색 수단으로 널리 사용됩니다.

 

 

 

마우스로 활성화된 하위 메뉴는 상단 탐색에서 더 잘 작동합니다.

서랍식 하위 메뉴가 있는 왼쪽 탐색에서는 대각선 커서 이동에 문제가 있습니다. 또한 하위 메뉴의 항목 수에 관계없이 측면 탐색을 사용하면 화면의 다른 세로 창을 차단해야 할 가능성이 높습니다.

 

오른쪽 그림에서 볼 수 있듯이 최상위 메뉴 항목에서 하위 항목으로 마우스 커서를 이동하려고 할 때 사용자의 커서가 대상 영역을 벗어나 인접한 항목 위로 지나가 다른 하위 메뉴가 트리거되는 경우가 매우 쉽습니다.

 

 

상단 탐색 모음과 메가 메뉴

상단 탐색 모음은 마우스로 가리키면 활성화되는 메뉴를 통해 이커머스 및 기타 대형 웹사이트에서 주로 사용되는 메가 메뉴에서 더욱 두드러집니다. 메가 메뉴는 많은 옵션을 수용하거나 하위 사이트 페이지를 한 눈에 표시하는 데 탁월한 디자인 선택입니다. 또한 이 레이아웃은 제품 표시 및 광고를 위한 더 많은 공간을 확보할 수 있습니다.

 

 

 

기본 사이드 탐색으로 전환에 실패한 사례

내비게이션 재설계는 항상 어려운 과제입니다. 사용자는 특히 매일 제품을 사용할 때 내비게이션에 익숙해집니다. 이 탐색을 조금만 변경해도 사용자에게 혼란을 줄 수 있습니다. 새로운 학습 곡선에도 불구하고, Jira Cloud 탐색을 사이드 메뉴로 전환하는 것과 같은 일부 사례는 사용자들의 큰 반발에 직면했습니다. Jira가 피드백을 제공하기 위해 사용자를 모집했을 때 초기 사용자의 95% 이상(350명 중)이 사이드 메뉴보다 새로운 '이전' 상단 탐색을 선호했습니다.

 

 

상단 및 측면 탐색 모두 반응형 디자인에 어려움이 있습니다.

탐색 링크가 너무 많지 않은 상단 탐색의 경우 태블릿 세로 보기에서 모든 링크를 표시할 수 있다는 이점이 있습니다. 사이드 메뉴는 태블릿 세로 보기에서 햄버거 메뉴에 숨겨질 가능성이 높지만 모든 화면 크기에서 탐색 보기를 일관되게 유지할 수 있다는 이점이 있습니다.

 

 

 

상황에 따라 가장 적합한 내비게이션은 달라집니다.

상단 탐색
공간을 적게 사용하며 페이지에서 눈에 잘 띄는 위치를 차지합니다. 탐색 항목이 너무 많지 않은 경우에 적합합니다. 계층적 구조가 없는 중소규모 웹사이트, 전자상거래 및 웹 애플리케이션에는 기본 상단 탐색을 사용하는 것이 좋습니다.

사이드 탐색
많은 수의 탐색 링크가 있는 제품을 지원하며 쉽게 확장 및 구성할 수 있습니다. 복잡한 애플리케이션과 웹사이트, 관리자 앱, 데스크톱 앱, 파일/콘텐츠 관리 제품 등 사용자가 탐색을 사용자 지정할 수 있고 트리/폴더 구조에 대한 지원이 필요한 경우 기본 사이드 탐색을 사용하는 것을 고려하세요.

 

출처:

https://uxdesign.cc/top-navigation-vs-side-navigation-wich-one-is-better-24aa5d835643