Lessons

Lesson Info

Readability and Visual Hierarchy Landing Page Design

how do you design fans and welcome back if I had to choose one concept of good landing page design that people mess up the most often it's writing for the web landing page readability? The reason is is because there's such a disconnect from how designers right for their websites and how people visitors actually read text on landing pages. When you design your landing page, you're writing it with the perspective that people are actually going to read all that information and make a decision based on everything that you provide to them. When your visitors actually come to your landing pages, they're not looking to read and make a conscious decision. They're looking to scan and just try to find whatever it is that that appears to make sense and that appears to be what they're looking for. And then they're going to actually click in this lecture, we're gonna talk about that a little bit more detail. We're gonna go through a bunch of cool examples. I'm gonna show you some practical techniqu...

es that you could use to increase your landing page readability right away and improve your conversion rates. As a result, let's just jump quickly into the slides. Jacob Nielsen, one of the founders are one of the fathers of this usability movement said something very succinct and very powerful how users read on the web. They don't, that's something you should remember and also not something that you should take personally whether or not you're an established company whether or not you offer an incredibly incredibly powerful value packed service for cheap price. People still don't read. Okay, so what do they do? People glance and scan, They don't read their there. They're looking for key terms that are relevant to them. This is something especially true early on in the decision funnel, early on in the buying funnel where they're not highly committed. Once somebody's actually ready to make a real purchasing decision, that's when they'll start reading, that's when they'll start analyzing in detail, all the different aspects and permutations of what it is you offer. But when people first come to a landing page, they are not reading. Why don't people read? Well, people are busy, right? That's one big reason why people don't read. There are a lot of different options out there. There are a lot of different competitors that they might be looking at. And there's a lot of other things in their life that are competing for attention to complement the business is that people don't need to read it all they know. And we've been conditioned from all our experiences on the web that not everything on my landing page is gonna be relevant to me. Not everything that I see on this page is going to be something that I actually want to even need to read. So, people have been conditioned, they're busy. They don't need to read it. All scanning is how they find the things that are relevant to them if you want to have an interesting example and this is from steve Krug is that the user perceives your site like a billboard driving down the highway at 60 miles an hour more like a novel, a novel you're sitting, you're absorbing, you might be rereading lines that you really enjoy. You might be dog earing some pages that you want to come back to. That might be from your perspective when you, when you write for your website, what people see When they come to your landing page is much more similar to the experience of driving by a billboard on the highway at 60 mph. And also important is that users will focus on things that match what they're looking for, right? They have a preconceived notion of specific buzzwords of specific industry terms that they're looking to see and their eyes will quickly go to those buzz words. There are certain words that will, their eyes will go to very quickly like free like trial, like sign up like the text and your calls to action. But even throughout your landing page copy, a person's eyes are going to focus on what their brain is expecting to see on the right. We have this funny graphic of a what I think is a ridiculously bad billboard because who is really going to read all this and it's much more sophisticated than it should be. We're gonna talk about the reading level and the simplicity of your landing page, broccoli admittedly more interesting than explaining hacker proof passwords. I mean I don't even get the joke until I think about it. It doesn't even really make that much sense. But I mean it's just a terrible billboard. This is a better billboard, right. Better coffee, less bucks. I could, I could read it going by on the highway. I clearly understand what they're promoting good coffee for cheap. Um, it just makes sense and that's exactly how your landing pages should be designed when it comes to designing pages for, for readability. Here are a few important rules to keep in mind, create visual hierarchies. The inverted pyramid, right? One of the classic guiding principles for readability on the web page is the inverted pyramid rule which is putting the important things first you need to take time to think about your products and services. If it's a landing page that's trying to get somebody to submit a form the top of the page, right? That from the headline, sub headline and then down it should be the most important things that you offer. The most defining characteristics of your products and services, the things that are comin through all your competitors that also offer this product or service. Those are things that are less important to a browser because they intuitively know that that you're going to offer those things or those are those are details included in this product of service. So the inverted pyramid is very important. The most defining characteristics, the most important things should be at the top. Very important. Use bullet points. Use bullet points a lot. In fact, you should practice taking your short paragraphs that you have on the landing page and turning them into bulleted lists. They might not be all grammatically correct. They might not look professional in your mind or in your boss's mind, but I promise you they will convert better. People will stay on your pages for longer because people like to read short sweet bullet points, highlight key terms. When I say highlight, I usually mean bold, make your key terms bold even in your bullet points and short paragraphs, but you can also change them to a different color as long as you're not introducing too many different colors in your landing page. Short paragraphs very short. Okay, 3 to 4 sentence paragraphs. That's how short I'm talking about. If you need to write a paragraph and it's not gonna be um bullet points, which is obviously common. Not not all the text on your landing pages are gonna be bullet points and paragraphs should be broken up into 3 to 56 sentences maximum. Then there should be a break some some white space, potentially an image to break up the flow over the page. We're gonna talk about images soon but keep in mind very, very short paragraphs. Don't write in full sentences. This is not a grade school english test. You do not need to write in full sentences. Right in short, can captivated truncated sentences. Use simple language like don't use contacted on your landing pages ever. That's not a good word for a landing page. Use headlines on every single page. It gives the user a sense of orientation, a clear headline and a clear sub headline. Tell the user where I am on the site and they prime the user what the rest of the information is going to be about. That's why it's so it's not just about having a user. Oh, this is this product page or this is just came in my template. It's really important from a psychological subliminal perspective. Priming the user what the rest of the cop is going to be about. Makes it easier to digest the rest of that copy completely avoid jargon and hyperbole. Right? This is a big problem. You're not the world's leader in whatever it is you offer you, you don't have millions and millions of customers. I mean maybe you do, but I doubt it. Right. This is not the best thing since since sliced bread. That's those are all very subjective market tests. Right? You want to just have simple, clear factual information, especially in your headlines As a, as a quick way to do this. Try to remove 50% of the adjectives from your site and introduce more objectivity, introduce more factual elements. Focus on the essential information that your visitors need. Right? This is similar to the inverted pyramid concept and it also ties in to removing jargon and hyperbole. Keep it very, very simple. You should aim for an eighth grade reading level. Even if you sell expensive B two B product and services, you should aim for an eighth grade reading level because sophisticated people with sophisticated minds go into dummy mode when they land on landing pages, they want to see things very simply clearly if they have to think and they have to access their their vocabulary and they have to access there sophisticated brain mechanisms when they're trying to decipher what it is that you sell, more people are gonna leave and fewer people are gonna convert and fewer people are going to move through the rest of the buying cycle. If people have to access their vocabulary and they have to access the sophisticated mechanisms in their brain to understand what it is. You sell more people are gonna bounce off your page and fewer people are going to progress through the rest of the buying funnel. Right, So simple vocabulary, eighth grade reading level is ideal. Let's talk about a few different important elements of landing page readability. Important things should be more prominent. Right? The important thing is to be distinguishable by color size, weight padding and or location on the page. If you look at this example over here we see here, it says more customers, less effort, right? That's very, very prominent. It's very clearly important. We have the action block over here. on the right hand side of the page. We have a sub headline. Another line of objective information. You have a list of bullet points, right? Things are organized in a way that the elements have room to breathe and the most important things are distinguishable by size and there towards the top of the page. Okay, so that's important to keep in mind that important things should be more prominent. Take a look at this landing page over here, Right. This is a real website. Am I making this stuff up? There's a complete sense of dislocation on the page, Right. I don't, I don't know what's going on. The color scheme is not only not helping me, it's confusing me with what's important with what's prominent. There's no visual hierarchy. I don't know what the main call to action is. I don't know where I'm supposed to go. I don't know what's more important. It's, it's, it's just one big confusing group of elements. Right. What they did not do? They did not eschew obfuscation. There's no sense of orientation. Where am I on the site? How do I get back? What's the next thing going to be like? There's no sense of scale. There's a bad use of color for prominence, right? You have this dark blue, the dark red, the dark green, you have that in the main body content and you have that same color scheme up in big blocks above the the search bar towards right below the main menu. Another big problem. It's unclear what's clickable. Hearkening back to our previous lecture, I don't know what I could click on. What I can't click on. There's no clearly clickable calls to action here. I don't know what's important. Right? We said that before. I don't that's the real key takeaway here. I don't know what's important. Here's a great example of using grouping to create structure. This is another great tip that you could use on your landing pages to help create a visual hierarchy and make it easy for the user to understand and navigate your pages as you can see in this example on the right. They used headings to create a visual hierarchy. They have different visual styles with the with the green button, the red button and the yellow button over here. That helps create a sense of organization and structure. Different elements are put in clearly demarcated containers. There's I could my I clearly sees three distinct boxes. Right? This is a visual representation. Visual hierarchy. 101, right. It's a really clear way for me to understand that these are different content sections because they have their own containers with their own visual styles, creativity and innovation need not suffer. Right? A lot of designers feel that I have to be iconoclastic. I have to be wildly individualistic, right? But this is not the case. Look at the mock up on the left. It's the same website that we saw previously. This is a visually distinctive style. This is unique. It's professionally designed. There's high production value. It's innovative. They're using colors beautifully. They're using graphics beautifully, but it's organized. There's a clear sense of visual hierarchy, right? They've created a simple intuitive but still creative experience and that's the important thing. Take a look at StubHub StubHub here does a good job at creating this sense of visual hierarchy, right? Because there's a lot of information. Here's the page for events in new york all dates. They do a good job by putting different types of events into, into these different containers. So, I have a container here, these different containers, but I felt that it was kind of hard to to visually understand that these were different containers because the background color is this very, very light gray and there's not that much that distinguishes these containers from themselves. So visually it could be a little confusing. I'm not saying it's bad. It's still illustrating the concept of, of visual hierarchy. But I went ahead and I added a little bit of CSS to the live page and I created this design, right? And this is not necessarily exactly how I would do it. It might not look as pretty and as minimalist as the previous example. But we have a darker background color and we have just a simple box shadow Behind each one of the containers and there's a little bit more padding, right? And as you know, I love to do, I ran a usability test, 60% of people preferred our design. 40% of people prefer the original design. The question we asked these respondents was imagine you're looking for an event in new york city, which design would make it easier for you to find what you're looking for. And let's just take a look at some of these respondents. Um Number one easier to see with darker border around the images. The shadow around the boxes makes it clearer. Makes a clearer distinction between the events and the different dates. Boxes are better segmented and easier to read. The sections are more segmented from the background looks way cooler. I like this one over here. I like that. It makes the events seem more grouped and easier to differentiate. That's exactly the point. And take a look at this last one just for just for fun. This can't. This guy's, this guy's a this guy is a great guy. This can't be a real test. They are basically the same. I prefer neither. I just picked one so I could let you know that they're the same and equally bad. You must be a happy kid buddy. Um but anyway, that shows that there there really is a difference. Right? So we're removing the question marks. These are real responses were removing the question marks. We're just making the experience more intuitive by creating a more visually effective hierarchy. Here's a very clear example of bad readability on the internet. Long paragraphs clutter there's yelling. If you take a look up here, this is not a full screen image. But if you take a look over here, there's this big contact, us kind of flashing green call to action. You have the flashing thing again over here so there's yelling. Look at this like no one is going to read this, I'm telling you no one's gonna read this. Right? So long cluttered landing page, this is real stuff. I didn't make up the sign in page. Here's another landing page. This is actually a screenshot of the page that we designed for one of our clients. If you could see you have short paragraphs, right short few sentence paragraphs, bullet points, no yelling, right? Everything is soft, everything is pleasant. That's good. That will increase conversion rates. A lot of times, designers feel they need to be garrisoned in your face. But that's not the case. Another big important aspect of readability is formatting your headlines properly formatting your headlines. For readability. You want your headings to give organization and structure to your page in order for them to to provide that organization and structure. They have to look like they're organized. They have to look distinctive, so obvious visual distinction. If you look on the, on the left, you have clearly larger H one header, one, a clearly smaller header two and your paragraph copy is clearly paragraph copy on the right hand side. They are all different sizes but they're not distinctive enough For the brain to immediately without thinking, recognize that they're different sizes. So when you're writing your H1 and you're writing your copy and the different heading levels make sure that they're clearly visual distinct, they're they're clearly different in size. Okay, you don't necessarily want to go and introduce to too many different font styles, we'll talk about that. Um but you definitely wanna make them bigger than the next level. In the hierarchy, consistency is key with a lot of these different concepts, we're gonna talk about consistency a lot. Each heading level throughout the site should always indicate and represent a consistent level of importance. So if a product title is H2, it should always represent that level of level of importance. If the headline of a content section is always an H3, it should always be an H3 throughout the site. So I will talk about this concept early on in the course of memorability, I should not have to relearn how to use your site, I should not have to relearn what the different elements of your site represents. So the second time I come back to your site or the second time a user comes back to your site, they should immediately understand, oh this type of label represents this level of importance. This heading one represents these types of levels of importance. Of course they're not gonna be consistent through every site on the web but internally within your sight heading level should always represent the same things. Another thing that's important that I see a lot of people making mistakes on don't float your headings. The headline should be close to the text that comes after it And further away from the text that precedes it. So if you have two paragraphs and each has a heading, don't put your heading equal with with 30 pixels of padding on top and 30 pixels of padding on the bottom. It might be 30 pixels away from the end of the last paragraph and only five or 10 pixels separated from the paragraph that it contains. So don't float your headings. To summarize let's just talk about a few of our key readability takeaways. Obviously this is not an exhaustive level of everything that has to do with readability on the web. But these are all the essentials. Okay. Omit unnecessary words. E B strunk right? That's his biggest thing. Omit unnecessary words. Be helpful format your text for scanning. Not for reading. Remember no matter how great you think your copy is people. This has been proven by Jacob Nielson time and time and time again through hundreds of research studies. You can look them up online. People do not read your web pages in the beginning if you need this is something I didn't mention but I'm gonna mention it now if you need to add supporting text on your landing pages. Try to hide them in tabs or hide them in information pop overs if you want to have a longer text. Okay so be helpful bullet points very important. Use bullet points and bold your key terms. Use visual cues, formatting your heading properly to organize thematically related text elements. You could have those sections right? You could have like we saw one of those examples content sections represented by padding and a different background color. Use those visual elements to organize your content in like in like thematically related themes, formatting your headings properly. No floating clear visual distinction in actual font size. The inverted pyramid structure. Put the important things on top hide longer paragraphs and tabs and pop overs. Right? I forgot that I had that bullet there, avoid jargon. Right? Be factual and objective remove adjectives. Just the facts. People want the facts. Try to remove as much subjectivity about what you offer as possible and increase and introduce as much objectivity into what you offer and into the different aspects of your product and services. A quick exercise to end this lecture, copy and paste all the textures and home page into a word editor. Okay, this is gonna be a fun one and I think you all could do it. I've done it many times and it works copy, paste all the text from your home page. Rewrite it using half the amount of words, not 70 lop it in half, 50% off. And now ask yourself after you reread it. Did you really lose any value? Are you still able to convey the same amount with half the amount of words for the ambitious ones in the group, The ones who really want to take this to the next level After you've rewritten by by by 50%. Rewrite it again using 30% less words. I guarantee you you could do it and I guarantee you if you do it well and you use bullet points and you shorten your paragraphs, you don't write in complete sentences. You will not lose any value. You will not lose any information, especially on your landing page. That's typically a person that might be a person's first page towards progressing through the sales cycle. I'm not talking about your shopping cart page. I'm not talking about your e commerce product detail page. We're talking about basically gin and simple e commerce landing pages here. You will not lose any value. So do that exercise. I think it'll be really fun. I think it'll be really informative. And then I will see you guys very soon in the very next lecture