Card Sorting to Top-Level Navigation

[00:00:00]
>> So I said we're gonna look at three things called top task, card sorting, and tree testing. So we're at the card sorting bit now. Anybody's done card sorting before, in the room? Yep, okay, right, card sorting's great. Card sorting is a way of allowing users to organize information in a way that makes sense to them.

[00:00:24]
So the way that I think and organize the world will be different to the way you think or you think. We all have different ways of organizing things, right? And so a lot of people assume that the job of information architecture is organizing things logically, right? That's easy, I can sit down and organize a thing logically.

[00:00:45]
But what's logical to you is not logical to somebody else. So it's really important that when we organize something logically, it's based on the logic of the user, not what makes sense to us. Now, this is particularly problematic as we become more specialized. The more specialized you are, right, the more you deviate from normal behavior.

[00:01:11]
So, for example, if you work with a company for a long time, you become specialized in the way that company thinks and works. So the way you are organizing information will bear no resemblance to how those outside of the company will organize information, right? Which is why companies cannot be allowed to create their own information architectures [LAUGH].

[00:01:37]
So with card sorting, we let the user organize things. Now, there are two types of card sorting. There's open card sorting, where, basically, people can organize content in any way that makes sense to them. And then there's closed card sorting, where you, basically, allow people to organize content within certain constraints, right?

[00:02:03]
You can use either or both, okay? But I'm gonna take you through the process that I use if I've got lots of time and lots of money. And then we'll pick out the bits that we can do if we've got less time and money. So the tool I use for this is a tool called UXMetrics, right?

[00:02:22]
It's got free tier, you can give it a go, it's really cheap. There are other alternatives available, but to be honest, they're not as good, they're more expensive and harder to use. So that's my recommendation. So, essentially, what I'm gonna do is I'll show you a card sort and how it works.

[00:02:41]
So this is an open card sort, you can see all the cards, all of those tasks along the bottom. And then the user can go along and pick a task and drag it into groups that make sense to that person. And then they can label the task whatever they want, right?

[00:02:58]
Simple as that, okay? And they can keep going and create as many groups as they want to and organize the tasks into any amount. Now, with an open card sort, you're asking people to do a lot of thinking there in terms of organizing stuff. So we're not gonna ask people to organize all 70 plus tasks that we've identified.

[00:03:25]
Instead, we're gonna only ask them to organize the top tasks, the top thirdish of our list. No more than about 30 tasks, otherwise, they'll get bored and abandon on you, right? So, essentially, we're gonna ask them to organize those tasks into any groups that make sense to them.

[00:03:47]
Now, once that has been done, and again, we can use a service like Askable if we don't have access to our own users. We can get friends and family doing this, if we want. Although, ideally, I would prefer to have the actual target audience doing this, right? Because it's a more specialist knowledge type of thing.

[00:04:11]
But again, getting anyone outside of the company is better than using people inside of the company, right? So we're getting to do this exercise. Don't need a lot of people to do it, as many as you feel you can get. But, I don't know, 13 might be a reasonable number to get to do it.

[00:04:31]
And then once you've done that, you've got to analyze the results, right? So all of this you can do within UX Metrics, makes it really simple for you. You bring up, you go to the results page, where it shows all the results. And there's various tabs where you can see a card view, where you can see what each card has been assigned to.

[00:04:54]
We can see individual results, and we can see a group view. It's the group view that I tend to work with, so we go into a group view. And what we'll find is, all these groups, there'll be a lot of them that are similar, but not quite the same.

[00:05:10]
So it goes back to what I was saying earlier about, they might call it health care, or they might call it benefits or dental care or whatever. If the name is very similar, right, then there's a button you can press. You select the ones that are similar and it merges them together, right, merges the results together.

[00:05:29]
So that needs a bit of cleaning up. And then once you've done that, once you've gone through and merged any similar groups together, you can then visit the card view. And on the card view, you can see what each task has been assigned to, what group name it's been assigned to, right?

