햄버거 메뉴를 피해야 하는 이유와 방법

모바일의 제한된 디스플레이 사이즈 때문에 그 대안으로 햄버거 메뉴를 사용해서 주메뉴들을 사이드로 감춰 공간을 확보하는 방법을 택해왔습니다. 하지만 이 패턴에 많은 이슈가 제기되 왔는데요, 그렇다면 이에 대한 해결책은 과연 무엇일까요?

햄버거 메뉴라고 불리기도 하는 사이드바 메뉴가 좋은 점보다 좋지 못한 점이 더 많다는 데이터들은 많이 있습니다. 한 가지 염두에 둘 점은 바로 그 이슈가 미묘한 차이의 문제라는 점입니다. 

문제점

1. 찾아볼 확률이 낮다.

2. 효율적이지 못하다.

3. 플랫폼 내비게이션 패턴과의 충돌

4. 단번에 알아채기 어렵다.

찾아볼 확률이 낮다.

눈에서 멀어지면, 마음에서도 멀어진다.

기본 상태에서는 사이드바 메뉴의 모든 컨텐츠는 감춰진 상태입니다. 

메인 스크린에서 중요한 정보를 바로 제공하는 경우가 아니라면, 사람들에게 그것이 동작하는 사이드바 메뉴 버튼이라는 것을 알 수 있게 해줘야 합니다. 예를 들어, ’메뉴’라는 레이블이나 툴팁을 달 수 있겠죠.

효율적이지 못하다. 

사람들이 사이드바 메뉴의 기능을 알고있고 좋게 평가한다 해도, 사람들은 처음에 메뉴 버튼을 누르고 열어야만 어떤 메뉴가 있는지 둘러볼 수 있고 그제서야 원하는 해당 메뉴에 도달할 수 있다는 점과 이러한 행위를 할 때마다 페이지가 열리고 닫히는 페이지 인터랙션을 항상 겪어야 한다는 비효율성이 있습니다.

위와 대조적으로 아래의 예는 내비게이션 요소들이 항상 보여지고 있을 때 인스턴트 내비게이션은 어떠한지 보여줍니다.

플랫폼 내비게이션 패턴과의 충돌

iOS와 같은 플랫폼의 경우, 햄버거 메뉴를 기존 내비게이션 패턴에 단순히 박아넣을 수 없습니다. 

왼쪽에는 메뉴 버튼뿐만 아니라 뒤로가기 버튼이 놓여질 수도 있습니다. 이럴경우 디자이너는 위와 같은 실수를 저지를 수 있습니다. 심지어 타이틀이 있어야 할 공간도 없으며, 다른 페이지로 이동할 경우 메뉴를 찾아 헤맬지도 모르겠습니다. 

단번에 알아채기 어렵다

어떤 섹션에 정보가 업데이트 되었다면 내가 직접 메뉴를 통해 이동하지 않는 이상 알기가 쉽지 않습니다. 이럴경우 알림 버튼을 두어 새로운 정보를 바로 받아보고 그곳으로 바로 이동할 수 있도록 하는 방법이 있습니다.

하지만 다양한 종류의 알림 아이콘을 배치해 두어야 한다면 이것도 좋은 대안이 될 수 없습니다. 이와 같은 상황에서 트위터는 아래 탭바에 각각 두었는데요, 각 알림의 형식을 쉽게 알 수 있고 곧장 해당 스크린으로 이동할 수 있다는 점이 좋습니다.

인지(Cognition)

어쩌면 스크린의 공간을 확보하기 위해 햄버거 메뉴를 사용해야 할 것 같지만 그런 생각은 현실을 오해하는 것입니다. 우리가 생각하기에 사람들은 스크린 상에 보여지는 무엇이든 다 볼거라고 생각하지만 사실은, 자신이 보고싶은 것만 보는 경향이 있다고 합니다. 그것이 한눈에 다 들어올 정도의 모바일 스크린이라 할지라도 말이죠. 그래서 내비게이션에 부정적인 영향을 끼치지 않고 HCI 원칙을 준수하는 조건 아래 스크린의 공간을 확보해야 합니다. 

