Real Design

구글의 UX가이드의 변화 Bottom navigation 햄버거는 사라지는가? 본문

UI&UX

구글의 UX가이드의 변화 Bottom navigation 햄버거는 사라지는가?

GS Real Design 2016. 3. 17. 15:56

최근 구글의 Material 디자인 가이드에 Bottom navigation 이란 콤포넌트를 추가 했습니다. 

화면의 하단에 아이콘과 네비게이션 명이 조합된 형태로 iOS의 하단 탭바와 동일한 UI입니다. 



위 사진과 같은 형태의 콤포넌트입니다. 구글이 지금까지 iOS와 UI를 차별화하고 컨텐츠 영역확보 차원에서 

하단에 탭바나 네비게이션을 두지 않는 것을 원칙으로 했습니다. 


이에 대한 해결책으로 좌측 상단의 햄버거 메뉴(divider)와 우측하단의 플로팅 버튼을 제안했습니다. 


그랬던 구글이 iOS의 하단 탭바와 동일하다고 밖에 할 수 없는(따라한거 맞죠) Bottom navigation을

콤포넌트에 추가한 것일까요?





이유는 두가지로 설명 될 수 있습니다. 

첫번째는 구글의 UX 가이드는 엄지 손가락을 통한 모바일 디바이스사용시 사용성이 떨어진다. 

두번째 메뉴 옵션을 숨기는 것보다는 노출시켜주는 것이 사용성이 더 높다 



첫번째 2013년 uxmatters.com는 모바일 디바이스 사용자 조사에서 85%가 엄지손가락으로 사용한다고

발표했습니다. 


엄지손가락을 사용한 다는 것은 화면 전체에서 주로 터치하는 영역이 좁아지며 

이에 따라 햄버거 메뉴와 플로팅 배너는 사용성이 떨어진다는 의견이 UI/UX 디자이너 사이에서 

끊임없이 재기돼 왔습니다. 많은 대안들이 논의되어 왔습니다. 특히 햄버거 메뉴에 대한 공격은 


Kill The Hamburger Button


The Hamburger Menu Doesn't Work

 





엄지 손가락을 사용시 아래 그림과 같은 Thumb Zone이 생성됩니다. 붉은색은 엄지손가락의 접근성이 떨어지고 녹색이 

엄지 손가락이 쉽게 접근 할 수 위치 입니다.  






아래 그림과 같이 구글 메터리얼 디자인의 주요 네비게이션 UI가 엄지손가락으로 사용했을 때 사용성이 떨어지는 

위치에 있습니다. 왼쪽의 새로운 텝바(Bottom navigation)는 엄지 손가락이 접근하기 훨씬 수월합니다. 




그래서 인지 페이스북이나 인스타그램 등의 주요 앱들은 하단 텝바를 고수해 왔습니다. 




사진출처  : http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you


구글도 이런 문제점에 대해 인지해왔고 그에 대한 해결책을 모색했을 것으로 보임니다. 그리고 다양한 대안들을 

테스트해 봤지만 텝바가 가장 나은 해결책으로 결론이 났을 겁니다. 그래서인지 콤포넌트 리스트에세 맨 위로 올렸겠지요.

하단의 텝바(Bottom navigation)때문에 좁아진 영역은 아래로 스크롤시 텝바가 사라지는 인터렉션으로 해결했습니다. 




두번째 이유는 다음에 정리하겠습니다. 






 





0 Comments
댓글쓰기 폼