brunch

매거진 UX 디자인의 모든 것

라이킷 30 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Dec 22. 2017

햄버거 메뉴는 언제 사용하는가?

UX 디자인 배우기 #133

Today UX 아티클

오늘은 햄버거 메뉴 사용 시기에 대해 애기하고자 합니다.

Nich Babich의 원문을 번역한 글입니다

햄버거 메뉴. 라인 세 개가 쌓여있는 모양의 아이콘으로 마치 빵 사이에 고기가 들어있는 모양과 비슷해 붙여진 이름이죠. 주로 메뉴를 나타낼 때 사용됩니다. 이 아이콘을 클릭하거나 탭 하게 되면 내비게이션 옵션이 보입니다.

햄버거 메뉴를 주제로 쓰인 글을 보면 햄버거 메뉴에 반대론을 펼치는 글을 많이 볼 수 있습니다. 주로 디자이너들이 쓴 글이죠. 그런 글을 한 번도 본 적이 없으시다면 NN그룹의 Hidden Navigation Hurt UX Metrics를 읽어보세요. 간단히 말해, 이 문제는 햄버거 아이콘 자체의 문제라기 보단 아이콘 뒤에 내비게이션을 숨기는 것에 대한 문제라는 요지의 글입니다.

하지만 어떤 경우에는 햄버거 메뉴를 사용하는 것이 좋은 선택이 될 수 있습니다.

보조 내비게이션으로 사용하는 햄버거 메뉴

햄버거 메뉴의 주요 단점이 낮은 발견 가능성이기 때문에 주 내비게이션 메뉴에 사용하는 것은 권장하지 않습니다. 하지만, 보조 내비게이션 옵션을 디자인할 때는, 이 패턴이 적절한 솔루션이 될 수 있습니다. 주 내비게이션 옵션이 행동 유도 버튼이나 다른 형태로 스크린상에 보인다면, 햄버거 메뉴에는 다른 모든 보조 내비게이션 기능을 담으면 좋습니다.

아래의 우버(Uber) 앱 스크린을 보십시오.

지도와 검색(우버스크린에서 가장 중요한 두 가지 네비게이션 요소)은 항상 볼 수 있습니다.

주 화면에 대한 모든 것이 ‘차 부르기’를 위해 디자인되었기 때문에 ‘히스토리’나 ‘설정’과 같은 보조 옵션은 햄버거 메뉴 뒤에 숨길 수 있습니다(이런 기능들은 앱을 여는 사람이 항상 쓰는 기능은 아닙니다).

여기서 햄버거 아이콘은 유저가 태스크를 수행하는 데 방해가 되지 않으면서도 보조 기능으로 접근할 수 있게 해 줍니다.

이 경우에, 내비게이션 요소가 적다는 것은 유저가 앱을 사용할 때 방해하는 요소가 적다는 뜻입니다. 내비게이션 요소를 최소화하면 유저가 태스크를 완수하는 데 집중할 수 있습니다.

햄버거 메뉴를 사용할지 말지 고민하고 있다면 “80% 룰” 생각해보시길 바랍니다. 햄버거 아이콘 뒤에 숨기려고 하는 내비게이션 옵션들이 주 사용 빈도로 따졌을 때 하위 80%에 해당하는 옵션들인가요? 만일 그렇다면, 햄버거 메뉴 뒤에 그 기능을 숨기는 것은 괜찮습니다.