March 1, 2022

Understanding and refining choreography for your information architecture

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).

A screenshot of the homepage of Mental Floss. The headline says "The typo that helped end World War II"

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

Mental_floss_menu

When I click on the big orange button

Menal_Floss_scroll

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).

Ikea_Ideas
The IKEA Ideas homepage and tag cloud.
Tag_Cloud

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.

Do_Nothing
A relaxing scene on the 'Do nothing for 2 minutes homepage'

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).

Do_Nothing_Fail
When I fail to do nothing, the timer resets

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!

Share this article
Author
Optimal
Workshop

Related articles

View all blog articles
Learn more
1 min read

Why is information architecture important to UX design?

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 and apps to an intranet. 

For the purposes of this article we focus on the importance of information architecture to user experience (UX) design because IA is fundamentally important to the success of your user experience. It determines how users will access your  content and ultimately how successful their experience is when using your product. 

When put like this it does seem pretty straightforward. Maybe even simple? But these tasks need to be straightforward for your users. Putting thought, time and research in at the front of your design and build can help build an intuitive product. IA is the structure that sits in behind and allows the design to tell the story and the content to be found in an easy way.

The role of information architecture in UX design 🏗️

Information architecture forms the framework for any UX design project. You need to consider the visual elements, functionality, interaction, and navigation and if they are built according to IA principles. If not considered fully even the most compelling content and powerful user experience design can fail without an organized and functional IA design. Disorganized content can make finding your way through difficult, meaning users get lost, annoyed and frustrated. Frustrated users don’t stick around and most likely don’t come back.

Through solving or preempting users’ issues with research and designing powerful and effective IA it reduces usability and navigation problems. Meaning that researched, thought through and designed information architecture can save both money and time for your organization in the longer term.

What is the difference between IA and UX? 🤯

Often it can be confusing that there isn’t much difference between IA and UX design. While these terms do relate to each other and need to be considered alongside, they are not one and the same.

Information architecture (IA) is the discipline of making information findable and understandable, helping people understand their surroundings and find what they’re looking for online and in the real world” - Interaction Design

User experience (UX) design is the process design teams use to create products
that provide meaningful and relevant experiences to users” - Interaction Design

UX design is well grounded with good functional information architecture but that’s not where it stops. The user experience focus is on influencing users’ behaviors and actions through emotion and psychology. Information architecture is focussed on the users' goals and task completion. They work together to create the very best user experience. IA provides the foundation of a well organized space that is easy to navigate and UX design ensures that the overall experience meets (or exceeds) users’ expectations, through their wants, needs and desires.

The key components of IA 🧱

There are four key components to consider when building a strong information architecture:

Labeling

How information is named and represented. Labels need to communicate information to users without using too much space or requiring much work on the user’s part.

Navigation

How people make their way through information. Without robust IA which has been thought through this is the quickest way to confuse users. If they can’t find their way to the information they need, they won’t be able to complete their task. It really is that simple.

Search

How people will look for information (keywords, categories). A search system is especially important when there is a lot of content to wade through. A search engine, filters, and many other tools help users search content. Great UX design will consider how the information will be displayed once searched.

Organization

How the information is ordered. These help users to predict where they can find information easily:

  • Hierarchical is the hierarchy of the content and literally the order of importance
    the user expects to see information against what the organization needs.
  • Sequential Taking a stroll in your user's shoes can be valuable. Considering the path a user would take and the journey they make. Walking step-by-step, ensuring that as users progress through their tasks they are easily led to the next step.
  • Matrix This is a little more complicated for users as it lets them choose how to navigate on their own. Users are given the choice of content organization. For example, the searchability of a website. Where the user could choose to search by topic, size, price or any other filter or option.

Wrap up 🥙

Information architecture is a key part of a powerful user experience design. Efficient IA helps users quickly and easily move through content and find what they want.  And what do users want but to find what they want, complete their task and get on with their day!

Provide an IA that functions well, is intuitive to use and well labeled, coupled with UX design that is smooth, attractive and responds to users needs, wants and desires and you’ll have a winner on the day.

Learn more
1 min read

Why information architecture is important for designers

Sitting inside any beautifully crafted and designed digital product, there must be a fully functional and considered information architecture.

As much as information architecture shouldn’t be developed in a vacuum. Neither should the design and look of digital products. In fact, a large proportion of the function of digital designers is devoted to supporting users locating content they need and driving them towards content that the product owners want them to find.

Incorporating visual markers to make sure that certain content is distinct from the rest or creating layers that demonstrate the diverse content on a product.

