Information architecture (IA) isn’t the easiest space for a newcomer. The myriad terms and technologies can often be quite tricky to understand on their own – not to mention how they all fit together.

We wanted to help, so we’ve put together a comprehensive cheat sheet/glossary that you can use whenever the topic of IA comes up.

Information architecture

Information architecture is the structure used to organize and label content on websites, mobile applications and other digital environments. At a very basic level, IA determines the paths people take to get to the content they’re looking for and where they might get lost.

IA isn’t actually one “thing”, but a number of different elements:

• Labels: How information is represented
• Navigation: How people make their way through the information
• Search: How people look for information

It’s also the layer upon which you build the design. This means that for your users, they’ll never likely see the IA – but they will feel the effects of the decisions you make when designing it. Your IA should help people find what they’re looking for, regardless of where the IA exists. It’s as important for desktop users as it is for mobile.

Experience architecture

The term ‘experience architecture’ refers to a wider set of practices or terms that includes information architecture. Experience architecture covers IA, interaction design and experience design. It’s similar to how user experience (UX) is just one element under the wider customer experience (CX) umbrella.

Note that just as the field of information architecture has information architects, experience architecture has experience architects; people responsible for planning and executing experience architecture deliverables. Typically, the experience architecture role is quite varied in that it requires expertise in user-centered design, human behavior and interaction design.

User journey

A user journey is basically what it sounds like – the experiences someone has when they interact with something. It’s also most commonly used to describe these experiences and interactions in a software context.

User journeys describe the steps users take to complete a task when interacting with a website or other digital service. For example, for a photo storage app, the user journey may look something like this:

1. User runs out of storage space for photos
2. User finds new photos app on app store
3. User installs new photos app
4. User creates account
5. User begins uploading photos from device

Typically, you’d create a user journey in the discovery phase of a project, as you can use this tool to visualize what the users need and to influence wireframe and information architecture development.

Depending on your needs, your user journey may be quite a bit more detailed, with overarching categories ‘before’, ‘during’ and ‘after’ to show where the user is with regards to using the product. You can also add in ideal emotions at each stage.

Wireframing

Chances are if you’re using a website or mobile app, it was a wireframe at some point in the past. Wireframing is essentially a way to design digital applications at a structural level, a way to map out broadly where different elements like content and functionality sit before adding in visual design.

Wireframing is to websites, apps and other digital applications what the rough first sketch of a building is to a finished skyscraper. It’s foundational, yet entirely important to nail down broad strokes ideas before investing more heavily in design.

Why might you produce a wireframe? In addition to using it as a way to prototype ideas prior to the visual design process, wireframes are an important method of getting stakeholders and other teams onboard.

Labeling system

In the world of information architecture, labels represent a relationship between your users and content. The idea behind labels is to communicate information to users without using too much space or requiring much work on the user’s part.

Let’s take a look at an example. ‘About us’ is a label that represents a larger chunk of information. On a website, this could be information about the people who work at the organization, what the office space is like and the work that the organization does. You wouldn’t want to present all of this information to a user on the homepage, so instead, you use a label like ‘About us’ to trigger the user’s association with that term. Once they’ve seen the label, a user can decide whether they want to proceed. In a nutshell, a label should be used to communicate information clearly and efficiently.

Labels are understandably important, and things can go awry when the people designing websites and other digital applications don’t adequately consider the importance of correct labeling. Perhaps more than most other parts of a website, poor labeling is an easy way to spot websites where user needs haven’t been appropriately considered.

Search system

Search is how your users go about looking for the information they require, whereas a search system is essentially a search engine: a way to sidestep the act of navigating through a website and search directly for information. One of the biggest misconceptions when it comes to designing digital applications is that search is the answer to all navigation problems. Search systems are often seen as a way to avoid developing user-focused navigation systems, as the common thinking is that users know what they’re looking for and so will just plug terms into a search bar.

This isn’t actually true, and there’s a great quote from Larry Page that neatly summarizes this argument: “The ultimate search engine would basically understand everything in the world, and it would always give you the right thing. And we’re a long, long way from that”.

