March 1, 2022

Understanding and refining choreography for your information architecture

Optimal Workshop

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!

Publishing date
March 1, 2022
Share this article

Related articles

min read
Information architecture is much more than navigation

Information architecture is so much more than finding your way around a website or app. IA should be considered the foundation of a great user experience. The planning and consideration that goes into how information is organized labeled, and named. Once this foundation is laid, the user interface is what sits above and allows users to access the information. Navigation is one way that designers can point users in the right direction. But without correct labeling and naming (or even searching) navigation can only get us part of the way.

Let’s go into detail about what information architecture and the role navigation really plays. 

What is information architecture for a website?

Probably the easiest example of navigation is on a website. We are familiar with websites and how navigation can make or break a user experience. A website's information architecture (IA) can be considered to be made of two main components:

  • Identification and the definition of the site content and functionality.
  • Underlying organization, labeling, and structure that will define the relationship between the site's content and functionality.

When a user lands on your website they won’t see the information architecture, rather, they will be interacting with the user interface (UI). While the IA itself is not visible while using the user interface it most certainly impacts the user's experience (UX). 

The IA should be planned and the content structure visualized through diagrams, spreadsheets, and with wireframes, prototypes, or comprehensive layouts. Designing with the IA in mind web designers can create a better user experience. The user will not see the structure of the website but they will quickly discover the way the content has been divided up and then connected visually. And how well the information architecture matches these expectations will influence their UX.

When this interaction is not a great experience, users may leave feeling that your website content or functionality is not what they needed. They may end up feeling disappointed with the experience due to poor organization, naming, or structure.

What’s the difference between IA and navigation?

Ensuring that the information architecture is thought through, considered from the end users’ perspective, tested, and planned is essential to building a great website from the ground up. Great navigation is what cues users to move on to the next step in their journey and ultimately will determine their experience.

Navigation is but one part of the story and tools to help users find their way through a website, app, or other product. 

Information architecture can be broken down into three main areas to consider when building a great user experience:

  • Navigation: How people make their way through information (website content)
  • Labels: How information is named and represented.
  • Search: How people will look for information (keywords, categories)

When put like this it does seem pretty straightforward. Information architecture isn’t just how your information is navigated (on a website or app) but how it is labeled, the taxonomy, and the searchability help users find what they need from the information architecture.

How do the IA and navigation work together best?

An information architecture that has been planned, considered, researched, and structured with understanding and the intention of the needs of users and the owners will be robust and at its very best intuitive.

With an information architecture that has been organized well the navigation doesn’t need to work as hard. With correct labeling and organization of the content, navigation acts as a visual guide on your product to help users find their way to what they want. Imagine well-named road signs that are expected and easily seen. It makes finding what (where) you want much easier, even on a dark night.

Coupled with robust IA navigation will provide intuitive pathways for users to complete tasks. For instance, if you want your users to find where your contact information is, making certain that there is a navigation tab at the top of your website labeled ‘contact us’ which then has what might be expected (address, phone number, map, and even an email contact form) will make sense for users and the owners of the website.

Wrap Up

Whilst navigation is a key component to users finding their way through your content information architecture is so much more than navigation. IA is the foundation of a great product, naming, labeling, organizing, and planning your information in a logical and expected way. Navigation is the sign that directs people to the content they want. And from there to the task or product they are looking for. If there is navigation without thought through information architecture, they may look in the wrong place, becoming lost and abandoning their task altogether.

min read
Information architecture cheat sheet – 2020 edition

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.

An image from Nielsen Norman Group of a user journey map.

An example of what a user journey map looks

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.

A wireframe example of a webpage.

Here’s an example of a website wireframe

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.

min read
Information architecture lives here : make IA part of your digital space

There is an enormous amount of information on the internet. Every page you load is crammed with it. With so much information around, it’s incredibly important to remember that for human minds to be able to actually process and make sense of it, considered, strategic, ordered information architecture is needed.

