Illustration by Bettina Reinemann
Information architecture (IA) is an integral part of the website and digital product development process. It’s close cousins with user experience design (UX) as both fields work tightly together to create the blueprints for digital (and physical) experiences.
In the analogy of constructing a building, the early phases of development involve understanding the needs of the building, its potential tenants, and local building codes. Information architects and user experience designers work closely together to determine those needs and requirements. Information architecture is the process of identifying and defining those particular needs and creating a structure and nomenclature for them.
From this documentation, IA informs interface designs by defining the structure and nomenclature the site is to follow. Where IA and UX differ in the early stages is in deliverables. Where UX may provide wireframes, and layouts, IA results in spreadsheets of documented content, and the two come together creating flow diagrams to map out content, and the surrounding experience.
Here we’ll explore some effective information architecture examples, and what types of deliverables can help shape the IA behind a website or product.
Site mapping
An important part of developing effective information architecture is sitemap design. In this example from the Nielsen Norman Group, their website content is mapped out in a hierarchical fashion to demonstrate the parent / child relationship of content.
Leveraging color (blue for 1st tier, green for 2nd, yellow for 3rd) they’re able to create a visual hierarchy of pages that will inform navigation and URL structure. The information architecture displayed in this sitemap doesn’t directly equate to the website’s navigation, but will inform it with the understanding of page hierarchy.
Content inventory and audit
If you’re working with an existing website, or migrating over from one into a new property, completing a content audit is beneficial. Over time, content will build up, and if it is not directly accessible in search or navigation, it may be lost in the clutter. Auditing your existing content will help you understand what is related, what exists, and what gets the most traffic. Mapping out your content URLs, and doing a website crawl can provide you with good information that will inform your new sitemap and information architecture.
Small business content audit information architecture. Image credit singlegrain.com.The content audit can be documented in whatever tool you’re comfortable in, whether it’s a spreadsheet like the example above. If you’re planning to do more advanced analysis and tracking, loading your content into a more dynamic tool like Airtable can help you to create links between content, source and author.
Information Architecture Diagram
Mapping out your information architecture is an important part of visualizing and understanding all that is involved. In much the same format as sitemaps, we can create visualizations of our information architecture and map out what is going to be visible to the user, and what actions will need to be available on the back end. We can then see a holistic picture of our website or product.
In this visual mapping for an industrial analytics product, Yegor includes application views, popups and alerts, as well as explaining what data or information will be required to populate the views.
Information architecture examples like this demonstrate the value a mapping or diagram can have to align stakeholders across many teams. This document creates a dialogue between design, engineering, product management, and copy writers – to name a few.
Simple tree structure for clients
In this information architecture example, Bogomolova built on top of the basic site mapping and added in both child pages and actions. The addition of number values denotes the priority of pages in the information hierarchy rather than leaning on colors.
As you can see, the “Add New” page or function has a child section, but rather than being specific pages, it’s a group of possible actions that can be completed from that node. In the same way under “Profile” the “Edit” function has the list of available actions to edit.
Like in the above industrial example, calling out these important pieces of information can clarify needs and requirements for engineering and design so they understand what needs to be accounted for in those particular page sections.
Representing actions visually
If done correctly, your information architecture and user journey maps will share commonalities. They both inform each other in different ways, with the intended user journey helping to shape how you structure and organize the information in your website.
In this information architecture example, Pedro has laid out his pages in a similar format to the above example. The key difference is that there are visual characteristics that separate pages from actions.
Information Architecture example for a mobile app. Image credit Pedro Aires.The boxes where actions take place use a dashed border to signify some level of interaction, rather than a static page. He goes further and on some actions like “Postcard Details” he includes potential other actions that may need to be completed, in this case a “Resend” action for when details have not been received, or they need to be updated.
Depending on the stage of your development, whether you have existing content to work with, or you’re starting from scratch, your information architecture needs will change. Hopefully these examples provide some inspiration for how you can structure your own IA, and visualize your website contents.
Things to consider
Keep in mind the following when creating your information architecture diagrams, content inventory or site mapping.
- Understand your audience: Developing your information architecture blindly, without input or understanding of your target audience can lead you to develop a structure and organization that doesn’t make sense to that group.
- Use it to align teams: If you’re working cross-functionally, keeping things in mind like data requirements, actions, and page templates, and including them in your architecture can help inspire discussions across your organization.
Make it what you need it to be: There can be lots of crossover and confusion between site-maps, user journeys, and information architecture diagrams. They’re all connected in various ways, and if you’re not sure exactly what you need, build it to fit your team’s needs. As we saw, all of these diagrams were different, but fit for the purpose they were intended.