햄버거 메뉴의 대안을 찾아서
a.k.a UX 골칫거리
(출처 : https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8#.37otjskuz의 기사를 번역 및 가공한 컨텐츠 입니다.)
IT 프로덕트를 만드는 사람이라면 모바일(및 데스크탑)에서 사용되는 햄버거 메뉴로 인해 유저의 사용성을 해치는 경우에 대한 수십 개의 기사를 이미 읽었을 것입니다.
다행히도 점점 더 많은 사이트와 애플리케이션들이 이 문제에 대한 대안책과 효율적인 솔루션을 시도해보고 있습니다.
1. 탭(Tab)
사이트 또는 앱에 제한된 수의 메뉴가 있고, 이 메뉴를 신속하게 전환할 수 있어야 하는 경우 탭 UI가 햄버거 메뉴의 해결책이 될 수 있습니다.
탭은 가장 단순한 내비게이션 UI인 것처럼 보이지만 디자인할 때 몇 가지 사항을 주의해야 합니다.
- 표시할 메뉴(섹션)은 5 개를 넘지 않아야 합니다.
- 탭 중 하나가 항상 활성화되어 있어야 하며 활성화 된 탭은 시각적으로 강조되어야 합니다.
- 첫 번째 탭은 홈페이지 또는 홈 화면이어야 하며, 탭 순서는 사용자 흐름의 우선순위 또는 메뉴끼리 논리적인 연관이 있어야 합니다.
- 탭은 컨텐츠들의 컨텍스트 또는 플랫폼에 따라 화면의 상단 또는 하단에 표시될 수 있습니다 (하단 탭은 이제 Android에서도 패턴으로 사용되고 있습니다)
- 레이블이 없는 아이콘은 실제로 잘 알려진 아이콘 및 사용자가 자주 사용하는 인터페이스일 때만 효과적입니다
-탭 디자인에 대한 추가 팁 (https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/)
대표적인 예 : 링크드인, 구글포토
좌측 링크드인: 아이콘사용 / 우측 구글포토 : 아이콘+레이블2. 탭(Tab) + 더 보기
5 개 이상의 주요 메뉴가 있는 경우, 가장 실용적인 해결책은 4개의 우선순위가 높은 메뉴를 보여주고 다섯 번째 메뉴부터 ‘더 보기’로 만드는 것입니다.
이 솔루션은 단순한 탭과 유사하지만 단순 탭과 ‘더 보기’항목을 함께 사용하면 '더 보기'항목이 네비게이션으로 이 전 메뉴들과 연결성을 가질 수 있고, 나머지 항목들은 드롭다운 메뉴로 사용될 수 있습니다.
‘더 보기’ 또한 메뉴가 숨겨져 있고 그 레이블이 드롭다운에 있는 메뉴들을 포함하지 못하기 때문에 햄버거 메뉴의 단점을 커버하지 못한다고 생각할 수도 있습니다.
하지만 많은 항목 중 4가지 항목에 대해 우선 순위를 정할 수 있다면 대부분의 사용자는 대표적인 4가지 항목에 대해 좀 더 나은 탐색 환경을 제공받을 수 있을 것입니다.
대표적인 예 : 페이스북
뉴스피드, 친구추가, 알람, 검색은 헤더에서 항상 사용할 수 있으며, 나머지 기능은 모두 '더보기'메뉴에서 사용할 수 있습니다.3.점진적으로 메뉴축소
'탭+더 보기'보다 좀 더 정교한 버전은 화면 너비에 맞게 메뉴를 디자인하고 가능한 많은 메뉴를 표시하며 필요한 경우 ‘더 보기’ 항목 아래에 모든 항목을 추가하는 것입니다.
이 방식은 화면 폭이 좁아져서 항목을 표시 할 공간이 충분하지 않은 경우에 ‘더 보기’ 메뉴에 낮은 중요도의 항목이 더 많이 포함하는 것입니다.
이 솔루션은 유연하기 때문에 특히 중간 사이즈의 화면크기에서 ’탭 + 더 보기'보다 나은 경험을 제공합니다.
대표적인 예 : BBC (BBC의 기본 메뉴는 화면 크기에 따라 렌더링되어 가능한 한 많은 항목을 표시합니다.)
4. 좌우스크롤 가능한 내비게이션
만약 네비게이션의 항목이 우선순위에서 서로 큰 차이가 없는 비슷비슷한 항목이라면 ‘더 보기’는 좋지 않은 선택입니다.
이런경우, 다른 방법은 모든 항목을 스크롤가능하게 만드는 것입니다.
이 솔루션의 단점은 스크롤 하지 않을 경우 보이는 항목만 보이고 나머지 모든 항목은 안 보이는 영역에 있다는 것입니다.
하지만 웹 쇼핑이나 뉴스 카테고리같이 사용자가 콘텐츠를 탐색할 것으로 예상되는 경우에는 선택할만한 해결책입니다.
시각적으로 디자인을 할 때, 페이딩을 주거나 / 또는 마지막으로 보이는 요소의 위치등을 이용해 유저가 좌우스크롤 한다면 볼수있는 메뉴가 많다는 것을 나타내는 시각적 힌트를 제공해야합니다
대표적인 예 : Medium, Google
메인 카테고리는 Medium.com이 작은사이즈의 화면일때 좌우스크롤 할 수 있습니다.
Google 검색 결과의 카테고리는 스크롤이 가능합니다.5. 드롭다운 메뉴
일반적이지는 않은 내비게이션 스타일 중 하나로 다른 메뉴의 가시성과 접근 가능성이 별로 필요하지 않을 때 사용할 수 있습니다.
이 경우 드롭다운 메뉴에는 실제로 두 가지 역할이 있습니다.
유저는 메뉴에서 옵션을 다 확인할 수 없지만 타이틀 레이블을 통해 현재 페이지와 비슷하거나 하위메뉴가 포함되어 있음을 알 수 있고, 드롭다운을 통해 메뉴간에 빠르게 이동이 가능합니다.
대표적인 예 : Barnes & Noble, Duolingoe
책을 탐색 할 때 현재 범주와 네비게이션 / 필터링 옵션은 항상 bn.com의 드롭 다운 메뉴에서 사용할 수 있습니다.
Duolingo는 드롭다운을 통해 연습하는 언어를 빠르게 전환 할 수 있습니다때로는 햄버거 메뉴가 좋은 선택 일 수 있습니다.
햄버거 메뉴는 메뉴들이 발견되기가 어렵기 때문에, 메인메뉴를 디자인할 때는 위의 솔루션 중 하나를 고려하는 것이 좋습니다.
그러나 메인이 아니라 서브메뉴를 디자인할 때는 햄버거 메뉴가 적절한 솔루션 일 수 있습니다.
만약 주요 메뉴가 이미 화면에 다 볼 수 있는 콜투액션 버튼들로 제공되는 경우 햄버거 메뉴를 서브메뉴로 사용하기 좋습니다.
이 패턴은 메인 내비게이션이 사용자 흐름을 중심으로 설계되어있고 관련된 메뉴들이 화면에 명확하게 표시될 때 사용하면 좋은데, 대표적으로 Uber가 좋은 예가 될 수 있습니다.
이 화면은 자동차를 부르는 것이 가장 중요하게 설계되었으므로 기록 및 설정과 같은 세컨메뉴를 햄버거 메뉴로 보내 주요 기능보다 중요성이 낮게 표현되어 있습니다.
Google 번역도 우버와 매우 유사합니다.
주요 기능(언어 전환 및 번역할 텍스트 입력)은 화면에서 가장 눈에 띄게 만들고 햄버거 메뉴는 도움말 및 커뮤니티와 같은 부차적인 메뉴들을 담는 데 적합합니다.
결론
모바일 네비게이션에 만능통치약인 솔루션은 없으며 같은 디자인이라도 제품, 사용자 및 컨텍스트에 따라 좋은 디자인이 될 수도, 안 좋은 디자인이 될 수도 있습니다.
잘 설계된 모든 네비게이션의 기본은 해당 서비스를 사용하는 사용자를 고려하는 것이고, 그에 따라 우선 순위 및 레이블이 명확한 정보구조를 표현하는 것입니다.
무조건적인 방법론보다는 디자인을 담으려는 제품의 특징을 잘 알고 그 제품에 가장 효과적인 모바일 내비게이션이 무엇일지를 고민해야 합니다.
