아코디언 메뉴

[아코디언 메뉴]

1. 수직으로 쌓여있는 헤더 목록
- 점진적 방식의 콘텐츠 노출
- 콘텐츠를 확장하거나 축소함

2. 사용자 중심적 디자인 
- 통제권 부여 -> 사용성을 높임
- 사용자가 직접 메뉴를 제어하여 긴 콘텐츠도 부담스럽지 않게 제공

[아코디언 디자인의 장점]
1. 스크롤 작업 최소화
- 페이지의 길이를 축소함으로써 스크롤 작업을 최소화함

2. IA 역할 수행
- 헤더는 각 페이지의 IA, 정보의 구조를 나타내는 역할을 수행함으로써
정보의 멘탈 모델을 형성함

3. 간결한 시각적 효과
- 콘텐츠의 일부를 숨겨 간소화된 웹 페이지는 덜 복잡해 보일 수 있음

[아코디언 디자인의 단점]
1. 관심 주제가 많을수록 자주 클릭해야 하는 번거로움이 있음
- 전체 콘텐츠를 표시하기 위해 한 번에 하나씩 헤더를 클릭해야함
- 질문에 대한 답변을 얻을 경우 전체내용을 확인해야 할 경우, 인지 부하를 가져올 수 있음

2. 상호작용 비용을 증가시킴
- 클릭한 콘텐츠가 충분한 가치가 있는 경우 클릭 행위에 대해 개의치 않음
* 상호작용 비용 : 값진 콘텐츠를 얻기 위한 사용자의 노력 비용

- 클릭한 콘텐츠가 가치가 없다고 인식하는 경우
  클릭 대상을 인식함. 대상을 클릭함. 콘텐츠 로딩을 기다림 -> 사용자는 소중한 시간을 낭비했다는 불쾌감을 느낌. 

3. 콘텐츠를 숨기면 인지도가 떨어질 수 있음
- 사용자의 관심을 끌만한 매력적인 제목을 가지지 못할 경우 콘텐츠가 숨겨진 채 무시할 수 있음

[고려해야 할 2가지 사항]
1. 접근성
- 접근성을 높이기 위해 콘텐츠를 대변하고, 매력적인 헤더를 작성해야 함

2. 인쇄 최적화
- 펼쳐진 콘텐츠만 인쇄가 가능함
- 인쇄용 페이지에 최적화되도록 구성해야함

[스크롤 및 긴 콘텐츠 페이지에 대한 오해]
1. 사용자는 긴 페이지를 스크롤 하지 않는다
- 원하는 주제와 높은 관련성
- 스캔이 용이한 적절한 형식

2. 고객은 페이지 하단의 정보를 읽지 않는다
- 스크롤 없이 볼 수 있는 페이지 영역 뿐만 아니라 스크롤을 해야만 보여지는 페이지 하단 영역에도 관심을 기울임
-> 콘텐츠 우선순위를 적절히 분배하여 하단 콘텐츠에 대한 확실한 동기를 부여해야 함

3. 콘텐츠가 많은 페이지는 기피한다
- 적절한 정보를 나타낼 경우 방대한 양의 콘텐츠도 처리할 수 있는 능력을 지님
-> 웹 기반 콘텐츠의 경우, 인쇄물 기반 콘텐츠보다 더 많은 양의 콘텐츠를 스캔할 수 있음

따라서 사용자의 상황에 따라 적절한 방식으로 콘텐츠를 제공해야 함

[아코디언 디자인의 적용]
- 아코디언 디자인 적용 기준 및 사례
- 아코디안 디자인의 적용
- 사용 사례 평가 -> 일반적 상황이나 중요한 상황에서 각각의 적용 기준이 명확해질 수 있음

- 사례1. 사용자가 내용 전체를 필요로 하는 경우 : 전체 내용을 스캔할 수 있도록 해야 하지만 매력적인 헤더를 적용해야. 원하는 콘텐츠를 제공받는 것이 페이지 길이보다 중요.

- 사례2. 페이지가 긴 경우 : 한 번에 여러 섹션을 열어 정보를 확인함. 열리거나 닫힌 항목은 사용자가 통제하기 전까지 해당 상태를 유지함. 

- 사례3. 모바일과 같이 제한적인 경우 : 모바일 장치와 같이 작은 공간으로 제한적일 경우. 콘텐츠가 적절하게 구성되지 않은 경우 사용자의 관심도가 떨어짐. 관심 있는 정보가 언제쯤 나타날 지 알 수 없고, 정보를 찾기 전에 작업을 종료함. 모바일 장치와 같이 공간이 제한적인 경우 아코디언 디자인을 통해 정보를 축약하고, 아코디언 디자인의 미니IA를 활용할 경우 페이지의 구조를 이해하고 집중하는 데 도움을 줌. 

[실제 적용]
- 메뉴는 상단 또는 좌측에 배치될 수 있음
- 웹페이지 좌측 : 메뉴와 관련된 세부 항목 배치
- 웹페이지 상단 예시 : 기업 소개/위치 정보/서비스 소개/블로그/이벤트 배치
- 웹페이지 좌측 예시 : 이벤트 관련 배너 혹은 관련 세부 메뉴 배치
- 일반적인 홈페이지의 경우 상단 메뉴만 배치
- 그 다음 페이지부터 좌측 메뉴 배치가 일반적
- 홈페이지 메인 : 큰 이미지(이벤트 이미지 혹은 제품설명) 배치
- 사용자의 시선을 끌고 호기심을 자극하여 다음 페이지 접근을 유도
- 중앙 : 아코디언 메뉴 / 우측 : 광고 콘텐츠 / 좌측 : 텍스트 콘텐츠
- 팁 : 이미지나 텍스트를 먼저 삽입하기보다 영역을 먼저 정렬하기