Auto-generated transcript Avoid labels where it makes sense. Now what you're seeing here is just a tip from my design book, which I keep talking about all the time, you know, in my videos. I basically wrote a book on web design and this is one of the tips in that book and we're going to discuss this and go into a bit more detail about this in this video. So yeah, avoid labels where it makes sense. Now the thing with labels, and I should probably mention this right from the beginning, in forms, in HTML forms, you always want to use labels all right we always want to use labels in forms because of accessibility because of the user experience we want to use labels in forms all the time but when it comes to other things like for instance this profile card over here and let me just zoom in so we can see this more clearly and no need to read all the text here this is not really important for this video i'm going to explain everything so just look at this profile card now you can already tell that this looks horrible right this looks ugly it's poorly designed it's badly designed and there is only one reason why it's so ugly like we can we can make this a very good design in a very simple way so the only problem in this profile card is a lack of visual hierarchy now you can see that aside from this profile picture here I guess everything else is presented in this kind of label value format right like like name aaron smith job software engineer company google like everything is in this label value format and this is just not good right the problem here is that everything is given equal importance every label every piece of data in this profile card is given equal importance and so we don't know what is important we don't know what we should be focusing on here because everything is just equally important right so we don't know what to focus on if everything is important and nothing is important and so since there is no visual hierarchy in this profile card there's just we just don't know what to look at right and it's such a horrible design because of that now the thing with these labels is we don't actually need to have them over here why because we already have enough context like if i have a text like aaron smith next to a profile picture what do you think that means right it probably means the name of the of the user right and if I have software engineer at Google right below that, right? That probably means that that's his job and the company he works at, right? We don't need to specifically add these labels like name, job, company over here, right? So when we have enough context, we don't need to add labels. And I'll show that to you in the next example down here. You can see I removed all of the labels and just emphasized the important information a bit, created a sense of visual hierarchy, and now it looks a lot better right so let me explain the changes i made over here you can see that this new this second version of the profile card looks a lot better the profile picture is obviously the same but the name since let's talk about visual hierarchy since the name of the user is probably the most important part of the profile card right like if you're looking at a list of user profiles probably the most important elements there are going to be the profile picture, the profile picture and the name of the user, right? So we emphasize that. We emphasize that by making it bold and by also increasing the font size here, as you can see. So that's step one of visual hierarchy, right? Then we just remove all of the labels. We just use the context to specify what information this is going to be, right? Like Aaron Smith, we already know this is going to be a name. We can tell that much. Software engineer, Google. We can probably tell that this is going to be the job, the role, and the company that the user works at, right? We don't need to add rigid labels to explain that much. We have enough context in this piece of data that we can just infer what the correct label is going to be here. Enjoys X hobbies in his spare time. So this is kind of a label because we do have some filler text over here, right? But it's not a rigid label like hobbies and then the list of hobbies. It's more like just a filler text over here to add some extra context, right? And so you can already tell that this is a much better version of the profile card than the one I have up here. And the only difference, the only difference that I really made, aside from the color, I guess, you don't even need to change the color here. But the only real difference I made here is the visual hierarchy. In the first example, there is no visual hierarchy. Every piece of data has the same level of importance. the labels and the values are the exact same, right? In the second example, there is a sense of visual hierarchy. We know that the profile picture and the name are the most important elements on this page. We know that after the name, the job role and the company is probably the most important. And then we also have these hobbies down here, which are probably the least important elements in this component, right? And to make them easier to scan, we've also made the actual hobbies bold instead of the normal font weight so they're easier to scan at a glance right and that's just a sense of visual hierarchy we just added a sense of visual hierarchy to this component and just by doing that we've made it look so much better and that's really what I want to talk about today visual hierarchy and you can see that just by adding a bit of visual hierarchy to your components you can make them look so much better right and it's not even all that difficult All you have to do is just first ask yourself what is the most important element on this page right and then once you have that just emphasize it in some way You have tools in your design belt like font size font weight color spacing borders shadows all of these things right elevation all these different design tools that you have use them to create a sense of visual hierarchy figure out what is important in your component and then emphasize that or de-emphasize it in some sort of like some sort of design tactic right use color use font size use borders use whatever you have but emphasize the important information in some way create a sense of visual hierarchy on the page like for instance okay this is the most important element this is the second most important element this is the third most important element and so on and so forth right and the best example of this I can tell you is checkout pages you've probably bought some stuff from Amazon or eBay or something like that right you've probably used some sort of online store in the past have you ever had a problem with finding the payment button on a checkout page no right because in In any checkout page, the pay now button is the most important element on the page. That's why they emphasize it so much. That's why it's always easy to find, right? Like that's the simplest example of visual hierarchy that I can give you. Go to literally any e-commerce store, any e-commerce store at all, right? Open up the checkout page, add some random item to the cart and open up the checkout page. You will instantly find the payment button. Why? Because it is the most important element on the page and they make sure to emphasize that so the user can easily find it because it is the most important element on the page. They don't make money without it, right? And that is the best and simplest and easiest example of visual hierarchy that I can give you. You want to emphasize the important stuff and de-emphasize the less important stuff. I can tell you for sure, in any e-commerce store's checkout page that you open up right now, you're going to find that the payment button is the easiest to find and the go back button is the hardest to find because that's something they don't want you to do, right? So that's the best example of visual hierarchy that I have for you. Emphasize the most important information. De-emphasize the less important or the less desirable information. Now let's discuss some caveats because no design rule applies to 100% of scenarios, right? No design rule at all is ever going to apply to 100% of scenarios. So let's discuss a couple caveats to this design rule of avoiding labels, right? First of all, there are certain scenarios where some sort of labels or clarifying text is actually important. And the best example I have for this is on the Bionic website, which I will show you right now. So Bionic is a supplement company, and no, they did not sponsor my video. But it is a supplement company, and if I scroll down here, I need to find a certain element. Yeah, something like this. So ignore the text up here. This is not part of this example. you see all of this data down here these statistics here this is kind of like what i want to explain right now and remove this offer i'm not buying anything the actual data here the actual data is something like six milliliters over here 10 plus 24 plus 250k plus this is the actual data right and the labels are down here years of research global members studies published so on and so forth and the icons are just like an extra kind of a label right now what's going on here if we if we completely remove these labels if i remove this years of research text and this icon over here right you have no idea what 10 plus means 10 plus what 10 plus members 10 plus sales 10 plus what right you have no idea what this number means you have no idea what any of these numbers mean without these labels right but at the same time we don't want the labels to take up all the like importance in the page right they don't we don't want them to be super important super emphasized on the page the data is still the most important elements on this page right so above all else what you want to avoid is the name value format which i had in this um terrible example up here no matter what happens you want to avoid something like this right where all you have is an it's a label and then the value right you don't you want to avoid this as much as possible what they have over here what bionic does and how they handle this is they have the data over here which is the largest and most important element in this whole like element over here the data is the most important piece which is why they emphasize it so much they have big black bold text over here it is large text it's the largest text in this whole element so we know that the data is the most important element in this page in this in this element over here right now again these these numbers on their own don't mean anything so we do need labels to add some clarifying text to provide some much needed context in this page right and so we have labels over here but we make sure to de-emphasize them you can say that see that they're not they're not the they're not as important as the data here right they're a lot smaller text they're a lot more de-emphasized right but they're still there because we do need them to understand the data icons are the same we have icons here different icons to indicate what exactly this piece of data even means right so icons here are serving the same role as a label right the only difference is that they're also less emphasized than the data so when you want to when you want to use labels as clarifying text right when the data is not enough to stand on its own right like if I go back over here you can tell that Aaron Smith is going to be a name. You don't need a label there, right? You have enough context just from the data itself, but here you don have that context All of these pieces of data are just numbers right They don give you any context on their own So you do need labels here The only difference is that here you use labels as clarifying text You make sure to emphasize the data, which is the visual hierarchy element. You want to emphasize the most important piece of the component. So you emphasize the data here because that is the most important element on the page. And you have the labels here just to provide clarifying text, right? So the user knows what you're talking about, but the data is still the most important element on this page. That is the lesson I'm trying to pass on to you. I'm sure I can find another example as well. If you want to really nail this concept down, probably on this page. Yeah, see something like this. So again, you would have no idea what these numbers mean. What does 87% mean, right? What does 75% mean? You have no idea what this means if we don't add these labels down here. But again, the piece of data is still the most important element on this component, right? The data here, the number is the largest element on this component. Just from the font size itself, you can tell that the data is still the most important element on this page, in this section. But since these numbers don't provide any context on their own, we want to use labels as clarifying text here. We want to use icons here. like you can see this icon here is kind of like signifying physical recovery. This label over here is regarding sleep quality. So we have a sleep kind of icon. We have a moon icon here to signify sleep, night time, etc. This is about energy levels. So we have an energy lightning icon over here. So we use labels and icons to provide some clarifying text to give some context so the user knows what this piece of data even means. But the data is still the most important elements on this page right if i if i instead of this visual hierarchy component if instead of this all i had was the label value format over here right if all i had was something like this energy levels 75 physical recovery 87 sleep quality 95 if i had a label value format like that like something like this it would look horrible right it would look completely horrible Even if you added the icons, even if you did all the other stuff, if you didn't have the sense of visual hierarchy, if you didn't emphasize the data and de-emphasize the labels, it would look horrible. And that is what I'm trying to pass on to you. Now, this is how you handle labels as clarifying text, right? We already talked about how you can completely eliminate labels when there is enough context in the data itself. Now, we also talked about how we can use labels as clarifying text when the data doesn't provide enough context to stand on its own, right? Now, let's discuss the final caveat. So, what happens if you're on some information-dense page, right? Like, if you're on a really information-dense page where there's just a ton of information and the labels are actually more important than the data itself. So on pages like, let's see, what if I show you, so let me show you this website, GSM Arena. And this is just a website that gives you reviews and specifications on different mobile phones, right? Now, if I just open up some random phone over here, any of these will work. Yeah, Galaxy S25, let's look at this. So, look at all of the phone specifications over here. you can you can tell that this is a very information dense page and in pages like these the labels are actually a lot more emphasized than the data itself you can see that the labels over here their uppercase their large text really large text and they're red they're a different color as well even here the sub labels you can see that they're a different color they're bolded and the actual data here you can tell that this is just you know regular text there's no styling on there's nothing on it it's de-emphasized completely so you can tell that on this page the data is the most important element in this entire page right and that's basically what's going on here now on information dense pages like these the labels are the most important elements on the page not the data and why is this because this is because users are looking for the labels not the values right So if you're, for instance, trying to find a new phone and you want to figure out if this phone has a good camera or not, you're going to be looking for the word camera, right? You're going to be looking for the labels. You're not going to be looking for something like this. Like you're not going to be looking at all of this weird text, right? You're going to be scanning the page, quickly glancing at each label, trying to find the label camera. So you can figure out what kind of a camera this phone has, right? If you're looking for something like battery, right? You want to find out how long this can last on a single charge or something You're going to be scanning the page for the word battery You're not going to be looking at looking for all of these weird words like li ion wired wireless You're not going to be looking for these weird words. You don't know what these mean, right? You're looking for the word battery So on the information dense pages like these these pages that are just full of information where you know that the user is going to be scanning for labels, not the values. On pages like these, it makes sense to emphasize the labels, not the values. So in all of the previous examples, we've seen that we're emphasizing the data, not the labels, right? We're emphasizing the data over here on Bionic, not the labels. But in information pages like these we want to emphasize the labels not the values Get it And you can see that this website does that very well you can see that the actual labels are a lot more emphasized than the values the values are completely just regular text no styling nothing the labels are uppercase red a different color and so on and so forth right so you can tell that the labels are a lot more emphasized in this page because that is what we're going to be scanning for on this page so you really you just have to ask yourself if you're if you're building a page where you know that the labels are going to be the most important elements then you should emphasize those right and if you think that the data is going to be the most important element then you should emphasize the data no matter which one you pick the the important thing is to just have a sense of visual hierarchy right that is the key thing that i keep emphasizing in this video so just to recap everything because yeah the video is complete guys but just to recap everything everything that we've discussed up to this point if you have let's say if you have an information dense page right full of information you know that the labels are going to be more important than the than the values you know that your users are going to be looking for the labels scanning the page for a specific label not exactly the values In cases like that, you can just copy this design from GSM or not the exact design, but the design philosophy, basically. You can just emphasize the labels more because you know that your users are going to be looking for those a lot more than the values or the data itself, right? So this applies to information dense pages. Now if your page isn't information dense, then the next question you should ask yourself is whether the data that you're trying to present has enough context to stand on its own, right? So if it has enough context to stand on its own, then we can go and use this kind of design philosophy, right? We can remove the labels entirely and just emphasize the data. We can put the most important data up here and then so on and so forth, right? creating a sense of visual hierarchy and also just removing the labels. Now this only applies if the data that you're trying to present has enough context to stand on its own because if it doesn't then you're going to have to use the bionic style which we'll look at next. But if the data has enough context to stand on its own like again Aaron Smith is a name. Software engineer at Google is the job and the workplace that this user works at. We can tell all of these things just from looking at the data itself. The data provides enough context to stand on its own. So we don't need to add any labels or even clarifying text over here, right? So this is the design philosophy that you can follow if you have data that has enough context, right? But if it doesn't have enough context, then you should try to use this bionic philosophy, right? Design philosophy. You should emphasize the data as that's going to be the most important element. And then you should add some sort of labels or clarifying text over here. You can add icons. You can have labels over here, but you need to de-emphasize them so they don't take attention away from the data itself, right? This is the visual hierarchy component that I keep talking about. You want to emphasize the data. You want to add labels as clarifying text just so the data has enough context to feel complete, right? And obviously, you can add icons. You can do all of these other things as well, but that is the important element. You want to have a sense of visual hierarchy and you want to emphasize the data or the labels depending on what kind of page you're trying to design. Above all else, just always make sure that you have some sense of a visual hierarchy, all right? Because the main problem with designs like these, where all you have is a label and value, is that there's no visual hierarchy. Every piece of data has the same level of importance, right? So there is no visual hierarchy. It's just equally important, right? That is what you're trying to avoid. So yeah, depending on what kind of page you're trying to design, you can follow any of these design philosophies. Just have a good sense of visual hierarchy and your pages will look so much better than everyone else. It is as simple as that. Anyway, that is all for today. I'm going to stop the recording over here. If this video was helpful to you or if you liked or enjoyed watching it, then consider liking it, subscribing as well. This is a very small channel I'm trying to build this up and grow this as fast as I can also trying to become consistent with my youtube uploads and everything So yeah if you enjoy this kind of content and feel free to subscribe because we're only gonna go up from over here and Yeah, if you want to find this book that I keep mentioning This is the design book that I wrote and if if you want to improve your design skills Then consider checking this out as well because it is really really useful I'll have a link to this in the description or you can just go over to my website and find it there as well and yeah, it's full of information and you can just read it and apply this and just Get a ton of value from this right? It will improve your design skills a lot and a lot of the videos that I make on this channel is just me adapting these Tips that I wrote into some sort of a video format, right? So yeah if you want to get this as well it's completely free by the way just go over to my website or click the link in the description I'm sure I'll have some have it somewhere in the description as well but yeah that is all thank you for watching like subscribe and if you want to work with me or something then check out my website again the link will be in the description and that is all thank you for watching and I'll see you in the next one