햄버거 메뉴

화면 폭이 좁으면 메뉴 항목을 한 줄에 다 늘어놓을 수 없습니다. 항목이 일곱 개인데 폭이 360픽셀이면 글자를 줄이거나 두 줄로 내려야 하고, 둘 다 싫을 때 남는 방법은 접는 것입니다.

페이지덱 모바일 화면이 그랬습니다. 문서, 공유함, 템플릿, 검색, 알림, 팀 설정, 내 계정 일곱 개를 민서가 아이콘 하나로 접었습니다. 화면 위쪽이 훤해졌고 문서 목록이 두 줄 더 들어왔습니다.

한 달 뒤 보니 팀 설정 화면에 들어오는 사람이 절반으로 줄었습니다. 없애거나 옮긴 것이 아니라 한 번 더 눌러야 닿게 된 것뿐인데 그만큼 줄었습니다. 자리를 아끼는 대가로 눈에서 사라진다는 것이 이 형태의 성질입니다.

버튼 하나와 그 버튼이 여는 패널로 이루어집니다. 정할 것은 다섯 가지입니다.

1. 아이콘 — 가로줄 세 개를 씁니다. 이 모양만으로 메뉴라는 뜻이 전해지지 않는 사용자가 있어서, 아래에 작게 메뉴라고 적어 두면 누르는 비율이 올라갑니다.
2. 펼쳐지는 방식 — 화면 옆에서 밀려 나오거나 화면 전체를 덮습니다. 일곱 개 안쪽이면 옆에서 나오는 쪽이 낫고, 그보다 많거나 하위 항목이 있으면 전체를 덮는 편이 읽기 편합니다.
3. 닫는 길 — 셋을 모두 둡니다. 같은 버튼 다시 누르기, 패널 밖 누르기, 키보드의 Esc 입니다. 하나만 두면 열고 나서 못 닫는 사용자가 생깁니다.
4. 열린 상태 표시 — 열려 있는 동안 아이콘이 닫기 표시로 바뀝니다. 같은 자리에서 모양만 바뀌니 다시 누를 곳을 찾지 않게 됩니다.
5. 접근성 — 화면을 읽어 주는 프로그램에 버튼이라는 것과 열렸는지를 알립니다. 패널이 열리면 초점을 첫 항목으로 옮기고 닫히면 버튼으로 되돌립니다.

자주 쓰는 항목은 아이콘 뒤에 넣지 않습니다. 하루에 몇 번씩 누르는 셋 정도는 꺼내 두고 나머지만 접습니다. 화면 아래에 주요 영역을 늘어놓는 탭 바와 함께 쓰는 구성이 그 예입니다. 폭이 넉넉한 화면에서는 접지 않고 옆에 세로로 펼쳐 두는 사이드바로 바꿉니다.

"이 항목은 햄버거 안에 넣지 말고 밖에 꺼내 두죠. 하루에 몇 번씩 누르는 거예요."

자주 쓰는 항목을 감추면 방문이 줄어든다는 지적입니다.

"아이콘 밑에 메뉴라고 글자 넣어 주세요."

모양만으로는 뜻이 전해지지 않는 사용자가 있다는 요청입니다.

"데스크톱에서는 햄버거 대신 사이드바로 펼쳐 두는 게 맞습니다."

폭이 넉넉한 화면에서는 접을 이유가 없다는 판단입니다.

민서가 모바일을 다시 손봤습니다. 문서, 검색, 알림 셋을 화면 아래 탭으로 꺼내고 나머지 넷만 햄버거 안에 남겼고, 아이콘 아래에 메뉴라는 글자를 넣었습니다. 그 뒤 팀 설정 방문은 원래 수준으로 돌아왔고, 접은 넷 가운데 방문이 줄어든 것은 템플릿 하나뿐이었습니다.