Creating a Website Information Architecture

Last Edited January 24, 2018 by Garenne Bigby in Blog

information architecture

Creating a great website comes from the understanding of visitors' interests, expectations, and needs. All of the visual design, text, navigation, and organization need to work together in order for visitors to find important information and complete tasks easily and quickly. Many phases of designing a website's information architecture can be completed simultaneously. Each phase is unique, therefore it is difficult to say just how long it would be to build a website's IA. To take on a task like this, there will be technical staff, writers, and visual designers all on staff to keep the project going by creating content, modifying existing content, and creating the visual design. The website is a highly visual medium for a brand's message, so it is vital that all people on board are on the same page to create a cohesive piece of work. The website should be both accessible and usable for all potential visitors.

How to Create a Website Information Architecture

key stakeholders goals Step 1: Defining Key Stakeholders' Goals

Defining the key stakeholders' goals is the first step. These are what drives the project. The key stakeholders are those people who will set the tone and overall objective of the website and will give required approvals at any stage through the sites development. Defining the key stakeholders' goals will include identifying the target audience, determining what the purpose of the site is, and establishing the functional requirements. This can be started by asking the following questions.

Who makes up the principal audience with whom the key stakeholders want to communicate, be as specific as possible. An example of this can be freshman, international students, graduate students, alumni, academic support staff, faculty, all campus users, external vendors, and news media.

The audiences should be prioritized into ways: primary and secondary. The primary audience is the website's main focus. The website will be optimized for them specifically. The secondary audience is important but it is not critical.

The key stakeholder should then define their expectations for creating or redesigning the website. A few examples of this can be making the site more intuitive to use, explaining what the company does, explaining the services that are offered, serving or attracting new audiences, increasing attendance at events, and so on.

The key stakeholders will need to include what specific functional requirements they would like on the website. This would be things such as having a visible search tool, downloadable PDF's or other interactive forms, self-service options, and events calendar, and enabling users to sign up for events or apply on the website.

identifying user goals Step 2: Identifying Your Users' Goals

An easy way to do this is to pretend that you know nothing about your own business, and you are a visitor searching for information on the business's website. Where would you start? What would be easiest? An effective website design will ultimately arrange the website so that it will anticipate the user's needs and expectations. This cannot be stressed enough. In order to accomplish this, information must be arranged and labeled and away so that the target audience will expect to see it.

Often times website creators will organize the website in order to mirror the structure of the department or office, rather than according to the users' needs. They will rely only on an organizational chart of staff to explain who to contact for what, and presume that the visitor will already know the responsibilities of each staff member. When the visitor does not know who is in charge of what, they are forced to read through the entire tea of staff biographies in order to figure out who to contact. To remedy this, consider adding a section to the website that explains each area of responsibility by topic, and would this include important contact information within the section.

In order to truly understand what the users' goals and expectations are, expect to find a wide sampling of users that are members of the target audience and interview them. This will allow you to determine what their goals and expectations are directly.

If conducting these interviews is not possible, you should still consider the characteristics the needs of the users. If there are only a few users available for an interview even their feedback can help to represent the broader audience. You will still need to imagine the characteristics and goals of other users in order to have a good sampling to later refer to.

define site content Step 3: Defining Your Site's Content Areas

When you take time to define the websites areas of content, this will help to develop the navigational structure. When doing this step, it is best when done in a group of at least 3 to 5 people, enabling each person to represent the profile from one or two of the user data sheets.

Before anything else, analyze the content that is already on the website, this will either be in person or on the web, and then decide the pieces that will be added to the new site, updated, or totally discarded. Keep and/or update only the content that you users will deem as helpful and relevant.

After this, list of all areas of content that the users will be looking for on the website. Ideally, do this by asking a wide a sampling of real users that are also members of the target audience what they will be looking for. If access to actual users is not possible, use your imagination to think about what they will want to find on the website. Once this is done you will need to set aside any goals that are not seen as practical to include in the scope of the project. Also, it is possible that you will need to add items to the key stakeholders would like to include.

optimize content area Step 4: Organizing the Content Areas

This will be when you organize the content areas that were compiled in step three into their own groups of similar topics. The groups will be given temporary names, and they will later be refined into the navigational menu items.

Doing this will help to group and label the content areas so that the navigation will be more useful and intuitive for website visitors. Prior to starting, you may find it helpful to review the main structure and section titles from a website that is similar and that you find easy to use. This can be used as a guide as you organize your own sites navigation and content.

