웹 구조의 계층 구조 예

회사 조직도를 웹 사이트의 레이아웃 다이어그램 옆에 배치하면 두 문서간에 현저한 유사성을 발견 할 수 있습니다. 기업, 정부 및 기타 단체는 종종 웹 사이트와 동일한 계층 적 레이아웃 패턴을 사용합니다. 예를 들어 기업의 CEO는 홈 페이지가 웹 사이트 모델의 맨 위에있는 것과 같은 방식으로 계층 적 모델의 최상위에 앉을 수 있습니다. 효율적으로 설계된 계층 구조는 사람들이 방문하기를 좋아하는 사이트를 만듭니다.

웹 사이트 구조

"웹 스타일 가이드"의 저자는 "웹 사이트 조직의 성공 여부는 사이트의 정보 아키텍처가 사용자의 기대치와 얼마나 잘 일치하는지에 따라 크게 달라질 것입니다."사람들이 사이트를 쉽게 돌아 다니는 것을 발견하면 방문자가 사이트의 도움말 문서를 참조하지 않고도 웹 페이지를 탐색 할 수 있도록 사이트에 논리적이고 예측 가능한 레이아웃을 제공하는 것이 쉬운 방법 중 하나입니다.

피라미드 접근법

웹 사이트를 피라미드라고 생각하면 도움이 될 수 있습니다. 피라미드의 상단에는 사이트의 첫 번째 수준 인 홈 페이지가 있습니다. 효과적인 계층 구조는 일반 정보와 자세한 정보가 포함 된 다른 웹 페이지를 가리키는 링크를 포함합니다. 이러한 페이지는 홈 페이지 아래에 나타나며 계층 구조에서 사이트의 두 번째 수준이됩니다. 기본 사이트는 2 단계 만 필요할 수 있으며 홈 페이지에는 "About Us", "Products"및 "Join"과 같은 페이지를 가리키는 링크가있을 수 있습니다. 사이트 방문자에게 돌아 오는 길을 제공하는 것이 항상 좋은 생각입니다 홈 페이지를 가리키는 모든 페이지에 링크, 버튼 또는 메뉴 항목을 포함시키는 등 모든 페이지에서 홈 페이지로 이동할 수 있습니다.

레벨 3 이상

Whitehouse.gov는 복잡한 계층을 형성하는 여러 수준이있는 사이트의 예입니다. 홈 페이지는 간단하지만 홈페이지의 다른 페이지로 이동할 수 있습니다. 이러한 유형의 계층 구조는 여러 수준으로 확장 될 수 있으며 하위 수준은 상위 수준보다 자세한 내용을 제공합니다. 3 단계 계층의 좋은 예는 서평 검토 사이트입니다. 홈 페이지는 1 단계에서 일반 정보와 리뷰 페이지를 가리키는 링크를 제공 할 수 있습니다. 두 번째 레벨을 구성하는 페이지에는 책 목록이 포함될 수 있습니다. 책을 클릭하면 "War and Peace"라는 다른 페이지에 해당 책에 대한 리뷰가 표시 될 수 있습니다. 이 페이지는 사이트의 세 번째 레벨에 있습니다. 이 계층 구조를 조직도와 같은 방식으로 다이어그램으로 만들면 상단에 상자를 그리고 "홈 페이지"를 그립니다. 그런 다음 "홈 페이지"상자 아래에 "리뷰"상자를 그리고 "홈 페이지"상자 아래에 "전쟁과 평화"상자를 추가 할 수 있습니다.

헤딩을 사용하여 계층 구조 표시

웹 사이트에서 페이지를 구성하는 것 외에도 페이지의 콘텐츠를 구성하여 계층 적 관계를 표시 할 수 있습니다. 예를 들어 표제를 사용하면 사람들이 요약 형식으로 정보를 표현할 수있어 소화하기 쉽습니다. HTML은 h1, h2 및 h2와 같은 여러 표제 태그를 제공하여 웹 페이지에 계층을 추가하는 데 도움을 줄 수 있습니다. 예를 들어 큰 h1 태그를 페이지의 주요 표제로 사용하고 작은 'h2'태그를 '제품'이라는 섹션에 사용할 수 있습니다. 그런 다음 제품 아래에 h3 태그를 추가하여 제품을 설명하는 하위 섹션을 만들 수 있습니다. 또한 페이지에 글 머리 기호 목록을 추가 할 수도 있습니다. 이러한 모든 요소를 ​​결합하여 사이트 방문자가 한눈에 이해할 수있는 시각적 개요를 만들 수 있습니다.