[00:05:50]
Once you've done that, you'll have the structure of the data that defines the structure of the site. You'll still have to make some decisions, right, about which sections to keep, which sections to merge, and that kind of thing. But at least you'll have some hard data, and you'll be able to see which tasks should go in which sections, right?

[00:06:12]
Again, you can use ChatGPT to give you a bit of help here, if you want to. Because, although you can manually do all of that merging and assigning and all of the rest of it, on a smaller site, that's fine. But when you get to a bigger site with a lot of participants, right, it starts to get a lot of information, and can be a bit overwhelming.

[00:06:36]
So again, I've written a ChatGPT prompt where you can export the data out of it again. And I won't bother going through this one, but, basically, it's a series of step by steps. And it will output a kind of nice clean list so you can see where every card has been assigned to each group.

[00:06:58]
So that will give you a sense of the top level information architecture. But it won't set it in stone, you'll have to make some decisions, but at least you'll have data to back it up. So I wanted to share a few tips with you for making those decisions.

[00:07:16]
Because if you don't come from a UX background, you haven't been doing this for long, it's very easy to make some mistakes when you're setting your top level navigation. So just a general advice is, fewer options are better, right? We can only hold four things in our short-term memory, right?

[00:07:36]
So if you've ever looked at your credit card, where it's got 16 digits credit card number. If you notice, it's always split into four groups of four, and that's cuz we can only hold four things in our short-term memory. I'm learning, in past, I've got out my credit card to show you that, and it's been recorded and posted on the Internet.

[00:07:56]
So I'm making progress, right? So [LAUGH], so yeah, fewer options are better, four would be optimal. But, obviously, that's not always very practical, so just keep it as low as you can. If you're gonna have more than four options, you might wanna consider grouping them together. For instance, maybe categorizing products into categories and subcategories and that kind of thing.

[00:08:22]
Keep the labels nice and short, the labels shouldn't really be more than one or two words to aid scannability. Try and avoid ambiguity, there's a tension between this one and the last one about keeping things short. Cuz, obviously, the shorter things are, the more ambiguous they are. But ideally, your labels must clearly describe their content to prevent users from wasting time on sections they don't understand.

[00:08:49]
Now let me give you a real example of that, cuz it sounds obvious, but it's more subtle than you think. So for a long time, as I already said, I do a lot of work on a lot of university websites. And if somebody doesn't understand, we were targeting undergraduates, right?

[00:09:11]
We wanted to get more graduates, so we were doing an information architecture around those. And we had a series of sections along the top, one of which was alumni, right? And I can't remember the task we were asking to complete, but it was undergraduates, it was nothing to do with the alumni.

[00:09:30]
But when we were running the test, people kept going in the alumni section. And it was like, what, and in the end I ended up asking, why are you going in the alumni section, you're an undergraduate, why you're going in? And the answer was, I don't know what alumni meant, and I thought maybe my thing was under there, right?

[00:09:49]
So that's what I mean by ambiguity, that each section has got to be clearly understandable by your entire audience. Yes, go for it, you can challenge that if you disagree.
>> No, I've had the experience where marketing jargon ends up in navigation.
>> That's the big one, yeah.

[00:10:07]
>> I'm trying to convince them that nobody understands what growth-
>> [LAUGH]
>> What a tab for growth means.
>> Yeah.
>> Things like that, and I haven't had much luck.
>> It's a hard battle. The other really common one is people use their product names, right? Blade Pro, what the hell's Blade Pro?

[00:10:31]
And in situations like that, test it, right? So that's the classic example of where I go, well, that's fine. What we'll do is, I mean, there's various ways you could test that. But we'll mock it up, right, with the navigation with your version and my version. And we'll do a first click test, and we'll say, where would you click for X, right?

[00:10:59]
And see whether people recognize that growth is the section they would click on, or whatever you've renamed it makes more sense. Sometimes I don't even ask that, I just run that test, and then present them with the results. But I never argue it, because the minute you argue it, it becomes a confrontation.

[00:11:22]
So what I always do is say, yeah, I'll lie, I blatantly lie. I'll say things like, yeah, growth might work, I wonder whether X might work better. Let's do a quick test, give me a half an hour, or give me an hour, and I'll come back to you.

