모바일 내비게이션 UI 패턴 원칙
Today
Today UX 아티클
babich.biz에 올라온 Nick Babich의 글 Basic Patterns for Mobile Navigation을 원저자의 허락을 받아 번역한 글입니다.
http://babich.biz/basic-patterns-for-mobile-navigation/
앱에서 사용한 내비게이션은 직관적이고 예측 가능해야 합니다. 신규 유저나 재방문 유저 모두 앱 내에서 어떻게 움직여야 하는지 쉽게 알아낼 수 있어야 합니다. 하지만 모바일에서 내비게이션을 발견할 수 있게(discoverable) 만들고 접근하기 쉽게(accessible) 만드는 것은 어려운 과제입니다.
그 이유는 작은 스크린이라는 제약과 UI 요소보다 콘텐츠를 우선순위로 삼아야 한다는 니즈 때문입니다.
다양한 내비게이션 패턴은 이런 문제를 다양한 방법으로 해결하려고 했지만, 모두 여러 가지 사용성 문제로 고생하고 있습니다.
이 글에서는 모바일 앱에서 사용되는 세 가지 기본적인 내비게이션 패턴인 햄버거 메뉴, 탭바, 제스처 기반 네비게이션을 살펴보고 각각의 강점과 약점을 설명하겠습니다.
햄버거 메뉴
모바일에서 스크린 상의 공간은 소중한 자원이며 햄버거 메뉴(혹은 사이드 드로어 side drawer)는 공간 절약에 도움이 되는 모바일 내비게이션 패턴 중 가장 유명합니다. 드로어 패널(drawer panel)은 내비게이션을 스크린 좌측에 감출 수 있도록 해주며 유저가 액션을 취했을 때만 볼 수 있게 해줍니다. 이러한 패턴은 유저가 메인 콘텐츠에 집중했으면 하는 경우에 특히나 유용할 수 있습니다.
디폴트 상태에서 햄버거 메뉴와 그 내용은 모두 숨겨져 있다.사례
보시다시피, 실제 메뉴는 햄버거 아이콘 뒤에 숨어있습니다.
Foursquare의 이전 버전. Imagecredit: lmjabreu장점
내비게이션 옵션을 많이 넣을 수 있습니다. 이 내비게이션의 주된 장점은 상당히 많은 수의 내비게이션 옵션을 작은 공간에 넣을 수 있다는 점입니다.
깔끔한 디자인. 사이드 메뉴로 옵션을 스크린에서 감춰버리기 때문에 스크린 공간을 자유롭게 활용할 수 있습니다.
단점
숨겨진 내비게이션은 발견 가능성이 낮습니다. 눈에서 보이지 않으면 마음에서도 멀어진다고 하죠. 내비게이션이 감춰져 있으면 유저는 내비게이션을 덜 이용하려고 합니다. 이러한 유형의 내비게이션이 표준이 되어가고 있으며 많은 모바일 유저에게 익숙하긴 하지만, 많은 사람들은 여전히 눌러봐야겠다는 생각을 하지 못합니다.
플랫폼 내비게이션 룰과 충돌합니다. 햄버거 메뉴는 안드로이드에서 거의 표준이 되었지만 (머티리얼 디자인에서는 내비게이션 드로어(navigation drawer)라는 이름으로 쓰인 패턴임), iOS에서는 기본적인 내비게이션 요소와 충돌하지 않고는 적용할 수 없는데, 내비게이션 바를 너무 많이 제공하게 될 수 있습니다.
iOS에서 햄버거 메뉴를 넣으려고 시도하면 이렇게 된다. Image credit: lmjabreu햄버거 아이콘은 현 위치를 숨겨버립니다. 햄버거 메뉴는 현재 위치를 한눈에 알려주지 못합니다. 햄버거 아이콘을 눌러야 보이기 때문에 현 위치에 대한 정보를 알아내기가 어렵습니다.
타깃 목적지로 가려면 부가적인 액션이 필요합니다. 특정 페이지로 가는 데 보통 최소 두 번의 클릭이 필요합니다. 한 번은 메뉴 아이콘을 클릭하고, 다른 한 번은 타깃 페이지로 가는 아이콘을 클릭해야 하죠.
팁
내비게이션 옵션의 우선순위를 정해 보세요. 내비게이션이 복잡하다면, 그걸 숨긴다고 해서 모바일 친화적으로 바뀌는 것은 아닙니다. 많은 실제 사례들을 보면 메뉴 옵션을 잘 보이도록 노출하는 것이 인게이지먼트와 유저 만족도를 높인다는 점을 명확하게 알 수 있습니다. 여러분 스스로에게 물어보세요. “모바일에서 잘 보여줘야 할 만큼 중요한 것은 무엇인가?”이 질문에 답하기 위해서는 여러분의 유저에게 무엇이 중요한지에 대한 이해가 있어야 합니다.
세션 개수가 두 배 이상 많아짐. 세션 시간 70% 상승; 일일 활성화 유저 65%증가 Image credit: lukew특히 우선순위가 높은 내비게이션 옵션이 몇 개 없다면 탭이나 탭바를 이용하는 걸 고려해보세요.
유튜브는 한 탭 당 핵심 기능으로 탭을 만들어서, 각 기능 사이를 쉽게 왔다 갔다 할 수 있게 해 주었다.정보 구조를 리뷰해 보세요. 좋은 앱에는 굉장히 집중되어 있습니다. 그러니 앱이 복잡하다면 그 기능을 두 개의 (혹은 그 이상의) 간단한 앱으로 분리해줄 수도 있습니다. 페이스북은 이런 복잡성이라는 문제를 해결하기 위해 메신저 앱을 출시했습니다. 기능을 줄이면 메뉴 옵션이 줄어들게 되고 햄버거 메뉴의 필요가 줄어듭니다.
탭바
탭바 패턴은 데스크톱 디자인에서부터 이어진 패턴입니다. 보통은 비슷한 중요도를 가진 목적지가 상대적으로 적은 경우에 사용됩니다. 이는 앱에서 어느 위치에 있건 직접적인 접근이 필요한 목적지들입니다.
탭바는 네비게이션을 숨기자 않고, 직접적인 접근이 가능하게 해주며 해당 아이콘과 관련된 피드백을 보여준다.사례
트위터에서 탭바는 유저가 그 항목에 해당하는 스크린으로 바로 넘어갈 수 있게 해줍니다.
iOS 용 트위터 앱 Image credit: Mashable장점
탭바는 현재 위치를 알려줍니다. 적절하게 사용된 시각적 단서(아이콘, 레이블, 색상)는 따로 설명이 필요 없습니다.
탭바는 지속적으로 보여줍니다. 모든 내비게이션 옵션이 항상 스크린 상에 보여서, 유저가 메인 앱 뷰에서 명확하게 확인할 수 있으며 한 번의 클릭으로도 다른 페이지에 접근할 수 있습니다.
단점
내비게이션 옵션의 개수가 제한됩니다. 만일 앱에 5개 이상의 옵션이 있다면, 적절한 타깃 사이즈를 유지하면서도 탭이나 내비게이션 바에 집어넣는 것은 어렵습니다.
탭바에서 5개 이상의옵션을 사용하지 마세요.iOS와 안드로이드에서 탭바 옵션에 사용하는 위치와 로직이 다릅니다. 플랫폼마다 UI와 관련해 서로 다른 룰과 가이드라인을 가지고 있으며 특정 플랫폼의 앱을 만들 때는 탭바를 디자인할 때 이를 고려해야 합니다. 상단(대부분의 안드로이드)에서 보여줄 수도 있고 혹은 하단(대부분의 iOS)에서 보여줄 수도 있습니다. 또한 iOS에서는 뷰(view)를 바꾸기 위해 하단 탭바를 사용하는 것이 흔합니다. 반면 안드로이드의 플랫폼 관행은 탭바를 스크린 상단에 보여주는 것입니다. 또한 안드로이드 앱에서는 하단 바에서 액션을 표시합니다.
적절한 위치와 로직은 해당 플랫폼의 다른 앱들과 일관성있는 경험을 제공하도록 도와주며 액션과뷰 전환 사이의 혼선을 막아줍니다. 팁
터치 타깃을 충분히 크게 만듭니다. 타깃은 쉽게 탭 하거나 클릭할 수 있을 만큼 충분히 크게 만들어야 합니다. 하단 내비게이션 액션 버튼의 너비를 계산하는 방법은 액션의 개수로 화면의 너비를 나누는 것입니다. 아니면 모든 내비게이션 버튼을 가장 큰 액션 버튼에 맞출 수도 있습니다.
대부분의 유저는 10mm x 10mm 정도 크기의 터치 타겟을 편하고 안정적으로 터치하게 됩니다. Image credit: uxmag아이콘은 반드시 사용성 테스트를 거쳐야 합니다. 5초 룰을 사용합니다. 무언가에 대한 적절한 아이콘을 생각하는 데 5초 이상 걸린다면, 그 아이콘이 의미를 효과적으로 전달하지 못하게 될 확률이 높습니다.
아이콘은 항상 레이블과 함께 씁니다. 대부분의 아이콘에는 표준적인 용례가 없기 때문에, 텍스트 레이블은 의미를 전달하고 모호성을 줄이는 데 필수적입니다. 유저는 해당 요소를 탭 했을 때 정확히 무엇이 발생할지 알 수 있어야 합니다.
하단 네비게이션에 짧게 의미를 전달하기 위해 텍스트 레이블을 사용합니다.제스처 기반 내비게이션
2007년 6월 29일, 판도가 완전히 뒤집히는 사건이 있었습니다. 애플이 전체를 터치 스크린으로 만든 스마트폰을 시장에 내놓은 순간부터, 모바일 디바이스는 터치 스크린 인터랙션의 지배를 받아왔습니다.
Image credit: Aaron Wade제스처는 즉시 디자이너들 사이에서 인기를 얻었으며 제스처 컨트롤에 대한 연구를 기반으로 디자인된 앱이 많이 생겼습니다.
제스쳐 기반의 앱 Clear오늘날 모바일 앱의 성공은 제스처가 사용자 경험에 얼마나 잘 적용되었느냐에 따라 굉장히 달라집니다.
사례
Tinder는 스와이프 제스처로 업계를 완전히 뒤집었고, 이 제스처는 곧 Tinder를 정의하는 제스처가 되었습니다. 사람들은 Tinder를 생각하면 “왼쪽으로 스와이프” 혹은 “오른쪽으로 스와이프”를 떠올립니다.
장점
어수선한 UI를 제거해 줍니다. 제스처를 디자인의 핵심으로 만들면 보다 미니멀한 인터페이스를 만들 수 있으며 가치 있는 콘텐츠로 스크린 공간을 절약할 수 있게 됩니다.
“Natural User Interface” Luke Wroblewski의 글을 보면 9개국의 40명을 상대로 한 연구가 나옵니다. 그들에게 삭제하기, 스크롤링, 줌 등 28가지 태스크를 하는 제스처를 만들라고 했다고 합니다. 요점은 서로 다른 문화나 경험에서 비슷한 제스처가 나왔다는 점입니다. 예를 들어, “지우기”에 대해서는 대부분의 사람들은 국적과 상관없이 스크린 밖으로 오브젝트를 끌어내는 제스처를 취했다고 합니다.
단점
보이지 않는 내비게이션. UI의 중요한 디자인 룰은 ‘가시성’입니다. 메뉴에서 취할 수 있는 모든 액션은 잘 보이게 만들어 쉽게 발견할 수 있게 해야 한다는 겁니다. 보이지 않는 유저 인터페이스는 매력적일 수 있지만, 보이지 않아서 많은 사용성 문제가 발생합니다. 제스처가 언제나 숨겨져 있기 때문에 유저가 먼저 발견을 해야 합니다. 햄버거 메뉴와 마찬가지로 말이죠. 옵션을 숨기게 되면 더 적은 사람이 이용하게 될 것입니다.
유저가 들여야 하는 노력이 늘어납니다. 대부분의 제스처는 자연스럽거나 배우기 쉽거나 기억하기 쉽습니다. 제스처 기반 내비게이션을 디자인할 때는 UI 요소를 제거할 때마다 애플리케이션의 학습 곡선이 올라가며, 적절한 시각적 힌트와 단서가 없으면 유저가 앱 이용 방법을 헷갈려 할 수 있다는 점을 알아야 합니다.
팁
인터페이스와 상호작용하는 완전히 새로운 방식을 가르쳐야 하는 건 아닌지 확인해야 합니다. 익숙한 경험을 디자인하세요. 좋은 제스처 기반의 내비게이션을 만들기 위해서는, 모바일 세계에서 현재 제스처가 어떻게 이용되고 있는지 살펴보는 것부터 시작해야 합니다. 예를 들어, 이메일 앱을 디자인하다면, 이메일 위에 스와이핑 하는 제스처를 디자인할 수 있을 겁니다. 이 제스처는 여러 유저에게 익숙한 제스처일 확률이 높기 때문입니다.
약간의 시각적 단서를 통한 단계적 공개(progressivedisclosure)를 활용해서 인터페이스와 상호작용하는 방법을 알려줘 보세요. 유저가 현재하고 있는 활동과 관련 있는 정보만 제공해줘야 한다는 점을 염두에 두세요. 게임을 이용함에 따라 게임의 조작 원리를 하나씩 알려주는 것처럼 말이죠.
Pudding Monsters에서는 움직이는 손을 이용해 유저에게 새로운 시나리오를 보여줍니다.결론
유저가 길을 잘 찾을 수 있도록 도와주는 것은 모든 앱에서 우선순위로 삼아야 합니다. 언제나 여러분의 유저 퍼소나에 대해서 생각해보고, 그들이 앱을 이용할 때 가지는 목표가 무엇인지 고민해보고, 그들이 목표를 달성하는 데 도움을 주도록 내비게이션을 활용해보세요. 제품이 사용하기 쉬울수록 유저는 더 이용하려고 할 것입니다.
라이브 클래스 PM VOD 패키지(리서치/분석/전략/설계)
178여개 UX 강좌(총 300시간) PM VOD 패키지 98% 할인 이벤트!!!! 매일 하루에 딱 한명만!!!! 선착순 1명!!!!
