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

Kat King: Where is the Information?

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! 

Learn more
1 min read

Why is information architecture important to web design?

What is Information Architecture?

Information architecture (IA) is a term used to describe how content or information is organised and arranged. This can relate to a website, a retail store or an app. And you could even consider the way a library is sorted to be IA. 

For the purposes of this we will be focussed on websites. IA is fundamentally important to the success of your website. It determines how your users will access the information and the success of their user experience (UX) whilst on your website. And ultimately if you can keep users on your website long enough to complete their task.

IA can be broken down into 3 main areas to consider when building 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. 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 mean an intuitive website is built. But at any point in your websites life cycle it can be of value to test and review. 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.

Why is Information Architecture important to web design? 🏗️

If you’ve ever tried to use something and thought, “where am I supposed to go next?” or “this doesn’t make any sense,” you are encountering an issue with an information architecture.
The Information Architecture Institute

The way in which your users will use your website depends largely on how the information is presented and organised. By following through the tasks that you expect your users to undertake you can better understand the user experience. If the user can easily flow from point to point, finding what they need in a quick and efficient (and ideally intuitive manner) they are far more likely to stick around. And return when they need to.

The opposite is definitely true also. If users find your website difficult to follow, hard to navigate and get lost or confused. They will not stick around to find out more. They will move on, and swiftly, to your competition. Frustrated, and disengaged. You will find it difficult to win them back.

What does good information architecture look like for my users? 👀

By providing a simple, clear and straightforward path users can stay focussed on their task, removing overwhelm and confusion. How often do you disappear ‘down a rabbit hole’ when on the internet? Confusing paths or overwhelming options may mean users move off on tangents, and become less likely to complete their initial task. Ultimately the best user experience is one that delivers the right information at the right time. Not too slow and not too complicated

Always keep in mind that a great IA is:

  • Navigation: Always think straightforward, simple and intuitive.  Keep the navigation menu clean, clear and brief. Content and information where it’s expected to be. No point putting dog collars under dog food.
  • Labels: Consider how pages, content and information is named. This needs to be direct and simple to understand. If you want people to find your store label the page ‘location’ or ‘find us’ or even ‘find our store’.
  • Search: Most of your users will use search as a last resort. They will try to navigate their way through your website before resorting to a search option. Considering carefully the keywords for information that support the search tool. If they have already failed to find the information through your navigation, don’t let them down now.

With all of these lined up in behind great web design, which is clear, bright and attractive. Along with language which appeals to your user.  You are providing a UX that will entice, engage and ultimately keep them on your website and converting.

What does great information architecture look like for my organization?

Great IA goes beyond simply being about your user experience. Your organization can benefit hugely with testing, research and insights put into your website IA. 

With an IA that creates an easy navigable and engaging website your users are less likely to move off to your competitors. You’ve worked hard to get them to your website, through marketing and SEO. Delivering what your user expects and making it easy to find, means they will complete their task, and are far more likely to return

By finding what they need quickly, and intuitively, users are more likely to be converted and generate leads or sales. Delivering and answering questions can also reduce the need for support. If you can, your organization's website should answer your users questions, before they complete. This means they are less likely to need to email and /or call for support, reducing overheads and time lag before conversion.

Your organization's reputation is so important, your website may be your only interaction with users. If they have an easy user experience, their questions answered, and are able to complete what they need simply they leave with a great impression of your organization. They are more likely to return and their overall takeaway is that your organization is trustworthy, organised and easy to deal with. The opposite is quite possible with poor IA and design. You get but one chance to grab their attention and keep them. Do it badly and you may never get them back.

Creating great information architecture 👷🏻

User research with OptimalSort

Of course the best website IA is based on your users experience. And there is no better way to get a full understanding of your users than by conducting research. At any point in your website's life cycle it can be beneficial to undertake research such as card sorting. At the beginning stages of your website build is best, but your website should be evolving as your organization does, therefore any time there are shifts in what you do or offer is a great time to revisit your UX and how best to deliver this. OptimalSort tests users on how they intuitively would like to see information sorted on your website. Building IA based on data, rather than assumptions, will mean that content and information can be sorted in a way that truly delivers a simple and intuitive experience.

Maintaining your website with Treejack

With a great IA, based on card sorting user research, your website content needs to be maintained. Tree testing allows you to see where your users are getting lost in your website navigation. And also how they expect to look for key information. The Treejack tool provides real user insights on how your website navigation is working, how it can work better, and ultimately how to fix paths that don’t work. Providing hard data to inform an intuitive IA.

Wrap Up 🌮

So, information architecture is fundamental to your website and how it operates. Want to learn more about information architecture? Take a look at our article, or download 'The Actionable IA Guide'.

Supporting your website with user research can mean you build and design a intuitive website that simply rocks! 

Learn more about card sorting with our 101 guide. And more on tree testing. 

Learn more
1 min read

How to find (and solve) navigation issues on your website

Making your navigation work harder 💪🏼

There are many ways that your website can work wonderfully and of course, the converse is very true. There are lots of (simple) ways a website isn’t working as well or as hard as it can. Your website navigation is crucial to creating a brilliant user experience (UX). As well as being visible to search engine crawls, completing the circle by making your website more visible to potential visitors.

