Site Organization

Major Concepts

The following are some major concepts that should be considered when creating the site in which the exhibit lives.

Information Architecture (IA) - The structure of the site (e.g., the site hierarchy, the way pages link to each other) and the labeling of information so that it is understandable and navigable. (Read Information Architecture Basics and see below.)

Taxonomy - A component of IA that involves the language chosen to label menus/navigation bars, page headers, etc. (Read Website Taxonomy Guidelines and Tips.)

Navigation - The means by which one moves within a site and finds specific information, e.g., the site navigation menu. (Read Supporting Navigation and Wayfinding.)

• Wayfinding - Related to navigation, wayfinding is how one knows where they are within a site and if they are able to find their way back to information to which they previously navigated.

Page Organization and Layout - The way content (text, images, video, etc.) is organized on a page. (Read What Do Common Web Layouts Contain? and see below.)

Planning Your Organization

When planning your site, it is helpful to sketch out your information architecture in diagram form and draw wireframes to plan page organization and layout.

Information Architecture

The following provides an example of an information architecture diagram for an exhibit on the history of cats. Looking at the diagram, you can get a sense of how the curator decided to organize the exhibit's content logically (which could have been done in a multitude of ways) and structure the site in which the exhibit lives accordingly.

The exhibit site has a hierarchy of only two levels: the Home page is the top level and the rest of the pages are the second level. The terms History, Breeds, Culture, and Readings are part of the site's taxonomy and will be the labels in the navigation menu that users click to find their way to the various pages.

Accessibility image description: The diagram shows the structure of the site, which is made up of ten different web pages. At the top (or the first level of the hierarchy) is the Home page, represented by a rectangle with the word home written on it. Below that is a row of terms that run left to right. They are History, Breed, Culture, and Readings. Lines make them look as if they are branching off of the Home page. (These terms will be the labels in the navigation menu.) Branching off of these terms and situated below them are rectangles that represent pages. These pages make up the second level in the site's hierarchy. Branching off of the term History are the pages Wild Ancestors and Domestication. Branching off of the term Breeds are the pages Short Hair, Medium Hair, and Long Hair. Branching off of the term Culture are the pages Cats in Art, Cats in Literature, and Cats in Animation. Branching off of the term Readings is the page Further Readings.

Page Organization and Layout

Wireframes are simple drawings of web pages that help with planning the organization of content and layouts. Below is an example of a wireframe for a page in the History of Cats exhibit. Here you can see that when one clicks on Culture, options for the pages for cats in art, literature, and animation appear.

Cats in Art is the page's main header (also known as header 1 or h1) and lets users know the page's title and the overarching topic. The other headers, Ancient Representations and Classical Cats, are second-level subheaders (also known as header 2 or h2). Each subheader introduces or frames the content to follow and is assumed to apply until a new header is used. If Ancient Representations, for example, had subsections like Ancient China and Ancient Greece those would be header 3 or h3. Notice the pattern forming? Like the structuring of sites, pages are also structured using a hierarchy.

Accessibility image description: The image shows a barebones black and white drawing of a web page. At the top is the exhibit's title, The History of Cats. Below that is the navigation menu, which has the options Home, History, Breeds, Culture, and Readings. As if someone is clicking on the term Culture, a dropdown menu appears just below the word and has the list of links Cats in Art, Cats in Literature, and Cats in Animation. The featured page is Cats in Art. Those words appear as the main header on the top left of the page just below the navigation menu and are in the largest font on the page. Below this header are large rectangles that function as placeholders for what will be three images in the future. On the right side of the page just below the navigation menu is the subheader Ancient Representations, which is in the second largest font on the page. Below this subheader, there are lines that abstractly represent a block of textual content that will be added later. Below that content is another subheader, Classical Cats, which is the same font size as the previous subheader, and below it are also lines that represent a block of textual content.