UX Design Process — Maps, Paths, Signs, and Magic.
I want you to think about why you use apps and websites.
I bet that you and I both use them in similar ways — to start and complete some task. In other words, to do something we want or need to do. You might open your calendar to check your availability for the next day, week, or month. When you see that you’re available, your task might be adding a hangout with a friend, or a UX prototyping session with your colleague.
A task doesn’t always have to be work related. You may visit a funny website to lift your mood, chuckle at something, or kill a few minutes while you’re waiting for that perfect cup of tea to finish steeping. You might even browse GIFs of cute animals to get that “awwww” feeling.
Your experience using apps and websites always starts with what you need or want to do. The app just helps you do it. As UX designers, it is our job and responsibility to make accomplishing a task as easy and frictionless as possible.
Because user experience always starts with a task, the UX design process should always start with asking questions about the task at hand. Let’s do a deep dive into how you should approach it.
IA Comes Before UX.
IA stands for information architecture, which is a complicated term for how information is organized. You can think of information architecture as a map. That map will be used by both the people who use the app and the app itself, along with its creators. The best maps help people quickly orient themselves in the world. The best IA helps people quickly do whatever they want your app to help them with.
Maps of physical places show the relationship between different landmarks in the real world. Maps of websites and apps show the relationship between different pieces of information in the digital world. We’ll call this information “content.” All apps and websites serve you content. The best ones make that content extremely easy to find and use in your daily life. The worst ones make you feel like they don’t care about you. You are right to feel that way because the worst apps care more about themselves than they do about you.
That is why IA is a crucial first step in the UX design process. It helps us (designers and developers) create clear maps and paths that connect people with the content they actually need from our products.
IA Starts With Questions
Have you ever used a website or an app that had navigation that made you wonder, “Why are you giving me so many options I don’t care about? How hard can it be to renew my driver’s license online!? Where am I and how did I get here!?” Companies often, and erroneously, organize their content in the way that makes sense to their internal operations. Instead of doing that, they should organize their content in the way that makes sense to their clients and users.
If every visit to an app/website starts with a task, then UX is the path to getting that task done.
You can think of IA as the map, UX as the path along that map, and UI as the road signs along that path.
UI, if you’re not yet familiar with this term, stands for user interface — everything people can click on and interact with, including menu icons, editable fields, labels, and other navigational items.
When people use your app or website, they should always be able to answer five questions:
- Where am I?
- What can I do here?
- How do I do it?
- How did I get here?
- Where can I go from here?
IA, UX, and UI all work together to help people answer those questions quickly and easily. We’ll see how that works in practice later.
But first, let’s explore designing information architecture, the map that everything else depends upon.
Finding What’s Important
Broadly speaking, IA is about categorizing, organizing, and structuring information (or content) for both users and the application. All content within an app should be useful and valuable to its users. To find the useful and the valuable, IA/UX designers start with categorizing all existing and planned content, in the order we think it should be listed. We start with two assumptions: “most important to users” and “least important to users.” How do we know if our assumptions are correct? We don’t, unless we ask actual or potential users!
To make things simpler to understand, let’s talk fundamentals of a landing page. Great ones explain what they sell in one or two sentences. They have a call to action that usually asks people to sign up or to buy a product. The rest is useful information about the product, service, or the company itself. Do you ever wonder how all those “About Us” and “FAQ” pages are picked and organized? What guides which pages a company should have on its website? The answer always lies with the people who use the product or service! IA and UX designers start with assumptions about what’s important to users and talk to them to make sure we are on the right track. The clearest, easiest way of doing that is a simple exercise that looks like this:
We first ask ourselves, “What do we think is important to the users of our product?” and rank each page accordingly — 1 being “super important” and 4 being “not that important, but still useful”. Then we do the same exercise with existing or potential users. The question then becomes, “We’d love to know what is actually important to you on our website. Please rank these pages in the order they are important to you.” This test should be done with at least fifteen people for the vast majority of projects.
Organizing What’s Important.
When we start discovering what matters most to users, we can move on to the next step: a card sorting test that uncovers users’ mental models. The purpose of the test is to figure out how people think about your product or service, in their own words. It doesn’t matter if you call your product “Nimbus 2000” when your customer calls it the “Flying Broom.” They will always look for the Flying Broom if that’s what makes sense in their head. Card sorting solves that problem. (Check out Nielsen Norman Group’s articles for more.)
Now that we have a better understanding of the users’ mental models, we can move on to discovering potential UX flows. A UX flow is how people go from having a task to getting that task done. It is, in other words, a journey from A to B. That journey has to be consistent and easy to predict, because people have expectations of what will happen when they navigate the app.
When a person clicks around your app or site, she compares what she expects should happen to what actually happens. The moment she’s wrong about her guess, she no longer expects the app to be valuable and useful. Instead, she starts expecting and bracing for friction. Our job is to reduce or eliminate that friction. The app has to get out of the user’s way so she can complete the task she came to do. Aside from being easy to predict, UX flows have to be consistent. When people learn how to do something — it should work the same way no matter where they are.
Making the Important Readily Available
Well designed IA (our map) works together with UX (our path along that map) to help people get from A to B.
Take a moment to imagine where you live and work. Let’s say that every time you come home from work, Google Maps takes you along the exact same path. Because you told it to take you home — you know for a fact that you’ll get there. What if you’re having dinner with friends in a restaurant on the opposite side of town? When you ask Google Maps to take you back home, the route you take from the restaurant is completely different than the route you took on your way from work. But you still arrive home. That is consistency of UX flows.
While IA itself rarely changes, UX flows do. Where people are in the app determines how they get to where they need to go. UX flows change based on context, but the destination always stays the same. How do we design and engineer consistent outcomes for the end user? This is the realm of UI — the road signs along the path from A to B. Great UI, same as great design, is unambiguous. User interface should not be open to interpretation. Above all, it should provide utility — helping people find the right path to doing whatever it is they want.
On any app screen, on any website page, users should always be able to answer these questions:
1. Where am I?
2. What can I do here?
3. How do I do it?
4. How did I get here?
5. Where can I go from here?
User experience always starts with a task. It is, fundamentally, a journey from needing to do something to accomplishing it. The best user experience always starts with identifying what people need early in the project. It starts with asking questions. What is actually important to our users? What do they call the thing we’re selling? How do they get from A to B? What is most useful for the logged in AND the logged out user? Does she actually care about our FAQ and About Us pages?
Anticipating the needs of people who use our products is only as good as testing our assumptions. Building out our apps’ Information Architecture helps in discovering potential UX flows. When UX designers assume that getting from A to B is obvious — we test it with people. Noticing what creates friction for users and removing that friction is like crossing a chasm. Understanding IA helps you map every bit of important information. Designing UX helps you connect that information in the most optimal way.
Useful IA tools: pen and paper, OmniGraffe (Apple), Vision (Microsoft), XMind (both Apple and Microsoft).
Useful UX discovery tools: pen and paper, card sorting test.
Useful UX testing tools: Lookback.
