글로벌 내비게이션에 상위 카테고리가 7~9개 이상이어도 괜찮은가? (스포일러: 괜찮습니다. 적절하게 계획되기만 한다면.)
상위 카테고리가 많으면 가로 내비게이션 바에 적합하지 않다. 어디로 가면 될까?
많은 팀들이 광범위한 네비게이션 하이라키를 데스크톱 사이트의 가로 네비게이션 바로 연결하려 할 것이다. 제한된 가로 공간에 카테고리의 목록을 맞추기 위해 지나치게 작은 글꼴을 사용하거나, 서로 가까이 있는 항목을 붐비게 하거나 비정상적으로 짧은 카테고리명을 만든다. 가장 나쁜것은 IA를 변경하여 사용 가능한 공간에 들어갈 수 있는 만큼의 주요 카테고리만 만들 수 있도록 하는것이다. 광범위한 정보를 소수의 카테고리로 제한하면, 우리는 결국 너무 포괄적이고 사용자가 필요한 것을 찾기 어렵게 되는 최상위 항목들로 끝나게된다. 또한 사용자는 관련 범주를 찾기 위해 더 많은 작업(클릭하여 다양한 하위 계층 범주 탐색)을 해야한다.
Accenture
Accenture는 최상위 카테고리의 수를 인위적으로 제한하기 위해 단일 서비스 카테고리 아래에 광범위한 정보를 숨겼다. 특정 컨설팅 영역을 찾기 위한 검색성은 낮아지고 상호 작용 비용 은 증가했다(유저가 여러 최상위 범주를 열고 스캔한 후 옳지 않다고 판단해야 했기 때문이다)
그러나 데스크탑에서 필요한 만큼 최상위 항목을 충분히 수용할 수 있는 또다른 유형의 네비게이션 UI가 있다 - vertical, left-side navigation!
Arbor 식당의 홈페이지
Arbor 식당의 홈페이지는 세로 네비게이션 패턴을 이용해 13개 글로벌 네비게이션 카테고리를 손쉽게 이용할 수 있도록 한다. 이 네비게이션 UI는 명확하고 정보 순위가 높은 주요 카테고리의 노출을 허용하며 특정 옵션을 보기 전에 일반 최상위 카테고리를 먼저 선택해야 하는 상호작용 비용을 절약한다
세로 네비게이션의 이점
이 네비게이션 UI의 주요 이점은 많은 최상위 카테고리를 나타낼 수 있는 충분한 공간에서 비롯된다.
특정 카테고리는 검색 용이성을 높이고 상호 작용 비용을 줄인다. 세로 네비게이션을 사용하면 카테고리 수를 제한하는 시각적 디자인 제약이 제거되어 팀은 자연스럽게 정보 공간에 맞는 IA를 만들 수 있으며, 계층 구조의 두 번째 계층을 파고들지 않고도 사용자에게 특정하고 높은 정보의 향기 (information scent) 카테고리를 노출할 수 있다.
세로 네비게이션은 성장을 위한 공간을 제공한다.세로 탐색에 카테고리를 추가하는 데는 네비게이션 UI를 다시 설계하는 주요 프로세스가 필요하지 않습니다. 유일한 중요한 결정은 새 항목을 기존 카테고리 구조에 어떻게 혼합해야 하는지에 대한 것이다. 세로 네비게이션은 향후 네비게이션이 성장할 가능성이 높은 사이트. 즉 B2B 기업, 정부, 고등 교육 및 의료 분야에서 서비스나 콘텐츠를 지속적으로 발전시킬 수 있는 대규모 조직에 탁월한 선택이다.
세로 네비게이션은 가로 네비게이션보다 더 효율적인 스캔을 지원한다. 우리는 아이트래킹 연구를 통해 웹사이트의 관심이 기울고 있다는것을 알고 있다. 사용자들은 항상 화면의 왼쪽 절반만 본다. 화면 왼쪽에 있는 에셋은 가치가 있으며, 여기에 네비게이션을 배치하면 사용자가 인식하고 스캔할수 있다. 추가로, 심리언어학 연구는 목록이 가로일 때보다 세로일 때 시각적 검색이 더 효율적이라는 것을 보여준다. 사람들은 눈을 더 조금 움직이고도 더 많은 정보를 얻을 수 있기 때문에, 관심 있는 항목을 찾을 수 있다. (눈이 정보를 인식한다는 것을 기억하라. 고정된 정확한 위치 뿐만 아니라 그 주변의 비교적 작은 영역에서도 볼 수 있다. 그 결과, 우리가 한 문장의 모든 단어를 읽을 때에도 우리는 그 중 몇 개에만 집중할 필요가 있다) 일반적인 오해 중 하나는 가로 네비게이션 디자인이 F자형 판독 패턴을 지원한다는 것이다. 그러나 F자 패턴은 사용자가 구조호되지 않은 텍스트를 읽을 때 마주치게 되는데, 이는 분명히 네비게이션, 헤더 등에는 해당되지 않는다.
사용자는 세로 네비게이션에 익숙하다. 현대의 웹 사이트에서는 덜 흔하지만, 세로 네비게이션은 데스크톱 애플리케이션(기본앱과 웹앱 모두)에서 자주 발견된다. Slack과 Gmail은 왼쪽 세로 네비게이션을 사용하는 웹 애플리케이션의 예이다.
또한 많은 웹사이트들이 세로 로컬 네비게이션 (vertical local navigation i.e.., 사이트 하이라키(hierarchy)에서 동일한 카테고리에 속하는 현재 페이지의 “형제(sibling)” 페이지를 보여준다.
세로 네비게이션은 자연스럽게 모바일로 바뀔수 있다. 가로 메뉴바를 모바일 친화적인 디자인으로 변환하는 것은 메뉴바가 보통 세로 네비게이션으로 변환되기 때문에 약간의 조정이 필요할 수 있다. 반대로, 데스크톱과 모바일에서 세로 네비게이션을 사용하면 팀은 비교적 최소한의 적응으로 동일한 시각 디자인 선택을 적용할 수 있다. 테두리, 유형, 간격, 카테고리 순서 및 두 번째 하이라키 카테고리의 UI가 장치간에 공유될 수 있다. 따라서 세로(햄버거 또는 기타) 메뉴 아래에 데스크톱 네비게이션을 숨기려는 유혹을 가지지 말라라. 가시적 네비게이션은 모바일과 데스크탑 모두가 따를 수 있는 최고의 표준이다. 일부 모바일 웹사이트는 화면 공간이 제한되어 네비게이션의 대부분 또는 전부를 햄버거 메뉴 아래에 숨길 수 있지만, 눈에 보이는 네비게이션이 숨겨지면 사람들은 그것을 확인하는 것을 잊어버린다. 게다가, 데스크톱에서 햄버거 메뉴는 페이지의 나머지 부분에 비해 상대적으로 작은 공간을 가지고 있어 무시당할 가능성이 모바일에서보다 훨씬 더 크다.
세로형 네비게이션은 더 많은 공간이 필요하다
가로형 네비게이션에 비해 세로 네비게이션을 사용할 때 가장 큰 단점은 공간을 많이 차지해 콘텐츠를 보여줄 수 있는 공간이 적다는 점이다. 세로 네비게이션은 일반적으로 가로 네비게이션보다 content-to-chrome (콘텐트 대 색) 비율이 낮다.
Nua bikes의 예전 디자인과 새로운 디자인.
(왼쪽) 이전 디자인은 content-to-chrome 비율 약 5:1의 세로, 왼쪽 네비게이션을 사용했다. (오른쪽) 사이트를 재디자인 하면서 동일한 화면 크기에 12:1 content-to-chrome 비율의 가로 네비게이션 바를 적용했다. 새로운 디자인은 가시적인 탐색에서 최상위 범주를 훨씬 적게 노출하지만 콘텐츠 공간을 훨씬 적게 차지한다.
작은 창 크기 (작은 디스플레이나 태블릿에서 볼 수 있는것같은) 에서는 이러한 절충을 수용하기 어려울 수 있다. 반응형 설계를 사용하는 경우 다양한 중단점(breakpoint, i.e., 창 크기)에 적합한 네비게이션 UI가 무엇인지, 세로 탐색을 통해 적절한 content-to-chrome 비율에 도달할 크기를 결정해야할 수 있다. 그러나 스펙트럼의 큰 창 크기에 접근할 때 세로 탐색은 content-to-chrome 비율에 더이상 영향을 미치지 않을 가능성이 높다. (디스플레이가 정말 클 때 뷰포트 영역이 오른쪽과 왼쪽에 빈 공간으로 채워지는 경우가 많음)
매우 긴 세로 네비게이션은 페이지를 접이고 그 아래에 일부 항목을 포함시킬 수 있다. 우리는 많은 연구를 통해 사용자가 접혀진 정보보다 접히는 UI위의 정보에 더 주의를 기울인다는 것으 알고 있다. 현재 목표에서 접힌 부분이 쓸모없어 보이면 스크롤조차 하지 않을 수 있다. (사용자는 그들에게 불필요하다 여기면 매우 빠르게 웹 페이지를 떠난다는것을 기억해라). 반면에, 세로 탐색은 충분히 잘 확립된 디자인 패턴으로 대부분의 사용자가 전체 메뉴를 볼 수 없는 경우 스크롤 할 수 있다. 즉, 접힌 곳 위에 보이는 정보가 유용하다는 것을 확신한다고 가정한다.
실용적인 세로 네비게이션 가이드라인
세로 네비게이션은 왼쪽에 놓고 눈에 띄는 디자인을 사용하라. 앞서 말햇듯이, 시각적 관심은 화면의 왼쪽에 쏠린다. 우리가 우측 레일 블라인드(사용자들이 광고를 포함할 수 있는 것처럼 보이면 페이지의 오른쪽열을 보는 것을 피하는것)를 자주 볼 수 있다는 사실과 결합하면, 페이지의 오른쪽 네비게이션은 눈에 띄지 않을 가능성이 있다. (왼쪽 대 오른쪽 지침과 마찬가지로 이 조언은 왼쪽에서 오른쪽으로 읽는 언어에 적용된다. 만약 당신의 언어가 오른쪽에서 왼쪽으로 읽는다면, 반대의 조언이 적용된다.)
메뉴를 가로 세로 양쪽으로 복제하지 마라. 최근 홀수 트렌드(odd trend)는 글로벌 네비게이션에 두 개의 중복 UI를 사용하는 것으로 구성된다. 가로 메뉴바와 동일한 카테고리의 햄버거 메뉴. 디자인 팀에서 어떤 UI를 사용할지 몰라 둘 다 포함한것 처럼 느껴진다. 대부분의 UI 요소 복제와 마찬가지로 이러한 복제는 불필요하며 혼란스러울 수 있다.
아이콘 뒤에 네비게이션 기능을 숨기지 마라. 세로 네비게이션은 가로 네비게이션보다 더 많은 공간을 차지하기 때문에 디자이너는 종종 이 영역을 최소하 하는것을 시도한다. 이것은 분명히 이해할 수 있는 목표지만, 그것을 달성하기 위한 몇몇 수단들은 결국 추가적인 문제를 야기한다. 한가지 새로운 경향은 카테고리에 텍스트 레이블 대신 아이콘을 사용하는 것이다. 모든 네비게이션 아이템에 텍스트 레이블을 사용할 수 있지만, 사용자는 네비게이션바를 클릭하거나 마우스를 움직일 때만 해당 레이블을 볼 수 있다. 우리는 수년동안 아이콘에 라벨을 추가하는것을 권장해왔다. 텍스트는 모호성을 줄일 뿐 아니라 타겟 사이즈를 증가시킨다. 그러나 사용자가 네비게이션 카테고리에 대한 아이콘을 즉시 이해할수 있다고 가정하는 몇몇 사이트는 여전히 존재한다. 나는 종종 네비게이션에서 말 한마디가 천장의 사진보다 낫다고 말한다. 네비게이션 텍스트 라벨을 숨기는 것은 사용자가 단순히 내베기에션(햄버거 메뉴와 마찬가지로)을 무시할 가능성이 높다는 것을 의미한다. 사용자는 인터렉션시 텍스트 라벨을 보기 위해 hover하거나 클릭하는 추가 상호 작용 비용 또는 아이콘의 의미를 디코딩하는 시도의 추가 인지 부하를 갖게된다. 일련의 아이콘에 대한 네비게이션을 최소화하는 전략 (기본값이 텍스트 레이블을 표시하고 숨기는 것은 선택사항)은 사용자가 카테고리가 무엇을 나타내는지 잘 배울 수 있는 매일 사용하는 응용 프로그램의 현실적인 절충안일 수 있다. 그러나 개별 사용자가 가끔 사용하는 것으로만 보이는 웹 사이트에서는 권장하지 않는 전략이다.
긴 메뉴에서는 중요하지 않은 메뉴를 맨 아래에 배치한다. 페이지 접힘으로 인한 가용성 문제 (위에서 논의함)로 인해 매우 긴 세로 메뉴는 스크롤하지 않고는 볼 수 없는 항목을 갖게될 수 있다. 안타깝게도 사용자마다 모니터 크기가 다르기 때문에 페이지 폴드가 사용자 개개인의 메뉴를 어디에 맞출지 알 수 없다. 긴 메뉴의 경우 스크롤하지 않고 보이지 않을 수 있는 항목이 덜 중요한 기능에 속하도록 항목의 우선순위를 지정해야한다.
요약
세로 네비게이션은 데스크톱에서 합리적인 선택이 될 수 있으며, 특히 광범위한 콘텐츠를 보유하고 있거나 빠르게 성장중이거나 단순히 사용자를 위해 특정 카테고리를 표시하고자 하는 사이트가 해당된다.
세로 네비게이션은 또한 모바일을 위한 반응형 대응이 용이하다.
세로 네비게이션의 장점을 유지하기 위해서, 햄버거 메뉴 아래에 숨기지 말아야 한다. 또한 왼쪽으로 정렬해야한다.
카테고리를 나타낼때는 아이콘 뿐만 아니라 키워드가 앞쪽에 있는 레이블을 사용해야한다.
세로 네비게이션의 이점이 콘텐츠를 보여줄 수 있는 공간을 빼앗는것을 정당화할 수 있는지 여부를 측정해보아야 한다.
