IA 101: Digital experiences for human memory

An introduction to what information is, why such abstract questions even matter, and how people use information to make sense of and move around in the world, whether digital or physical.

Deck

Resources

• Covert - How to Make Sense of Any Mess
• Instone - Navigation Stress Test

Transcript

Picture your office, or wherever you do most of your work. Close your eyes if you need to. Can you start at the door and walk around the room, seeing each piece of furniture, each thing that’s there? This isn’t a trick question, but you can probably picture it, right? How about the last house you lived in? Can you start at the front door and move through, seeing where everything is? How about your locker in high school? Which floor was it on? Which ways did the hallways go? Where were the stairs? Where are the windows? How about your third grade classroom? What shape was it? What kind of desks did it have? Where did you sit? How about the first house you lived in? Anything?

Now, mentally list everything that’s in your OneDrive? How easy is that to picture? It’s a weird trick of the human brain that most of us can picture exactly how our grandparents had their living room when we were six, but to save our lives, couldn’t map out the contents of a folder that we use every day, and there are far fewer things in my OneDrive than there were in that house. We’re very, very good with places, but most digital experiences are undifferentiated spaces.

The purpose of IA is to bridge that gap, between what we’re good at and what we’re not. The practice of turning digital spaces into places made of information. In order to do that, you can start with two things: How information works and what makes places work.

To start with: information is not a thing.

There are lots of things in the world: Things might be data (facts, observations, etc.) or they might be content (words, documents, images, sharpies, Pokemon, what have you.) The key issue is that things exist independent of observation, information does not.

Instead, information is whatever a user interprets from the arrangement or sequence of things they encounter. Information does not exist independently. It’s a subjective thing we all create as we move through the world.

This is essential to remember because you cannot “put the information on a page,” no matter how hard you try. Instead, we architect things. When you do information architecture, you arrange those thing for users to interpret, and try to make it useful and usable for them.

The important thing to remember here is that people are creating information whether we’ve architected it or not. Nobody intended there to be a face in this little piece of hardware, but that doesn’t mean it’s not there. And despite how sad it looks, that isn’t a bad thing. This means people can gather information from our arrangements that we didn’t plan for, when they bring questions we didn’t expect. This is great; if we had to plan for every possible use case, our sites wouldn’t be any good at all. But it also means that our experiences require a bit more from us. In order to make them facilitate that kind of information-gathering, we need to make intelligible, memorable places.

Spaces start to become become places when you can answer these questions:

• Where am I?
• What’s here?
• Where can I go?

We’re going to test one page from Microsoft Docs, to see how well it answers these questions and helps to convey a sense of place by identifying elements on the page.

Pretend you’re a user coming here for the first time, and go with your gut reaction as to where these things are. We’ll move fast, so just put the best answer you can and don’t worry too much about being correct. This is about how easy the site makes it on you.

So how was that, was it easy? Hard? Clear? Confusing? I didn’t find it very easy when I did this. And I know that some of the things that seemed true were actually incorrect. So how do we figure out what’s missing here? The good news is, we have tools to make sure people can answer those questions: that will turn this into an intelligible place: Where am I? What’s here? Where can I go?

We can make sure people can answer those questions by implementing wayfinding concepts to establish a spatial vocabulary, let them see what’s going on, and interact with sensibly limited choices.

This may seem like a lot, but a lot of experiences we interact with every day do this well. I’ve never worked on a project where somebody didn’t tell me, “you know, this is just too much to organize. we have 75 products.” The average grocery store has 50k SKUs, and you expect to be able to find the eggs. Even in a new place. Even checking whether they have new products. It even works in another language.

So, what makes grocery stores work, and how can we bring some of that to the digital world? Eight principles.

1. Identify locations: Grocery stores make sure to give locations clear identities. Makes it clear where an aisle begins and ends, and it means when you ask a clerk a question, they can say “aisle 6” not “over there”In a web environment, this is often as simple as an H1 and a clear URL.
2. Create edges: We need to create edges between different parts of our experience, to convey where one thing starts and another endsIn a web environment, we create edges by making two sections look different, whether they’re two districts of the website or the main body content and the footer.
3. Pave your paths: Aisles are continuous (no culdesacs, no stopping and starting) and communicate distance and direction.On the web, we might make present items in a sequence, making sure users can see what’s first, next, and last. Or we might give them an indication of the sections on the current page, and where they are in those sections.
4. Add landmarks: A huge Deli sign on the wall tells you where the Deli is from a long way away, which is useful if you’re looking for the Deli, but it also keeps you oriented as you move through the aisles and turn different directions. In a web environment, things like a logo in the top left corner, breadcrumbs, or a global search box are landmarks. No matter where you are, you can tell where you are in relation to the major structures of the site. For individual sections, you might have smaller landmarks, like category navigation or special components that are only used there.
5. Make maps: In addition to an identifier for each aisle, grocery stores also usually create little maps for each one in these signs. The items in those signs follow the two sides of the aisle, and usually correspond to the order of items in the aisle, so you can tell where to expect things.This lets users quickly see a representation of the whole, helping them navigate, but also make sense of the kinds of things that are there and what they should expect. In a web environment, we usually let users see the high-level view of the site in the global navigation. Even if they never interact with it, they can quickly scan it and get the 10,000 foot view of what’s on the site and how it’s interrelated.
6. Establish sight lines: Most grocery stores are organized so that you enter into a produce section and/or a prepared food or Deli section, and in either case, you’re not immediately met by tall aisles that block you in. Instead, there are lower displays which make it so you can see the areas further away and determine where your objective is.Similarly, on the web, we need to make sure that users can see the directions they can go, so they know there are paths there. We can give users lines of sight by providing thumbnails, excerpts, or anything that helps indicate what’s in a section,  without forcing them to click into it.
7. Add signs: Grocery stores don’t rely on the content itself to tell you everything you need to know. They add metadata for each product, so you can double check the name, maybe check the price per ounce, and know how much it costs. In a web environment, signs might be icons, CTAs, and/or text labels, and need to be carefully scaled to their point of need.
8. Limit choices: There are at least five different kinds of refrigeration or freezer units in this picture, which seems like it should be confusing, but it’s not because each one of them represents a high-level choice that lets me decide where I should go to find the item I want. I get to decide that I’m looking for something perishable, then that I’m looking for something frozen, etc. We don’t think about it, but it’s clear. This is the equivalent of adding another click and making things easier. Users do not need all the choices at once—it’s overwhelming. Rather, they need choices progressively disclosed. In a web environment, this means we scaffold the information we give users, so they’re not overwhelmed with options, paths, or information.

We bother to do all of this because it’s what makes experiences work for humans. I’ll leave you with a quote from Richard Saul Wurman, one of the founders of information architecture:

It’s a way of thinking. It’s how you go about something. It’s a whole way of life in which the aim is not to make something look good but to make it be good.

Make things be good by remembering that there is no information without people, and to give them places they can remember.