Search engines often become bandages for websites with inadequate browsing systems. When considering adding a search engine to a website, consider how much content you actually have. The last thing you want to do is have to maintain a search engine when the browsing experience meets user needs.

When a search engine is appropriate:

• Websites with large quantities of content (50+ pages)
• Websites with long, dense pages
• Any situation where browsing will take significantly longer

Metadata and taxonomies

In the world of information architecture, 2 terms that get thrown around and mixed up more than most others are taxonomy and metadata. Here’s a breakdown of what both of them mean, and how they relate to each other.

Metadata makes content findable and understandable for users and computer systems, it’s data about data. Rachel Lovinger describes it as “information about the content that provides structure, context, and meaning”. Photos typically have significant quantities of metadata attached to them, information like where the photo was taken, the date the photo was taken and the device the photo was taken on. Metadata is particularly important to search engines, helping to surface the right content based on what the user is searching for.

Taxonomies, on the other hand, refer to structures that organize information. Unlike metadata which applies to individual pieces of content, taxonomies help to organize content into hierarchical relationships.

So how do metadata and taxonomies work together? Well, if a taxonomy’s goal is to organize content, it needs terms to be stored as metadata. Christine Benson notes that “a taxonomy organizes information, and metadata describes it”. They’re really 2 parts of the same whole.

Wrap up

Hopefully, we’ve given you a clear idea of some of the more important information architecture terms and how they relate to each other. If you want to start rethinking your own website’s information architecture, there’s no better place to start than with a comprehensive understanding of how your users think the information on your website should be structured. You can read more about one of the best methods for this process, card sorting, right here on our blog.

In many ways, Information architecture (IA) is the backbone of a digital product or service. It is a conceptual structure for information, designed in a way that allows users to navigate and interact with it in a meaningful way. This is done by organizing, structuring, and labeling content that is intuitive for users. IA considers user needs and goals, as well as the relationships between different types of content, in order to create a user-centric design.

‍

An effective IA design approach leads to better user experiences as it ensures that information is presented in a logical and intuitive way. Essentially, good IA attempts to reduce the chance of a clunky, frustrating user experience by organizing information in a way that makes sense for the target user. 

‍

In this article, we’ll discuss the history of information architecture and how user research impacts its effectiveness. We’ll also discuss the roles of conceptual and structural design in user experience. And along the way, we’ll introduce Optimal Workshop’s IA tools, and how they can help you design exceptional IA.

‍

The Beginning of Information Architecture

‍

The world is full of information and humans have always had a knack for structuring and organizing it. Take libraries, for example. In ancient Egypt, workers in the Library of Alexandria created a catalog of 120 scrolls to order and describe the inventory. They needed to - estimates of the number of scrolls the library contained range between 40,000 and 400,000! Fast-forward to 1873, and Melvil Dewey came up with the Dewey Decimal System to further categorize and universalize much larger collections of books. Why come up with these solutions? To efficiently comb through, and navigate, masses of information.

‍

As computer technology started to rise more prominently in the 1950s and 1960s, we started organizing computer programs and system designs in a way that made them easier to navigate too. In fact, IBM first mentioned the term architecture in a computational context in 1959 [ref]. When the wonderful ‘worldwide web’ was born in the 1990s, digital information began to be displayed and interacted with on a much larger scale. And, like our librarians, the world decided that online order was desperately needed. This is where the foundations of information architecture as we know it today really started to take shape.

‍

In 1998, Peter Morville and Louis Rosenfeld wrote the book ‘Information Architecture for the World Wide Web’, which became Amazon’s best internet book that year. The authors integrated the ‘librarian’ approach to IA, where the main goal is to design a system where information is labeled for easy navigation and search. This focus on user-centric, logical design has become the backbone of user experience (UX) design today, and why Optimal Workshop’s Treejack tool, among other, exist for researching and designing great IA.

‍

Organizational Structures

‍

Information architecture is like the blueprint of your digital product - it’s a conceptual structure of how content is organized and arranged to create seamless interactions. But, no matter how much experience you have, or how much you trust your instincts, you will never truly get inside your end users' minds without performing user research. They will be the ones to tell you what information is relevant to them, how to structure it, and even how to label and categorize it.