You’ve got a strong homepage, it’s modern, clean, bright and tells your story just right. But your conversions just don’t seem to be happening? Have you considered your navigation? No, not only the menu at the top of your website, but your Information Architecture (IA) sitting in behind. And not just this, but how it is used, interacted with and navigated by your users?

Even if you haven’t already identified an issue with your website it can be super valuable to test your usability regularly. Moments like; building a new website, adding, removing or structuring content can be times when navigation changes can impact how your website performs. And also can be a great instigator for testing and improving. There are some very effective tools to help with finding navigational issues, and with great data and insights shining the way to better sorting and ordering.

What is website navigation? ╰┈➤

Simply put, website navigation is the links within your website that connect the pages. The purpose is for your website visitors to find what they need on your site. And importantly it is also used by search engines to discover and index the content housed on your website.

Search engines use links between pages to understand context and relationships between pages. Ultimately building a picture of what your website is about and who would want to see it, and why. 

Whilst strong SEO is vital to finding users, it is always best to make sure your users come first. If your website only talks to search engines it is unlikely to really speak ‘human’ and do what it is intended, make conversions. Users first, search engines after.

Let’s explore some common navigational issues and how great UX research can solve them.

Your Information Architecture 🗺️

Your website Information Architecture (IA) is always important to consider. How content is stored, ordered and found will impact the UX and the performance of your website SEO. Using a card sorting tool to research how users expect information and content to be sorted, stored and found can be vitally important to how effective your website is. Optimalsort is a quick and effective tool to establish where and how users expect information to be sorted.

Building intuitive IA and making sure navigation, and menus are simple to follow will ensure your users are confident and comfortable making their way through your website. Understanding where they can find the information they need and progressing to the next step.

As well as understanding the order of content with card sorting, combined with our tree-testing tool, Treejack, it can be incredibly useful to understand where users expect information to be found. Looking at how users interact with your website, where they look for information and where they get lost is all great stuff!

Using these insights will keep them on your website longer, more likely to see the task through. And let’s not forget that search engines love it when your website is performing, keeping users longer with strong content that is seen as relevant.

Content hierarchy 📝

The order of your content is important. This can be how content is stored and the order of your navigation and creating intuitive IA. But can also be as simple as where navigational sign posts are. 

It seems obvious, but there is a case for keeping the most important information at the top of drop down menus, and where you want users to take action, usually on your most important pages. Studies show that attention and retention are highest for things that appear at the beginning and at the end of lists.

This is why ‘Contact’ should always be found at the top right corner, the last on the list and in a standard, expected location. Keeping this in mind when creating the order of your pages and what you want your users to interact with will inform your structure.

How is your website used now 👨🏻💻

Understanding exactly how your website is used currently and identifying areas that need to be improved will lead to much stronger user experience (UX). Usability testing should be an essential part of ongoing research for your website success.

One of the biggest issues with website usability is building intuitive navigation. If your users can’t find their way through your website to complete a task, they’re not going to try too hard. They’re far more likely to abandon and find another website (organisation) that makes it easy. Great navigation should act as a simple to follow map from landing page through to task completion. 

Using a research tool like Reframer can allow you to test how users complete tasks across your website. Following their journey from their first interaction through to task completion. The data will provide insights into how users engage, navigate and complete their tasks (or don’t). Where do they get stuck, lost or confused? How do they feel (even down to their body language)? How quickly can they find what they are looking for? And the next step?

All great stuff to inform the design team to build an engaging, usable website.

Homepage expectations 🤡

Your users already have set expectations when they arrive on your website. They anticipate your website to look and behave in a regular way that makes navigation, and their decisions, easy. Simple design features, such as your navigation menu across the top of the page, with clear options. It is vital to make life simple and easy when it comes to navigating your website. 

Creating an interface that looks clear, is easy and quick to follow will build trust and engagement quickly (remember the 2 second rule). Simple to follow navigation, including descriptive labels, can make completing tasks much simpler and quicker for your users. Guiding them smoothly through your website and ultimately to conversion.

Confusing homepage navigation  🫣

Your homepage is the hardest working page on your website. It’s the first place (most) users will interact with you and it is make or break. 

Did you know? You have less than 2 seconds to grab users with a well designed, organised and simple homepage. If they don’t immediately know what to do, trust what they see and get started they will move on (to someone else).

Increased bounce rate does the converse for your SEO. With a homepage that users bounce away from you are likely to see a drop in SEO rankings, meaning ultimately you will see less users!

Did you know that 87% of people that find themselves on the right path after the first click will complete their task? Ensuring that when users land on your homepage they can clearly find the road signs, but not everything that your website contains. Your homepage should simply guide your user to navigate your site, know what to do and how to do it. 

A cluttered, busy homepage with too many links will distract your users’ attention, confuse them and maybe even lose them forever! First-click testing will take an informative look at how your homepage interface is performing. Mapping where your user is clicking once they arrive on your homepage and conversely, where they are not engaging.

This can all be highly informative in designing, re-designing or even removing clicks from the users journey through your homepage, and beyond. Using Chalkmark to test your users first clicks is a great way to get started now.

Wrap up 🥙

With a website that is intuitive to navigate and content that is relevant you will find users that are engaged and SEO that ranks!

Get started quickly and simply with our range of tools to sort out your navigation.

And, if you need some more inspiration to help improve your website navigation, grab yourself a copy of our Actionable IA guide that explores actionable ways to fix, refine and build better IAs.

Seeing is believing

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