Android VS. iOS (1)
Navigation Drawer VS. Tab Bars
1. Navigation Drawer, Tabs & Bottom navigation VS. Tab bars
2013년에 등장한 Navigation Drawer는 안드로이드 디자인의 대표적인 UI이다. 정보 구조의 가장 높은 레벨의 카테고리를 숨길 수 있는 drawer에 심플하게 적용하였다. 그러나 수많은 연구에서 navigation drawer의 사용성 문제가 제기되었다. 구글은 가장 중요한 기능 및 카테고리를 Navigation drawer에서 탭으로 옮기기 시작했다. 유튜브가 그 사례이다. 2016년 Material Design에서는 bottom navigation이 등장하면서 iOS의 UI와 비슷하게 되었다.
유튜브의 진화 : 중요한 기능인 My subscriptions, History, Playlist가 drawer에 있음 -> drawer가 없어지고 주요 기능이 상단의 tab으로 들어감 -> trending이 tab에 추가됨.
구글 포토의 진화 : 주요 기능이 drawer에 있음 -> 주요 기능이 bottom navigation으로 이동 -> 사진 browsing을 방해하고 있는 검색 floating action button이 search bar로 변경됨.
Android의 tab(주로 상단에 적용)과 bottom navigation의 차이점 :
1. Tab은 정보구조의 상위 또는 하위에 위치한 카테고리에 모두 사용되지만, Bottom Navigation은 최상위 레벨의 카테고리에만 사용할 수 있다.
2. Tab은 tap과 swipe 제스처로 뷰를 이동할 수 있지만, Bottom Navigation은 tap만 지원한다.
3. Tab에 적용할 수 있는 아이템의 개수는 유연하게 적용할 수 있다. fixed bab이나 scrollable tab에 2~5개의 아이템을 적용할 수 있다. 그러나 bottom navigation에는 3~5개의 아이템만 적용할 수 있다. 2개 또는 5개 이상의 아이템은 적용할 수 없다.
깊고 복잡한 정보구조를 가진 앱에서는 navigation drawer, bottom navigation, tab이 동시에 사용된 것을 볼 수 있다. Navigation drawer와 bottom navigation을 동시에 사용하는 것을 추천하지는 않는다. 둘 사이의 정보구조를 명확히 보여줄 수 없기 때문이다. Navigation drawer의 레벨이 bottom navigation의 하위 레벨인지 동등한 레벨인지 모를 모호한 구조는 사용자를 혼란스럽게 할 수 있다. 구글 플러스가 좋지 않은 예이다. 첫 화면에서 navigation drawer와 bottom navigation이 동시에 나와 매우 혼란스럽다.
구글 앱을 분석해보면, navigation drawer와 bottom navigation이 동등한 레벨에 있음을 알 수 있다. 구글 포토와 구글 플러스에서는 계정이나 설정 같은 보조 기능들을 drawer에 담고, 자주 사용되는 주요 가능들을 bottom navigation에 적용하였다.
Google PlusiOS는 오랫동안 하단에 위치한 "tab bars"라는 기본 내비게이션을 사용해 왔고, 변경된 적이 없었다. 안드로이드의 bottom navigation과 유사한 Tab Bar는 3~5개의 카테고리 아이템을 적용할 수 있으며, 각 아이템을 tap 하여 카테고리를 이동할 수 있다.
원문 출처 :