‍

There are some best practices for organizing information. Start by ordering your content from most critical to least. Think like a web page. What will immediately engage a user, and what subsequent content will keep them engaged? This exercise helps to prioritize and order content. Next, think about how your information should be grouped or categorized. Content that is grouped intuitively helps users consume and navigate information on your website or digital product. Another useful exercise is to consider how different users might access your content. Mapping user journeys (often with entirely different users in mind), challenges how you design your organizational structures in a way that meets multiple users' needs.

‍

But, while those principles can get you started, user research is where designing modern, user-centric products really begins. In terms of information architecture and organizing content, card sorting is one of the most effective ways of designing conceptual structures. Card sorting, executed by Optimal Workshop’s OptimalSort tool, for example, involves asking people to arrange things like labels, articles, and products in a way that makes sense to them. People are different, and the benefit of this technique is that you can identify how information is most commonly organized. It also highlights potential ambiguity that you may need to address early on in the design of your IA.

‍

Conceptual and Structural Design

‍

The roles of conceptual and structural design in user experience are crucial in the development of effective information architecture and user experience (UX) design. Conceptual design involves the creation of a high-level, abstract representation of the overall structure of the information architecture, which helps designers to understand the content, functionality, and overall user experience. Generally, there are limited or no restrictions as to what shape the design can take. Structural design, on the other hand, involves the development of the actual information architecture, including the organization of content, navigation systems, and interaction design.

‍

Effective conceptual and structural design can significantly improve user experience by creating a clear and consistent design language. This allows your target users to easily understand and navigate through content, leading to better engagement and satisfaction. Essentially, well-structured IA can increase the accessibility of content, making it easier for users to find the information they are looking for, regardless of their level of experience with the website or digital product.

‍

Tools such as Optimal Workshop's Chalkmark tool can help designers to test and validate their conceptual and structural design decisions by enabling them to create and analyze user interactions with information architecture. This helps designers identify areas of the structure that are confusing or difficult to navigate, which can then be streamlined to create a more intuitive user experience.

‍

The Evolution of Information Architecture

‍

As we discussed earlier, modern information architecture is no longer limited to physical implementation, like libraries, but instead extends to digital platforms and software applications. With the rise of the internet and mobile devices, IA has become a critical aspect of UX design. The focus has shifted from organizing information in a static, hierarchical manner to creating dynamic and interactive information environments that adapt to the needs of individual users.

‍

One of the key changes in IA has been the shift towards a more user-centered design approach. This involves creating IA that is tailored to the needs and preferences of specific user groups, such as individuals with disabilities or users with different levels of technical expertise. This approach requires a deep understanding of user needs and behaviors, which is achieved through research and user testing. This research is increasingly done remotely and online using a suite of tools, like those provided by Optimal Workshop.

‍

Optimal Workshop's Reframer tool, for example, allows designers to collaborate and capture user insights and translate them into design solutions. This tool helps designers to identify patterns in user behavior and preferences, enabling them to create IA that is intuitive and easy to use.

‍

As technology continues to evolve, IA is likely to become even more integral to UX design. With the emergence of new technologies such as artificial intelligence, virtual and augmented reality, designers will need to create IA that is capable of adapting to these new interfaces and provide solid structures that lead to seamless user experiences.

‍

Conclusion

‍

Information architecture is an essential aspect of user experience design that involves organizing, structuring, and labeling digital content in a way that makes it easy for users to find and understand. Great IA leads to better user experiences by presenting information in intuitive and logical designs. This is why information architecture is crucial for website design.

‍

The history of IA as we know it today dates back to the 1950s and evolved with the rise of the internet. Now, we think of modern IA design as being user-centric, which involves in-depth research to understand users' needs and goals. Optimal Workshop's IA tools, such as Treejack, OptimalSort, and Chalkmark, can help designers create exceptional IA by testing and validating conceptual and structural designs. 

‍

Well-structured information architecture can significantly improve the accessibility of content, which leads to better engagement and user satisfaction. This will become increasingly important as users interact with technology through new mediums, like virtual and augmented reality. So, remember to set solid foundations by investing in IA design when you start your next project!