If you do not have quality content, it is impossible to design a quality digital product. It all comes back to creating a user experience that makes sense and is designed to make task completion simple. And this relates back to designing the product with the content planned for it in mind.

8 Principles of information architecture, according to Dan Brown 🏗️

As a designer, the more you know about information architecture, the better the products you design will meet your user requirements and deliver what they need. If you work with an information architect, even better. If you’re still learning about information architecture the 8 Principles according to Dan Brown is a great place to begin.

If you haven’t come across Dan Brown yet, you have more than likely come across his 8 principles. Dan Brown is one of the UX world's most prolific experts with a career that spans most areas of UX designs. He’s written 3 books on the subject and experience across a multitude of high profile projects. Aiding large organizations to make the most of their user experience.

  1. The principle of objects: Content should be treated as a living, breathing thing. It has lifecycles, behaviors, and attributes.
  2. The principle of choices: Less is more. Keep the number of choices to a minimum.
  3. The principle of disclosure: Show a preview of information that will help users understand what kind of information is hidden if they dig deeper.
  4. The principle of examples: Show examples of content when describing the content of the categories.
  5. The principle of front doors: Assume that at least 50% of users will use a different entry point than the home page.
  6. The principle of multiple classifications: Offer users several different classification schemes to browse the site’s content.
  7. The principle of focused navigation: Keep navigation simple and never mix different things.
  8. The principle of growth: Assume that the content on the website will grow. Make sure the website is scalable.

It’s highly likely that you’ve already used some, or all, of these IA principles in your designs. Don’t be shy about mastering them, or at the very least be familiar. They can only help you become a better user experience designer.

Wrap up 🌯

Mastering the 8 principles, according to IA expert Dan Brown will see you mastering the complex tasks of information architecture. Understanding IA is key to creating digital designs with a content structure that is functional, logical and just what your users need to navigate your product. Design without good IA doesn’t work as well, just as a content structure without a well designed interface will not engage users.

Learn more
1 min read

Information Architecture vs Navigation: A Practical UX Guide

When we first think of a beautiful website or app design, we rarely think of content structures, labels, and categories. But that’s exactly where great design and seamless user experiences begin. Beneath fancy fonts, layout, colors, and animations are the real heroes of user-centric design - information architecture and navigation.


Information architecture (IA) is like the blueprint of your website or app - it’s a conceptual content structure of how content is organized and arranged to create seamless interactions. And as useful as your information may be, if your navigation is flawed, users won’t be able to find it. They’ll simply leave your site and look elsewhere.


So, how does navigation and information architecture complement each other to create seamless user experiences?

Understanding Information Architecture (IA)


Information architecture
refers to the practice of organizing, structuring, and labeling content and information to enhance the user's understanding and navigation of a website or application. It involves designing an intuitive, user-friendly, and efficient system to help users find and access the information they need easily. Good IA is essential for delivering a positive user experience and ensuring that your users can achieve their goals effectively.

IA is often confused with navigation structure. Navigation is a part of IA, and it refers to the way users move through a website or application. IA involves more than navigation; it encompasses the overall organization, labeling, and structure of content and information.

Three Key Components of IA


There are three key components of IA:

  • Organizational structure: Defines how information is organized, including the categories, subcategories, and relationships between them.
  • Content structure: The way information is arranged and presented, including the hierarchy of information and the types of content used.
  • Navigation structure: Outlines the pathways and components used for navigating through the information, such as menus, links, and search functions.

Navigation: A Vital Element of Information Architecture


Navigation refers to the process of providing users with a means of moving through a website or application to access the information they need. Navigation is an integral part of IA, as it guides users through the organizational structure and content structure of a site, allowing them to find and access the information they require efficiently.

There are several types of navigation, including utility navigation and content navigation. Utility navigation refers to the elements that help users perform specific actions, such as logging in, creating an account, subscribing, or sharing content. Content navigation, on the other hand, refers to the elements used to guide users through the site's content, such as menus, links, and buttons.

Both types of navigation provide users with a roadmap of how the site is organized and how they can access/interact with the information they need. Effective navigation structures are designed to be intuitive and easy to use. The goal is to minimize the time and effort required for users to find and access the information they need.

Key Elements of Effective Navigation


The key elements of effective navigation include clear labeling, logical grouping, and consistency across the site.

  • Clear labeling helps users understand what information they can expect to find under each navigation element.
  • Logical grouping ensures that related content is grouped together, making it easier for users to find what they need.
  • Consistency ensures that users can predict how the site is organized and can find the information they need quickly and easily.

Designing Navigation for a Better User Experience


