버튼 내비게이션 디자인 UX 원칙
UX 디자인 배우기 #75
Today UX 아티클
Smashing Magazine에 올라온 Nick Babich의 글 The Golden RulesOf Bottom Navigation Design를 전문(全文) 번역한 글입니다.
디자인은 좋게 보이는 것 그 이상입니다. 바로 이점을 모든 디자이너들은 반드시 알고 있어야 합니다. 디자인은 유저가 어떻게 제품에 몰입(engage)하게 되는지도 다룹니다. 사이트 건 앱이건, 디자인이란 대화(conversation)에 더 가깝다고 볼 수 있습니다. 내비게이션은 곧 대화입니다. 유저가 길을 찾을 수 없다면, 그 사이트 혹은 앱이 얼마나 좋은지는 전혀 중요하지 않게 됩니다.
이번 글에서는, 모바일 앱에서 좋은 내비게이션을 만드는 원칙을 더 잘 이해할 수 있도록 돕고, 두 가지 유명한 패턴을 활용해 어떻게 만들 수 있는지 보여드리겠습니다. 여러분만의 내비게이션을 프로토타이핑해보고 싶으시다면, 지금 바로 Adobe의 Experience Design CC를 무료로 다운로드하여 테스트해볼 수 있습니다.
시작해봅시다
내비게이션 UI 패턴은 좋은 사용성을 향한 지름길입니다. 가장 성공적인 최신 인터랙션 내비게이션 디자인을 살펴보게 되면, 확실한 승자는 기본 원칙을 완전하게 지켜 만든 디자인임을 알 수 있습니다. 고정관념에서 벗어나 생각하는 것이 보통은 좋은 생각이긴 하지만, 때로는 절대 깰 수 없는 규칙이 있기도 합니다. 다음은 훌륭한 모바일 내비게이션을 만드는 4가지 중요한 규칙입니다.
간단하게 만든다
첫째, 가장 중요한 점은 내비게이션 시스템은 반드시 간단해야 한다는 것입니다. 좋은 내비게이션은 유저를 가이드하는 ‘보이지 않는 손’처럼 느껴져야 합니다. 방법은 모바일 유저가 가장 많이 할 것 같은 태스크 순으로 모바일 앱의 내비게이션과 콘텐츠의 우선순위를 매기는 것입니다.
잘 보이게 만든다
Jakob Nielsen이 말했듯이, 무언가를 인식하는 것은 기억하는 것보다 더 쉽습니다. 즉, 액션과 옵션을 시각 잘 보이게 만들어 유저의 기억 부하를 최소화해야 한다는 점입니다. 내비게이션은 유저에게 필요할 것이라고 우리가 예상하는 상황뿐만 아니라 언제나 이용할 수 있어야 합니다.
명확하게 만든다
내비게이션 기능은 따로 설명할 필요가 없어야 합니다. 명확하고 간결한 방식으로 메시지를 전달하는 데 집중해야 합니다. 유저는 외부의 안내 없이도 한눈에 A지점에서 B지점으로 가는 방법을 알아야 합니다. 쇼핑카트 아이콘을 생각해봅시다. 쇼핑카트 아이콘은 결제를 하거나 아이템을 볼 수 있다는 식별자의 역할을 합니다. 유저는 결제를 하기 위해 어떻게 찾아 들어가야 하는지 고민할 필요가 없습니다. 쇼핑카트 버튼이 적합한 액션을 취할 수 있도록 인도해 줍니다.
일관성 있게 만든다
내비게이션 시스템은 어디서 보이건 동일해야 합니다. 내비게이션을 다른 페이지에서 새로운 위치로 이동하면 안 됩니다. 유저를 헷갈리게 하면 안 됩니다. 워드와 액션의 일관성을 유지하세요. 내비게이션은 “최소 놀람의 법칙(The Principle of Least Surprise)”을 따라야 합니다. 내비게이션은 여러분이 전달하는 콘텐츠에 몰입하고 상호작용 할 수 있도록 유저에게 영감을 줘야 합니다.
엄지손가락을 염두하고 디자인한다
Steven Hoober는 모바일 디바이스 사용에 관한 리서치를 통해 49%의 사람들이 엄지손가락 하나에 의존해 폰으로 일을 처리한다는 것을 밝혀냈습니다. 아래 이미지를 보면, 모바일 화면에서 손가락이 닿는 부분을 구분해서 표시하였는데, 색상은 유저가 엄지손가락으로 도달하고 사용할 수 있는 영역을 보여줍니다. 초록색은 유저가 유저가 쉽게 도달할 수 있는 영역, 노란색은 약간 손가락을 뻗어야 하는 영역, 빨간색은 디바이스를 잡은 방향을 바꿔야 도달할 수 있는 부분입니다.
한쪽 손으로 스마트폰을 잡고 있을 때 편하게 도달할 수 있는 부분을 보여주고 있습니다. Image Source: uxmatters디자인을 할 때는 앱이 여러 맥락에서 사용될 수 있다는 점을 고려해야 합니다. 두 손으로 폰을 잡고 있는 걸 더 선호하는 사람이라 할지라도 항상 한 손가락 이상 쓸 수 있는 상황에 있는 건 아닙니다. 어느 손으로든 한 손으로 UI를 이용할 수 있게 해주세요. 상위 레벨 액션과 자주 이용되는 액션을 스크린 하단에 배치하는 것은 매우 중요합니다. 한쪽 손과 한쪽 엄지손가락으로 편하게 인터랙션을 이용할 수 있게 해줘야 합니다.
또 다른 중요한 요점은, 동일한 중요도를 가진 상위 레벨 목적지를 하단 내비게이션에 배치해야 한다는 겁니다. 여기서 말하는 목적지란 앱에서 어디서는 직접 접근할 수 있어야 하는 곳입니다.
끝으로, 타깃의 크기에도 관심을 기울여야 합니다. 마이크로소프트는 터치 타깃의 사이즈를 가로 세로 9mm의 정사각형이나 그 이상 크게 만들기를 추천합니다. 가로 세로 7mm 이하의 터치 타깃은 이용을 피해야 합니다.
터치 타겟은 간격을 포함해서 44px 에서 48px (혹은11mm 에서13mm)보다 작게 만들면 안 됩니다.탭 바
많은 앱에서 탭 바를 앱의 가장 중요한 기능으로 사용하고 있습니다. 페이스북은 핵심 기능 사이를 빠르게 넘나들 수 있으면서도 한 번의 탭으로 이용할 수 있게 만들었습니다.
iOS용 페이스북 하단 탭 바(Largepreview)하단 내비게이션 디자인 시 고려해야 할 3 가지
내비게이션은 유저가 가고 싶어 하는 곳으로 가게 해주는 운송 수단이라고 할 수 있습니다. 하단 내비게이션은 동일한 중요도를 가진 상위 레벨의 목적지를 보여주는 데 사용되어야 합니다. 이런 목적지는 앱에서 어디에 있든 직접적으로 접근할 필요가 있는 곳이어야 합니다. 잘 만든 하단 내비게이션 디자인은 다음 세 가지 룰을 따릅니다.
1. 가장 중요한 목적지만 보여준다
하단 내비게이션에서 5개 이상의 목적지를 보여주는 건 피해야 합니다. 탭 타깃으로 서로 너무 가까이 붙어있게 될 수가 있습니다. 하나씩 추가할 때마다 앱의 복잡성을 늘리는 것과 같습니다. 만일 상위 레벨 내비게이션에 5개 이상의 목적지가 있다면, 대안적인 위치에서 부가 목적지에 접근할 수 있게 해줘야 합니다.
5개 이상의 목적지를 이용하는 건 피하도록 한다.스크롤할 수 있는 콘텐츠는 피한다
부분적으로 숨겨진 내비게이션은 작은 화면에서 선택할 수 있는 명확한 솔루션처럼 보입니다. 스크린 상의 제약을 걱정할 필요도 없고 내비게이션 옵션을 스크롤바 탭에 넣기만 하면 되는 거죠. 하지만, 스크롤할 수 있는 콘텐츠는 유저가 원하는 옵션을 보려면 스크롤을 해야 하기 때문에 덜 효율적이기 때문에 가능하다면 피하는 것이 좋습니다.
눈에서 멀어지면, 마음에서도 멀어집니다. 유저가 원하는 옵션을 선택하기도 전에 스크롤부터 해야 하는 상황을 막기 위해서는 탭 바에 너무 많은 아이템을 넣는 것은 피해야 합니다.2. 현재 위치 전달하기
앱 메뉴에서 가장 흔하게 발생하는 한 가지 실수는 유저에게 현재 위치를 알려주는 데 실패한다는 것입니다. “나는 지금 어디에 있는가?”는 유저가 성공적으로 길을 찾기 위해 반드시 대답할 수 있어야 할 기본 질문 중 하나입니다. 유저는 A지점에서 B지점까지 어떻게 가는 것인지 외부의 안내 없이 한눈에 알 수 있어야 합니다. 적절한 시각적 단서(아이콘, 레이블, 색상 등)를 사용하여 아무 설명이 필요 없도록 내비게이션을 만들어야 합니다.
아이콘
하단 내비게이션 액션은 아이콘으로 적절하게 소통되어야 합니다. 유저가 잘 알고 있는 보편적인 아이콘도 있긴 하지만, 그런 건 주로 검색, 이메일, 프린트 등과 같은 기능을 표현하는 것입니다. 불행하게도 보편적인 아이콘은 매우 드뭅니다. 불행하게도, 앱 디자이너는 보통 아이콘 뒤에 기능을 숨겨버려서 인식하기가 꽤 어렵습니다.
Bloom.fm의 구 버전 안드로이드 앱에서는 유저의 현재 위치를 알아보기가 쉽지 않았습니다.이 문제에 대해서는 Icons as Part of a Great User Experience라는 글에서도 강조했었습니다.
색상
하단 탭 바에서 서로 다른 색으로 만든 아이콘과 텍스트 레이블을 사용하는 건 피해야 합니다. 대신, 간단한 규칙을 따릅니다. 앱의 주요 색상으로 하단 내비게이션 액션(레이블과 아이콘 포함)을 칠해줍니다.
왼쪽: 서로 다른 색을 칠한 아이콘은 앱을 마치 크리스마스 트리처럼 만들어 버립니다. 오른쪽: 대신 한 가지 주요 색상만 이용하고 있습니다.
iOS용 트위터 앱에서 사용되는 하단 바 메뉴. 메시지 화면이 활성화 된 상태입니다하단 내비게이션에 색을 입혔다면, 흰색 혹은 검은색으로 현 위치의 아이콘과 텍스트 레이블을 만들어야 합니다.
왼쪽: 색을 입힌 하단 내비게이션 바에 또 색이 들어간 아이콘을 사용하는 건 피합니다오른쪽: 검정 혹은 흰색으로 아이콘과 레이블을 만든니다텍스트 레이블
텍스트 레이블은 내비게이션 아이콘에 짧고 의미 있는 정의를 보여줘야 합니다. 두 줄로 써지거나 잘릴 수도 있는 긴 텍스트 레이블은 피해야 합니다.
텍스트 레이블이 짤리거나 두 줄로 나뉘거나 쪼그라들게 만드는 건 피합니다.메뉴 요소는 훑어보기 쉬워야 합니다. 유저는 해당 요소를 탭 했을 때 무슨 일이 벌어질지 정확히 이해할 수 있어야 합니다.
타깃 사이즈
타깃은 충분히 크게 만들어서 쉽게 탭 하거나 클릭할 수 있게 해줘야 합니다. 하단 내비게이션 버튼의 너비를 계산하기 위해서는, 액션 수로 전체 화면의 너비를 나누면 됩니다. 아니면 그 대신 모든 하단 내비게이션 액션을 가장 큰 액션의 너비에 맞춥니다.
안드로이드 가이드라인에서는 모바일에서 다음과 같은 수치를 따를 것을 추천하고 있습니다.
모바일에서의 하단 고정 네비게이션 바의 너비를 보여줍니다탭에 붙은 뱃지
탭 바 아이콘에 해당 화면 혹은 모드와 관련되어 새로운 정보가 있음을 알려주는 뱃지를 붙일 수도 있습니다.
과하지 않게 소통하기 위해 탭 바 아이콘에 뱃지를 붙일 수도 있습니다3. 따로 설명할 필요가 없는 내비게이션을 만든다
사용자 여정 동안 사용자를 가이드하는 ‘보이지 않는 손’처럼 느껴져야 좋은 내비게이션입니다. 결국, 사람들이 찾을 수 없다면 아무리 매력적인 콘텐츠고 아무리 멋진 기능이라도 다 무용지물이 되는 것입니다.
행동
각각의 하단 내비게이션 아이콘은 유저를 반드시 목표 목적지로 안내해야 하며 다른 메뉴나 팝업이 열리면 안 됩니다. 하단 내비게이션 아이콘을 탭 하면 유저는 곧장 관련 화면으로 넘어가거나 현재 화면이 새로고침 되어야 합니다. 현재 화면이나 모드에서 작동할 수 있는 요소에 대한 통제권은 탭 바를 통해 유저에게 주면 안 됩니다. 만일 제공할 컨트롤이 필요하다면, 탭 바 대신 툴바를 사용하세요.
각 하단 네비게이션 아이콘은 반드시 목표 목적지로 연결되어야 합니다.
현 화면에서 필요한 컨트롤을 제공하고 싶다면, 하단 네비게이션 대신 툴바를 이용합니다.일관성을 고수한다
가능한 어디를 가든 동일한 탭을 보여줘야 합니다. 시각적 안정성의 느낌을 유저에게 줄 수 있다면 가장 좋습니다.
탭 바에 있는 기능을 쓸 수 없다고 해서 탭 바를 제거하면 안 됩니다. 특정 경우에만 탭을 제거하게 되면, 앱의 UI를 불안정하면서도 예측 불가능하게 만들게 될 수도 있습니다. 최고의 솔루션은 모든 탭을 쓸 수 있게 해주는 것이지만, 쓸 수 없다면 왜 그런지 설명해줘야 합니다. 예를 들어, 어떤 유저가 오프라인 파일을 가지고 있지 않은 경우에 Dropbox에서는 오프라인 파일을 어떻게 올릴 수 있는지 그 방법을 빈 화면에 보여줍니다. 이런 걸 ‘빈 상태(Empty state)’라고 합니다.
Dropbox 앱의 빈 상태 화면스크롤에 따라 탭 바를 숨긴다
만일 해당 스크린이 스크롤할 수 있는 피드라면, 탭 바는 사람들이 새로운 콘텐츠를 보기 위해 스크롤을 하는 동안은 숨겨져 있다가 다시 상단으로 가려고 하면 보이도록 만들 수 있습니다.
상단 탭 네비게이션은 스크롤링에 따라 역동적으로 나타났다 사라질 수 있습니다.시각적 즐거움
뷰 사이에 왔다 갔다 전환할 때 옆으로 넘기는 모션을 이용하는 건 피해야 합니다. 활성화된 화면과 비활성화된 화면 사이의 전환은 크로스페이드(fross-fade) 애니메이션을 이용해야 합니다.
크로스 페이드 애니메이션 Source: Material Design픽토리얼 아이콘: 창의적인 내비게이션
디스플레이의 크기는 유저와 의사소통하는 데 가장 큰 문제가 됩니다. 메뉴 아이콘을 픽토리얼 아이콘(pictorial icons)을 사용하는 것은 모바일 스크린 공간 전략이라는 문제의 가장 흥미로운 솔루션 중 하나입니다. 아이콘의 모양은 공간을 효율적으로 활용하면서도 유저가 어디로 가게 될지 설명해줍니다. 내비게이션을 간단하고 이용하기 쉽게 만들어줄 주면서도, 여러분을 다른 경쟁자와 차별화할 수 있는 여지를 줍니다.
구글 머티리얼 디자인, 플로팅 액션 버튼구글 머티리얼 디자인은 이런 식의 내비게이션을 ‘플로팅 액션 버튼’이라는 용어로 부릅니다. UI 위에 떠있는(floating) 원형 아이콘으로 모션이 담겨 있습니다. Evernote와 같은 앱에서는 가장 중요한 액션을 플로팅 액션 버튼으로 만들어 이런 컨트롤들을 간소화했습니다.
안드로이드용 Evernote 앱에서 사용된 플로팅 액션 버튼 Image Source: Evernote.(Large preview)Tumblr도 멋진 픽토리얼 아이콘을 적절한 레이블과 함께 보여줍니다. 이 아이콘들은 앱을 스크롤하면 편리하게 사라집니다.
Tumblr 모바일 어플리케이션 (Large preview)하지만, 이런 패턴은 한 가지 큰 단점이 있습니다– 플로팅 액션 버튼이 콘텐츠를 덮어버린다는 것입니다. UX의 관점에서 봤을 때, 유저가 액션을 취해야만 자신이 취할 수 있는 다른 액션이 무엇이 있는지 발견하게 만들면 안 됩니다.
또한 많은 리서처들이 아이콘은 기억하기 어렵고 종종 굉장히 비효율적임을 밝혀내고 있습니다. 보편적으로 이해되는 아이콘(예: 프린트, 닫기, 재생/일시정지, 댓글, 트윗 등)은 괜찮습니다. 아이콘을 명확하고 직관적으로 만들고 아이콘 옆에 레이블을 붙여야 하는 것도 바로 이런 이유 때문입니다.
결론
내비게이션은 일반적으로 유저를 유저가 원하는 곳으로 데려다주는 운송수단과 같습니다. 항상 유저 퍼소나를 생각하고, 그들이 앱을 이용할 때 가질 목표를 생각해야 합니다. 그다음에, 그들의 목표에 도움이 되는 방향으로 내비게이션을 만들어야 합니다. 여러분은 유저를 위해 디자인하고 있는 것입니다. 그들은 제품을 이용하기 쉬울수록, 더 많이 이용하려고 할 것입니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
https://www.inflearn.com/users/196290
