웹사이트 디자인의 햄버거 메뉴

인터넷을 사용하는 사람이라면 인터넷에서 햄버거 메뉴의 예를 수십 번 보았을 것입니다. 이 단순한 3선 아이콘은 오늘날 가장 눈에 잘 띄는 버튼 중 하나입니다. 많은 웹 사이트에서 강력한 탐색 요소를 숨기고 공간을 절약하기 위해 이 기능을 사용하고 있습니다. 그러나 그 유용성에도 불구하고 웹사이트 디자인의 햄버거 메뉴는 여전히 가장 논쟁의 여지가 있는 웹 디자인 옵션 중 하나 입니다. 일부에게는 모든 반응형 디자인에 완전히 적용되어야 하는 진정한 솔루션입니다. 다른 사람들에게는 실용적인 구조 설계에 대한 잘못된 해석에서 오는 불행한 부작용입니다.

웹사이트 디자인의 햄버거 메뉴 소개

배타적이지 않지만 햄버거 메뉴는 일반적으로 반응형 웹사이트와 앱이 작은 화면 디스플레이에 적응할 때 발견됩니다. 왼쪽에 있든 오른쪽에 있든 전문 디자이너와 개발자는 햄버거 메뉴를 사용하여 귀중한 공간을 절약합니다. 이것은 나머지 콘텐츠를 위한 더 많은 공간을 남기기 위해 기본 탐색을 숨기기 때문에 널리 사용되는 솔루션입니다. 그러나 모든 사람이 이것이 적절한 해결책이라고 생각하는 것은 아닙니다. 많은 사람들이 그 반대라고 주장합니다.

햄버거 메뉴를 더 잘 이해할 수 있도록 여기에서 논의할 것입니다.

• 햄버거 메뉴는
• 웹사이트 디자인에서 햄버거 메뉴의 개념
• 그 뒤에 숨은 논란
• 대체 구현
• 웹사이트 디자인에서 햄버거 메뉴의 일반적인 장단점

햄버거 메뉴는?

간단히 말해서 햄버거 메뉴는 큰 탐색 모음에 대한 간단하고 작은 대안 입니다. 기본적으로 웹사이트를 어지럽히는 탐색에서 모든 것을 넣을 수 있는 서랍 역할을 합니다. 햄버거 메뉴는 일반적으로 서로의 위에 세 줄로 표시됩니다. 이름은 햄버거와 분명히 닮았다고 해서 붙여진 이름입니다.

모든 것이 1981년에 시작되었습니다. Xerox Star 워크스테이션에서. 당시 그래픽 사용자 인터페이스 디자이너인 Norm Cox는 숨겨진 요소 목록을 여는 아이콘을 만들었습니다. 그 의도는 긴 옵션 목록에 대한 대안 공간 절약 솔루션을 제공하는 것이었습니다. 데스크탑 컴퓨터의 오른쪽 클릭 개념 메뉴와 유사한 것입니다. 그러나 2009년까지 햄버거 메뉴는 큰 영광을 누리지 못했다. 페이스북과 몇몇 다른 웹사이트가 이를 다시 소개했을 때만 햄버거 메뉴의 여정이 시작되었습니다. 당시에 등장한 모바일 장치에서 귀중한 화면 공간을 절약하는 거의 완벽한 솔루션이었습니다.

하지만, 그랬나요?

햄버거 메뉴에 대한 영원한 논쟁

원래 제작자의 의도는 단순하면서도 효과적인 것을 만드는 것이었습니다. 오른쪽 클릭 메뉴 뒤에 있는 동일한 원리를 따라 혼란을 줄이는 작은 버튼입니다 . 비슷하고 기억에 남고 사용하기 쉬워야 했습니다. 그리고 그것은 원래 의도되지 않은 현재의 형태에서도 그렇습니다.

그러나 모든 사람이 햄버거 메뉴에 대해 같은 열정을 갖고 있는 것은 아닙니다 . 많은 디자이너들이 웹사이트 탐색의 가장 중요한 부분을 숨기기 때문에 이를 비판합니다. 결과적으로 방문자는 찾기가 어려울 것입니다. 메뉴에 4개 이상의 탐색 요소가 있는 경우에만 햄버거 메뉴를 사용하는 것이 좋습니다. 다른 한편으로는 대부분의 사람들이 이미 햄버거 메뉴의 모양과 기능에 익숙해지고 있기 때문에 이러한 주장은 미래에 바뀔 수 있습니다.

대체 사용 및 구현

'4대 요소' 원칙 외에도 햄버거 메뉴의 활용도를 높이는 방법에 대한 제안이 있다.