DYNO Mapper features a tool specifically for content inventory. This is useful for checking all of the links that are being used on the website to ensure that they are working. Broken links will leave users feeling frustrated and they may not return to the site. Broken links also have a negative impact on the rankings on search engines like Google, Yahoo, and Bing. DYNO Mapper will inventory the website and will allow the user to know how many pages, links, and images are present. After this, the user can search, filter, and sort the inventory information that is based on the location, type, and status. After finding what is needed, lists can be quickly exported. Then, on the sitemap, you will find the corresponding inventory information.

creating the sitemap Step 5: Creating the Sitemap

Now is the time to create and validate the site map. This is a visual representation of the areas of content on the website. Use a sitemap generator like DYNO Mapper to create your visual sitemaps. The sitemap should be organized in a hierarchical way, and the items in it should have a parent/child relationship. This means that not all pages will have a child, but all pages will have a parent. The content categories should create a site mate, and once this is done, the sitemap should be tested by asking users from the target audience about the website. They should give you feedback about if the website structure is logical or not. Adjustments should be made as necessary.

DYNO Mapper employs a powerful visual sitemap generator. It can be generated either from scratch, existing records, via crawler, or xml. All that is needed is the URL of the website, and DYNO Mapper's own crawler will do the footwork. You can easily edit everything from the hierarchy, the colors, the titles, and the URLs for each sitemap.

If you'd like, you can sketch out your own ideal sitemap to get an idea of where you would like everything to be placed. It will really look like a family tree of sorts, and it will give all team members involved a better idea of where all of the pages on the website will be located in relation to the main home page. This is vital in making sure that the website's visitors will be able to locate important information with as little clicks as possible.

outline navigational structure Step 6: Outlining Your Navigational Structure

To outline the navigational structure, use the sitemap that was created in the previous step, and draw it out in a way that will emulate the navigation scheme for the website. Subpages are listed under the main content area headers. The navigational items of the website should not be pointing to other websites, and they should not be pointing to non-HTML files like a PDF or Microsoft document. If this is done, it may disorient the website visitor, and can be problematic for users with a connection that is slow.

Links that lead to other websites and documents should be placed in a central area in the content. As an alternate choice, these things can be placed in a section titled “related links” or “highlights”. If any of these things confuse you, think about the navigation similar to the table of contents in a textbook. This means that it is not cluttered with items that are not descriptive of the main content areas of the website. This means that the main navigation of the website should not have links to outside websites, documents that are downloadable, or email addresses. Once it has been confirmed that each of the navigational links will lead directly to a page of content on your website, begin considering the way that the navigation will appear. This simply means choosing navigation that is either horizontal or vertical.

label content areas Step 7: Labeling Content Areas

Content areas should always have labels that are accurate and meaningful. Users will click on words, and these words will need to make sense. Test this out by showing people your navigation scheme that was designed in the previous step. Ask these people what they would expect to see if they click on a particular button or link. Do not forget that the labels should be concise, no more than three words, straightforward, and consistent with the tone that is desired. The visitors of the website are aiming to find information quickly and will not want to decipher the meaning of a link or read through multiple sentences. The category names should be refined into labels that make the most sense. In short, the original labels such as general info, contact info, mission, and directions will all be grouped into the “about us” label, and so forth for all of the specific labels.

creating wireframes Step 8: Creating Wireframes

The wireframe is a blueprint or sketch that will represent how the areas on the page will be organized. A wireframe can be a simple, hand-drawn sketch, simply to be used as a guide for incorporating all necessary elements of pages in a way that is functional and well organized. A wireframe should always be used as a guide when collaborating with developers and designers. This will aid in ensuring that the information architecture is not revised or obscured on accident later during the development and design process.

In essence, a wireframe is the skeleton of what the website will look like. It will consist of a visual representation of what the website looks like. It will have the site title, vertical and horizontal navigation, content area, footer, images, and related links. It will not contain the literal information, but these categories and where they will be on the site.


 

Additional Resources:

Getting The Website Information Architecture Right: How to Structure Your Site for Optimal User Experiences

Information Architecture Basics

Creating a Web-Site Information Architecture in Six Steps

The Difference Between Information Architecture (IA) and Navigation

The ultimate guide to information architecture

Garenne Bigby
Author: Garenne BigbyWebsite: http://garennebigby.com
Founder @dynomapper
Garenne Bigby is freelance Chicago developer and founder of DYNO Mapper with over 10 years experience in both agency and freelance roles in design, development, user experience, SEO, and information architecture.

Back
Create Interactive Visual Sitemaps

Discovery has never been easier.

Sign up today!