What is information architecture (IA) without its complementary elements? On this blog we’ve already discussed the information architecture elements of taxonomy and ontology, and now it’s time to take a look at choreography. While taxonomy refers to how information is grouped, classified and labeled and ontology refers to the meaning behind our words, choreography describes the rules for how all those parts should interact.Choreography is essentially the nuts and bolts that bring organization, structure and meaning together to form one well-oiled machine that supports, enables and delights users on their path to task completion within a specific context.An often overlooked element of information architecture, nailing your choreography is essential to the delivery of a seamless user experience because it is present in everything your users will do on your website.

Understanding choreography and IA

Coming back to our house analogy from my taxonomy blog, choreography would be present throughout the entire house determining how everything works together. It’s in the positioning of the door handles and hinges to enable easy access and use of rooms and so you don’t swing an open door into a shower screen or into the knees of a toilet user (who should have locked the door anyway). Choreography appears in open plan living environments seamlessly flowing from one space to the next. The way that the laundry is usually a room that includes an external door allowing an easy workflow from storing the dirty clothes, to washing them to hanging them outside on the line to dry. These are all examples of choreography.In the context of a website, choreography is present in a number of different website elements. These might include: the rules for how a menu might respond or behave under specific circumstances, the way the user interface adapts to suit different devices, the hierarchical relationship between content and much more.

Choreography examples

To help you understand how choreography might appear in a website IA context, I’ve scoured the internet and have found 3 interesting examples I’d like to share with you.

Mental Floss

Mental Floss is an online publication designed for curious minds — sounds awesome! But the thing I find most interesting is the choreography that is present in the surfacing behavior of the top navigation menu. There are two different ways to access its content: you can either click on the big orange menu button in the top right hand corner and you’ll get everything in one hit — including the footer links (see two images below) — or you can scroll down or up the page and it will automatically drop down and become sticky giving you just the level 1 IA headings and that sticky orange menu button (see third image below).

Mental Floss as it appears when I first open the home page.

When I click on the big orange button

Now look what happens when I scroll a bit.... Ta da

If you go with the scrolling option, you’re not going to miss out because Mental Floss appears to have been designed to be explored — might have something to do with that curiosity thing! All the links that live under the big menu button are distributed throughout the long scrolling page, so when you’re exploring the content, you also get everything! If you get really stuck, that sticky orange menu button is always there to help. If I scroll I get one thing and if I click I get something else, but no matter how I choose to consume the content I get access to everything without having to think about it. This website’s choreography supports both exploratory and direct navigation styles and brings all the parts together.

IKEA US Inspiration page

Part blog, part catalogue, part how-to hub, the Inspiration page on IKEA’s US website is a fascinating IA example because it exists outside the patterns used on the rest of the website. It’s like an IA within an IA. While the rest of the website has a wide rigid structure typical of large IAs, the Inspiration page (also titled ‘IKEA Ideas’) is more organic and is organized by content tags and is navigated by filtering (see below).

The tag cloud-like thing displays the content tags in alphabetical order. Each piece can be assigned up to four tags and users can filter by clicking or just peruse the whole lot by scrolling. Upon clicking a content tag, the piece selection below is automatically updated to only include pieces with the selected tag.Choreography on this part of IKEA’s US website is present in the relationship and behavior of the content tags and how that affects the information on the page.

Do nothing for 2 minutes

Do nothing for 2 minutes has a completely flat IA and its choreography is present in the way it responds to user behavior and the way it presents visual and audio content. The website opens to a single page (see below image) showing an image of a beautiful sunset at the beach accompanied by the soothing sound of waves gently crashing and a group of seagulls fighting over a pickle someone tossed them from a McDonald’s cheeseburger (maybe that was me). It gives me a very clear instruction to “do nothing for 2 minutes” and presents a timer that immediately starts counting down.

In the centre of the screen in that sunlight created highlight are the the words “Just relax and listen to the waves. Don’t touch your mouse or keyboard.” It’s a bit hard to read and I didn’t instantly notice it but when I don’t follow its guidance, the timer resets and tells me to “try again”(see below image).

