brunch

You can make anything
by writing

C.S.Lewis

by 정윤선 Dec 23. 2016

모바일을 위한 UX 디자인 -하단 내비게이션

(출처 : https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/와 https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.cycyhsnzi의 기사를 번역 및 가공한 컨텐츠 입니다.)

디자이너는 디자인이 이쁘고 아름답게 보이는 것 이상의 역할을 해야 한다는 것을 알고 있습니다. 디자인은 웹에서나 앱에서나 똑같이 유저가 프로덕트을 사용하는 방식을 다루고 있고, 프로덕트을 디자인한다는 것은 유저가 프로덕트와 소통하는 법을 만드는 것 입니다.

사이트나 앱이 얼마나 좋든 간에, 유저가 당신의 디자인을 사용하다가 길을 잃는 일이 생기면 프로덕트의 존재이유가 없어지기 때문에 내비게이션은 유저에게 끊임없이 소통을 제공해야 합니다.

내비게이션 UI는 좋은 소통을 제공하는 툴이고, 기본을 완벽하게 지킨 내비게이션 UI들이 최근 성공적인 인터렉션의 디자인으로 뽑힙니다.

왜 하단 내비게이션이 중요할까?

스티븐 후버 (Steven Hoober)는 모바일 디바이스 사용성에 대한 연구에서 49 % 의 사람들이 자신의 핸드폰에서 테스크를 완료하기 위해 엄지손가락 하나에 의지한다는 것을 발견했습니다.

양손으로 디바이스를 잡는 방식을 선호하는 사람이더라도, 항상 두 손을 사용하여 인터렉션 할 수는 없습니다. 디자인 할 때 앱이 여러 상황에서 사용될 것이라는 점을 항상 고려해야 합니다.

아래 그림의 핸드폰 화면에 나타나는 다이어그램은 대략적으로 엄지손가락이 도달할 수 있는 범위를 시각화한 것으로, 유저가 엄지손가락을 통해 화면과 인터렉션 할 수 있는 영역을 색상으로 나타냅니다.

녹색- 유저가 쉽게 접근할 수 있는 부분

노란색- 엄지손가락을 늘리거나 뻗어야 닿는 부분

빨간색 - 유저가 모바일 디바이스를 좌우 전환해야 하거나 들고 있는 손을 바꿔야 하는 부분

출처 : uxmatters

메인기능 및 자주 사용되는 작업은 화면 아래쪽에 배치하는 것이 중요합니다. 한 번의 엄지 손가락 조작으로 편안하게 원하는 기능이나 페이지로 갈 수 있기 때문입니다.

탭 바(Tab bar)

많은 앱이 하단 내비게이션 탭 바(tab bar)에 앱의 가장 중요한 기능을 담습니다.

Facebook은 하단 내비게이션 탭을 사용해 한 번의 탭으로 핵심 기능을 사용할 수 있게 하며, 이를 통해 핵심기능 간의 신속한 전환이 가능합니다.

iOS에서의 페이스북 하단 내비게이션 탭 바

하단 내비게이션을 디자인할 때 3가지 중요한 규칙

내비게이션은 일반적으로 유저가 가고 싶은 곳으로 이동하는 수단입니다.

하단 내비게이션은 비슷한 중요성을 가진 최상위 메인기능이나 페이지를 담고 있는 메뉴항목에 사용되어야 하고 이 항목들은 앱의 어느 곳에서나 바로 사용될 수 있어야 하는 앱의 핵심 목적을 담고 있어야 합니다.

좋은 하단 내비게이션 디자인은 이 세 가지 규칙을 따릅니다.

1. 가장 중요한 목적의 페이지만 표시

하단 내비게이션에는 3 ~ 5 개의 제일 중요한 기능이나 메뉴들을 담는 게 좋고, 목적지가 3개 미만인 경우 탭을 사용하는 것이 좋습니다.