[00:11:40]
So it makes it sound like I'm taking their option seriously. Sometimes I'll even go as far as saying, do you know what, that might be a really good idea, let's just double check. And then I can come back afterwards and go, I'm as shocked as you that that didn't work.

[00:11:55]
I shouldn't be actually saying this when I'm being recorded, should I? If that camera over there just forget the thing.
>> But when you do this like really quick test, what does the test look like?
>> So in that particular case, I would do probably a first click test.

[00:12:12]
So what I would do there is, let's say you'd already mocked up the homepage, for example. And you've got your navigation on there, and you've got your sections, and one of the sections is Growth, right? And growth is so ambiguous, I haven't even got clue what might be in a section like that.

[00:12:32]
But let's say it included case studies, I've just made that up. You think it should be called Case Studies, they think it should be called Growth. So you do two mock-ups, we change it to be Growth and whatever. Then I would use a tool called and I'll be showing you this in a minute, actually, anyway.

[00:12:51]
You would create two tests, one that would show your version, one which would show their version. You would ask one question, which is, the question on both tests would be, if you were looking for information about how we have worked with previous clients. Notice I haven't used the word growth and I haven't used the word case study, right?

[00:13:15]
Where would you click? And they would click on the image at the place where they would click, and that click is recorded, okay? Now, you would then send it out to two different groups of people, okay? And that could be friends and family, it could be anybody, it doesn't really matter, anybody outside the company.

[00:13:35]
And then you'd see where most people click. Do more people click on Growth, or do more people click on Case Studies, and that proves your point, basically. Does that make sense? And, well, I mean the biggest problem would be waiting for people to come back, but setting up the test would take 15 minutes, maybe.

[00:13:58]
And if you paid for people to complete the test, which is about $1 per person, and you'd only need half a dozen, well, no, say, a dozen on each, so what's that, $24, you'd get the results in an hour. So it's not too bad, is it, really? So yeah, avoid ambiguity.

[00:14:20]
The other one is, be distinct, right? So another common problem, so jargon is a great example of ambiguity, right, that's perfect. Yeah, being distinct is slightly different, it's where you have two sections that could be mistook for one another, right? So I'm trying to think of a really common example.

[00:14:41]
Sectors and industries, right, are basically the same thing, but sometimes you will get both on the navigation, and then forget it, so you want them very distinct. The other piece of advice I would give, or the last piece I would give is, don't fear clicks, right? So often people go, we got to have all the top level sections, and people don't like clicking, right?

[00:15:12]
If you ever heard that, people don't like clicking, they didn't use to like clicking. If you look at Nielsen Norman Group research in it, they used to hate clicking. But that was on dial-up modem days where you had to wait ten minutes for every click, right? These days, users don't mind clicking, as long as they're confident they're progressing in the right direction.

[00:15:33]
So don't get too hung up about how many clicks it is before someone gets there. So, hopefully, at the end of this, you're gonna have a kind of sense. Yeah, got a question?
>> Yeah, I'm curious where things like a search box would fit into this. I'm looking for this, and you can just type it in.

[00:15:50]
>> Search is a completely different problem, right? I don't include search in information architecture. It's obviously a very important component, a lot of people instinctively go to search. So it's incredibly important that you consider search. But search is a whole set of usability issues that's slightly apart from that.

[00:16:13]
I haven't really included that in this workshop, if I'm being honest with you. Because oftentimes there's very little that a UX designer can do about search, right? Because a lot of search functionality on websites are terrible. And they're terrible because of the technology, not because of the user experience.

[00:16:39]
That the technology is not customizable enough, it doesn't allow you to do the things that you need to do to make it accessible. So I've kind of skipped over search, to be honest with you. And also, there's various other aspects that are kind of information architecture adjacent. Like, for example, chat apps, or these AI answer your question things.

[00:17:05]
Or the fact that most people deep link into a website from Google anyway. So I could do a whole workshop on information architecture, but, hopefully, you get the idea.