When I comply with its instructions, the clock ticks down and when there are just 40 seconds to go something magical happens — the wave sounds stop. It’s not jarring or surprising, in fact it actually felt like I dropped to a deeper state of relaxation. Like an experienced lead dance partner, this website’s choreography pushes and pulls the follower where it wants them to go. The rule here is: if I touch my mouse or keyboard, the clock resets, and if I follow the instructions, I get to access an additional layer of relaxation when the sound drops off. It forces me to take 2 whole minutes of out my day in a strict but supportive way.When I reach the end of the 2 minutes, I’m congratulated and shown an advertisement for a book to help me further explore this technique. I usually hate seeing things like that but I don’t mind in this case because it doesn’t come across as pushy and it’s already given me something.

Refining the choreography of your IA

When you break it down, choreography is about behaviors and relationships between all the pieces of the IA. It’s about which parts go together, what they do and how that fits in with everything else. Think content pairings in a card sort and the hierarchical position of content within the IA’s tree structure — why do those cards go together and why does label Y appear directly before label X? These choices are deliberate; it’s not just a case of “Oh let’s just put them wherever,” or “I’m going to whack a certain label at the very top because my boss told me because that’s where he thinks it should go.” Choreography exists throughout your entire IA and like everything else, all refinements must be determined by user research.When running a card sort, pay close attention to:

• card pairings
• cards that are consistently not paired
• the hierarchy of cards within each group (card order)
• the conversation between your participants (moderated card sorts only) for insights into the logic behind the pairings and hierarchical positioning

Cards that are paired — or not — as well as their hierarchical placement can not only provide insight into your users’ taxonomical expectations but can also help you identify relationships (or lack thereof) between content and elements. Say you were running a card sort on an intranet and two cards labeled ‘Annual Leave’ and ‘Public Holidays’ were consistently being grouped together under ‘Human Resources’. What’s their expected relationship and interaction beyond the subject matter connection? Does one appear before the other? Is one linked to the other one’s page? Or are they together on one page and if so how do they interact? (if at all). For moderated card sorts, listen closely to the conversation for insight into this and be sure to ask your participants about anything you’re not sure of.If your IA is a bit further along in its development or you’d like to evaluate an existing IA, tree testing can help you understand the choreography that will best support your users. Keep an eye on:

• the location of the first click
• the pathways followed

The pathways followed by participants in a tree test will help you determine the right sequence of interactions required by a user to reach their goal — the ultimate step by step flow to task completion. What order do the labels need to be in? And what lives underneath them? And again, in what order?Think of it like a path through the woods to a lake. Your IA’s choreography should enable your users to be seamlessly guided along a smooth pathway made of big stone steps. They shouldn’t be running into trees or bushwhacking to create their own pathways.When looking at a tree test, consider how many of your participants did not follow the pathway/s you defined as correct. Where did they go instead? What does the right path look like to your users? Also look at where the all important first click landed. If users start out on the correct first click, they are almost 3 times as likely to reach their goal. If your participants started out on a different first click, you’ll need to explore why that is. It could indicate ambiguity in the labels, it could also be a sign of an expectations mismatch, a hierarchical issue or it could be something else entirely! The tree test will help you identify where the issues are, but you’ll need to go and have a conversation with your users to understand why it’s happening.Unless more than say 80% of your participants achieved direct success in reaching their goal (meaning they never strayed from the big stone path that you defined) you’ll need to check these things anyway to resolve findability and usability issues. Choreography related insights are an extra thing you can pull from what you’re already doing. And of course always remember that any choreography related data has to be considered in conjunction with whether or not the labels are even correct. Choreography is just one piece of the puzzle; it sets the rules for how all the parts interact and isn’t going to be much help if the parts aren’t even right in the first place!Choreography in information architecture might be one of the most overlooked elements but it’s not hard to give it the time and consideration it deserves and your users will thank you for it!