하단 내비게이션에서 5개 이상의 탭을 사용하면 탭 사이가 너무 가까워지므로 5개 이상일 경우는 하단 내비게이션의 형식을 사용하면 안 됩니다.
탭 막대에 너무 많은 탭을 넣으면 물리적인 공간확보가 안되기 때문에 사람들이 원하는 탭을 선택하기가 어려울 수 있습니다.

이 경우, 탭이 추가될 때마다 앱의 복잡성도 따라서 증가해서 유저의 사용성을 해칩니다.

5개 이상의 항목의 중요한 메뉴들이 있는 경우 다른 방법을 통해 하단 내비게이션에 포함되지 않은 메뉴에 대해 접근할 수 있는 지점을 제공해야 합니다.

스크롤 가능한 콘텐츠 피하기

부분적으로 내비게이션을 숨기는 것은 작은 화면을 위한 매우 효과적인 솔루션입니다. 제한된 화면 공간에 대해 걱정할 필요가 없기 때문입니다. 제한된 화면 크기가 문제라면 내비게이션 항목을 스크롤 가능하게 만드는 것도 하나의 방법입니다.

그러나 스크롤 할 수 있는 콘텐츠는 한 눈에 모든 콘텐츠를 볼 수 없고, 스크롤 할 때 숨겨지는 부분이 생기기 때문에 효율성이 떨어집니다.

iOS 에서 Rookie Cam 앱의 "눈에서 멀어지면 마음에서도 멀어지는"문제.

2. 현재 위치에 대한 정보 전달

현재 위치를 표시하지 못하는 것은 앱 메뉴를 디자인할 때 볼 수 있는 가장 흔한 실수입니다.

“나는 지금 어디에 있나?”라고 유저가 질문을 던졌을 때, 성공적인 내비게이션은 그에 대답할 수 있어야 합니다.

유저가 프로덕트를 사용 할 때, 가이드 없이 그냥 훑어보기만 해도 자신이 있는 A라는 지점에서 B지점까지 어떻게 이동할 수 있는지 알 수 있어야 좋은 디자인입니다.

디자이너는 내비게이션을 통해 가이드에 의존하지 않고도 직관적으로 유저가 자신의 현재 위치를 알 수 있도록 적절한 시각적 신호 (아이콘, 라벨 및 색상)를 사용할 수 있어야 합니다.

아이콘

하단 내비게이션은 아이콘으로 표시되기 때문에 아이콘을 보면 콘텐츠가 연상될 수 있는 관련성 있는 아이콘을 사용해야 합니다.

유저가 잘 알고 있는 보편적인 아이콘들로 검색, 메일, 전화 등과 같은 아이콘들도 있지만 불행히도 이렇게 대표성을 가진 아이콘은 드문 경우입니다.

실제로 앱 디자이너들은 인식하기 어려운 아이콘을 사용함으로써 의도치 않게 기능을 숨겨버리기도 합니다.

Android 용 Bloom.fm 이전 버전. 유저의 현재위치를 알기 너무나 어려움.

컬러

하단 내비게이션 탭 바에 기존 컬러 스와치와 너무 다른 색상의 아이콘, 또는 텍스트 레이블을 사용하면 안됩니다.

유저가 현재 어디를 보고 있는지를 알려주려면 포커싱 된 탭에 앱의 기본 색상을 사용하는 것이 좋습니다.

왼쪽 : 다른 색깔의 아이콘은 앱을 크리스마스 트리처럼 보이게 함 / 오른쪽 : 기본 색상을 하나만 사용하여서 명시성이 높음

앱의 기본 컬러셋으로 하단 내비게이션(아이콘 및 모든 텍스트 라벨 포함)을 표현하는 것이 바람직 합니다.

iOS 용 Twitter 앱의 하단 내비게이션 바 : 메시지보기 메뉴가 활성화 되어 있다는 것을 쉽게 알 수 있음

하단 내비게이션이 이미 컬러로 표현되고 있는 경우 현재 사용되고 있는 아이콘과 텍스트 레이블을 검정색 또는 흰색으로 만드는 것이 좋습니다.

