I already know everything about Figma, I already know everything about XD, I know how to use these tools like nobody else but “Mai, everything I do is kind of silly, you know? What do I do with these tools? I already know how to use the tool, but I just don't know what to do with it”.
Is that your problem? So today we're going to talk a little bit about Usability and Composition. What is Usability?
Basically, usability is how easily a person can use an interface. That is, for example, if I want to use Google, it's very easy for me to see that there's only one field on that page. If I click there, I'll be able to do my search.
That is, this is an excellent example of usability, because the user doesn't have anywhere else to go. It's about this concept of how easy it is for the user to use a service, a product and so on. In the case of excellent usability, it is very clear to the user, for example, “Ah, this is a button”, “This is clickable”, “This is not”.
Just by looking at it, he knows, "Hey, I want to… This page is telling me that I should click on this button. This one looks like a button, I know this one is a button", for example. When you mess around too much, for example, if your button doesn't look like a button, your link doesn't look like a link because you removed the underline on it, just because it was prettier that way, or for example, your form, “Nah, that border around my text field was really ugly, so I left it blank, I'll just put some text in there”, and then it doesn't even look like a form.
All these little details often get in the way of usability. And in my view, as a designer, usability is one of the main fields where the user experience and the interface part are quite mixed, because there is no way for the user to have a good experience on a website, for example, if the site doesn't have good usability, because the user won't be able to use that site, unless the purpose of your site is to make the user lost and confused, and it can be, sometimes it's a little game, something like that, in that case, the usability has to be bad since it's the objective of the game. Except from those cases, it will be difficult for you to have a good user experience with a bad usability, okay?
Maybe you can bring another example, and put it in the comments, alright? And besides, in order for an interface to have a good usability it is very important that you know who your user is. After all, how are you going to guarantee good usability if you don't even know who is going to use that site?
So, how do we apply usability? “Oh, Mai! There are these rules that I don't remember, there are the laws from I don't know who, there are the ten heuristics from I don't know where… All I have to do is follow all that and I don't even need to worry about anything else”.
Guys, this is the easy way out. I'll be very honest with you, there are a lot of laws, heuristics, I don't know how many and I'm not against it. I myself often use it as a basis for my projects.
Sometimes to do heuristic analysis even for my clients, I use heuristics and laws and everything else as a basis. However, you can't blindly follow usability laws, or someone else's heuristics, because over time you will have to start developing your own feeling about what works, what doesn't, even for example, the Accessibility Guidelines, if I break it here it's not accessible anymore and things like that. Many times, for you to comply with an accessibility guideline, you will have to change other things and if you just blindly follow: "you have to do this, this, this, this and this", you will only be following a rule and this will not necessarily guarantee that your site is usable.
You need to have the feeling and that feeling you will only develop over time. Two things are the most important: (1) always look at many references, check what the already established sites, that have well-established design systems, for example, like Airbnb, IBM and so on, what these guys are doing , Google… These guys, there are a lot of people who are excellent professionals in the market, very well paid, who only work with usability, with user experience, with design within these companies. So they're usually great inspiration points.
That's not to say these guys don't make mistakes. But it means that, in general, comparing, like with an average Joe's website, the chance of them getting it right is a little higher, right? That doesn't mean that the average Joe's website is bad, okay?
So, always focus on good references and the second point: (2) who is your user? Will your user be able to use your site the way it is? Test with the user, see what really works, because then there will be no way to make mistakes in this usability part, ok?
Also, I want to recommend this little book here, by Steve Krug, “Don't Make me Think”. This book is a little old, but it's cool that it brings several usability concepts that will be able to help you a lot in your day to day. This concept of "Don't Make me Think", brings a lot of this idea that the user doesn't want to think when they enter, for example, a page, your website and so on.
And that's what's cool about this book, okay? So, it's worth reading, also a super short book, super easy reading, super fast. So, it's worth it, it's one of those books that I highly recommend, okay?
Along with “The Design of Everyday Things" and “The Non-Designer's Design Book”, which I already mentioned in other lessons. And to reinforce the indication of this book, I even brought a quote here from Steve Krug, look how cool, he says the following: “I have been working with this for a long time to know that there is no right answer to most questions of usability. Design is a complicated process and the real answer to most of the questions people ask is 'it depends'”.
It's cool to bring this concept from him because it reinforces that point that if you just blindly follow rules for every kind of design, it probably won't work for everything, because every design is different. Each design has its peculiarities, each process is different, and each user thinks differently. So it's very important to understand the peculiarities of your project.
And for us to continue, I'm going to bring you and show you a practical example of how to apply some of the visual principles that Robin Williams brings in that little book that I spoke about “The Non-Designer's Design Book", again, I recommend reading it. There are four principles: (1) alignment, (2) contrast, (3) repetition, and (4) closeness. For us to see that better, let's go to XD.
I have my XD open and, look, I have this screen here with a lot of disorganized things, imagine if I wanted to, for example, organize this to create, for example, a website. I could, for example, I'm just going to duplicate this screen so we can have it as a reference. And here we are going to start from the first principle, the principle of Alignment.
This principle mainly talks about the idea that the elements must not be merely thrown on the page in a random way. Unless you have a reason for that and it could be, I don't know, it's a site about modern art or something, and it makes perfect sense. If you don't have a justification, there's no reason to just throw them there.
Do you see that the elements here are just thrown on the page? Like I had just dropped them on there? The alignment principle says that, usually, these elements have to have some visual connection between them.
For example, I could just select all these little blocks here, and I could just click here to align them right here in the program. Do you see that they are now on the same line? That is, they have a connecting line between them, even if there is no line here in these blank spaces, you can clearly see that they are somehow connected.
I can even click and drag it here to distribute it better, I could even, for example, use the same spacing between them. If I want to go deeper, I'll turn on my grid, I could, for example, align each of these elements on the grid, because, for example, I want to put a square down here, it could also be aligned to the grid and it would have a connection with this and this element and so on. The grid is an excellent way to ensure this alignment between elements.
I'll put it here, just finish lining it up nicely. Also, this text too, it is not aligned with anything, I could, for example, align it with this element here in the corner, everything is already a little more aligned, it is more interesting, isn't it? Also, the second principle he talks about is Contrast.
If an element is different from the others, it deserves contrast. Take this example, I'm just going to throw a little gray here just to make it easier, I already pre-selected the #F6F6F6. I'm going to remove the border, imagine that this first card here was more important than these other squares here, this other set of cards, for example.
For me to give contrast to it, I could, for example, leave the gray here a little darker. It has a contrast, you can see that it's different, but you can also see is not that different. For example, if I put the black one here or if I put the pink one here, see how it draws attention on the page?
So, that's exactly what this principle says, that if an element deserves contrast, give it the contrast it deserves. Really differentiate it from others. For example, the title here, it has a contrast with the text description.
But if I play, for example, here, this Display, see how it's contrasting much more? Like now, I'm even going to drag it down here a little bit. Can you see that the title appears much more than that text?
That we can differentiate it in a much better way? That is, when the element deserves contrast, give it the contrast it deserves. In the third principle, he talks about Repetition.
What do you mean? You can see that here, the elements are already repeating themselves. But they could, for example, be equal, right?
If they're exactly the same card, why is one the same size, the other one is another size, and the other one is yet another size? For me to solve this, I'm going to connect my grid again and I'm going to leave, for example, here is three, here is three, I'm going to give them all with 3 width, I'm going to put three here, here also three and here as well, it will be three. I'm going to click and drag it over here.
Also, remember that if we were in XD, since these are elements that would repeat themselves, you could, for example, create a component for it and that element would repeat itself. XD even has an option called Repeat Grid, which helps create these repeating blocks. I'm not going to keep explaining it here now not to take too much time, okay?
But you can search about it later on. Here I can line them up nicely. I can line up this little friend here nicely.
And now, do you see how these elements are repeated among themselves? Even if I wanted, for example, I want to have one more block like this, I could repeat it down here and I could, for example, repeat it down here again. And so, we already start to have blocks of elements and in this way it is clear that these repeating elements are similar.
And the cool thing is that these repeating elements don't have to be just a block of elements, a type of elements. The colors too, can you see that I'm using the same color pattern? In our example with the cow from last lesson, you see that for example here, all these elements, they use the same typography size, which uses here the same example of colors, the same format of shapes, here they are all more rounded shapes, even here in the header that wasn't there, I used a more rounded element to bring more of an organic movement, that is, the repetition leads you to find patterns on the platform and patterns can be cards, colors, typography.
. . The more patterns you identify, the more you start to build an identity, a website, an app, whatever, it gets more consistent, okay?
In addition, there is also a fourth principle, which is Proximity. How does this principle work? Basically, do you see that these elements here are so much closer to each other than these ones that have a gap here?
This proximity principle gives this feeling that these elements here are connected and that this one is not so connected. What we could do, you see that this title here. .
. does this title have to do with this block or not? In the way it is here, it doesn't seem like it.
If I drag it here, closer together, oops, it seems that this title has to do with these elements. If I want, I can even delete it from here, and when I repeat this whole block and leave a space between them, for example, here I'll leave it in 80, you can see that these elements, these cards here, are part of a group so all that is here is one block, this one below is another block, that is, the proximity indicates the relationship between these elements, when the elements are part of the same group, they must be placed closer together and this helps to bring this sense of unity. To finish, I'll quickly show you three examples.
Check out the Airbnb website. Look how easy it is to identify the alignment here, for example, all these icons here, they are aligned, all these elements here, it is very clear that there is a grid here, that all the elements are aligned with each other, everything is neat, that here, the header has a slightly different alignment, here it is centered, it is not necessarily aligned with these other elements, but as there is this dividing line, they managed to use a different alignment only in the header, but these other elements that communicate among themselves are all alike, that is, they follow the same pattern of alignment, like repetition. The color pattern is all white, black and this here is contrast.
When you take a look, you already see the Airbnb brand here, the search. . .
In other words, it is easy to identify the elements that deserve contrast. Also, there's the question of proximity. You can see that these elements here, all these cards, they belong to the same group.
You can see that they are relatively close to each other. Here, all these elements as well, they are all close to each other and there is a little more spacing between them and the bottom part. Also, can you see that this block belongs to this image?
How do we know this? Because when we look at this block of text, it's very close to this image. Differently from this space between this block of text and the image below.
That way, it's easy to identify that they belong to the same thing. That is, it's easy to see the alignment, the contrast, the repetition of all the elements, colors, even the pattern of icons, you see here, the pattern of icons, it's exactly the same pattern. That's nice, when you use an icon, don't select one icon from each icon family, look for an icon family that has many.
My suggestion, look for icon families that have more than 1,000 icons for you to start making a layout, because you will always have many similar options to choose from, even standard line sizes. Here too, in the typography, the same size is a standard, here too, a pattern of sizes that are repeated. This way, it is very easy to identify this repetition, for example.
Here, even on Google, which is a relatively simpler site, you can see the buttons are aligned, all these little icons here, alignment. Contrast, only by laying your eyes on it, you already see this whole block here, you already see the Google brand, you already see these little icons, it's easy to see the contrast on the page. Also, repetition of what we've already talked about.
Here it repeats and repeats again. All this from here, typography pattern, link shape. All this is repeated.
Proximity, you can see that all these elements here belong to the same group. In the same way, these here, in the same way, all of this here is a group, which is very different from this other group here, for example. That is, this way it's easy to identify these page patterns.
On the IBM website is the same thing, look, repetition here in all menu items. The alignment, you see that here it is aligned to the left, here everything is aligned to the left. There is an alignment between these elements here.
There is the matter of contrast. Can you see how this blue on their page draws attention? Whenever it is a link, it draws attention to the fact that there is a little blue color there.
Repetition, card pattern repeating itself, typography size, always the same typography size. Here is a title similar to this one, uses the same font size. Everything that is a link, look at how their link pattern is very strong here with this little blue, you can tell that it is a link.
Proximity, you can see here, these elements here are a whole group, these others are another group. So, that way you can start building interfaces that are really scalable, that have standards and that's really cool. And your challenge today, of course, we wouldn't leave without Alfred's Challenge, right?
And your challenge today is very similar to this one. You're going to search, you're going to look for 3 to 5 homepages of websites, very similar to what I did here, I researched these three and you're going to try to identify these patterns of alignment, contrast, proximity and repetition. Go ahead and take a print, and if you want, there's an extension here, which is called GoFullPage, I'll leave the link for it, this one is from Chrome, if you click on it, it takes a print of the entire page, so if you want to take a screenshot of the entire page and put it somewhere to comment on you can do it with this extension.
Try to identify these patterns, because this exercise too, like the previous one, deviates a little from the course project, but it is very important for you to start thinking about design, composition and even these elements of usability. Do you see it as a button, does it look like a button? How does the link look like a link?
Like when the user enters the page, he can see that, "hey, is this one the most important button on this Home"? That way you can start to understand these concepts of usability, alright? And you already know, right?
If you want to know more about typography, colors, design elements, click on this card on your screen, because in the next class we'll talk a little more about it.
