2018 모바일디자인 트렌드①: 햄버거 메뉴는 그만
주목해야 할 모바일 디자인 트렌드
medium.com에서 2018년 모바일 디자인 트렌드 6가지를 소개하였다.
그 중 첫번째는 '햄버거 메뉴'에 대한 이야기를 다루고 있다.
Seriously, Stop It with the Hamburger Menus
햄버거 메뉴란 무엇일까?
햄버거 메뉴(drawer menu)란 주로 앱 상단에 네비게이션으로 사용되는 메뉴로, 여러가지 다양한 기능들을 하나의 네비게이션 안에 담을 수 있기 때문에 흔하게 사용되어왔던 방식이다.
출처: https://dribbble.com/shots/1623679-Open-Close햄버거 메뉴는 이제 그만!
최근 많은 메이저 서비스들이 햄버거 메뉴를 제거하였다.
Facebook 과 Spotify는 모바일앱에서 3개의 얇은 선으로 된 메뉴를 없앴고, LinkedIn, Twitter, and Tumblr를 포함한 많은 서비스들도 이어서 없애기 시작했다
모바일 앱 초창기 사용자의 경우, 햄버거 메뉴가 자연스럽게 느껴질 수 있다.
하지만 기술 적응력이 낮은 사람에게는 이 메뉴가 자연스럽지 않을 수 있고, 사용자들이 인지하지 못한다면 그들이 원하는 정보를 얻지 못할 수 있다.
햄버거 메뉴, 엘사처럼 놓아줄 시간이다!
모바일 디자인 트랜드는 화면의 아래에 고정된 메뉴를 배치함으로써 메뉴를 제공함으로 대체되고 있으며, 이러한 방식이 성공적임이 검증되고 있음.
햄버거 메뉴를 놓아주지 않는다면, 곧 해당앱은 구식이 될 것
최근 Spotify는 변화를 통해 유저 인터렉션의 큰 상승을 경험했다.
<원문>
We talked about this shifting mobile design trend earlier in the year because a lot of major apps have gotten rid of their hamburger menus. Facebook and Spotify were two of the first to abandon these three little lines in their mobile apps — and many others have followed suit, including LinkedIn, Twitter, and Tumblr.
If your app still utilizes the hamburger menu and you’re reluctant to give it up, we get it.
We know how versatile it can be. It seems so intuitive to those of us who’ve been using mobile apps from the beginning, but the main issue with them is that they aren’t intuitive for those who aren’t as tech savvy. If the user doesn’t realize it’s an icon, as opposed to a design choice, they’re not going to be able to find the information they need.
This mobile design trend is being replaced with a static menu at the bottom of the screen so menu items are never hidden from the user — and it’s already proving to be successful. Therefore, it’s time to let it go, Elsa-style. If your mobile app doesn’t move past the hamburger soon, it’s going to look outdated. Once you make the change, you may be surprisingly happy with the results. After implementation, Spotify found user interaction increased significantly.
햄버거 메뉴의 대안 탭바(tab bar)
해당 기사에서 언급한대로, 최근 많은 앱들은 햄버거 메뉴의 대안으로 하단에 고정된 탭 바(tab bar)를 사용하고 있다. 주요 기능이 4-5가지로 명확하게 그룹핑이 가능한 서비스의 경우, 앱 하단에 주요기능을 늘어놓음으로써, 사용자들이 햄버거 메뉴를 펼쳐서 선택해야하는 번거로움을 줄일 수 있다.
탭바를 사용하고 있는 유튜브/왓챠플레이.
고정된 하단 메뉴, 현재 내가 위치한 곳을 명확하고 직관적으로 인지시켜줄 수 있다.
햄버거 메뉴가 필요할 때도 있다.
탭바가 가진 장점은 명확하지만, 다양한 컨텐츠를 제공해야 하는 서비스의 경우에는 적절하게 햄버거 메뉴를 사용하는 부분도 필요할 것 같다. 공간적인 특성 상 최대 4-5개 정도까지의 메뉴밖에 넣을 수 없는데, 제공하는 서비스의 종류가 많은 경우 (예를 들면 금융서비스) 하단에 묶어서 보여주는 것에는 한계가 존재할 수 있다.
그렇게 때문에 많은 양의 메뉴를 담아야 하는 서비스의 경우 효과적으로 활용할 수 있는 장점이 있다.
최근 만들어진 금융서비스 앱(토스, 카카오뱅크)을 보면, 좌/우상단에 펼쳐지는 인터렉션을 가진 햄버거 메뉴 대신, 하단 탭바를 이용해서 주요 서비스는 강조하고, 우측 하단에 전체 메뉴를 전체 페이지 형태로 배치함으로써 앞단에 언급된 탭바&햄버거 메뉴의 단점을 어느정도 해소해 준 모습이다.
따라서 서비스의 성격이 다르고, 핵심적으로 제공해야 하는 목표가 다르기에 이러한 부분들을 고려해서 적절한 네비게이션을 사용하는 것이 가장 좋을 것 같다.
다음글 (예정) ▶ 2018 모바일 디자인 트렌드 Mobile App Prototyping
