Visual Hierarchy

Hello and welcome to this UX Daily video in which we'll be discovering a design pattern that is very useful when you're creating the page structure for your project – the *visual framework*. My name is Priscilla Esser, and I will be discussing the tricks of the trade from WordPress template developers and other seasoned interface designers. And I will show you how they create consistency in page layouts. One of the essential elements of creating the best results for visual frameworks is something called *visual hierarchy*.

In this video, I will help you understand what visual hierarchy is and how to use that to create a proper visual framework. The visual framework is all about creating visual consistency throughout the user experience. To illustrate the importance of this consistency, just think about the simple task of finding your way back to the homepage of a website. We're all used to having the company logo in the top navigation bar to be the homepage link. Just have a look at this example from the Interaction Design Foundation website.

But what if you designed a website with multiple pages that all have this link at another location? How would it impact your experience if the logo was placed in the *footer* of the website, for example? Probably not that positive, right? You would have to scan each page separately for visual cues that indicate this functionality, adding to your mental burden. The solution is creating a consistent visual framework for all pages of your website or application. It's a framework of visual elements, colors and typography that forms a basic layout.

This layout gives you sufficient structure to create consistent pages. But it also offers enough flexibility to handle different content types. In this example, you can see how the two pages of the garden supply website are consistent in the placement of the logo, headers, menu items, and search boxes. At the same time, the pages differ in the type of content they provide. The page on the left is clearly intended to inspire people with a large image and top categories, whereas the page on the right is giving an overview of available products in the online store.

Notice how the consistent elements of the visual framework seem to be more in the *background* but the content itself appears to be more in the *foreground*. This is what a good visual framework can do for your design. It can help let your content stand out and shine. A great example of a visual framework in practice is a WordPress theme. These themes allow you to add any content you desire to create your own website based on the chosen visual framework. As most people aren't designers, this is a great way of making sure a website has good consistency

and visual appeal. But since you are a designer, we'll use this example to see how it's done. So, let's have a look at the WordPress theme we see in this example. The visual elements that have been predetermined by the theme developers are the header size, placement of menu items and search box. Also, the structure of the blog post has given us a three-column layout with white blocks on a grayish background. The typography is set, as is color use, the way images are shown, etc.

Naturally, everyone wants to personalize their website, so most elements are customizable. However, the theme developers do present a good visual framework that you can take as a starting point. Now, if we have a further look at this example, we see that the theme developers have also provided alternative ways to present different types of content while keeping the visual framework intact. The screenshot here shows how a side menu bar can be combined with a wider content block for blog posts. The user does not get confused by this change

as the visual framework ensures that the major elements can be found at the same place and the overall look and feel is consistent. To create a visual framework, these are the steps that you should take. First, determine what types of content you need to place on different pages of your interface and what tasks a user will most likely want to perform often. Then, based on type of content and task, determine what user interface design patterns will be present across all pages

– for example, a top-left navigation bar, a search box, a list or a dropdown menu of categories. Next, you should organize all returning visual elements on the page and indicate where content should go. Think about what element should go into the header area – most important – what, if anything, could be made accessible in sidebar, and what is more suitable for a footer area. Also, depending on the types of content, determine if you want to use multiple columns or not. Ensure that content has sufficient space to attract attention. When all elements have found a place on your page, you can decide on a more detailed level what colors and

fonts you want to use. This is where the framework becomes personalized to the brand or company you're designing for. You can have some fun here, but you can also use color and fonts to guide people in the right direction, as we will see in a few minutes when we dive into the topic of visual hierarchy. But let's first finish the topic of implementation of the visual framework. While you're taking the first couple of steps in creating this framework, it's very useful to make wireframes to position the various elements in a consistent layout.

Without emphasizing the visual appeal of color and images at first, it's much easier to shuffle design elements such as blocks of content and other design patterns around to create a good overview and focus on usability. In wireframes, you simply create placeholders for pieces of content and visual elements. It's a great way to do some early user testing by creating a paper prototype or creating a clickable prototype with wireframing software such as Balsamiq.