Information architecture is everywhere digitally, but where does it actually live? IA sits in behind all of the digital interfaces we humans use (and even out in the real world). It ideally has been considered, researched, and implemented with humans in mind, though as we all know, this isn’t always the case.  

Information architecture always has a role to play, and here we’ll focus on 4 key digital spaces where information architecture is most prominent, and likely most familiar.

  1. Websites
  2. Apps
  3. Company intranet
  4. Social media software

To find out more about putting information architecture into action check out our blog.

1. Websites 🌐

Information architecture for websites can often be confused with navigation. While site navigation is super important, (think of it as the ‘skin’ that sits above the information), that’s only part of the story. Great website architecture considers and organizes user requirements, organizing the content and structure of the website with labels, search and navigation that simply makes sense and is easy to use. Done well, it will  feel simple and straightforward, guiding users through smoothly.

Hubspot has a great article on IA for websites and how they can be structured. From a complex library system, to travel booking systems. Each has its own needs and can be quite deep in layers of information. The trick is to create a website structure, based on user needs, that makes sense of the piles of information and a simple navigation that sits above, making the journey to task completion as quick as possible. Working together they make any user experience feel quick, simple, and intuitive! 

2. Apps 📱

An organization's app acts as the first point of contact. It needs to be super simple, clean, and quick to interact with. A well thought out, thorough, researched, and organized information architecture plays a big part in this.

Information architecture for mobile use has a different set of rules than websites. The key consideration here is around the ease of use across a smaller screen. Navigation that makes sense for a laptop or desktop computer can be clunky in a mobile app.

An app's interface needs to have fewer options, and fewer clicks to complete the task. Researching and designing an app’s IA with just the right amount of information is key. Some retail apps are simplified websites, whereas other apps exist on their own merits, with no need for a website.

Bringing it back to the humans that will interact with the app is key to creating a product that delivers on user requirements and increases interaction. 

3. Intranet 🖥

An organizational intranet is possibly less of a priority than a website or an app but is vitally important to the success of an organization. And in these times of remote or hybrid working, intranets have proven to be more valuable than ever. An intranet is more than where to stick newsletters for staff, it is an interface that can make or break the productivity or even the wellbeing of an organization. 

Access to files, information, messaging platforms, and corporate requirements wherever and whenever people are working is more important than ever.  A well researched and designed information architecture can build an intranet that meets users’ requirements, increase communication and interaction and ultimately boost productivity. 

Conducting UX research with staff on what they need to access, when, and how will help inform the intranet IA far more intuitively. The information available (and needed) can be huge, keeping it simple and human focused is key.

Have you ever thought about how poor internal information architecture might be hurting your business?

4. Social media 🤳

Social media software is complex in terms of ecosystem and display of information. Each social media platform has developed over time, think back to Facebook and how it looked when it initially launched. And through the uptake of users, gathering of information over time, and continual research and testing, it has evolved into what we see today. And will continue to evolve with users’ needs.

Every user has a different experience based on the individuals, groups, organizations and even retailers that they choose to interact with (or haven’t chosen via advertising). The piles of information that sit behind and are brought to the interface for an individual through their choice, associations, labels, tags, interests, age, etc will present them with a unique feed. 

The interface of a social media platform needs to be considered, tested, tested again, and occasionally tested or changed once launched as the interaction of users is vitally important.

The information architecture sitting behind is huge in order to enable the agility to pull the right information forward in a dynamic and coherent way. Continuously learning, testing and requesting interaction from users through options to ‘hide’ posts that aren’t appropriate or respond to direct queries about what they do and don’t want to see are just some instances of continuous user research.

Social media continues to be a sophisticated information architecture that is constantly updating and changing with user needs.

Wrap Up 🫔

Information architecture lives wherever there is information needing to be found by humans. Successful information architecture is sorted, organized and labeled in a way that is simple, intuitive, and considered. Making interaction and life simple, which in a world where there are an increasing number of websites, apps, and tools to choose from – intuitive information architecture has never been more important for your business and your customers.

Seeing is believing

Dive into our platform, explore our tools, and discover how easy it can be to conduct effective UX research.