1. 모바일 어플리케이션 UX_1

햄버거 메뉴를 사용하지 말아야 하는 이유

seriously, stop it with the hamburger menus

햄버거 메뉴란?

사이드 바 메뉴라고도 불리우는 햄버거 메뉴(drawer menu)는 주로 앱 상단에 네비게이션으로 사용되는 메뉴로, 여러가지 다양한 기능들을 하나의 네비게이션 안에 담을 수 있기 대문에 흔하게 사용되어왔다.

hamburger menu

최근 많은 서비스들이 햄버거 메뉴를 제거하였는데 facebook과 spotify는 모바일 앱에서 3개의 얇은 선으로 된 메뉴를 없앴고, LinkedIn, Twitter, and Tumblr를 포함한 많은 서비들도 이어서 없애기 시작했다.

모바일 어플리케이션의 초창기 사용자의 경우 햄버거 메뉴가 자연스럽게 느껴지지만 여기에는 몇가지 단점이 숨어있다.

---

햄버거 메뉴의 단점

1. 낮은 발견 확률-눈에 보이지 않을수록 잊혀진다.

-기본적으로 사이드바 메뉴와 사이드바 메뉴에 속해있는 콘텐츠들은 숨겨져 있다. 사람들은 웹페이지/모바일 어플리케이션을 처음 사용할 경우 사이드바 메뉴 버튼이 작동하는 것이라는 점을 인식해야 한다. 앱 개발을 할 때 이 점을 보완하기 위해서 툴팁을 사용하거나 메뉴라고 이름을 붙이기도 한다.

2. 효율성이 낮음

-사용자가 기능을 잘 이해하고 있다고 하도라도, 햄버거 메뉴 패턴을 사용하면 내비게이션 과정에 불필요한 단계가 생기는 것을 피하기 어렵다. 사용자가 원하는 내용을 보기 위해서 반드시 메뉴를 열어야 하기 때문이다.

hambuger menu's example

instant navigation's example

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

clash with platform navigation pattern

-ios같은 플랫폼에서 햄버거 메뉴를 사용하려면 os가 제공하는 표준 내비게이션 패턴과의 충돌을 피할 수 없다. 좌측의 내비게이션 바 버튼은 메뉴 버튼을 위해 사용해야 하지만, 사용자에게 뒤로가기 내비게이션도 제공해야 하는데 이런 경우 디자이너는 위의 이미지처럼 과도한 내비게이션 바를 만드는 실수를 범한다. 화면 제목을 넣을 공간도 없고 메뉴를 확인하기 위해서 사용자가 수차례의 화면 전환을 거쳐야 하기도 한다.

4. 한눈에 들어오지 않는 문제

-사이드바 메뉴를 사용하는 경우에는 사용자가 앱의 다른 영역으로 이동하려고 할 때만 사이드바를 열기 때문에, 특정 아이템의 정보를 드러내기가 어렵다.

---

해결책

What should I use Instead?

최근 모바일 디자인 트렌드는 화면의 아래에 고정된 메뉴를 배치함으로써 메뉴를 제공하는 방식으로 대체되고 있고 이러한 방식이 성공적임을 검증하고 있다. 또한 정보 구조를 다시 살펴보는 것이 해결책이다.

햄버거 메뉴의 대안 탭바(Tab bar)

최근 많은 앱들은 햄버거 메뉴의 대안으로 하단에 고정된 탭바를 사용하고 있다. 주요 기능 4-5가지로 명확하게 그룹핑이 가능한 서비스의 경우, 앱 하단에 주요 기능을 늘어놓음으로써, 사용자들이 햄버거 메뉴를 펼쳐서 선택해야하는 번거로움을 줄일 수 있다.

하지만 햄버거 메뉴가 필요할 때도 있다.

탭바가 가진 장점도 명확하지만 다양한 컨텐츠를 제공해야 하는 서비스의 경우에는 적절하게 햄버거 메뉴를 사용하는 부분도 필요할 것 같다. 공간적인 특성 상 4~5개 정도의 메뉴만 넣을 수 있는데 제공하는 서비스가 많을 경우 예를 들어 금융서비스 같은 경우에는 하단에 묶어서 보여주는 것에 한계가 존재하기 때문에 이 때 햄버거 메뉴를 사용한다면 많은 양의 메뉴를 담아야 하는 서비스의 경우 효과적으로 활용할 수 있는 장점이 있다.

최근 만들어진 금융서비스 앱(토스, 카카오뱅크)를 보면, 좌/우 상단에 펼쳐지는 인터렉션을 가진 햄버거 메뉴 대신, 하단 탭바를 이용해서 주요 서비스는 강조하고, 우측 하단에 전체 메뉴를 전체 페이지 형태로 배치함으로써 앞단에 언급된 탭바&햄버거 메뉴의 단점을 어느정도 해소해 준 모습이 보인다.

---

참고

https://brunch.co.kr/@ambler/83

2018 모바일디자인 트렌드①: 햄버거 메뉴는 그만

https://wit.nts-corp.com/2015/03/20/3272

햄버거 메뉴의 사용을 피해야 하는 이유와 대안 | WIT블로그

https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/

Why and How to Avoid Hamburger Menus - Luis Abreu - Product Design