모바일 하단 내비게이션 바 Tip!
Medium을 통해 해외 IT 아티클을 읽는 것을 습관 하고자 많이 보고 있습니다. 제가 본 아티클 중 도움이 되는 글을 소개드리고자 합니다. 출처는 하단에서 확인하실 수 있습니다.
Tip 1. 탭 수를 5개로 제한
하단 내비게이션에 메뉴가 너무 많으면 사용자 입장에서 복잡하고 혼란스러울 수 있습니다. 이 공간을 오버로드하면 모바일 장치에서 각 메뉴가 더 작아지고 정확하게 터치하기가 더 어려워질 뿐만 아니라 너무 많은 선택지를 사용자에게 주게 되는 거죠. 이로 인해 사용자는 결정을 내리기가 어려워지는 '선택 장애'가 발생할 수 있습니다.
가장 적당한 개수는 약 3~5개입니다. 공간을 혼잡하게 만들지도 않고 사용자에게 충분한 옵션을 제공하죠. 메뉴 수가 적으면 여백에 여유가 생겨 터치하기 더 쉬워지고, 실수로 클릭하는 일이 줄어듭니다. 또한 이는 사용자 입장에서 앱이 체계적으로 느껴지고 탐색하기 쉬워진다는 장점도 있습니다.
Tip 2. 엄지 손가락에 친화적으로
일반적인 관례는 엄지손가락으로 쉽게 터치할 수 있을 만큼의 영역을 사용하는 것입니다. 일반적으로 메뉴 영역이 최소 44x44픽셀 정도입니다. 이는 인간 엄지손가락의 평균 크기를 기반으로 하므로 대부분의 사용자가 실수로 잘못된 항목을 누르는 일 없이 탐색 항목을 편안하고 정확하게 터치할 수 있습니다.
엄지 손가락에 친화적으로 한다면 앱의 전반적인 사용성이 향상됩니다. 사용자는 엄지 손가락을 사용해서 탐색할 가능성이 높습니다. 그래서 더 넓은 터치 영역은 사용자의 오류와 불만의 가능성을 줄여 앱을 더욱 사용자 친화적으로 만들어줍니다. 또한 접근성을 높일 수 있습니다. 모든 사용자가 동일한 수준의 손재주를 가지고 있는 것은 아니며, 넉넉한 터치 영역을 잡아야 다양한 사람들이 앱에 더 쉽게 접근할 수 있습니다.
반면 24x24픽셀과 같이 터치 영역이 작을수록 오류가 자주 발생하고 사용자 경험이 저하될 수 있습니다.
Tip 3. 활성 상태와 비활성 상태 구별
원활한 사용자 경험을 위해서는 하단 탐색의 활성 상태를 차별화하는 것이 필수적입니다. 이를 통해 사용자는 자신이 앱 내 어디에 있는지 즉시 알 수 있습니다. 이를 효과적으로 전달할 수 있는 방법은 활성 아이콘의 스타일과 색상을 변화 하는 것입니다. 눈에 띄는 색상 변화와 함께 윤곽선에서 채워진 버전으로 전환되는 아이콘은 사용자의 주의를 현재 위치로 빠르게 안내합니다.
이러한 구별을 강화하면 활성 아이콘의 레이블 텍스트를 더 어둡고 두껍게 만들 수도 있습니다. 이 간단한 조정은 활성 상태에 대한 사용자의 집중을 강화합니다. 변형된 아이콘 스타일, 눈에 띄는 색상, 더 굵은 텍스트의 조합은 활성 탭과 비활성 탭을 효과적으로 구분하는 데 좋습니다.
반대로 아이콘만 변경하고 텍스트만 변경하는 디자인은 충분히 뚜렷하지 않을 수 있습니다. 이러한 경우 사용자는 앱에서 자신의 현재 위치를 식별하는 데 더 오랜 시간이 걸릴 수 있으며 이로 인해 잠재적으로 효율성이 떨어지고 사용자의 탐색 경험에서 피로를 느낄 수 있습니다. 손쉬운 탐색을 위해서는 균형을 잘 맞추고 활성 상태가 명확하게 눈에 띄도록 하는 것이 중요합니다.
