내비게이션 위치

 

사이드 내비게이션

⇒ 링크가 많은 서비스, 확장성과 설정 변경이 쉽다.

1. 메인 내비게이션은 왼쪽이 제일 좋다.
   1. (제니퍼 로즈 킹스버그의 "웹 디자인에 대한 3계층 메뉴 내비게이션 구조의 비교” 연구) 
   2. 사람들은 알파벳 F자의 형대로 웹 페이지를 훑어본다.
      
      1. ⇒ 네비 메뉴의 위치는 위쪽, 왼쪽이 좋다.
      2. (글을 왼쪽에서 오른쪽으로 쓰는 문화권에서! 반대는 오른쪽에 두는 것이 좋다.)
      3. → 세로 방향으로 시선을 옮기기 쉽고, 파악 속도 빠르다.
2. 많은 메뉴를 보여줄 수 있다.
   1. 어보브 더 폴드(above the fold) 화면에서 메뉴 수 최소한 두 배 이상 더 많이 보여줄 수 있다.
   2. 소수의 카테고리로 묶기 어려운 경우
      1. → 사이드 내비게이션 활용하는 것이 효과적
      2. → 서비스이 규모 커지더라도 메뉴 추가하기가 더욱 편리하다는 의미
3. 확장성이 좋다
   1. 사용자들이 직접 내비게이션 메뉴를 구성할 수 있게 만들 수 있다.
4. 데스크톱 환경과 일관성 유지
   1. 화면 위쪽은 주로 명령, 속성, 상태 등의 기본적인 메뉴들로 채워져있는 경우가 많다.
   2. → 때문에 기본적인 내비게이션방식으로 사이드바가 널리 사용되고 있다.
5. 반응형 디자인
   1. 태블릿 기기의 세로 화면에서는 햄버거 메뉴로 숨겨야 한다.
   2. → 화면의 크기 관계없이 언제나 일관된 디자인 보여줄 수 있다.

 

상단 내비게이션

⇒ 적은 공간 사용, 메뉴가 그리 많지 않을 때 사용하면 효과적

1. 공간이 절약된다.
   내비를 왼쪽에 두면 기본적인 화면 구성만으로도 페이지 전체의 25%까지 차지할 수 있다.
   숨기기 가능 → but, 숨기는 것이 항상 좋은 방법은 아니다.
2. 마우스를 가져가면 활성화되는 하위 메뉴는 상단 내비게이션 방식이 훨씬 효율적
   사이드 내비게이션
   → 마우스를 대각선 방향으로 움직일 때마다 다른 메뉴가 선택되는 문제 발생
   → 수직 방향으로 다른 화면이 타나서 가릴 수 있음
   
3. mega menu
   위쪽에 있는 내비 바에 마우스 가져가면 사이트 내의 거의 모든 메뉴가 한꺼번에 펼쳐지는 것
   이커머스, 대형 웹사이트에서 많이 볼 수 있다.
   사용자에게 아주 많은 선택권 준다.
   사이트 하위 구조 한 눈에 파악 가능하다.
   공간적으로 여유가 생긴다. 
   → 제품 노출, 광고 등을 위해 사용할 수 있다.
   
   
4. 반응형 디자인
   메뉴 링크가 많지 않은 상태
   상단 내비게이션 사용
   → 태블릿 기기에서 세로 화면에서도 모든 메뉴를 한 꺼번에 표시할 수 있다.
   
   

내비게이션 디자인 전환의 어려움

사용자들은 이미 기존 내비게이션 방식에 익숙해져 있다.

→ 내비게이션에 약간의 변화를 주면 사용자들에게 혼란을 줄 수 있다.

 

참고

above the fold

웹 페이지에서 아무 행동을 하지 않은 부분

소비자에게 제일 먼저 보이는 영역
스크롤로 가려지지 않은 채 사용자에게 제일 먼저 보이는 영역

 

below the fold

스크롤로 가려진 아래 영역

 

 

 

 

 

 

 

 

 

 

 

 

www.wishket.com/yozm/detail/597/

상단 내비게이션 vs 사이드 내비게이션, 어느 것이 더 나을까? | 요즘IT