햄버거 메뉴, 최선인가요?

스마트폰으로 웹서핑을 하다보면 위와 같은 아이콘을 많이 보셨을 겁니다. 보통 ‘웹사이트 메뉴’나 ‘네비게이션’의 기능을 하는 것인데요. 해외에서는 이 아이콘을 ‘햄버거 메뉴(hamburger nav icon)’라는 재밌는 이름으로 부르고 있습니다. 그러고 보니 3개의 선이 빵과 패티가 쌓인 것처럼 보기도 하네요. 

‘햄버거 메뉴’에 대한 재밌는 AB테스트가 있어 함께 살펴보고자 합니다. AB테스트란 “어떤 디자인이나 기능에 대해서 서로 다른 A와 B를 랜덤하게 보여주고 어떤 것이 더 많이 선택되는지 알아보는 실험”입니다.

웹에이전시인 exis web을 운영하고 있는 제임스(James Foster)는 웹사이트를 만들다 한가지 의문에 빠집니다. 

“우리가 그냥 쓰는 햄버거메뉴를 사람들이 정확하게 메뉴로 인식하고 있을까??”

그래서 첫 번째 실험을 준비합니다. 3 개의 아이콘 중 어떤 것이 더 많이 클릭 되는지 알아보는 간단한 실험이죠. 

1) 햄버거 아이콘(3개의 선)만 

2) 햄버거 아이콘과 ‘menu’라는 단어 조합 

3) 햄버거 아이콘과 테두리 

결과는 아래와 같습니다. 

결과의 값은 사실 무시해도 될 정도로 차이가 적습니다. 하지만 근소한 차이로 (3)햄버거 아니콘과 테두리가 조금 더 클릭되었네요. 

그런데 제임스는 한 가지 놀라운 사실을 발견합니다. 방문자 중에 단지 2%만에 메뉴 버튼을 클릭했다는 것인데요. 웹사이트를 만드는 사람들은 당연히 메뉴를 통해 웹페이지를 이동한다고 생각하지만 실제 사용자는 메뉴 버튼을 별로 사용하고 있지 않았던 것이죠. 

메뉴 아이콘을 어떻게 만들것이냐 보다는 실제 사용자의 의도를 파악해야 한다는 것을 알 수 있습니다. 

“사용자가 우리 웹사이트를 어떻게 사용하는지 정말 아무것도 모른다.

실제로 측정하고 관찰하기 전까지는 우리의 억측이나 예상은 불확실한 가능성일 뿐이다. 

-James Foster“

이어 제임스는 두 번째 실험을 준비합니다. 이전 실험의 (3)번을 기본으로 ‘menu’라는 단어에 변화를 주기로 했습니다.

그리고 실험 조건은 아래와 같습니다.

연령대는 10대 후반~ 30대가 가장 많고, 성비는 근소한 차이로 남성이 많습니다. 그리고 스마트폰 기종은 iOS가 가장많고 안드로이드, 기타 순입니다. 

결과는 어땠을까요?

우선 (4)번이 가장 클릭이 저조합니다. 그리고 (1)의 햄버거 아이콘과 테두리 보다 (2)  “menu”라는 단어와 테두리가 더 많은 클릭을 나타내고 있습니다. 

그리고 표에는 나와 있지 않지만 iOS와 안드로이드를 비교했을 때, iOS사용자가 평균 2~3번 더 메뉴 버튼을 클릭하는 것으로 조사되었습니다. 

결론

모바일 웹사이트를 만들 때, 첫번 째 실험에서 볼 수 있듯이 단순히 햄버거 아이콘만 있는 메뉴 버튼은 좋은 선택이 아닙니다. 

그리고 되도록 “menu”처럼 메뉴임을 알 수 있는 단어를 사용하는 것이 좋고, 테두리와 같은 디자인 요소를 더 해 클릭 가능한 버튼임을 알려주는 것이 좋습니다.  

사용자가 햄버거 메뉴를 이해하지 못하는 것은 아니지만, 웹서핑을 하고 자기가 원하는 정보를 찾는 짧은 순간에는 “menu”라는 직접적인 단어가 보다 주의를 끌기 때문이죠. 

참고 : 

Do Users Understand Mobile Menu Icons?

Mobile Menu AB Tested: Hamburger Not the Best Choice?

The Magnifying-Glass Icon in Search Design: Pros and Cons

by 북극곰 발자국