#06. 내비게이션 UI (1)
내비게이션 UI 결정에 앞서 던져야 할 질문들
#06. 내비게이션 UI (1)
모바일 앱 UI/UX를 구성함에 있어서 가장 기본은 내비게이션이 아닐까?
사용자가 앱을 통해 가장 '쉽게' 태스크를 달성할 수 있도록 UI를 디자인하는 것이 HCI적 관점에서 추구하는 디자인이다. 아무리 미적으로 아름다운 디자인이어도 사용자가 원하는걸 찾기 힘든 방식으로 UI가 구성되어있으면 그건 가장 기본적인 기능조차 만족시키지 못하는 디자인에 불과하다. 마리사 메이어가 이야기한 두 번의 터치로 원하는 정보를 얻을 수 있도록 디자인해야 한다는 '두 번 터치의 법칙'도 같은 맥락이다. 디자이너의 관점보다 사용자의 관점에서 디자인되어야 한다.
#. 내비게이션 UI by. iOS Human Interface Guideline
어떻게 내비게이션 UI를 디자인하는가에 대해 다양한 방법들이 존재한다. iOS Human Interface Guideline에 의하면 내비게이션 패턴은 앱 구조에 적합한 방식이어야 하며, 앱 구조는 다음과 같이 분류된다.
■ Hierarchical
■ Flat
■ Content- or experience-driven
1. Hierarchical App
위계 구조가 존재하는 앱에서는 사용자가 목적을 달성하기 위해 단계를 거치는 과정이 존재한다. 주로 리스트 형태로 제시된 메뉴를 클릭하여 더 깊은 depth로 들어가는 방식의 UI가 많이 사용된다.
2. Flat App
Flat 한 정보 구조를 골격으로 하는 앱에서는 메인 화면에 메뉴가 항시 노출되어 있기 때문에 사용자가 한 카테고리에서 다른 카테고리로 바로바로 이동하는 것이 가능하며, 대표적인 것인 것이 '탭 바'이다.
3. Content- or experience-driven
마지막으로 콘텐츠나 경험에 의해 정의되는 내비게이션 UI패턴이 존재한다. 특히나 게임에서 내비게이션은 중요한 사용자 경험의 일부다.
# 내비게이션 패턴에 따른 UI 분류
iOS Guide에 등장하는 내비게이션 UI는 '리스트 메뉴'와 '탭 메뉴', '페이지 스와이핑' 정도다. 하지만 현존하는 수많은 애플리케이션들을 사용하다 보면 정말 무수한 내비게이션 UI 패턴들이 등장하는 것을 확인할 수 있다. 가장 현실적으로 내비게이션 패턴을 분류한 기준은 책 <모바일 앱 디자인 패턴>(에이콘 출판)이지 않을까 싶다.
■ 기본 내비게이션 패턴(지속형): 스프링보드, 리스트 메뉴, 대시보드, 갤러리, 탭 메뉴, 스큐어모픽
■ 기본 내비게이션 패턴(일시형): 사이드 드로어, 토글 메뉴, 파이 메뉴
■ 보조 내비게이션 패턴: 페이지 스와이핑, 스크롤링 탭, 아코디언
(분류 기준: <모바일 앱 디자인 패턴> - 에이콘출판)
책에서는 기본 내비게이션 패턴은 사용자가 화면상에서 바로 무엇을 해야 하는지 알 수 있게 명시적으로 UI를 표현한 (1) 지속형과 언제나 화면에는 노출되지 않고 사용자가 탭이나 제스처를 통해서 접근 가능한 (2) 일시형으로 분류 가능하다.
■ 기본 내비게이션 패턴(지속형): 명시적으로 메뉴 구조를 표현함
■ 기본 내비게이션 패턴(일시형): 탭 등의 특정 제스처를 통해 접근 가능
항시 메뉴가 노출되어있는 지속형이 아닌 일 시형이라는 UI를 사용하는 것은 '작은 모바일 화면'이라는 공간적 제약 때문인데 이를 극복하기 위해 디자이너들이 'outside of the box'적인 사고를 한 결과물인 것이다.
작은 모바일 화면은 off-canvas적 사고를 가져왔다.# 내비게이션 UI 선택에 앞서 던져볼 질문들
햄버거 메뉴에 대한 논란 등(https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/) 내비게이션을 위해 어떤 유형의 UI를 사용해야 하는지에 대한 생각은 모두 다르지만 다음과 같은 요소들을 생각해 볼 수 있겠다.
■ 내비게이션 UI (지속형 VS 일시형) 선택에 앞서 던져야 할 질문들
1. 메뉴 카테고리가 위계적으로 동일(flat)한가?
2. 주요 카테고리가 소수(3~5개)인가?
3. 사용자가 빠르게 접근하기 위해 언제나 화면에 노출될 필요가 있는가?
4. 카테고리가 상태 표시(status indicators) 될 요소들(인스타그램의 내 소식 알림, 페북의 새로운 메시지 등)을 갖고 있는가?
위의 질문들 중 하나 이상이 "예"라면 언제나 화면에 노출되어 있는 지속형의 내비게이션 UI(주로 탭 메뉴 형태)가 더 적합한 방법일 수 있다. (물론 정답은 없다.) 또한 내비게이션 패턴의 종류는 아래 그림 이상으로 다양하며 동일한 앱이라도 버전에 따라 (혹은 트렌드에 따라) 내비게이션 UI를 변화하는 것을 확인할 수 있다.
내비게이션 패턴 유형들(출처: goo.gl/9hWjxn)
페이스북 내비게이션 UI의 변화페이스북은 과거에는 스프링보드 + 툴바 + 사이드 드로어 형태의 UI를 채택했지만 현재는 스프링보드 대신 탭 바와 사이드 드로어 UI를 채택한다. 다음 글에서는 다양한 내비게이션 패턴 UI와 그 UI를 실제 적용한 사례들, 현재 대세인 내비게이션 UI 등에 대한 내용을 중심으로 서술해보고자 한다 :)
