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!

As information professionals, we work with the “stuff” of information in our everyday work. We search for information, we spend time analyzing and synthesizing it, and we carefully create and structure it. Whether you elicit information from users and stakeholders, explore large data sets, design ‘journeys’ or interfaces, or create information architectures, understanding the information you are using and creating as information can help you do your work better.

‍

Kat King, Business Intelligence Analyst at the University of Michigan Library, recently spoke at UX New Zealand, the leading UX and IA conference in New Zealand hosted by Optimal Workshop, about understanding exactly what information is, and where it is, in our work.

‍

In her talk, Kat uses simple examples to teach you to “see” the information around you and understand what makes something “information” in the context of working as a human to accomplish something.

‍

Kat King bio 🎤

‍

Kat King is an Information Architect interested in language, meaning, and the things we make. She currently works as a Business Intelligence Analyst for the University of Michigan Library.

‍

Contact Details:

‍

Email: Katalogofchaos@gmail.com

‍

Where is the information? 📍🗺️

‍

Information theory can be dense and jargon-filled, and discussions in academic texts can feel divorced from the practice of actually working with information. We’re all told that information architecture is much more than website navigation. So, what is it? IA has a reputation for being difficult to understand, and in her talk, Kat attempts to help us understand what it is, where the information is, and what is it that we’re doing when we use IA methods.

‍

Kat defines IA as “the practice of ensuring ontological alignment”. ‘Ontological’ relates to concepts, categories, properties, and relationships. ‘Alignment’ means arrangements into appropriate relative positions. Therefore, information architecture is “the practice of ensuring concepts, categories and their properties and relationships are arranged into appropriate relative positions.”

‍

To align information then, you need to begin by sorting it into concepts and categories, which is difficult because information can sometimes be “slippery and abstract”. Kat argues this is the real reason that IA is sometimes hard to wrap our heads around. So, getting to the heart of the question, what is information? 

‍

Kat defines information as “a patterned relationship between differences that reduces uncertainty”. The key word here is ‘differences’. The trick to understanding and taming information is to identify what is different about sets of information. The next trick is to identify consistencies between these differences.

‍

This can be a little confusing, so Kat uses the example of picking fruit. We tend to use color (the difference) to identify when fruit is ripe and sweet. We know for a fact that, at some point, the fruit will be at its sweetest and, while there is a scientific way of identifying this point, we have to use the information we have at our disposal instead i.e. the colour of the fruit. The skin of the fruit in this example is like an interface - allowing a flow of information from the fruit’s ripening process to our eyes.

‍

Information categories 🧺🧺🧺

‍

The relationship between the information described in the fruit example can be split into two categories. “Information 1” is a factual, objective description of when the fruit is ripe (i.e. the science of why the fruit is the color that it is right now), whereas our subjective observation, based on color, is “Information 2”.

‍

• Information 1: Matter and energy, and their properties and interactions i.e. the laws of physics and universal truth or rules

‍

Information 1 poses challenges for us because we have a narrow range of perception, attention, and aggregation, which means we, as humans, can’t possibly understand the laws of nature just by observing. We have evolved to be simple, efficient observers of what is important to us. In other words, we don’t need to understand everything in order to get things right. We see patterns and generalize. Going back to the fruit example – we only need to know the color of ripe fruit, not the exact chemistry of why it is ripe.

‍

• Information 2: This is Information 1 that is given meaning by humans. This is done via processing semantic information, or “differences and structures that create meaning for people”.

‍

We use semantic information by processing concepts, patterns, categories, mental models, and even language as inputs to form our understanding. As social animals, we tend to reinforce general ‘truths’ about things because we’re constantly cooperating using shared information. General ‘truths’ are good enough.

‍

Kat uses the following interaction to demonstrate the interplay of different information.

‍

• Person 1: If the raspberries look good, can you get some for me?
• Person 2: How can tell is they’re good?
• Person 1: Get the ones that are the most red.

‍

In this interaction, the different pieces of information can be broken down by category:

‍

• Semantic information = Words and concepts
• Information 1 = Meaningful signs
• Information 2 = Perceptible differences
• Real life information = Raspberries

‍

Using our ability to communicate and understand concepts (words “red”, “good”, and “raspberries”) helps us to understand Information 2 (processing the words and concepts to understand that a red berry is good”), which aligns with Information 1 (the evolutionary science and ongoing consistency of red/ripe berries being sweet) that helps us decide when processing all of this information.

‍

So, now that we understand a little more about information, how does this influence our roles as designers?

‍

Why it matters 👀

‍

Thanks to our individual lived experiences, people have many different inputs/concepts about things. However, Kat points out that we’re pretty good at navigating these different concepts/inputs.

‍

Take conversations, for example. Conversations are our way of getting a “live” alignment of information. If we’re not on the same page we can ask each other questions to ensure we’re communicating semantic information accurately. 

‍

When we start to think about technology and digital products, the interfaces that we design and code become the information that is being transmitted, rather than words in a conversation. The design and presentation become semantic information structures, helping someone to understand the information we’re putting forward. This highlights the importance of aligning the interface (structure and semantic information) and the users' ontology (concepts and categories). For the interface to work, IA practitioners and designers need to know what most people understand to be true when they interact with information, concepts, and categories. 

‍

We need to find some sort of stability that means that most users can understand what they need to do to achieve a goal or make a decision. To do this, we need to find common ground between the semantic information (that might vary between users) so that users can have successful Information 2 style interactions (i.e. absorbing and understanding the concepts presented by the interface).

‍

To wrap up, let’s remind ourselves that information architecture is “the practice of ensuring concepts, categories and their properties and relations are arranged into appropriate and relevant positions”. As IA practitioners and designers, it’s our job to ensure that concepts and categories are arranged in structures that can be understood by the nuance of shared human understanding and semantic information – not just in some physical diagram.

‍

We need to present stable, local structures that help to reduce uncertainty at the moment of interaction. If we don’t, the information flow breaks and we aren’t reducing uncertainty; instead, we create confusion and disappointing user interactions with our digital products. Making sure we present information correctly is important (and difficult!) for the success of our products – and for better or worse, it’s the work of information architecture! 

‍

‍

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.

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!