3장 이동하기: 내비게이션 - 사용자를 끌어들이는 UX/UI의 비밀

2022 우아한스터디 - UX 패턴파인더 스터디

 

내비게이션의 기능

내비게이션은 사용자가 자신이 속한 정보공간을 쉽게 인지하고, 수행할 수 있는 작업이 무엇인지 이해할 수 있도록 한다.

• 현재 위치
• 다음으로 이동할 수 있는 위치
• 지금까지의 이동 히스토리 및 뒤로가거나 상위로 이동하는 방법
• 콘텐츠와 기능이 구조화된 방식
• 활용할 수 있는 정보와 툴

 

 

글로벌 내비게이션

모든 메인화면에서 고정으로 보인다. 사용자는 이 글로벌 내비게이션을 매개로 웹사이트의 공식적인 구조를 이해하게 된다.

주로 상단이나 좌측에 배치하는 메뉴, 탭, 사이드 형태로 표현된다. 상단과 좌측 둘 다 배치하는 경우도 있다. 모바일 환경에서는 하단에 배치하거나 햄버거메뉴 아이콘이나 케밥메뉴 아이콘을 누르면 메뉴패널이 열리는 형태를 활용한다.

유틸리티 내비게이션

역시 모든 메인화면에서 고정으로 보인다. 앱의 콘텐츠와는 관련 없는 로그인, 도움말, 언어변경, 설정편집기 등의 메뉴를 표시한다.

메뉴를 전부 늘어놓고 보여주는 때도 있고, 아바타 아이콘 뒤에 숨겨서 사용자가 아이콘을 열면 메뉴가 보이는 경우도 있다.

연관 내비게이션 & 인라인 내비게이션

사용자가 웹사이트 콘텐츠를 읽거나 기능을 사용할 때, 즉시 도움이 될 만한 옵션을 보여주는 링크다.

'연관 게시글'과 같은 섹션이 예시에 해당한다. 주로 뉴스 웹사이트와 블로그에서 자주볼 수 있다. 사용자가 하나의 글을 읽으면 사이드 바나 푸터에서 비슷한 주제로 작성된 글이나 같은 작가가 쓴 다른 글이 노출된다.

'태그'를 보조적으로 활용할 수도 있다. 주제가 세밀하게 분류된 경우에 태그 클라우드를 활용하면 주제별로 원하는 내용을 쉽게 찾을 수 있게된다. 게시글의 수가 방대한 경우에만 적합하다.

소셜미디어라면 사람들이 가장 많이 공유한 스토리, 친구들이 공유한 컨텐츠, 인기검색어, 순위 등을 활용할 수도 있다.

 

 

내비게이션 잘 디자인하는 법

좋은 표지판 두기

명확한 레이블은 사용자가 무엇을 찾는 지 미리 예상해 가야할 방향을 제시한다. 타이틀, 브랜드로고, 탭이 이런 역할을 수행한다. 사용자는 보통 웹페이지 좌측 상단 코너에서 브랜드 로고를, 모달 우측상단에서 닫기 'X'버튼을 찾을 수 있을 것으로 기대한다. 

이동거리 최소화하기

글로벌 내비게이션을 통애 많은 페이지에 즉시 이동할 수 있게 해야한다. 즉, 글로벌 내비게이션에서 사용자에게 선택지를 많이 제공하는 것이 좋다. 내비게이션의 계층(depth)를 최대한 얕게 만들어, A지점에서 B지점으로 찾아가기까지 필요한 탭이나 클릭수를 줄이는 방법을 고민해야 한다.

(그게 어떤 액션이냐에 상관없이) 사용 빈도수가 높은 액션은 사용자가 바로 접근할 수 있도록 내비게이션 구조에서 상위 레벨에 배치해야한다. 사용빈도가 낮다면 서브메뉴를 타고 들어가야 볼 수 있게 앱 깊숙이 배치할 수 있다. 이때, 아코디언 패널이나 탭으로 나뉜 패널 같은 UI를 활용할 수 있다.

태스크를 하나의 화면에서 완료할 수 있도록 구조를 설계해야 효율성이 높아진다. 사용자에게 가장 짜증나는 상황은 간단하거나 반복적인 작업을 여러 수준의 하위 페이지, 다이얼로그 박스 등을 이동해 각 위치에서 한 단계씩 수행해야 하는 것이다. 하나의 단계가 다른 단계에 영향을 미친다면 시간과 에너지 낭비를 고려한 디자인으로 개선이 필요하다.

툴이나 폼이 복잡해서 어렵다면 단순화와 최소화에서 출발하면 된다. 우선, 화면을 그룹핑하고 분류해볼 수 있다. 또, 레이블을 간결하게 바꾸고, 단어는 이미지로 바꾼다. 공간을 절약할 수 있도록 안내문구는 툴팁과 팝업에서 보여준다. 현재에 해당하지 않는 단계나 콘텐츠는 디폴트로 숨길 수 있다.

인지부담 최소화하기

어떤 내비게이션 메뉴를 노출할지, 레이블은 어떻게 정할지, 내비게이션을 인터페이스에서 어떻게 표현할지 모두 신경써야 한다.

일반적으로 글로벌 내비게이션이 항상 보여서, 사용자의 동선이 짧은게 좋다. 하지만 특정 페이지에서는 내비게이션이 안보이는게 나을 때도 있다. 글로벌 내비게이션을 풀로 다 표시해주는 만큼 공간을 차지하고 화면도 복잡해지며 사용자에게 인지부담을 준다는 것을 고려하자. 이럴 때는 '뒤로가기'와 '다음' 링크, 탈출구만 표시해주면 된다.

통용되는 레이아웃 따르기

표준화된 관행과 다르게 디자인하고 싶은 유혹에 빠질 수 있지만, 통용되는 레이아웃 패턴을 따르는 게 훨씬 유리하다. 

 

목적지까지 효율적으로 도달하기 위해서

• 명확한 콜투액션을 사용해서 사용자가 어디에서 시작해야하는지 알 수 있도록 한다.
• 모달은 흐름을 방해한다. 모달 패널 없이 입력 값을 요청하는 방법을 먼저 찾아보자.
• 딥링크는 모바일OS에서 작업 맥락이 끊기는 일이 없도록 앱과 앱 사이를 이동할 수 있도록 한다.
• 에러상황에서도 사용자가 '탈출'할 수 있도록 홈으로 돌아갈 수 있는 잘 레이블링된 버튼을 마련하자.

 

 

내용출처: 사용자를 끌어들이는 UX/UI의 비밀(제니퍼 티드웰, 찰스 브루어, 아인 발렌시아 저)