왼쪽 : 하단 내비게이션바에서 컬러 아이콘의 의미(활성화,비활성화)를 알 수 없음 / 오른쪽 : 흑백 아이콘을 사용해서 현재 유저가 머물러 있는 위치를 전달

텍스트 레이블

텍스트 레이블은 네비게이션 아이콘에 대한 짧고 의미가 담긴 UI 텍스트를 제공해야 합니다.

이러한 레이블은 두 줄이 되거나, 잘리거나 압축되지 않아야 직관성이 높아지므로 긴 텍스트 레이블은 피하는 게 좋습니다.

텍스트레이블이 두 줄이 되거나, 잘리거나, 압축됨

메뉴 요소는 쉽게 스캔 할 수 있어야합니다. 유저는 각 메뉴들을 눌렀을 때 정확히 어떤일이 생길지를 알 수 있어야합니다.

하단 내비게이션의 탭 사이즈

탭을 쉽게 두드리거나 클릭하기에 충분히 크게 만듭니다.

화면의 너비를 메뉴 수로 나누어서 메뉴별 사이즈를 재단하고, 하단 내비게이션을 화면의 다른 요소의 너비보다 가장 큰 너비로 만듭니다.

Android 가이드 라인은 모바일에서 하단 탐색 바의 크기를 다음과 같이 제안합니다.

모바일에서 고정된 하단 내비게이션 (dp단위) 출처 : Material Design.

Microsoft는 터치 대상 크기를 9mm 정사각형 이상으로 설정하도록 제안합니다 (1.0x 배율로 135PPI 디스플레이에서 48x48 픽셀). 7mm 미만으로 만드는 것은 지양됩니다.

터치 대상은 44px ~ 48px (또는 11mm ~ 13mm) 미만이어야하며 패딩이 포함됩니다.

탭의 배지

탭 아이콘에 배지UI를 달아 해당 보기 또는 모드와 관련된 새 소식이 있음을 나타낼 수 있습니다.

지나치게 관심을 요구하지 않는 디자인을 하려면 탭바 아이콘에 배지를 다는 방법도 좋은 해결책입니다.

3. 설명하지 않아도 내비게이션이란 것이 분명한 디자인

좋은 내비게이션은 유저가 사이트에서 하는 행동을 이끌어주는 보이지 않는 손처럼 만들어져야 합니다.

멋진 기능이나 가장 매력적인 콘텐츠도 사람들이 찾을 수 없다면 결국 쓸모가 없습니다.

행동

각 하단 내비게이션 아이콘은 해당 페이지나 기능으로 바로 연결되어야 합니다.

하단 내비게이션 아이콘을 탭 하면 관련된 페이지나 기능으로 바로 연결되거나, 현재 보고 있는 창을 새로 고쳐야 합니다.

탭 바에 현재 화면에서 요소를 조작할 수 있도록 컨트롤 기능을 제공하면 안됩니다.

컨트롤 기능을 제공해야 하는 경우 탭 바 대신 도구 모음이 사용되어야 합니다.

일관성을 위한 노력

화면을 가로로 사용하거나 세로로 사용하거나, 가능한 한 모든 방향에서 동일한 탭을 표시하는 것이 사용성 측면에서 중요합니다. 모든 방향에서 동일한 탭을 제공하여 유저에게 시각적인 안정성을 부여하기 때문입니다.

기능을 사용할 수없는 경우 탭을 제거하지 않아야 합니다. 어떤 경우에는 탭을 제거하고 어떤 경우에서는 탭을 남겨두면 앱 UI가 불안정하고 기능들의 위치가 변하게 되어서 매번 유저가 학습을 해야 합니다.

