공군 가기 힘들어(Global Navigation Bar 디자인)
2012. 12. 14. 07:30ㆍUI 가벼운 이야기
06-7년 경에 유행했던 공군가는게 제일 힘들어..~!!!!라는 동영상이다.
동영상 제공자의 설명: "06년 입대 지원했을 때 찍었던 동영상입니다.(물론 연출) 그 당시 이 동영상을 올리고 어느 정도 이슈가 되어 얼마 후 공군 홈페이지 메뉴는 개선되었습니다. ^^ "
이것을 피하기 위해 사람들은 우하단을 향해 사선으로 움직이지 못하고, 동영상에서처럼 니은자 형태로 움직이는데, 여기서 다시 길이 너무 협소하다 보니 이런 일이 벌어진다. 동영상은 매우 극단적으로 좁아서 힘들어졌지만, 요즘도 대다수 웹사이트들이 저렇게 만들기 때문에 니은자 형태로 움직여야만 하는 것은 매우 흔한 일이다.
어떻게하면 근본적으로 문제를 해결할 수 있을까? Bruce Tognazzini의 피츠를 알려주는 퀴즈 가운데, 6번째 질문인 계층 메뉴 구조 설계에도 언급되듯이 이것을 해결할 수 있는 방법은 두 가지가 있다.
1. 마우스가 움직이는 각도로 해결하는 방법
2. 서브 메뉴가 열려 있는 시간으로 해결하는 방법
Tognazzini는 위 1번 마우스가 움직이는 각도로 해결하는 것이 절대적으로 우월한 방법이라고 주장하는데, 실제로 해 보면 확실히 그렇다. 물론 반대 입장도 있다.
그런데 문제는 OS에서는 (특허 문제만 없다면) 위 두 가지 방법 중 어느 것이나 취할 수 있지만, 웹 페이지 상에서는 마우스의 궤적을 추적하기는 자원이 많이 들어갈 것 같아서, 2번으로 해결할 수 밖에 없지 않나 생각한다. 예전에 웹사이트를 만들 때마다 누군가 이 문제를 해결해 주는 라이브러리를 만들길 기다렸는데, 이제는 있는지 모르겠다. (2013년 추가: 아마존에서 이 문제를 해결하였고, 이에 관하여 Ben Kamens님이 라이브러리를 만들었다.)
아마존의 메가 드롭다운 메뉴 분석 Breaking down Amazon's Mega Dropdown
롤오버 메가 메뉴의 사용성
요즘은 2차 메뉴를 작은 띠로 만들지 않고 크게 만드는 것이 유행이다. 이른바 메가 메뉴(Mega Menu)라고 한다. 그런데 이 메가 메뉴에서도 비슷한 문제가 발생한다. 대부분의 브라우저가 멀티탭이나 툴바의 바로가기를 지원하기 때문에 마우스의 시작이 화면(브라우저)의 최상단에서 시작하는 경우가 많은데, 원하는 곳을 클릭하러 가는 동안 메가 메뉴 위를 거치게 되어 클릭할 수 없게 만들어 버리는 것이다.
국내 한 신문사 사이트를 보자(www.chosun.com)
메인 헤드라인 누르기가 제일 힘들어!!!
브라우저의 탭에서 조선일보를 클릭한 후(필자는 원래 조선일보를 툴바에 두지는 않지만 실험을 위하여 연출하였다) 사람들이 가장 많이 클릭할 첫번째 헤드라인(주폭 16명이 난동...)을 클릭하러 가는 동안에 메가 메뉴가 펼쳐져 버려 클릭할 수 없는 난감한 상황이 벌어져 버린다. 사람들이 가장 빈번하게 할 일을 덜 빈번한 일이 막아버리는 것이다. 물론 동영상은 웃자고 연출하여서 실제로 저렇게 여러 번 실수하지는 않지만, 실제는 한 두 번은 꼭 누르려는 것을 못 누르거나 엉뚱한 것을 눌러 실수한 다음, 동영상 마지막처럼 조심스럽게 마우스를 빙 돌려 헤드라인을 클릭하는 일이 꼭 발생한다.
반면 Slate (www.slate.com)는 약간의 시간차를 두었다. 즉 메뉴 위에 잠깐이라도 머무르지 않고 그냥 지나가 버리면, 메가 메뉴는 열리지 않는다. 위와 같이 덮는 방식이 아니고 아래로 밀리는 방식이라 자동으로 열려도 큰 문제는 아니기는 하지만 시간을 측정하여 배려하였다. 이렇게 만들 경우, 메가 메뉴를 누르려는 사람들은 약간 기다려야 하는 단점이 있기는 하지만 그래도 주요한 행동을 방해하지는 않게 된다. 물론 더 좋은 것은 마우스 궤적을 추적해 보는 것이라고 생각한다. 이 사례를 보면, 확실히 위의 2번 방식, 즉 시간차를 두는 것이 썩 좋은 방식은 아니라는 것을 느끼게 된다. 하지만 없는 경우보다는 훨씬 낫다.
메인 화면에서 이러한 디테일은 단순한 디테일 이상의 의미를 갖게 된다. 메인 화면은 늘 사람들이 접하는 것이고, 많은 웹사이트에서 메인 메뉴는 가장 빈번하게 사용하는 UI 중 하나이기 때문이다. 그것을 많이 사용하는 사이트이든, 적게 사용하는 사이트이든, 사용자들이 그 웹사이트에서 하려는 가장 중요한 일을 돕도록 만들지는 못 할 망정, 적어도 방해는 하지 말아야 한다.
[참고##UI 디테일##]
동영상 제공자의 설명: "06년 입대 지원했을 때 찍었던 동영상입니다.(물론 연출) 그 당시 이 동영상을 올리고 어느 정도 이슈가 되어 얼마 후 공군 홈페이지 메뉴는 개선되었습니다. ^^ "
물론 위의 동영상은 매우 극단적인 경우이겠지만, 누구나 몇 번은 경험하는 일이다. 요즘도 대다수의 웹사이트들이 메뉴(GNB, Global Navigation Bar)를 저렇게 만들기 때문이다. 언듯 보면 2차 메뉴(우리 말로 투뎁쓰 메뉴, 영어로 second level menu)가 너무 협소해서 벌어진 일 같지만, 실은 그것보다 더 근본 문제가 있다. 바로 최상위 메뉴에서 서브 메뉴의 원하는 메뉴(온라인 모병센터)로 가는 길(path) 위에 또 다른 최상위 메뉴(예를 들면 아래 이미지에서 '전자민원창구'나 '공군활동')가 있어서, 마우스 포인터를 이동하다보면 열려 있던 서브 메뉴가 닫히고 다른 메뉴가 열린다는 점이다.
어떻게하면 근본적으로 문제를 해결할 수 있을까? Bruce Tognazzini의 피츠를 알려주는 퀴즈 가운데, 6번째 질문인 계층 메뉴 구조 설계에도 언급되듯이 이것을 해결할 수 있는 방법은 두 가지가 있다.
1. 마우스가 움직이는 각도로 해결하는 방법
2. 서브 메뉴가 열려 있는 시간으로 해결하는 방법
Tognazzini는 위 1번 마우스가 움직이는 각도로 해결하는 것이 절대적으로 우월한 방법이라고 주장하는데, 실제로 해 보면 확실히 그렇다. 물론 반대 입장도 있다.
그런데 문제는 OS에서는 (특허 문제만 없다면) 위 두 가지 방법 중 어느 것이나 취할 수 있지만, 웹 페이지 상에서는 마우스의 궤적을 추적하기는 자원이 많이 들어갈 것 같아서, 2번으로 해결할 수 밖에 없지 않나 생각한다. 예전에 웹사이트를 만들 때마다 누군가 이 문제를 해결해 주는 라이브러리를 만들길 기다렸는데, 이제는 있는지 모르겠다. (2013년 추가: 아마존에서 이 문제를 해결하였고, 이에 관하여 Ben Kamens님이 라이브러리를 만들었다.)
아마존의 메가 드롭다운 메뉴 분석 Breaking down Amazon's Mega Dropdown
롤오버 메가 메뉴의 사용성
요즘은 2차 메뉴를 작은 띠로 만들지 않고 크게 만드는 것이 유행이다. 이른바 메가 메뉴(Mega Menu)라고 한다. 그런데 이 메가 메뉴에서도 비슷한 문제가 발생한다. 대부분의 브라우저가 멀티탭이나 툴바의 바로가기를 지원하기 때문에 마우스의 시작이 화면(브라우저)의 최상단에서 시작하는 경우가 많은데, 원하는 곳을 클릭하러 가는 동안 메가 메뉴 위를 거치게 되어 클릭할 수 없게 만들어 버리는 것이다.
국내 한 신문사 사이트를 보자(www.chosun.com)
메인 헤드라인 누르기가 제일 힘들어!!!
브라우저의 탭에서 조선일보를 클릭한 후(필자는 원래 조선일보를 툴바에 두지는 않지만 실험을 위하여 연출하였다) 사람들이 가장 많이 클릭할 첫번째 헤드라인(주폭 16명이 난동...)을 클릭하러 가는 동안에 메가 메뉴가 펼쳐져 버려 클릭할 수 없는 난감한 상황이 벌어져 버린다. 사람들이 가장 빈번하게 할 일을 덜 빈번한 일이 막아버리는 것이다. 물론 동영상은 웃자고 연출하여서 실제로 저렇게 여러 번 실수하지는 않지만, 실제는 한 두 번은 꼭 누르려는 것을 못 누르거나 엉뚱한 것을 눌러 실수한 다음, 동영상 마지막처럼 조심스럽게 마우스를 빙 돌려 헤드라인을 클릭하는 일이 꼭 발생한다.
반면 Slate (www.slate.com)는 약간의 시간차를 두었다. 즉 메뉴 위에 잠깐이라도 머무르지 않고 그냥 지나가 버리면, 메가 메뉴는 열리지 않는다. 위와 같이 덮는 방식이 아니고 아래로 밀리는 방식이라 자동으로 열려도 큰 문제는 아니기는 하지만 시간을 측정하여 배려하였다. 이렇게 만들 경우, 메가 메뉴를 누르려는 사람들은 약간 기다려야 하는 단점이 있기는 하지만 그래도 주요한 행동을 방해하지는 않게 된다. 물론 더 좋은 것은 마우스 궤적을 추적해 보는 것이라고 생각한다. 이 사례를 보면, 확실히 위의 2번 방식, 즉 시간차를 두는 것이 썩 좋은 방식은 아니라는 것을 느끼게 된다. 하지만 없는 경우보다는 훨씬 낫다.
메인 화면에서 이러한 디테일은 단순한 디테일 이상의 의미를 갖게 된다. 메인 화면은 늘 사람들이 접하는 것이고, 많은 웹사이트에서 메인 메뉴는 가장 빈번하게 사용하는 UI 중 하나이기 때문이다. 그것을 많이 사용하는 사이트이든, 적게 사용하는 사이트이든, 사용자들이 그 웹사이트에서 하려는 가장 중요한 일을 돕도록 만들지는 못 할 망정, 적어도 방해는 하지 말아야 한다.
[참고##UI 디테일##]