• 햄버거 메뉴를 다른 기능과 결합하십시오 . 예를 들어 검색 기능과 햄버거 메뉴를 나란히 배치할 수 있습니다.
• 다양한 모양, 테두리 및 색상의 자리 표시자를 사용 하여 "햄버거" 를 보다 쉽게 ​​구분할 수 있습니다.
• 반드시 모서리 중 하나가 아닌 대체 위치를 찾으십시오 .
• 방문자가 페이지를 스크롤하기 시작하면 고정된 위치 에 떠 있는 햄버거 메뉴를 만듭니다 .

모바일 사용자가 기기의 화면 크기에 상관없이 사용하기 편리하면서도 깔끔하면서도 차별화된 디자인을 제공하고자 하는 아이디어입니다.

웹사이트 디자인에서 햄버거 메뉴의 일반적인 장단점

UX(사용자 경험) 측면에서 햄버거 메뉴는 양날의 검이 될 수 있습니다. 대부분의 상황에서 작동할 수 있지만 다른 상황에서는 혼란을 야기할 수 있습니다. 언제 사용하는지 이해하려면 햄버거 메뉴의 장단점을 모두 확인하는 것이 좋습니다.

장점:

• 햄버거 메뉴는 혼란을 줄여줍니다 . 가장 중요할 때 작동합니다. 공간의 적절한 사용은 때때로 모바일 웹사이트와 앱의 모든 것을 의미할 수 있습니다. 사용할 수 있는 화면의 크기를 고려할 때 더 많은 공간을 제공할 수 있는 모든 것이 좋습니다. 또한 화면에 너무 많은 요소가 있으면 방문자가 올바른 콘텐츠에 주의를 기울이는 데 방해가 될 수 있습니다.
• 탐색을 이해하기 쉽게 유지 - 오늘날 거의 모든 사람들은 햄버거 메뉴를 볼 때 탐색이 무엇을 위해 사용되는지 이해합니다. 우리는 시각적 존재이며 열에 세 개의 수평선처럼 보이는 아이콘을 쉽게 알아차릴 수 있습니다. 특히 가장 좋아하는 패스트 푸드 중 하나를 생각나게 하는 경우. 이름으로 얼마나 많은 다른 아이콘과 브랜드 로고를 알고 있는지 생각해 보십시오.
• 보조 탐색 요소를 방해하지 않도록 하는 훌륭한 옵션이 될 수 있습니다. 전체 탐색을 햄버거 메뉴에 배치해야 한다는 규칙은 없습니다. 종종 최고의 솔루션 중 하나는 웹사이트에 주요 탐색 요소를 남겨두고 햄버거 메뉴에 다른 모든 보조 옵션을 배치하는 것입니다. 이것은 기본적으로 두 세계에서 가장 좋은 것을 취하며 여전히 그 목적을 수행합니다.

단점:

• 중요한 탐색이 표시되지 않음 – 탐색을 햄버거 메뉴로 변환하면 거의 보이지 않게 됩니다. 몇 가지 연구 결과에 따르면 이러한 이유로 웹사이트 참여도가 상당히 떨어질 수 있습니다. 다시 말해서, 어떤 사람들은 즉시 관심을 끌지 못하기 때문에 더 이상 클릭하지 않을 것입니다.
• 모든 사람이 이해하는 것은 아닙니다 . 가능성은 적지만 여전히 햄버거 메뉴를 처음 접하는 방문객이 있습니다. 친숙해 보일 수 있지만 행동을 하도록 동기를 부여하거나 설명이 충분하지 않습니다. 그들은 그것이 무엇에 사용되었는지에 대한 다른 표시가 없기 때문에 그대로 둡니다. 이것은 변화하고 있지만 때로는 직관적이지 않을 수 있습니다. 특히 디자이너가 너무 많은 자유를 사용하여 완전히 추상적으로 만들 때 그렇습니다. 또는 "햄버거" 자체가 시각적으로 충분히 구별되지 않습니다.
• 햄버거 메뉴를 사용하려면 추가적인 "노력"이 필요합니다. 어리석게 들릴 수 있지만 기술적으로 햄버거 메뉴는 일반적인 탐색보다 몇 단계 더 걸립니다. 모든 사람이 한 손에 휴대폰을 들고 있을 때 엄지손가락으로 만질 수 있는 것은 아니라는 사실은 말할 것도 없습니다.

주관적인 의견이 무엇이든 간에 사용자에게 가장 적합한 옵션이 무엇인지 고려하는 것을 잊지 마십시오. 햄버거 메뉴를 좋아할 수도 있지만 상황이 좋지 않으면 사용하지 않게 됩니다. 또는 완전히 싫어할 수 있지만 웹 사이트 또는 앱에 가장 적합한 솔루션일 수 있습니다. 웹사이트 디자인에서 햄버거 메뉴의 올바른 적용은 상황에 따라 다를 수 있음을 기억하십시오. 그것이 당신을 위한 것인지 확인하려면 몇 가지 A/B 테스트를 실행하고 청중이 그것에 대해 어떻게 생각하는지 확인하십시오.