Designing for a mobile app is quite different to designing for websites. The content may be similar (even the same) but the intent for users is likely to be different, as are the environments and occasions they use them. When designing for mobile the information architecture (IA) uses a different set of rules. The key consideration needs to be around ease of use on a smaller screen for a user that is possibly on the move and very likely distracted. They have limited time, limited attention and need a quick result.

Your app could be the first point of contact. It might be the only way your user interacts with you on a regular basis. It needs to be super simple, clean, and quick to interact with. A well thought out, thoroughly researched, and organized information architecture plays a big part in helping to deliver an easy and enjoyable user experience.

What is information architecture?

According to Abby Covert, a leader in the field of information architecture, IA is ‘the way we arrange the parts to make sense of the whole.’ Information architecture (IA)is found in every digital product, from websites, apps to an intranet and can even be applied to the physical world in places like libraries and supermarkets.For the purposes of this blog we will focus on the importance of information architecture for mobile apps. Researching and designing an app’s IA with just the right amount of information is key. And providing a way of navigating that content in a way that is quick and intuitive is key to a good user experience.

How is designing for mobile different?

The first thing to understand about mobile app information architecture is that it’s different – and not just with regards to size. The sheer physicality and specifications of mobile devices mean we need to consider different design requirements. Because mobile devices are light and portable, users are in constant contact with them and they are by far the most convenient way to access information. With mobile apps it can be even more important to consider the user journey, to keep that journey as short as possible, and anticipate the user's needs. Consideration should be given to:

1. Physicality and specifications
2. Constant accessibility
3. How people behave and feel

1. Physicality and specifications

Most mobile device interfaces are accessed through touch screens. Users rely on learnt gestures – in addition to a simple interface – to interact. Because of their smaller dimensions, users often expect the content structures to be simpler and smaller. Also, because of limited bandwidth and connectivity, mobile devices require app designs to be optimized for loading time, with reduced data demands.

2. Constant accessibility

Because we have constant access to our mobile devices, we tend to use them a lot more. They come with us on the bus, walking the dog, or even watching TV. We often use them while ‘doing’ something else. This means we often use the device under difficult viewing conditions, or among a variety of distractions.

3. How we behave and feel

We have different attitudes, behaviors and priorities while using mobile devices. Many of us often have our mobile device within arms reach at all times. We have become attached to these devices and feel ‘lost’ when we don’t have them nearby. Some people even consider them an extension of their being!

How do you factor information architecture into your mobile app design?

We need to think of mobile devices as having their own particular information architecture structure to work within their unique requirements and environments. While the structure of a responsive website may follow the same IA, native apps often employ navigational structures that are tab-based. There’s no one or ‘right’ way to architect a mobile site or application. Rather it’s dependent on factors like the size of the content you need to organize or what the intended user journey is that informs the choice of  information architecture structure. Let’s take a look at some of the most popular IA structures for mobile apps:

Hierarchy

A standard website structure with an index page and a series of sub pages. If you are designing a responsive website you may be restricted to this structure, however introducing additional structural patterns could allow you to tailor the user experience for mobile.

Hub and spoke

Gives you a central index from which users will navigate from. It’s the default pattern on Apple’s iPhone, with a home screen and the various apps users download. Users can’t navigate between spokes but must return to the hub (home screen), instead.

Nested doll

Leads users in a linear fashion to more detailed content. It’s a simplified interface which quickly leads on to the next step. It can be most useful when users are in distracting conditions because  it’s a quick and easy method of navigation.

Tabbed view

Regular app users will be familiar with this structure. It’s a collection of sections tied together by a toolbar menu. This allows the user to quickly scan and understand the functionality of the app as soon as it’s opened. Easy to navigate throughout the app.

Filtered view

Allows the user to navigate within a set of data by selecting filter options to create a view that suits them. Can be more difficult to view on mobile if there is too much content, as it can be difficult to display.

Wrap up

When designing for mobile devices it is important to always keep in mind the user journey and how (and when) users  are likely to be interacting with your app. What is their primary objective? What is your organization's objective? How do you move them through their tasks to enable them to complete them quickly, simply and easily? Working within the size restrictions and limitations of mobile devices and users needs and desires with a thoroughly thought out IA structure will always win on the day.