메가 메뉴

갈래가 넓은 제품에서 계층을 한 단계씩 펼치는 메뉴는 닿기까지 손이 너무 많이 갔습니다. 여성 의류에서 신발로, 신발에서 부츠로 내려가려면 좁은 통로를 따라 포인터를 유지해야 하고, 중간에 조금 벗어나면 메뉴가 닫혀 처음부터 다시 시작했습니다.

닫히는 것보다 나쁜 것은 보이지 않는 것이었습니다. 두 단계 아래에 무엇이 있는지 알려면 그 항목에 포인터를 올려 봐야 하니, 사용자는 제품이 무엇을 파는지 훑어볼 방법이 없었습니다. 한 번에 다 펼쳐 놓으면 그 두 문제가 함께 없어집니다. 손을 움직일 일이 줄고, 펼쳐진 판 자체가 이 제품이 무엇을 다루는지 보여 주는 지도가 됩니다.

포인터가 닿으면 화면 폭 대부분을 덮는 판이 펼쳐집니다. 그 판 안을 어떻게 짜는지가 이 형태의 전부입니다.

1. 열로 묶고 묶음마다 제목을 답니다. 제목 없이 링크 마흔 개를 늘어놓으면 한 덩어리로 보여서 찾는 시간이 계층 메뉴보다 길어집니다.
2. 담을 양은 열 넷에서 여섯, 열마다 항목 여섯에서 여덟 정도입니다. 서른에서 오십 개 사이가 한눈에 훑히는 한계이고, 그보다 많으면 판 안에서 다시 찾아야 합니다.
3. 여닫는 데 짧은 지연을 둡니다. 포인터가 스치기만 해도 열리면 마우스를 움직일 때마다 화면이 튀어 오릅니다. 0.2초 남짓 머물렀을 때 열고, 판 밖으로 나갔을 때도 비슷한 시간을 기다린 뒤 닫습니다.
4. 키보드로도 닿아야 합니다. 탭으로 판 안의 모든 항목을 지나갈 수 있어야 하고 esc 로 닫혀야 합니다. 포인터를 올려야만 열리는 구조로 만들면 키보드만 쓰는 사람에게는 그 항목 아래가 통째로 없는 것이 됩니다.
5. 터치 화면에는 올려 두는 동작이 없습니다. 첫 번째 탭에 판을 열고 두 번째 탭에 이동하게 하거나, 좁은 화면에서는 햄버거 메뉴 쪽으로 형태를 바꿉니다. 최상위 항목 자체를 링크로 두면 열리기 전에 이동해 버립니다.

이 형태가 맞는 조건은 갈래가 넓고 얕은 것입니다. 깊고 좁은 제품에 쓰면 펼쳐진 판의 절반이 빈칸으로 남습니다.

"여기는 갈래가 세 개뿐이라 메가 메뉴 쓸 게 아니라 사이드바가 맞습니다."

넓고 얕은 구조가 아니라는 판단입니다.

"메가 메뉴 열릴 때 지연 좀 주세요. 마우스 지나갈 때마다 튑니다."

여는 조건이 너무 예민하다는 지적입니다.

"판 안에 제목 없이 링크만 서른 개 있으면 찾는 게 더 느려요."

묶음과 제목이 빠졌다는 지적입니다.

페이지덱이 템플릿 갤러리에 이 형태를 검토했다가 접었습니다. 민서가 판을 그려 보니 분류가 네 개에 각 분류의 템플릿이 세 개씩이라, 열 네 개에 항목 세 개가 들어간 판의 아래쪽 절반이 비었습니다. 대신 사이드바에 분류를 세로로 놓는 쪽으로 정했습니다.