Creating your own online presence puts you out there where the right people can find you.
Examples of Information Architecture Documents
Below are a few examples of the most common types of information architecture documents I create for my clients.
Website Sitemaps
A sitemap is an information architecture document that illustrates a top down view of all the web pages within your new website.
The process of creating a sitemap can help you organize your thoughts, determine what to include or leave out and can serve as an outline for content creation and collection.
Each web page within your website is organized within the hierarchy based on context and what users look for most often, which defines the navigational structure. A sitemap begins to define the scope of a website development project and can even include technical specifications and pages or sections slated to be built in future phases.
1
2
3
4
5
6
1
Top level navigation is defined by hierarchy of sitemap structure.
2
Each box within a sitemap denotes a single webpage within a website.
3
Multiple webpages that are of similar type or that will be using the same template are denoted with a stack of pages.
4
A reference is made to PayPal to let web developers know that users will be taken off-site to perform their payment and then back onto the website for order confirmation and conversion tracking purposes.
5
A color key helps web developers define which WordPress plugin or custom post type will be used for particular pages within the sitemap.
6
Notes about phases or conditional options are included to assist web developers.
1
2
3
4
5
6
1
Client branding and top level navigation (as defined by hierarchy of sitemap structure) make up the header of the wireframe.
2
Top news slider uses a large image to captivate users attention while most important calls-to-action are “above the fold” to direct help guide a user’s next actions.
3
Upcoming events, recent news and visitor information are considered 2nd most important information since visitors of the website frequently look for this information.
4
About content regarding the monument and friends group round out the homepage content as not all homepage visitors need to see this information, however it is important to include particularly to inform new visitors coming to the website.
5
A final call to action is included before the footer in hopes of guiding the next action of users who make it this far down the page. Joining is considered to be the most important action this organization, so this is the focus of this final attempt to sway visitors into action.
6
The footer of this website includes a detailed website navigation, listing not only the primary navigation items but also the sub-navigation of the primary sections to allow visitors to find the content that most interests them before they choose to navigate away from this website entirely.
The footer also includes copyright information as well as important location and contact details.
Wireframes
A wireframe is an information architecture document that illustrates a page-level view of a single web page within your new website.
Similar to the way an architectural blueprint defines the flow and space planning of a home, a wireframe define the user flow and space planning of a particular page within your website.
The process of creating a wireframe can help you organize your thoughts, determine what to include or leave out and can guide the creation and collection of page-level content elements or assets required.
Each content element within a wireframe is prioritized based on your organization and users needs and goals. Placement, size and even color are used to inform your web designer as to which content elements the users’ eyes and attention should draw the most attention.
User Flows
A user flow illustrates how users move through particularly complex activities or tasks within your website.
By reviewing the user flows that define your website’s users processes you can ensure the best user experience for your visitors. Many poor user flow issues can be solved by simply providing better directions to make steps less confusing to complete or even remove steps that we deem are unnecessary.
When adding new website functionality, you may need to collect new data from users, a user flow can help you determine where to add these new steps to be the least troublesome for your users.
1
2
3
4
5
6
1
This shape key helps translate what each shape denotes within the user flow diagram represents. Since shape and color aren’t connected in this user flow document there is a separate key for color definition.
2
The color key defines what each color used within the user flow diagram represents. Since color and shape aren’t connected in this user flow document there is a separate key for shape definition.
3
This particular user flow illustrates the process users would go through when logging into an online course system to view or use online course materials.
4
This info box contains extra detail about what information in particular would be available on a course member page once they have successfully logged into the online course area.
5
This info box contains extra detail about what information in particular would be available on a “members only” course page once a member has successfully logged into and navigated to an online course they are currently enrolled in.
6
This particular user flow diagram does not illustrate “error” handling, however these can always be included, if you would like error handing included in your IA user flow project.
Due to the simplicity of many website projects, I don’t provide user flows for every information architecture project I take on. However if you have a complex user process that could be confusing or hard to use, I’ll provide user flows to ensure your website’s user processes are as simple and easy to understand as possible.
provides tailor-made marketing ideas, WordPress SEO, coaching & technical support + marketing training courses to help you share your great work.
Learn More About Made Better Studio
April Holle, Principal of Made Better Studio
Get More Made Better…