언제 사용해야 할까?

위와 같은 패턴을 사용하는 경우는 극히 드물뿐 아니라, 일반적으로 햄버거 메뉴를 양쪽에 모두 사용하는 것은 피해야 합니다. 

그럼에도 불구하고 위와 같은 패턴이 필요할 때도 있는데요, 바로 채널(혹은 그룹)과 해당 채널의 멤버들을 보여줘야 할 때입니다. 왼쪽이 채널 메뉴 버튼이고, 오른쪽이 채널멤버 메뉴 버튼 입니다.

이 때에는 하위 페이지 같은 계층구조가 존재하지 않기 때문에 수용할 수 있습니다. 사진이나 비디오 같은 경우는 모달을 띄워 구현할 수 있겠죠. 

하지만 이런 시나리에도 또 다른 골칫거리는 바로 UI에서 내비게이션 바(Navigation Bar)가 너무 많은 정보들로 가득차 있는 것과 IA(Information Architecture, 정보 구조)를 다시 생각해봐야 할 필요성이 있다는 겁니다.

오른쪽에 있는 채널멤버 메뉴 버튼이 채널 혹은 채널멤버와 관련한 액션 버튼의 자리를 빼앗었는데요, 이럴경우 디자이너에겐 별다른 선택권이 없습니다. 바로 채널과 채널멤버, 심지어 계정에 관한 액션까지 한 액션 버튼에 담아놓는거죠.

이쯤 되면 다음 물음이 생각나실 겁니다.

다른 방법은 없을까?

사이드바 메뉴 패턴은 단순히 무언가 하나를 더 붙여놓은 것이라, 우회해서 목적지에 도달하기 때문에 좋지 못한 IA를 가져옵니다. 

해결방안은 IA를 다시 뜯어보는 겁니다.

위의 예와 같은 방식이 사이드바 메뉴를 사용하지 않는 방안이 될 수 있습니다. 왼쪽과 오른쪽의 같은 색의 점을 비교해보면 어떤 식으로 더 나은 방안이 제시됬는지 알 수 있습니다. 

해결점

1. 현재 내 위치를 메시지 탭에서 바로 확인할 수 있다.

2. 메뉴 아이콘이 항상 노출되어 있고, 한번에 접속이 가능하다.

3. 내비게이션 제스쳐로 충돌날 일이 없다.

또한 화면을 스크롤 할 때 내비게이션 바를 숨기는 방식으로 공간을 아낄 수 있습니다. 위와 같이 페이스북 앱이나 사파리에서도 확인이 가능합니다. 내비게이션 바가 감춰져도 항상 고정되어 있는 탭바(Tab Bar)로 인해 내 위치를 언제든 확인할 수 있습니다.

미니멀한 느낌으로 디자인하고 싶다면, 툴바(Tool Bar) 정도로면 충분할 것 같습니다. 여기서 중요한 점은 내비게이션을 숨기지 않을 것, 언제나 바로 이동이 가능해야 할 것, 내비게이션 제스쳐와 충돌이 없어야 할 것, 아이콘과 관련한 내용이 즉각 반응을 보일 것 등 입니다.

아이템 양에 따른 이슈 

iOS만을 가지고 볼 때, 만약 탭바의 아이템이 5개를 초과할 경우에는 어떻게 할까요? 그닥 이상적이지 않지만 이럴 경우에는 탭바의 마지막 아이템에 몰아넣는 것 밖에는 별다른 대안이 없을 것 같습니다. 

아래와 같이 좌우로 스크롤되는 툴바 같은 것을 생각해 볼 수도 있겠는데요, 사이드바 메뉴를 피할 대안은 되겠지만 이것 역시 탭과 스크롤하는 동작에서 오는 원치않는 실수나, 선택된 혹은 선택하려는 아이템들이 가려져 있다는 애매한 상황에 노출되어 있습니다.

 

원문: why and how to avoid hamburger menus

Refresh Studio

해외 최신 웹/UX 디자인 글과 동향을 소개해 드립니다.