The example you see here is actually created in Balsamiq, but many other wireframing applications are available. Of course, you might just prefer the old-fashioned paper-and-pencil way to get the creative juices flowing, which is perfectly OK. After creating the wireframes in the first couple of steps of implementing a visual framework and focusing on more graphic design elements such as color and typography, you may want to consider creating a style guide to report the design decisions you made here. Style guides give all the visual elements and rules for implementing them. It increases the uniformity and consistency you're looking for with a visual framework,

but enables future extensions of your framework by others. This way, you ensure that when a client will not hire you five years from now to add to the website you designed for them, your efforts will not have been in vain and the new additions will remain consistent with your original intentions. As you can see here, major companies like Yelp provide their style guide as a resource for designers, product managers and developers. It serves as a common language to create brand consistency and a good user experience.

Now, the main problem with visual frameworks is that when the initial design isn't very good, it will continue to bite you in the behind throughout all of the pages. So, how do you get the initial framework just right? Let's start by deciding what we consider a good page layout. Here's what I think: First of all, a page should invite and enable the user to accomplish the task they want in a way that doesn't take too much effort. Secondly, it should allow the page owner to effectively communicate what they want

whether it is who they are or what the latest addition to the collection is. So, there's two sides of the coin, but they both revolve around seeing what you need to see to achieve a goal. Let's take a look at an example of a page that *doesn't* use visual hierarchy to achieve these results. It's actually a newspaper page from many years ago. Notice how all visual elements seem to be *equally important*. This was very common back in the day. But now, we're used to having things displayed in a much more *supportive* way.

Now, take this example. Here, some blocks of content instantly stand out to you and some seem to be more in the background. I imagine that if you're looking for a specific piece of information, this newspaper will help you do that much faster than the previous one. The designers of this page have played with visual elements to make some bits stand out more than others. Can you identify what design decisions they've made to achieve this? First, they've played with *size*.

Take a moment to see all of the different sizes they used to create hierarchy in the content. They also used *color* to make some text stand out more than others. Do you see how they did that? Let's have a closer look at how this works in the next slide. Visual hierarchy is all about *setting priorities*. What do you want people to see first, while they're merely glancing over your design? And then, when they *like* what they see, people will start *skimming*. This will make another level of the hierarchy stand out to them. This is often a bit smaller with less energizing colors or less contrast in the background

like the second line of gray text you see in this image. Only when people *consciously* take the time to start reading the text will text that is thinner, smaller and less contrasted be noticed. Now, where it becomes fun for you as a designer is when you start playing with these visual elements to attract attention to the right places. Using an *anomaly* to the standard visual hierarchy of a page layout, like the bullet text in this example, will give you control over the users' path of attention. It really draws the eye of the user to this text.

In this case, we say that the bold text has more *visual weight* than the regular text. Generally speaking, more visual weight attracts more attention when combined with less heavy elements. Let's have a look at some examples of visual frameworks to see if we can recognize how the designers have used visual hierarchy. Here, we're looking at a screenshot from the Dropbox website. Some visual hierarchy is achieved by making the heading bigger or bolder than the remaining text and by using blue as a contrast color. But all in all, I think this is rather a flat design without big differences in visual weight.

When we turn to this example, which is comparable in that it shows a pricing scheme for cloud-based storage subscriptions, we see that a stronger visual hierarchy is used. The most popular pricing option stands out more, not just because it's labeled "most popular", but also because the most popular option seems to burst out of the visual structure that the others abide by. To achieve this, the designs have used brighter colors and they allow the best option to take up more space in the layout of the page.

And as you can see, they do this *consistently* as it's not just the boxed area at the top of the page but also the features description which seems to grow heavier for each step it takes. The previous examples were both based on visual frameworks that depend heavily on a white background and fairly minimalist text options. Here, we take a different turn and show you an example that uses many more images and colors to present the content. A visual framework is implemented with a top navigation bar, a large area to showcase highlighted talks

and a row system with room for six talks per category. The visual hierarchy that is used to support this framework uses *size* – so, the biggest talk is perceived as the most important, especially since the title of this talk has the biggest font size – and *contrast*. The two other talks in the talk area really stand out from the background, making it look quite important as well. Since most users will visit this website to browse for interesting talks to watch and to get inspired, it's perfectly fine to have size and contrast *competing* with each other.

