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

 최근 구글은 Material Design Guide(다양한 디바이스를 아우르는 구글의 디자인 가이드라인, 일관된 사용자 경험을 위해 제작되었다)에 Bottom navigation이란 요소를 추가했습니다. iOS와 UI를 차별화 하고 콘텐츠 영역을 확보하겠다는 의도에서 하단에 내비게이션을 두지 않는 것을 원칙으로 하였던 구글이 결국에는 하단 내비게이션을 선택한 것이죠.

구글의 하단 내비게이션, 사진출처

페이스북의 변화도 인상적입니다. 주요 메뉴들을 하단 내비게이션으로 끌어냈습니다. 구글의 프로덕트 디렉터인 Luke Wroblewski의 ‘Obvious Always Wins’에 따르면, 기존에 메뉴와 내비게이션의 역할을 하였던 햄버거 메뉴를 없애고 하단에 내비게이션을 두면서 사용성이 더 높아졌습니다.

햄버거 메뉴를 하단 내비게이션으로 대체한 페이스북과 Redbooth, 사진출처

이러한 변화들은 무엇을 말하고 있을까요?  그리고 왜 하단 내비게이션일까요?

스티븐 후버는 일반인의 모바일 기기 사용에 대한 자신의 연구에서, 응답자의 49%가 스마트폰을 사용할 때 한 손으로 잡고 엄지 하나 만을 사용한다고 밝혔습니다.

스마트폰을 잡는 손의 위치에 따라 생기는 두 가지 주요 터치 영역, 사진출처

엄지 손가락을 사용할 때 터치하기 쉬운 영역, 사진출처

 스마트폰을 사용할 때 엄지손가락을 사용하게 되면, 위의 그림과 같이 Thumb Zone이 생깁니다. 녹색이 엄지손가락이 닿기 쉬운 위치이고, 붉은색으로 갈 수록 엄지손가락이 닿기 어려운 위치입니다. 스마트폰의 크기가 커질 수록 그 경계가 더욱 극명합니다.

구글 Material Design의 주요 내비게이션 터치 영역 비교, 사진출처

Thumb Zone을 실제로 대입해보면 그 차이가 더욱 명확합니다. 위의 그림처럼 한 손만 사용하는 사용자의 경우에는 상단에 왼쪽에 위치하는 햄버거 메뉴보다 하단의 내비게이션에 엄지손가락이 접근하기 쉽습니다. 두 손으로 스마트폰을 사용하는 사용자들이 상대적으로 영역에 구애 받지 않는다고 할 때, 기존의 햄버거 메뉴보다는 하단의 내비게이션을 사용함으로써 대부분의 사용자들을 고려한 서비스를 제공할 수 있습니다.  

그렇다면 하단 내비게이션을 잘 만들기 위해서는 어떻게 해야 할까요?

1.가장 중요한 목적지만 담을 것

하단 내비게이션에는 3~5개의 목적지를 담는 것이 좋습니다. 목적지가 3개 미만일 경우는 사용자가 받는 정보가 빈약하여 서비스를 제대로 파악하지 못하게 되고, 5개가 넘어가면 선택 영역이 좁아져서 사용자가 불편함을 느끼고 이용 중인 서비스에 대해 복잡함을 느끼게 됩니다.

목적지가 2개일 때보다 안정적인 3개짜리 내비게이션, 사진출처

5개가 넘어가자 아이콘이 작아지고 복잡해진 내비게이션, 사진출처

Gaumengut의 안정적인 하단 네비게이션, 사진출처

따라서 하단 내비게이션에 너무 축약하거나 너무 많이 보여주기보다는, 3~5개의 엄선된 목적지를 배치하여 안정으로 구성할 필요가 있습니다.

2.현재 위치를 잘 보여줄 것

‘내가 지금 어디에 있는가?’를 사용자가 아는 것은 매우 중요합니다. 여행을 할 때 지도를 펼쳐 들고 내가 지금 어디에 있는 지를 알아야 다음에 어디를 갈지, 어떻게 가야 할 지 한눈에 파악할 수 있는 것과 같습니다.

하단 내비게이션에는 주로 아이콘을 사용하는데, 아이콘에 각기 다른 색을 쓰는 것보다는 주요 색으로 통일하고 사용자가 현재 있는 위치의 아이콘만 색깔을 다르게 하는 것이 좋습니다.

크리스마스 트리 같은 색(왼쪽)보다는 주요한 색 하나를 쓰는 것(오른쪽)이 눈에 띕니다. 사진출처

메시지가 파란색으로  활성화 중인 트위터의 하단 내비게이션, 사진출처

 목적지 각각을 어떻게 잘 설명하느냐도 내가 지금 어디에 있는지 파악하는 데 중요한 역할을 합니다. 해당 메뉴의 역할이 충분히 설명되지 않은 아이콘을 사용하거나, 텍스트 라벨이 간결하고 함축적으로 목적지를 설명하지 못하면 사용자가 한눈에 현재 위치를 파악하는 데 어려움을 겪을 수 있습니다.

아이콘이 무엇을 나타내는지 알기 힘든 Bloom.fm 앱, 사진출처

텍스트 라벨이 간결하지 못해서 발생하는 나쁜 예, 사진출처

3.따로 설명이 필요 없도록 명확하게 표현할 것

 사용자를 이끄는 매력적인 특징과 콘텐츠가 있다고 하더라도 사용자가 그것을 발견하지 못하면 아무 소용이 없을 것입니다. 그래서 하단 내비게이션은 명확해야 합니다.

하단 내비게이션은 눌렀을 때 어떤 단계를 거치지 않고도 직접 연관된 화면이 보이는 목적지로 향해야 합니다. ‘Photo’라고 하면 사진들을 모아 놓은 앨범이 아니라 모든 사진이 쭉  나열되어 있는 화면이 나와야하는 것이죠.

직접적인 화면을 보여주는 하단 내비게이션, 사진출처

그리고 가능하면 어떤 화면이든지 항상 같은 내비게이션을 노출해야 합니다. 그래야 사용자가 안정적으로 느낄 수 있고, 각각 내비게이션의 목적에 대한 이해도 더욱 쉽게 할 수 있습니다. 일시적으로 사용이 불가능한 목적지가 하단 내비게이션에 존재할 수 있습니다. 그럴 때는 내비게이션 상에서 지우는 것이 아니라, 왜 사용이 불가능한지 알려주는 화면을 보여주고 내비게이션을 고정함으로써 각 목적지의 존재감을 명확히 할 수 있습니다.      

  

모바일 웹을 디자인하고 계신가요? 앱을 디자인하고 계신가요?

좋은 하단 내비게이션은 사용자를 이끄는 보이지 않는 손과 같습니다. 사용자가 가고 싶은 길을 쉽게 갈 수 있도록 안내하고, 더 나아가서는 사용자를 움직이게 만듭니다. 하단 내비게이션으로 사용자의 행동을 디자인해보는 것은 어떨까요?

출처 : Medium, GS real design

by 수달 발자국