Close menu Resources for... William & Mary
W&M menu close William & Mary

Information Architecture

A website's information architecture describes the way its content is organized. Just like a traditional outline for an essay, or the nested folders on your desktop, a good website layers files and folders so that

  1. Users can navigate a logical path to find what they're looking and
  2. You can easily locate pages and files and find the proper home for new content.
Hierarchy of Your Content Folders

Your website already has an information architecture. When you're on the landing page for your website, the left navigation menu contains links that go to index pages in folders at that top level. Click on the first item of your menu, and you go to the index page within that folder. The navigation menu will change to display links to content another layer down. Notice how the menu shifts as you move up and down through the layers. Watch how the breadcrumbs and URL also serve as way finders for where you are in your site's information architecture.

It's useful learn some vocabulary here. A folder containing sub-folders is a parent. The sub-folders are children. And any folders nested at the same level, siblings. The English Department's site is in the /as/english/ folder. The /as/ folder is its parent; the /biology/, /sociology/ and /physics/ folders are its siblings; /undergraduate/ is a child.

A good practice: The more general a topic, the higher it should be in the hierachy of folders. Some examples:

Landing Page > Support > More Ways to Contribute

Landing Page > Undergraduate Program > Undergraduate Research > Honors

See how the content is getting more specific and detailed? This allows our users to build a scaffold of understanding, and gain context along with the specifics.

But we must also recognize that most users don't read through our sites in a systematic way. Most folks do a Google search and land deep within our folder structure. If the website is thoughtfully constructed, they will be able to get at the missing context by using the menu links surrounding the page.

Note that some of your Cascade folders organize non-web page assets. These folders don't have index pages so cannot be on a menu. Typical "organizational" folders contain images, documents, and right-hand column items. They are usually found in your main folder, at the same level of your top content, but their contents are not accessible via menus.

Foraging for Information

We know that web users navigate websites by foraging for information. They skim headers and menus, they look at links, and maybe read the first line or two in the first couple of paragraphs on a web page. We need to plan the information architecture so that navigation menus open the information trail gradually.

If you're adding a new content folder to your site, think through where it belongs in the hierarchy. How does the new information add to the content that's already there? Is it more detailed (place it lower) or more general (place it higher)? If you were a student or parent looking for this information, where would you expect to find it? How would you expect to navigate through the layers? If Google dropped you on this page out of the blue, do the menu links help put this information in context? Would you have what you need to make this information actionable?

Quick Tips
  • Avoid long pages of dense text. Break the topic areas up into separate pages that fit naturally into your information architecture.
  • Navigation menus should be limited to 8-10 links. If you think you need more, reconsider the structure of that content. Can you break it into broader chunks?
  • Limit your in-text links to related information.

Remember: Your information architecture can build confidence in your program – or create confusion and frustration. It's worth spending time on.