가장 좋은 해결책은 모든 탭을 사용하도록 설정하고 탭의 콘텐츠를 사용할 수 없는 이유를 설명하는 것입니다. 예를 들어 Dropbox에서 유저가 오프라인 파일을 가지고 있지 않으면 Dropbox 앱의 오프라인 탭을 눌렀을 때, 오프라인 파일을 가지려면 어떻게 해야 하는지를 설명하는 화면이 나타납니다.

드롭박스 앱의 탭 콘텐츠가 빈 상태의 화면

숨기기

화면이 스크롤 피드인 경우 유저가 새 콘텐츠를 스크롤 할 때 상단 내비게이션 탭을 숨길 수 있으며 맨 위로 돌아가려고 할 때 상단 내비게이션이 보이게 할 수 있습니다.

상단 네비게이션은 스크롤 할 때 동적으로 나타나고 사라질 수 있습니다 .

시각적 즐거움

보기 사이를 전환 할 때 가로로 밀리는 모션을 사용하지 않는게 좋습니다. 활성 뷰와 비활성 뷰 사이의 전환은 크로스 페이드 애니메이션(cross-fade animation)으로 과하지 않게 사용되야합니다.

크로스 페이드 애니메이션(Cross-fade animation). 출처: Material Design.

+ 픽토리얼 아이콘 : 창의적인 내비게이션

제한된 디스플레이 영역은 디자이너들에게 중요한 도전 과제입니다.

픽토리얼 아이콘을 메뉴로 사용하는 것은 모바일 화면 공간을 절약하는 문제에 대한 가장 흥미로운 솔루션 중 하나입니다.

아이콘의 모양은 공간을 효율적으로 활용할 수 있도록 도와줄 뿐 아니라, 내비게이션 기능을 사용하기 쉽고 간단하게 만들어 줍니다.

Google의 Material 디자인에서는 이러한 유형의 네비게이션에 '플로팅 액션 버튼'이라는 용어를 사용합니다.

'플로팅 액션 버튼'은 UI 위에 떠있는 원 모양의 아이콘으로 콘텐츠들과 구별되며 고유의 모션을 가지고 있습니다.

구글의 Material 디자인, 플로팅 액션 버튼의 예.

Evernote 어플리케이션은 가장 중요한 메인액션에 플로팅 액션 버튼을 사용하여 내비게이션을 단순화했습니다.

Android 용 Evernote 앱의 플로팅 액션 버튼 이미지 / 출처: Evernote

Tumblr에는 멋진 픽토리얼 아이콘과 적절한 라벨이 있습니다.

이 아이콘은 앱을 스크롤 할 때 편리하게 사라집니다.

Tumblr 애플리케이션.

그러나 이 패턴에는 한 가지 주요 단점이 있습니다.

플로팅 액션 버튼이 콘텐츠를 숨길 수 있고, UX의 관점에서 유저가 다른 메뉴들을 보기 위해 어떤 액션도 취하지 않을 수 있습니다.

또한 하단 내비게이션의 아이콘 문제처럼, 플로팅 액션 버튼에 사용되는 대다수의 아이콘 또한 유저가 잘 알고 있는 보편적이고 대표적인 아이콘들로 사용되어야 합니다.

아무리 대표성을 띄는 아이콘이라도 유저의 해석이 다를수 있기 때문에, 아이콘을 선명하고 직관적으로 만들고 추가적으로 아이콘 옆에 텍스트 레이블을 추가하는 것이 중요합니다.

정리하자면,

하단 내비게이션은 반드시
-잘 보이고 잘 구조화되어 있어야 합니다. (3-5 개의 제일 중요한 메뉴를 사용하고 하단 내비게이션에서 스크롤은 가능한 피해야 합니다)
-명확해야 합니다. (하단 내비게이션에 사용되는 항목들은 시각적으로 쉽게 스캔되어야 하며 쉽게 누를 수 있을 만큼 커야 합니다)
-심플해야 합니다. (각 하단 내비게이션의 아이콘이 적절하게 연결되고 하단 내비게이션이 애플리케이션에 포함된 모든 요소와 동일하고 일관되게 표현되어야 합니다).