햄버거 버튼과 UX
Death by Hamburger 번역
안녕하세요 :)
메인화면에 대한 개념과 생각정리가 필요하여 메인화면의 상징인 햄버거 버튼과 ux에 관한 내용을 번역해 보았습니다. 햄버거 버튼을 왜 써야 하는지, 어느 상황에 써야 하는지에 대한 해답이 될 수 있을 거 같습니다.
이 글은 Death by Hamburger라는 글을 번역하여 제 입맛에 맞게 요약한 글입니다.
좋아요, 댓글 및 공유는 언제나 감사합니다!
Oh, the hamburger menu
최근에 저는 다른 디자이너와 함께 제가 작업한 모바일 앱을 리뷰하였습니다. 그 디자이너는 왜 앱의 메인 내비게이션에 햄버거 버튼을 사용하지 않는지에 대해서 물었고, 그 질문은 저를 당황시켰습니다.
저는 잠시 멈춘 뒤에 "왜 햄버거 버튼을 사용하지 않았을까?"라고 제 자신에게 물었고, 이것에 대해 간단하게 설명했습니다. "햄버거 버튼은 내비게이션을 불명확하게 하고, 유저가 원하는 것을 찾기 어렵게 만듭니다. 제가 작업한 앱은 햄버거 버튼을 쓸 정도로 복잡하지 않습니다"
대화가 끝난 후 "내가 틀린 걸까?"라는 생각을 멈출 수 없었습니다. 왜냐하면 제 작품을 리뷰한 디자이너는 저보다 경험이 많았기 때문입니다. 하지만 저는 햄버거 버튼이 틀린 방법이라는 것을 확신할 수 있었습니다.
The Pros and Cons
햄버거 버튼은 화면의 공간을 절약시켜주고, 간단하고 깨끗한 디자인을 제공합니다. 반면에 사용자로 하여금 앱 섹션 간 이동과 상호작용에 더 많은 노력을 투자하게 합니다. 의미 없는 세줄로 된 햄버거 메뉴는 시각적으로 단순화할 수 있지만 구조적으로 앱을 복잡하게 만듭니다. 어떤 프로젝트던 간에 디자인은 사용자를 이해시켜야 하는데, 사용자가 수평으로 쌓인 세줄이 메뉴를 의미한다는 것을 알 수 있을까요?
햄버거 메뉴는 디자이너가 의문을 제기하지 않는 트렌드중 하나입니다. 앱 경험과 사용자의 입장에서 의미 있는지 고려하지 않고 디자인 트렌드를 따라가는 것은 위험합니다. 기본 내비게이션이라면 특히 그렇습니다.
그래서 다른 주요 기업들이 모바일앱에서 햄버거를 사용하는지 알아보았습니다.
Live Examples: When It’s Okay, and When It Isn’t
모바일 내비게이션에 대한 몇 가지 설루션과 각 디자인의 장단점을 자세히 살펴보겠습니다.
1. FitBit
FitBit’s tab navigation, closed and expandedFitBit은 많은 양의 복잡한 데이터를 훌륭한 디자인을 통해 간단하고 이해하기 쉽게 만들었습니다. 어떻게 이해하기 쉽게 했을까요? 먼저 햄버거 버튼을 쓰지 않았습니다. 그리고 사용자로 하여금 정보에 쉽게 접근할 수 있도록 청록색의 "add" 버튼을 만들었습니다. 이 버튼은 엄지에 친화적이고 중요한 정보를 숨기지 않습니다. 핵심 동작인 "add" 버튼은 명확하게 전달되며 기본 내비게이션에서 쉽게 액세스 할 수 있습니다.
2. Twitter
Twitter’s mobile app, view of Home (left) and Moments (right)Twitter에는 많은 기능이 있지만 한 번의 탭으로 모든 기능에 액세스 할 수 있습니다. 게다가 한 번에 여러 콘텐츠를 효과적으로 표시하기 위하여 스크롤 가능한 메뉴를 사용합니다. 물론 내비게이션이 완벽하다는 것은 아닙니다. 하지만 지금 구조를 보면 햄버거 버튼이나 더보기 버튼 없이도 많은 기능을 잘 구현하고 있습니다.
3. Uber, Lyft
Uber (left) uses the hamburger menu; Lyft (right) uses your profile pictureUber와 Lyft는 메인 내비게이션에 햄버거 버튼 (Lyft의 경우는 프로필 사진)을 사용하지만, 메인화면에서 즉시 주행 일정을 잡는 것이 목표이기 때문에 햄버거 버튼이 문제가 되지 않습니다. 이동 히스토리, 결제와 같은 기능은 햄버거 버튼 뒤에 있어도 되는 보조적인 기능입니다. 이 기능은 사용자가 앱에 들어올 때마다 사용되지 않기 때문입니다.
4. Amazon
Amazon’s mobile app, with hamburger menu closed and expanded아마존은 문자 그대로 모든 것을 판매하기 때문에 햄버거 버튼을 사용해야 합니다. 탭 또는 팝업 메뉴를 사용하여 제품군의 범위를 정의하는 것은 미친 짓입니다. 여기서 햄버거 버튼은 인터페이스를 단순화하는 현명한 선택입니다. 아마존은 유저가 원하는 것을 빠르고 쉽게 검색할 수 있는 검색창을 만들었고, 이를 통해 햄버거 버튼을 또 다른 훌륭한 디자인으로 승화시켰습니다.
5. Ebay
아마존과 마찬가지로 eBay도 방대한 양의 제품을 판매합니다. 그들의 모바일 앱은 햄버거 메뉴를 사용했지만, 최근에는 그것을 벗어나 탭 바를 사용합니다.
Conclusion
햄버거 버튼은 내비게이션 사용성의 핵심적인 부분이기 때문에 신중한 사고와 배려가 필요합니다. 숨겨진 내비게이션은 사용자에게 매우 안 좋은 경우가 많지만 앱의 목표와 사용자의 맥락을 고려했을 때는 매우 좋을 수 있습니다. 햄버거 버튼이 유행하기 때문에 사용하면 안 됩니다. 유행한다고 정답이 아닙니다. 항상 모든 것에 의문을 가지고 자신의 길을 만드세요.