Since navigation structures need to be intuitive and easy to use, it goes without saying that usability testing is central to determining what is deemed ‘intuitive’ in the first place. What you might deem intuitive, may not be to your target user.

We’ve discussed how clear labeling, logical grouping, and consistency are key elements for designing navigation, but can they be tested and confirmed? One common usability test is called card sorting. Card sorting is a user research technique that helps you discover how people understand, label and categorize information. It involves asking users to sort various pieces of information or content into categories. Researchers use card sorting to inform decisions about product categorization, menu items, and navigation structures. Remember, researching these underlying structures also informs your information architecture - a key factor in determining good website design.

Tree testing is another invaluable research tool for creating intuitive and easy to use navigation structures. Tree testing examines how easy it is for your users to find information using a stripped-back, text-only representation of your website - almost like a sitemap. Rather than asking users to sort information, they are asked to perform a navigation task, for example, “where would you find XYZ product on our site?”. Depending on how easy or difficult users find these tasks gives you a great indication of the strengths and weaknesses of your underlying site structure, which then informs your navigation design.

Combine usability testing and the following tips to nail your next navigation design:

  • Keep it simple: Simple navigation structures are easier for users to understand and use. Limit the number of navigation links and group related content together to make it easier for users to find what they need.
  • Use clear and descriptive labels: Navigation labels should be clear and descriptive, accurately reflecting the content they lead to. Avoid using vague or confusing labels that could confuse users.
  • Make it consistent: Consistency across the navigation structure makes it easier for users to understand how the site is organized and find the information they need. Use consistent labeling, grouping, and placement of navigation elements throughout the site.
  • Test and refine: Usability testing is essential for identifying and refining navigation issues. Regular testing can help designers make improvements and ensure the navigation structure remains effective and user-friendly.

Best Practices for Information Architecture and Navigation


Both information architecture and navigation design contribute to great user experience (UX) design by making it easier for users to find the information they need quickly and efficiently. Information architecture helps users understand the relationships between different types of content and how to access them, while navigation design guides users through the content logically and intuitively.

In addition to making it easier for users to find information, great information architecture and navigation design can also help improve engagement and satisfaction. When users can find what they're looking for quickly and easily, they're more likely to stay on your website or application and explore more content. By contrast, poor information architecture and navigation design can lead to frustration, confusion, and disengagement.

So, when it comes to information architecture vs navigation, what are the best practices for design? Great navigation structure generally considers two factors: (1) what you want your users to do and, (2) what your users want to do. Strike a balance between the two, but ultimately your navigation system should focus on the needs of your users. Be sure to use simple language and remember to nest content into user-friendly categories.

Since great navigation design is typically a result of great IA design, it should come as no surprise that the key design principles of IA focus on similar principles. Dan Brown’s eight design principles lay out the best practices of IA design:

  • The principle of objects: Content should be treated as a living, breathing thing. It has lifecycles, behaviors, and attributes.
  • The principle of choices: Less is more. Keep the number of choices to a minimum.
  • The principle of disclosure: Show a preview of information that will help users understand what kind of information is hidden if they dig deeper.
  • The principle of examples: Show examples of content when describing the content of the categories.
  • The principle of front doors: Assume that at least 50% of users will use a different entry point than the home page.
  • The principle of multiple classifications: Offer users several different classification schemes to browse the site’s content.
  • The principle of focused navigation: Keep navigation simple and never mix different things.
  • The principle of growth: Assume that the content on the website will grow. Make sure the website is scalable.

Summary: How User-Centered Research Elevates Your Information Architecture and Navigation


Information architecture and navigation are the unsung heroes of website design that work in synchrony to create seamless user experiences. Information architecture refers to the practice of organizing and structuring content and information, while navigation guides users through the site's structure and content. Both are integral to creating intuitive user experiences.

In many ways, navigation and information architecture share the same traits necessary for success. They both require clear, logical structure, as well as clear labeling and categorization. Their ability to deliver on these traits often determines how well a website or application meets your users needs. Of course, IA and navigation designs should be anchored by user research and usability testing, like card sorting and tree testing, to ensure user experiences are as intuitive as possible!

That’s where Optimal comes in. As the world’s most loved user insights platform, Optimal empowers teams across design, product, research, and content to uncover how users think, organize, and navigate information. Tools like Card Sorting and Tree Testing help you validate and refine your IA and navigation structures with real users, so you can move from guesswork to confidence. Ready to turn user behavior into better navigation? Try Optimal for free.

Seeing is believing

Explore our tools and see how Optimal makes gathering insights simple, powerful, and impactful.