웹기획 실전가이드 16

메뉴 구조와 화면 플로우 설계하기

웹사이트의 메뉴 구조는 사용자가 원하는 정보에 도달하는 '길'이다.

메뉴 구조 설계는 단순히 항목을 나열하는 것이아니라, 사용자의 사고 과정과 행동패턴을 깊이 이해한 후 최적의 경로를 만들어주는 작업이다.

---

메뉴 구조 설계 단계

1. 콘텐츠 인벤토리(contents inventory)

웹사이트에 들어갈 모든 콘텐츠와 기능을 빠짐없이 나열하는 작업

기존 사이트가 있다면, 모든 페이지를 조사하고, 새로운 사이트라면 필요한 모든 콘텐츠를 미리 정의해야한다.

 

- 콘텐츠의 중요도

- 사용 빈도

- 사용자 그룹별 접근 패턴

 

2. 카드 소팅(Card sorting)

 수집한 콘텐츠를 카드에 적고, 실제 사용자들에게 자신만의 기준으로 분류해보도록 요청

이를 통해 사용자들이 실제로 어떤 논리로 정보를 그룹화하는지, 어떤 용어를 선호하는지를 파악할 수 있다

 

- 오픈카드 소팅

- 클로즈드 소팅

 

3. 트리 테스트(tree test)

설계한 메뉴 구조가 실제로 사용자에게 직관적인지 검증하는 방법이다.

특정 정보를 찾는 과제를 주고, 메뉴 구조만으로 해당 정보에 도달할 수 있는 지 테스트한다.

이 과정에서 사용자들이 어디서 헤매는지, 어떤 용어에 혼란을 느끼는지를 파악할 수 있다.

💡 메뉴 구조 설계 핵심 원칙

1. 7±2법칙

인간이 한 번에 기억할 수 있는 정보의 개수가 5-9개라는 인지심리학 이론

따라서 한 레벨의 메뉴 항목은 7개 내외로 유지

 

2. 상호 배탕성과 완전 포괄성(MECE) 원칙

각 메뉴 항목은 서로 겹치지 않으면서도 전체 콘텐츠를 빠짐없이 포함해야한다.

ex. 남성복, 여성복, 아동복 으로 나누면 상호배타적이지만 의류,액세서리,신발로 나누면 일부 항목이 애매해질 수 있다.

반응형

3. 사용자 언어 사용

조직 내부에서 사용하는 전문 용어나 부서명보다 사용자가 일상적으로 사용하는 언어를 메뉴명으로 선택해야한다.

솔루션 < 서비스 , IR < 투자정보 가 일반 사용자에게 더 친숙

 

4. 화면 플로우 설계에서 사용자 목표 중심 설계가 핵심

사용자가 달성하려는 목표를 명확히 파악하고, 그 목표까지의 경로를 최대한 단순하게 만들어야 한다.

ex. 상품 구매라는 목표에서 상품검색>상품선택>옵션선택>장바구니>결제의 핵심 플로우를 방해하는 불필요한 단계는 제거한다.

 

5. 3클릭 규칙 고려

사용자가 원하는 정보에 3클릭 이내에 도달할 수 있도록 설계

클릭수가 늘어날수록 이탈률이 높아지는 것은 분명한 사실이다.

 

6. 병목 지점 최소화

모든 사용자가 반드시 거쳐야 하는 지점은 가능한 한 줄여야 한다.

ex. 회원가입을 하지 않아도 상품을 둘러볼 수 있도록 하고, 결제 시에만 필수정보를 요구하는 것

 

7. 되돌아가기 경로 고려

사용자가 실수를 했거나 마음을 바꿨을 때 쉽게 이전 단계로 돌아갈 수 있어야한다.

 

8. 모바일 환경에서의 메뉴구조

햄버거 메뉴, 탭 네비게이션, 아코디언 메뉴등 모바일에서 최적화된 패턴을 활용

 

9. 검색 기능

메뉴를 통한 브라우징과 검색을 통한 직접 접근이 상호 보완적으로 작동하도록 설계해야한다.

 

10. 메뉴 구조와 화면 플로우는 지속적인 개선이 필요한 영역

사용자 행동 데이터를 분석하여 어떤 경로가 많이 사용되는지, 어디서 이탈이 많이 발생하는지를 파악하고 지속적으로 최적화해야한다.