본문 바로가기

[UX] Mobile

안드로이드 UI: 내비게이션(백 & 업)

728x90

http://developer.android.com/design/patterns/navigation.html


Navigation with Back and Up


전체 사용자 경험에서 일관성있는 내비게이션은 필수적인 요소이다.

생각지도 못했던 방법의 내비나 일관성 없이 동작하는 내비 보다 사람들을 혼란스럽게 하는건 없다.

안드로이드 3.0은 글로벌 내비게이션에 중요한 변화를 소개하였다.

사려깊게도 이 가이드라인(Back and Up)은 앱의 내비게이션을 사용자들을 위해 신뢰할 수 있고 명확하게 생각하게 할 수 있을 것이다.


안드로이드 2.3, 그리고 그 이전 버전은 앱 내부에서 내비게이션을 지원하기 위해 시스템 백버튼에 의지하였다.

앱아이콘과 Left-point 기호로 이루어진 것 = Up버튼


Up vs. Back


Up버튼은 스크린 사이에서 계층적인 관계에 기반한 앱 내에서 내비게이션하곤 한다.

예를 들어, 만일 스크린 A가 아이템리스트를 보여준다면, 그리고 스크린B를 유도할 수 있는 아이템을 선택한다면, 스크린 B는 스크린 A로 돌아갈 수 있는 버튼을 제공해야만 한다.


만일 스크린이 앱에서 가장 최상위라면(다시말해 앱의 홈), Up버튼은 노출하지 않아도 된다.


시스템 Back버튼이 내비게이션에 쓰이곤 하는데, 스크린의 히스토리를 통해 사용자들은 동작하게 된다.

이는 앱의 하이러키(계층)이라기 보단 스크린 사이의 임시적인 관계에 기반한다.


이전에 보여진 스크린이 또한 현재 스크린의 계층적인 부모였을 경우 Back버튼을 누르는 것은 Up버튼을 누르는 것과 같은 결과를 낳게 된다. 하지만 Up버튼과 다르게 사용자들은 앱 내에서 남아있을 수 있다. Back버튼은 사용자들을 홈스크린으로 이동시킬 수 있고 심지어는 다른 앱으로 이동하게끔 할 수도 있다.



Back버튼은 또한 스크린-스크린 내비뿐만아니라 몇가지 행동을 지원한다.

1. 레이어 윈도우를 해제시킨다.

2. 컨텍스추얼 액션바를 해제시키고, 선택된 아이템들로부터 하이라이트를 제거한다.

3. 온스크린 키보드를 숨긴다.(IME)


Navigation Within Your App


다수의 엔트리포인트에서 스크린 내비게이션하기

가끔 스크린은 앱의 계층내에서 엄격한 포지션을 가질 수 없다. 그리고 다양한 엔트리포인트들로부터 도달되어질 수 있다.- 앱에 다른 스크린으로 부터 도달 가능한 설정 스크린 처럼. 

이러한 경우엔 Up버튼은 참조된 스크린으로 돌아갈 수 있도록 선택되어야만 하고, 동일하게 Back으로 동작해야 한다.


스크린내에서 뷰 변환하기

스크린에서 뷰옵션을 변경하는 것은 Up혹은 Back의 행위를 변경하지 않는다.

스크린은 여전히 앱의 계층구조 내에서 동일한 공간에 머무르게 되고 새로운 내비게이션 히스토리를 창조하지 않는다.


이러한 뷰를 변경하는 예는.

1. 탭과 왼쪽-오른쪽 스와이프를 이용하여 뷰를 변경하는 경우

2. 드랍다운을 통해 뷰를 변경하는 경우

3. 리스트를 필터링하기

4. 리스트를 소팅하기

5. 디스플레이 특징을 변경하기(주밍과 같은)


형제 스크린 사이에서 내비게이션 

앱이 아이템리스트에서 아이템의 디테일한 뷰로 내비게이션을 지원할 때, 이는 그 아이템에서 리스트 내 이를 따르는 혹은 선행하는 다른 아이템으로 직접적인 내비게이션을 지원하기를 희망한다.

예를 들어 지메일에서는 동일한 편지함에서 새/오래된 편지를 보기위해 왼쪽, 혹은 오른쪽으로 스와이프를 한다.

스크린 내에서 뷰를 변경할 때, 이러한 내비게이션은 Up혹은 Back의 행위를 변경하지는 않는다.





하지만 이에 대한 주목할만한 예외사항은 관련된 디테일한 뷰사이에서 브라우징할 때 일어난다.

예를 들어 동일한 개발자, 혹은 동일한 아티스트에 의한 앨범으로부터 앱들간 사이에서 플레이 스토어를 브라우징할 때. 이러한 경우엔 따라오는 각각의 링크는 히스토리를 만들고 각각 이전 뷰의 스크린을 통해 앞으로 나아갈 수 있도록 백버튼을 노출시켜준다.

Up은 가장 최근 본 컨테이너 스크린을 내비게이션하고 관련된 스크린을 우회할 수 있도록 해준다.




Up행위는 디테일뷰 지식에 기반하여 보다 똑똑하게 만들어낼 수 있다.

위 플레이스토어 사례에서 좀 더 확장하여 사용자가 마지막에 본 책으로 부터 영화를 위한 디테일한 곳까지 내비게이션한다고 상상할 수 있다. 이런 경우 Up은 컨테이너(영화)로 돌아올 수 있고 사용자는 이를 통해 내비게이션 하지 않을 수 있다.