Understanding and refining choreography for your information architecture

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. 

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.

What is information architecture (IA) without its complementary elements? On this blog we’ve already discussed the information architecture elements of taxonomy and ontology, and now it’s time to take a look at choreography. While taxonomy refers to how information is grouped, classified and labeled and ontology refers to the meaning behind our words, choreography describes the rules for how all those parts should interact.

‍

Choreography is essentially the nuts and bolts that bring organization, structure and meaning together to form one well-oiled machine that supports, enables and delights users on their path to task completion within a specific context.An often overlooked element of information architecture, nailing your choreography is essential to the delivery of a seamless user experience because it is present in everything your users will do on your website.

‍

Understanding choreography and IA

‍

Coming back to our house analogy from my taxonomy blog, choreography would be present throughout the entire house determining how everything works together. It’s in the positioning of the door handles and hinges to enable easy access and use of rooms and so you don’t swing an open door into a shower screen or into the knees of a toilet user (who should have locked the door anyway). Choreography appears in open plan living environments seamlessly flowing from one space to the next. The way that the laundry is usually a room that includes an external door allowing an easy workflow from storing the dirty clothes, to washing them to hanging them outside on the line to dry. These are all examples of choreography.

‍

In the context of a website, choreography is present in a number of different website elements. These might include: the rules for how a menu might respond or behave under specific circumstances, the way the user interface adapts to suit different devices, the hierarchical relationship between content and much more.

‍

Choreography examples

‍

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

‍

Mental Floss

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

‍

‍

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

‍

‍

When I click on the big orange button

‍

‍

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

‍

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

‍

IKEA US Inspiration page

‍

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

‍

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

‍

Do nothing for 2 minutes

‍

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

‍

‍

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

‍

‍

When I comply with its instructions, the clock ticks down and when there are just 40 seconds to go something magical happens — the wave sounds stop. It’s not jarring or surprising, in fact it actually felt like I dropped to a deeper state of relaxation. Like an experienced lead dance partner, this website’s choreography pushes and pulls the follower where it wants them to go. The rule here is: if I touch my mouse or keyboard, the clock resets, and if I follow the instructions, I get to access an additional layer of relaxation when the sound drops off. It forces me to take 2 whole minutes of out my day in a strict but supportive way.

‍

When I reach the end of the 2 minutes, I’m congratulated and shown an advertisement for a book to help me further explore this technique. I usually hate seeing things like that but I don’t mind in this case because it doesn’t come across as pushy and it’s already given me something.

‍

Refining the choreography of your IA

‍

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

‍

When running a card sort, pay close attention to:

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

‍

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

‍

If your IA is a bit further along in its development or you’d like to evaluate an existing IA, tree testing can help you understand the choreography that will best support your users.

‍

Keep an eye on:

• the location of the first click
• the pathways followed

‍

The pathways followed by participants in a tree test will help you determine the right sequence of interactions required by a user to reach their goal — the ultimate step by step flow to task completion. What order do the labels need to be in? And what lives underneath them? And again, in what order?Think of it like a path through the woods to a lake. Your IA’s choreography should enable your users to be seamlessly guided along a smooth pathway made of big stone steps. They shouldn’t be running into trees or bushwhacking to create their own pathways.

‍

When looking at a tree test, consider how many of your participants did not follow the pathway/s you defined as correct. Where did they go instead? What does the right path look like to your users? Also look at where the all important first click landed. If users start out on the correct first click, they are almost 3 times as likely to reach their goal. If your participants started out on a different first click, you’ll need to explore why that is. It could indicate ambiguity in the labels, it could also be a sign of an expectations mismatch, a hierarchical issue or it could be something else entirely! The tree test will help you identify where the issues are, but you’ll need to go and have a conversation with your users to understand why it’s happening.

‍

Unless more than say 80% of your participants achieved direct success in reaching their goal (meaning they never strayed from the big stone path that you defined) you’ll need to check these things anyway to resolve findability and usability issues. Choreography related insights are an extra thing you can pull from what you’re already doing. And of course always remember that any choreography related data has to be considered in conjunction with whether or not the labels are even correct. Choreography is just one piece of the puzzle; it sets the rules for how all the parts interact and isn’t going to be much help if the parts aren’t even right in the first place!

‍

Choreography in information architecture might be one of the most overlooked elements but it’s not hard to give it the time and consideration it deserves and your users will thank you for it!