When users would visit a website with a *single purpose*, you might want to combine size and contrast to give a certain element *all* of the visual weight. Now, let's analyze this example together. Which element is the highest in the visual hierarchy and what stands out to you first? In this case, it's a combination of contrast and color. The block of content on the top-left side has the most visual weight. So, what is then the element *lowest* in the hierarchy in the screenshot and what has the lowest visual weight is in that respect the absolute opposite of the heavy black-and-yellow box

in my opinion is the category bar that says "Entertainment, Products, People, Fashion, Music" and so on. It has a small font size and is grey on a white background. It attracts the least attention. In this video, we had a look at a very powerful way to create consistency in your designs: the visual framework. We've seen that consistency helps users to find their way on a website or application and increases the usability. To create a good visual framework, you need to determine all of the elements that you need to place on the page and find the right location for them.

You can start out by drawing wireframes that focus on the placement before continuing with the style guide, which also describes the colors and fonts that need to be used consistently. When a visual framework is well documented, it helps future designers to continue the look and feel in new pages or products. A good visual framework also takes into account the visual hierarchy of a page. By using colors and sizes, you can give certain elements on a page more visual weight than others – which makes them attract more attention and appear more important.

The visual framework and visual hierarchy give you as a designer great input to play around and have some fun with visual elements while ensuring that you create high-quality designs.

The idea is to minimize  the amount of tapping that goes on. And so, we call this *tappability*. As we say with all UX, test it with users – make sure it's there. But there's a lot of little things that users can tap on – not everything has to be a huge button. And if it's task-oriented, then they can tap it and not have to do extra work  basically.

So, it's kind of tap-tap efficiency, but I want to talk for a second about *affordances* or *tappability affordances*. Remember that an affordance is a UI element that *invites the expected interaction*. The one that always comes to mind for UX people is the Norman Doors. You know – Don Norman, in his *Design of Everyday Things* wrote famously about: is it a handle that you pull or is it a bar like a flat thing that you push? And that should be the correct affordance because push is

the physical force, push, and the handle pull is pull. But then doors *mix it* – they go push, but it's a pull. And they go pull, but it's a push, and so he talked about that and it's called a Norman door. And it reminds us about that affordance should be the right one and should invite the interaction correctly. Now, the hilarious thing about Norman doors in the real world is you get signs like it's a help strategy. It's usually instead of a pull there's a handle and it says 'Push'.

So, on mobile what this means is that users need to know what's tappable. There's a bias that visual designers have for making things so clean and so beautiful that you can't tell what you can tap. And so, that's what we're talking about, is making affordances *clean but also clear* so that you know what you've selected. And I just want to say that animation can really help with this. It can help invite that expectation and add that affordance.

So, the other thing that Don Norman talks about in addition to affordances is *signifiers*. And *signifiers are UI elements* – think of them as visual nudges so that they give the user a little prompt, something that they can get a feel for – for example, a pulsating button. You know, my favorite one was a menu, like a hamburger menu that followed you down the page on a mobile website.

And it kind of pulsated a little bit, and you want to time that pulsation to a heartbeat. It really is a good 'boo boom, boo boom', as opposed to 'boom-boom-boom-boom-boom', which is going to create anxiety or... So, think about how you can use Material Design-type of suggestions for motion, for motion graphics or little animations or little moments of – you know – magic that can help increase signifiers.

If you don't offer it, it can lead to a lack of discoverability, false affordances, and can lead to user frustration, uncertainty and errors. This is what the research shows. And the other thing I would add to that – you know – user frustration, "uncertainty errors" is the technical term – how about feeling stupid? Like, you're like "oh..." – you know. You don't want users to feel stupid when they're interacting with your app, just because there are not strong tappability affordances and signifiers.

Here's an example for you: check this one out – you may have seen it before: What is the tapping object here? What should you tap? Study this for just a second; see what you  think, well, just a second because you only have maybe three. It turns out that that virtual key card thing is not tappable. The object below, the grey thing, it's supposed to be a button, I think; it's related to like a help strategy, but the contrast is low.

