내비게이션 : Navigation Bar / Segmented Controls / Tab bars / States

내비게이션

: 사용자가 목적에 이르기까지 페이지 간에 자연스럽게 이동할 수 있도록 안내하는 시스템

 

플로우차트

: 흐름도라고도 하는데, 앱 서비스의 복잡도에 따라 올바른 내비게이션 시스템 구축.

: 설계가 제대로 되지 않으면, 문제가 발생한다. 사용자가 이전 페이지로 갈 수 없는 문제 등.

 

내비게이션 요소

: 사용자의 이동을 위해 제공하는 컴포넌트

1. Navigation Bar
2. Segmented Controls
3. Tab bars

*컴포넌트 명칭은 iOS 기준.

 

컴포넌트 - Navigation Bar

> 해당 페이지에 대한 페이지 이름

> 해당 페이지 내에서만 제공하는 부가 기능을 아이콘 메뉴로 제공

> 상세 페이지로 이동한 경우 뒤로가기 버튼 필수

 

실제로는 커스텀 컴포넌트를 활용해서 직접 뒤로가기 아이콘부터 스타일들을 안드로이드와 iOS 통일시키는 작업도 할 수 있다. 

 

여기서 가장 중요한 것은 목록에서 상세로 한번이라도 넘어간 경우라면 다시 뒤로 갈 수 있도록 왼쪽에 뒤로가기 버튼이 필수적으로 제공되어야한다는것!

 

컴포넌트 - Segmented Controls

> 현재 페이지의 하위 리스트를 빠르게 이동할 때 사용되는 기능

> 탭 내 같은 레벨의 메뉴로 제공해야 함

> 안드로이드는 스와이프로 탭 이동이 가능함

> OS마다 제공되는 컴포넌트 외에도 다양한 스타일로 제공

 

 

컴포넌트 - Tab bars

> 앱 서비스 내에 가장 상위 목록으로 비슷한 레벨로 배치

> OS 가이드라인에서는 최소 2개에서 최대 5개 사용을 권장

> 메뉴가 많은 경우 More 아이콘으로 대체(iOS) 혹은 햄버거메뉴로 대체(Android)

> 직관적인 아이콘과 레이블 사용

 

 

Tab bars vs Drawer Menu

: 햄버거메뉴를 사용하는 경우와 비교를 해보자면, 햄버거메뉴는 클릭을 해서 메뉴를 열어야 하고- 내가 원하는 메뉴를 클릭해야지 이동이 가능함. 하지만, 탭은 빠르게 이동할 수 있는 장점이 있다. 사용하는 방식에 따라서 장단점이 있으므로 뭐가 더 좋다는 아니지만, 탭 바를 사용했을 때 이러한 장점들 때문에 결과적으로는 주요기능을 쉽고 빠르게 전환할 수 있으므로 사용자가 앱내 더 오래 머물고, 더 많은 기능을 이용하도록 유도할 수 있다. Engagement 향상에 도움이 되는 것!

 

*활성화 된 탭과 아닌 탭의 명확한 구분 필요

*아이콘이 모호한 경우 Label 텍스트 넣기

*탭의 수가 5개를 초과한 경우, 더보기 메뉴로 대체

*레이블이 너무 긴 경우, 직관적이면서 짧은 글로 수정

 

<<<뒤로가기의 종류>>>

: 히스토리 백 vs 하이어라키 백

 

어떤 기준으로 뒤로 갈지?

 

History Back

> 안드로이드에서 주로 사용

> 이전 페이지로 돌아갈 수 있도록 해준다

 

Hierarchy Back

> iOS에서 주로 사용

> 일종의 페이지 계층 구조를 따라 이동할 수 있도록 해준다.

 

 

상태 States

: 사용자와 상호작용하는 과정에서 갖는 다양한 상태를 나타내는 것

데스크탑 환경	모바일
마우스 사용 (Default / Hover)	손가락 사용 (Enabled / Pressed)

 

 

 

컴포넌트 단위의 상태 : 버튼, 텍스트필드, 스위치 등의 인터렉티브한 요소에는 상황에 따른 다양한 상태가 있다.

 

ex.

버튼

> 활성화(Enabled): 기본적으로 클릭 가능한 상태. 선택 가능

> 비활성화(Disabled): 클릭 불가능한 상태. 선택 불가능

> 누름(Pressed): 유저가 버튼을 누르고 있는 상태. 손을 떼면 동작

 

토글(스위치)버튼

>켜짐(ON): 기능이 켜진 상태

>꺼짐(OFF): 기능이 꺼진 상태

 

체크박스, 라디오 버튼

> 셀렉트(Selected): 선택된 버튼의 상태

> 언셀렉트(Unselected): 선택되지 않은 버튼의 상태

*체크박스는 하나만 체크하는게 아니라 여러가지를 중복선택가능하기에 독립적인 선택을 가지고 있지만, 라디오 버튼은 여러목록 중에 하나만 활성화가 가능하기때문에 예를들어 두번째 목록을 선택하면, 첫번째 선택되어 있던 목록은 선택이 해지되는 것. 

 

<페이지 단위의 상태>

Empty States

: 목록, 검색 페이지에서 콘텐츠 혹은 검색 결과 여부에 따라 비어있으면, 그에 따른 안내가 필요하다.

ex.

검색 결과 없음 / 알림 없음 / 찜한 상품 없음 / 결제 내역 없음 / 메시지 없음 / 장바구니 없음 

 

<앱 단위의 상태>

문제가 있는 경우 : 인터넷이 연결 안 되어 있어 앱을 실행할 수 없는 경우처럼- 앱의 문제가 아님을 알려 조치를 취할 수 있게 안내를 해야 한다. 

ex. 

인터넷 연결 실패 / 업로드 실패 / 서버 오류 / 업데이트 필요