Lessons

Lesson Info

Design Principle: Hierarchy & Proximity

What is proximity and hierarchy? Proximity is really the grouping of objects in a design to create connections and associations. So when things are closer, generally means that they must be related. If things are further away, must mean that maybe they are not related. It seems like a reasonable assumption for us to make. So proximity creates these relationships and brings organization and hierarchy to information. And maybe you've heard this word, hierarchy, thrown around in meetings you've been in or designers have used it. Now we're gonna see it in action. And I did wanna also point out that these principles we're applying, maybe you are not responsible for doing the design of things, but these principles are also really helpful for you as you might be giving feedback to designers you hire. So maybe your role is, you find vendors to work with and in feedback meetings, I will tell you, there's nothing more annoying than for a client to say, mmm, I'm just not feeling that design, or I...

don't like that color of purple because, whatever reason. I've heard very crazy reasons. But when I do get a client who says, I don't really like this layout because it doesn't feel aligned or it doesn't feel balanced or it seems like the hierarchy is off, I can work with that. And that's the type of feedback that my colleagues and I give each other. When we're critiquing each other's designs, we're not just kind of giving opinion, we're tying it back to these principles. So maybe you can use these principles as well to be helping give better feedback to whoever is doing the design for you. But we want to focus on that proximity and that hierarchy and creating more hierarchy in what we're doing. So to achieve that hierarchy, you heed to make sure things are grouped together. Because when information is grouped together, and when we create hierarchy, it's going to influence the order of how we see information on a page. And we're gonna see this play out in an example, but hierarchy can really help us understand, for example, okay, what is the title, what is the subtitle, does this little kind of box of text, is it describing this image on the page here? If you imagine a news article or a brochure, sometimes there's photos in a brochure with a little subtitle or callout describing that image. Well, if you don't group that descriptive caption close to it, no one knows that that caption is related to that thing. So when we do design with really strong hierarchy in mind, we are able to not force the person to think. The person doesn't have to guess, well, what's the title, or does this little text relate to this image, are these icons related to this thing? Or even, on a web page, if I click this drop-down and choose to sort, is it sorting the information over here, is it sorting the information on here? So it's important that we create the hierarchy so that people aren't guessing. So we're gonna establish order and importance in some examples we're going to look at. We're gonna use proximity and hierarchy to give people a starting point, show how it can guide your eye through documents, add structure, and just create general organization to whatever you are doing. Because you know you've been in these situations, where you've interacted with some thing. I like to think of boarding passes. How many times have you looked at a boarding pass and not been able to quickly find, you know, you think of the context, you're in a rush, something's happened, you need to confirm your gate or the time or something. But a lot of boarding passes are designed very poorly because they lack hierarchy. Key information has not been grouped together. But now you'll probably look at boarding passes never the same again. But we're going to look at table of contents as an example here. So this is a table of contents for a document. And we're at a new company, doesn't matter what it is, but this is a document of emails that the company might be sending out. So the company has a plan, part of their marketing plan is to send many emails. And these are gonna be emails that someone receives after they sign up for whatever this company does. It's irrelevant. But when we look at this table of contents, at a quick glance, do you know how many sections there are, subsections, is it clear what maybe is more important than others? Except for the title, it's not super clear. If we were glancing at this, we're spending a lot of time looking at this right now. In real life, we'd open this document, look at it, and go to the next page. We're kinda moving at half-speed right now. But imagine you just opened this. You probably couldn't even notice immediately that there's actually two phases here. So, quickly, we're able to achieve a little bit of hierarchy and proximity. So how are we doing this? And we're gonna get into the tactical how to in a little bit but just with some really simple changes, we're able to create better hierarchy through creating groupings of things, first of all. So now we know, there's a phase one, there's a phase two. That's really clear. We've also gone the second step of grouping these two sub-sections closer to this and creating space here to then make it clear, okay, this is kind of phase one, this is phase two, and these two things, because they're underneath it, they must be related to that. So this idea of hierarchy and grouping things, at now a quick glance, before, after, it's much, much easier to see that there are two distinct phases in these emails we are sending and below each phase there are kind of these two sub-phases. And it seems, the left one, again, it's not terrible. People could still realize, if they read that thing, that there are these two phases. But just with two minutes, five minutes of extra effort, you can make that a lot easier to understand. And you have to think of your user and think that, if someone is looking at this who wasn't involved in this process of building this document for the past three weeks, if they just looked at that version, they might miss out that there were these two phases. Whereas this, if they're new and they've never read this document before, it's dead clear, at least I think it is. Hopefully you agree as well and you can see the difference. So I like to put them side by side here. But I want to move into another example here. So, business cards. You probably have a stack of business cards. Sometimes I wonder why we still have business cards in the world today, but we do. So we're going to talk about that bakery. And this is a business card, again, it's not terrible, but what are some things that my designer eye notices as I'm critiquing this, as I do with all the business cards I get? So one of the things that stands out to me is that my eye obviously goes to the center here, but also, there's a lot going on. The information is off in all the four corners. And again, it's not terrible. All the information is there. If I received this business card from Amanda and I had to email her, I could do that. I could find the phone number and things like that. But there just isn't much hierarchy, especially when it comes to all this information because it's splattered out in all the corners. So let's think about, if I were to redesign that, what would I do? Well, I would want to create a little bit more hierarchy specifically around the information related to whose card this is. So before, it was very hard for me to kind of see, okay, where's the address, this, that. But now we see, okay, hi, I'm Amanda, I'm the baker in chief I'm from Scout Bakery, contact information, and address. And this is a little subjective, but I would personally order it this way because I think probably contact information is more important. Maybe, you know, she's not giving this business card to maybe customers, as much, I'm probably a business associate, therefore I want to contact her, I don't necessarily need to be going to the bakery as my first kind of action. So I would kind of organize it like that. And you can see the difference. Again, the one on the left is not horrible. The one on the right is so much better. And hopefully you're starting to see how these little tweaks in design can help us, at a glance, remember, it's at a glance. Yes, you could find the phone number, yes, you could find email, but to me, this one on the right, much more balanced, much better hierarchy. We know it's about Amanda, Amanda's at Scout Bakery. And when you group these things, what I like to do sometimes is think of the information in zones. And the more zones that you have for all the information, I think the more complicated it is. So if we look at this and kind of overlay these boxes just for the purposes of kind of illustrating this, on the one at the right, we just have two real zones here. Simple, two zones. Over here, one, there's, there's actually five. So there's five zones. So the more zones, the more confusing it's going to be. And if you can just group things, easier on the eye, for sure. So let's do another example. The cupcake shop also has a brochure. And they do weddings and events. So this is not a terrible brochure, but again, there's a lot of content, there's no hierarchy. Except for weddings and events, you're kind of reading that headline and then your eye, and in your mind, subconsciously, it's like, okay, what do I read next? You don't know where to go. Maybe your eye goes to the photos, maybe it goes to the icons, because we're visual, maybe it goes to these because they're kind of ordered and there's bold and it seems like a structured, aligned group of information. But beyond just seeing weddings and events, it's hard for us to know what this is about. So thinking about the content and the hierarchy of what we want this brochure to communicate, I might take the first step of organizing it like this, just to create a little bit more structure and hierarchy. So, starting off, I've put Scout Bakery up in the top left to kind of let us know this is the entity, this is the company, so it's not, I think it was down here, or over here, in the other slide. And now we've got the title, Weddings and Events. Subtitle, whatever that happens to be. Then maybe some text about how lovely their weddings and things are. And then we have the grouping of information of what things they can offer us. Before, it was just the icons over here and these boxes of text were over here. So now we're starting to kind of co-locate things. If we go back, those icons were there, these were over here. These photos, we don't know if those, maybe these are captions, does this belong to that icon, does this belong to this? So now we're starting to get a little bit more meaning because we're grouping things to create that proximity and that hierarchy so it's clear, these descriptions are going with these images, these descriptions are going with these icons. But if I were to take this a step further, I might do it like this. This is not a complete design, but we're kind of just focusing on the content and the grouping of things, then we would have someone make this look beautiful. This feels a lot easier to understand, clearer information, clearer hierarchy. This is Scout Bakery, we're about weddings and events, here's why we're so wonderful, here's what we can bring to your wedding and event, and look at these wonderful things, here are some descriptions, and now you just want to eat cake for the rest of the day. So this one has a lot more hierarchy. And if you look at the progression, these are a little small, but you can still just see, even zoomed out, you can see how scattered that one on the left looks. Just glancing at it, scanning it, you really have no sense of what's going on. The middle one, it's not terrible. This one, a lot more structure, a lot more hierarchy, as well.