🥲 수평 네비게이션을 쓸 때 맞닥뜨리는 상황
- 많은 카테고리를 수평 공간에 끼워 넣으려고 하다보니, 폰트 사이즈가 작아지고 서로의 간격이 좁아지고 심지어는 부자연스럽게 레이블을 줄이기도 한다.
- 공간에 맞게 IA를 재구성하게 되고 최상단 카테고리가 너무 브로드해져서 유저가 원하는 항목을 찾기 힘들다.
- 유저는 더 많이 클릭해야 하고 더 많은 하위 카테고리를 탐색해야 한다.
👍 수직 네비게이션의 장점
1. 더 쉽게 찾고 덜 인터랙션할 수 있다.
- 카테고리의 개수에 덜 구애받기 때문에 구체적인 카테고리를 쓸 수 있다.
2. 확장 가능성이 높다.
3. 수평 네비게이션보다 더 효율적으로 스캔할 수 있다.
1. Therese Fessenden의 연구에 따르면 유저들은 80%의 시간 동안 화면의 왼쪽을 본다. 왼쪽은 귀한 영역이다.
2. 눈은 고정된 위치 뿐만 아니라 주변 영역도 함께 보기 때문에, 수직 배치가 시각적 탐색에 더 용이하다. (F shaped 읽기는 네비게이션에는 적합한 패턴이 아니다.)
4. 유저들은 수직 네비게이션에 익숙하다.
5. 모바일-웹 간 전환이 자연스럽다.
1. 모바일에서는 주로 수직으로 카테고리를 배치하기 때문에 수평 네비게이션에서와는 달리 수평-수직의 전환이 없다.
👎 단점: 수직 네비게이션은 더 많은 공간을 요구한다.
- 수평 네비게이션보다 content-to-chrome 비율이 더 낮다.
📕 수직 네비게이션 가이드라인
1. 왼쪽에 배치하고 눈에 띄는 디자인을 사용하라
2. 수평과 수직 메뉴를 중복해서 쓰지 마라
3. 아이콘만 쓰지 말고 레이블을 함께 써라
4. 덜 중요한 카테고리는 아래에 배치하라