1. 내비게이션의 의의와 목적
- 웹사이트를 이리저리 탐색하는 것은 귀찮을 수 있다.
- 그런 이동거리를 최소화하고 비슷한 목차들을 묶어서 보기 쉽게 하기 위해 우리는 내비게이션을 만든다.
2. 내비게이션의 종류
- 글로벌 내비게이션 (Global Navigation)
- 웹 사이트의 모든 화면에서 고정적으로 볼 수 있다.
- 사이드바나 메뉴의 형태를 가지고 있다.
- 상단에 버튼을 배치하거나 좌측에 슬라이드로 빼기도 한다. 모바일 버전에서는 하단에 배치하거나 햄버거 버튼을 이용하기도 한다.
하단의 글로벌 내이게이션과 햄버거 버튼을 이용한 메뉴형 내비게이션 그리고 자연스러운 홍보. 정말 뿌듯하기 그지 없습니다.
- 유틸리티 내비게이션 (Utility Navigation)
- 도움말이나 프린트, 설정과 같은 메뉴를 보여준다.
- 아바타 아이콘 뒤에 숨겨놓거나 하는 등의 기능을 하며, 각각의 설정이 있을 수 있는 앱에 주로 사용된다.
- 연관 및 인라인 내비게이션 (Associative and Inline Navigation)
- 콘텐츠를 직접적으로 유저가 이용하고 있을 때, 유저의 편의를 위해서 즉시 도움을 줄 수 있는 요소들을 보여준다.
- 관련 있는 콘텐츠들을 묶는 역할도 한다.
- 가끔은 유저가 이용할 때 걸리적거릴 경우가 있다. 잘 생각해서 만들어야 한다.
- 태그 (Tags)
- 콘텐츠들을 비슷한 종류별로 묶는다.
- 소규모 블로그 등에는 꼭 사용할 필요는 없지만 사이즈가 커지면 커질 수 록 유용하다.
- 블로그가 커질 경우를 대비해서 처음부터 만드는 것 도 좋다. (나중에 태그들을 하나하나 달아 주려면 고통스러울 것이다)
- 콘텐츠의 마지막 부분에 단어들을 나열하여 만들어 준다.
- 소셜 (Social)
- 웹사이트와 소셜미디어를 결합할 수 있다.
- 뉴스나 각종 수치에 대한 그래프 그리고 인기 검색어 등 다양한 수치들을 나타낼 수 있다.
3. 디자인 할 때 고려할 점
- 내비게이션의 디자인과 시각적 표현 분리하기
- 순서와 몇개의 목록을 보여줄지 고민하자
- 독특한 디자인 보다는 편하게 사용할 수 있는 친숙한 디자인이 올바르다.
- 인지 부담
- 마찬가지. 독특함보다는 편안함이 우선이다.
- 평범한 아이콘과 위치 만약 필요하다면 작은 텍스트를 이용할 수 도 있다.
- 이동거리의 최소화
- 글로벌 내비게이션이라면 폭을 넓혀서 디자인하자
- 자주 접근하는 항목들을 글로벌 내비게이션에 담자
- 반복적인 행동을 계속 하지 않도록 하며 콘텍스트 전환이 없이 모든 작업을 한 페이지에서 한 번의 로딩으로 끝낼 수 있도록 단계를 묶어 설계한다.
4. 패턴
- 명확한 진입점 (Clear Entry Points)
- 많은 기능을 넣는것 보다는 확실히 목적을 알 수 있도록 명확하게 디자인한다.
- 진입점을 정확히 하고, 유저로 하여금 고민하지 않아도 되도록 만든다.
- 메뉴 페이지
- 웹사이트의 모든 페이지 정보들을 한 화면에 담아서 어떤 기능을 하는 페이지를 쉽고 빠르게 찾을 수 있도록 한다.
- 페이지가 많아 복잡한 웹에 어울리며, 다른 방해 요소가 아무것도 없어서 온전히 내비게이션에 유저들을 집중시킬 수 있다.
- 하지만 유저들은 거부감이 조금 있다. 텍스트가 가득하고 복잡하기 때문이다. 그렇지만 각 요소별로 잘 정리해 놓고 그나마 가독성이 좋게 만들어서 그런 점들을 보안할 수 있다.
- 피라미드
- 메인으로 모든 페이지와 연결될 수 있는 페이지를 하나 만들고, 뒤로가기와 함께 이용하여 각각의 페이지들을 연결하는 형태이다.
- 상품의 소개나 사진이나 정보의 나열에 쓰일 수 있다.
- 사용자는 이동하는데 클릭하는 횟수가 줄어들고 각 페이지의 연결성을 높일 수 있다.
- 하지만, 새부적으로 나눠놓은 콘텐츠의 연결성이 부족하면 유저 이탈로 이어질 수 있다.
- 모달 패널 (Modal Panel)
- 열렸다가 닫치는 작은 모달을 만들어 표시한다.
- 유저의 확실한 집중을 받을 수 있다.
- 모달이 열려 있을때는 다른 곳으로 이동할 수 없으므로 로그인과 같은 내용들을 넣기 좋고, 모달의 뒤편에 있을 진짜 웹 사이트의 내용들을 두고 다른 기능들을 처리하기에도 편리하다. (ex: 장바구니, 회원가입 이후 로그인 등)
- 딥 링크 (Deep Link)
- 유저가 웹 사이트를 이용하던 상태를 저장하여 다른 기기나 다른 장소와 시간에 다시 접속하였을 때도 그 맥락을 이어서 사용할 수 있게 해 준다.
- 만족스러운 UX를 제공할 수 있다. (ex: 유튜브나 넷플릭스의 이어 보기)
- 콘텐츠 상의 사용자의 위치를 추적한 후에 URL에 넣는 방식을 사용할 수 있다.
- 링크를 유저들 간에 서로 공유할 수 있는 기능을 넣을 수 도 있다.
- 탈출구 (Escape Hatch)
- 현재 화면에서 한 번에 벗어날 수 있게 해 준다.
- 404 페이지와 같은 막다른 곳에서 '홈으로'와 같이 탈출구를 만들 수 있다.
- 메가 메뉴 (Fat Menu)
- 간단한 메뉴를 만들어 놓고, 그 옆에 모든 메뉴를 보여주는 메뉴를 하나 더 만든다.
- 복잡한 웹사이트일 경우 자주 사용하는 것들을 모아 간단한 메뉴를 만들어 놓는다.
- 숙련자들을 위해 모든 기능을 찾을 수 있는 메뉴가 또 있는 것이다.
- 드롭다운 방식이나 여타 이용하는 메뉴처럼 디자인할 수 있다(물론 엄청 커진다)
- 로그인 툴 (Sign-In-Tools)
- 우측 상단에 프로필 사진 등을 누르면 유저의 상태에 관련한 모든 작업을 할 수 있는 메뉴를 만든다.
- 로그인, 회원가입, 정보 수정 등 다양한 기능을 넣을 수 있고, 로그인을 자주 이용하는 웹 사이트일 경우 더 유용하다.
- 너무 크게 만들면 안 된다.
- 프로그레스 인디케이터 (Progress Indicator)
- 페이지를 진행하면서 지금 유저가 어디 있는지를 알려주는 인디케이터를 만든다.
- 단계가 있는(ex: 회원가입 등) 작업을 유저가 하고 있을 때 어디까지 진행되었는지, 얼마나 남았는지를 시각적으로 보여줄 수 있다.
- 페이지의 구석이나 상단에 크지 않은 사이즈로 배치하는 것이 옳다.
- 브레드 크럼 (Breadcrumbs)
- 큰 카테고리를 나눠두고 그 아래에 더 작은 카테고리를 나눠 놓는 것이다.
- 상품 판매 사이트에 상품의 종류를 나누기 위해 잘 사용된다. (ex: 전자제품 -> 주방용품 -> 베이킹 용품)
