The Difference Between Information Architecture IA and Navigation

Applying these principles, you are likely to effectively structure existing content and leave a space for growth. Co-existing hierarchies pattern – unites several types of hierarchies in case the information from one subpage overlaps the content of another. Global or site-wide – present across all the pages, this navigation enables the users to get to the main page from every location, for example, left- or right-sided, top-centered, sticky menus, footers, or hamburger menus.

web information architecture

The six purple boxes represent the major sections of the museum’s website — but user research and testing showed that not all six were considered equally important. The other parts of the sitemap show what content would appear above the navbar in the header (“utility navigation”), the content area of the page (“news, events, exhibit” and the search box), and the footer. Besides a navigation header with drop-down menus and a search box, there’s a big footer at the bottom of each page. This footer contains important navigation links as well as a short description of the company. Users can easily understand what the company does, find the information they’re looking for, or browse wherever they are on the site. By placing navigation aids and important information and elements on different pages, you’ll ensure that visitors know where they are on your website.

Literature on Information Architecture

Even software platforms understand the significance context plays in website architecture. By observing a group of people who have never visited your site try to understand your offering, you can see what content is missing and adjust your information architecture accordingly. IA is used in physical spaces like museums or department stores, as well as in websites and applications.

web information architecture

For example, the Footwear category has its own spot on the main navigation, but it’s also included under Men’s, Women’s, and Kids’, as sub-navigation items. The website for Coda is one of the more elegant single-product websites out there and it’s obvious they put a lot of thought into how the information on the page is structured. What works best will vary based on things like how often content is updated, how much content there is, and how visitors use the site.

So what is information architecture in web design?

Besides such essential features as trip booking or personal account management, it might also contain various sorting options, travel tips, and other nonessential, but useful information. The original Spotify design was an example of poor information architecture. Spotify’s website featured a co-existing hierarchy pattern with reiteration and partial reiteration of some sections. This made the information architecture messy with users struggling to find what they need and getting lost in redundant menu items.

web information architecture

Others play a smaller, more focused role, working on individual use cases. Information architecture ensures content and data is structured, organized, and categorized in an effective and usable way, thereby maximizing the value of your websites and applications. Remember, you can be as creative as you can but the final product must be understandable and presentable. This is also necessary because the developers or content creators benefitting from your IA might not have been an active part of the entire process. Additionally, if you have to present your findings to your managers or executives, you need to be sure that the IA makes sense to them.

In this article

Plan for the addition of new content, features, or functionalities without disrupting the overall structure or user experience. By incorporating multiple categories, classifications, and navigation options, designers enhance the findability, flexibility, and user-friendliness of the information system or interface. So what is information architecture (IA), and how is it applied to websites? Below, we’ll discuss a set of principles information architecture web design to think about and the steps you can take to design a solid IA for any world wide web site. Site planning with a team is often easier if you base your major structural planning and decisions on a shared master site diagram that all members of the group can work with. The site diagram or site map should evolve as the plan evolves and act as the core planning document as changes are proposed and made in the diagram.

web information architecture

When you decide for this option include all pages, all downloadable content, and also any media or interactive content. If there is a bad IA for internal content, it can result in wasted time and reduced productivity. In 1999, the International Data Corporation (IDC) conducted research into knowledge workers to find out the financial cost of this. They considered things like how long workers spend searching for information each week and how much time they spend creating content that already exists because they couldn’t find it. They estimated the cost of this “knowledge work deficit” at $5000 per employer every year. These principles are based on the understanding that the architect’s focus should be purely the structure – something that can be shown with maps and flowcharts.

Use the best information architect tools

The world of the internet, however, is unforgiving and so full of content that we don’t always have the luxury of time. In the digital world, therefore, it is important to present any content in a structured way, so that the users have to spend minimum time in understanding and extracting useful information. When the content on a website or a mobile application is organized, it not only eases the journey of users but also makes it more manageable. A logical presentation and organization of the content is, arguably, the first step toward creating a strong online presence.

  • They also create diagrams and models, such as site maps, user flows, and wireframes, to visualize the information structure and how users will interact with it.
  • Bean is a huge ecommerce site, with a big inventory of products that’s aimed to a mainstream and diverse audience.
  • Creating or improving the information architecture of a product or service is a process that can appear quite complicated.
  • Usually the only graphic that appears in a mature wireframe will be the organization logo, but even there it may be better simply to indicate the general location of the logo.
  • It automatically plugs into Google Drive so multiple people can collaborate on the same map in real time.

In the field of systems design, for example, information architecture is a component of enterprise architecture that deals with the information component when describing the structure of an enterprise. Microsoft Visio is a premium tool that offers dozens of premade templates, diagrams, and stencils to help you start diagramming your IA. The latest version comes with even more features to help you create professional sitemaps. Team members can also view, comment, and share Visio diagrams to improve collaboration. At this point in the process, you’ll want to decide whether search can improve the user experience on your website. If you’re working on a solo project, it’s important to remember that you are not your user.

Step 4: Understand users’ needs

Before you start laying down the pages and other navigational elements, create a legend for your sitemap. Use the same types of shapes, lines, arrows, and other symbols to signify certain types of content and relationships within your website. By this point, you’ve started to gather up all the pieces for your sitemap. And if you did tree testing, then you should already have a working sketch of it.

This is an excellent way to get live feedback and create an IA where a team of designers is involved in the process. It is often considered that designers are, in fact, information architects as they tend to meet the needs of users by presenting and organizing information in an understandable way. Web platforms make it easy to make edits or changes to pages within a particular context. For example, Magento created its own “content hierarchy” between your website, store, and store views.

Information Architecture – definition and facts

This final round of analysis helps you ensure that your new information architecture is sound. For example, when you click each label on the Madewell homepage, secondary navigation pops up with links to other pages in that category. It’s when all the information and navigation options are on a single page.






Leave a Reply

Your email address will not be published. Required fields are marked *