Notice the contrast, so you have grey on dark blue or something like that. The other problem with this is it's sort of  you're stuck in this conceptual model that just doesn't work; it's like, what is a virtual key card? It's used for unlocking a bike, for paying for a bike. And they've introduced this idea of physical and virtual key cards, which is like 'whoosh!' – way beyond. So, there are a lot of things – you know – and sort of stepping back from the UI and seeing – you know – you could make something really tappable, but it might be the wrong tap,

a wasted tap; or in this case, yes, you're drilling down just to try and pay and they're leading you into this, into their mind, into their labyrinth of virtual key cards. So, be *careful* with making the *right things tappable to support the task* and *animating the right things and  using animation and motion graphics strategically*.

One of the other tools you have in your toolbox for making visual design is alignment. So, let's see how you can use this in order to help you help the user achieve things. So, first of all, let's think about text. Now, what I'm going to do is assume that I'm an English speaker and I'm an English writer. And so, I have a left-to-right text that I use.

I'm also learning a bit of Welsh. And Welsh also is a left-to-right language, as are most European languages. If you come from a language which is the other way round, or if your users' are right-to-left languages, then you need to flip everything I say for the next slide or two the other way round as well. So, being aware of your users is absolutely crucial here. But I am going to assume left to right. So, for left-to-right text, then you normally want to align things to the left.

And this is the most common. You'll have seen this in many, many layouts. So, the reason for that, though, is that if you're scanning text, you read left to right, and therefore you want your eyes to go down and very rapidly move down the left-hand side of that text and scan the beginning. This is partly driven by the fact, too, that you distinguish that beginning bit first. There may be contexts where the end of a sentence or the end of a title

is the most critical bit. So, you might want to reverse this. So, again, think purpose. Why is somebody looking at this line of text items? And if what they're trying to do is scan something and if what they'd like you to distinguish, which is the most common case, is the front of the text, then you left-align. It does tend to be a bit boring sometimes. So, you might want to mix it up. But if you do, and if you right-align – and I have used right-aligned text; there's occasions I've used it –

you have to know that makes quick scanning to find something more difficult. However, there might be... if the context is somebody knows the name of a film and they're trying to find it in order to choose it, and they want to do that quickly because it's about to start in a few minutes and it's a live film, you want to make that as easy to scan as possible. However, perhaps if you're just making new suggestions of films to the user and the user doesn't necessarily recognize them straight away – so, what you're doing: it's a range of things they're looking at – then it may not matter as much

whether they're left-aligned, right-aligned, or maybe center-aligned in the middle. So, there are times for special effects when you want to do that. But you have to understand then that a particular purpose, which is scanning to find something that you recognize is going to be harder.

If you're starting as a designer, you don't  need a lot of colors, just as with fonts. If you're thinking, 'Okay, I have 60 million colors in that little picker, so let's try to use all of them!' that's not really the case. What you really need is a *background color*, a *foreground color* and an *accent color*. And there are some rules that you  can then look up on your own later, like the *60-30-10 rule*, which is pretty useful. But, in general, what you need to really remember from this is that you need a *background color*,  so in my case it's going to be white.

Then you need a *text color*, which is going to be some sort of black or dark gray, and the *accent color for the important actions*. And one thing that you can actually tweak here is to have that darker color instead of being pure black, add a little bit of that accent color. So, in our case, the blue to it, so it's just going to look a little bit more connected to the blue and it's just going to look better together. So, that's just one way. And you need *three colors* really to pull off most designs.

And you can start adding colors once you  feel more comfortable with them. But when you're starting, really just the less colors the better because it's just much harder that way to screw it up. Two of the worst possible color combinations  are mixing red with either very saturated blue or very saturated green. And if you look at it more closely depending on the type of screen that you have, you'll see that on the place where they kind of mix together,

that little line becomes a little bit fuzzy. If you look at it a little bit longer, it starts to hurt your eyes in some cases on some screens because this contrast of those colors works really, really bad together. So, if you want to make a Christmas app, for example, there are better ways to do it, but *generally avoid those color combinations* and *always test your colors if they're clashing that way*. So, you can just place one on top of the other and see if that fuzzy line appears on them.

And that's one way to actually test it – you know – *by eye*, just looking at it. If it looks good, then it looks good.