Lessons

Lesson Info

Using Videos, Graphics and Imagery to Increase Landing Page Conversion Rates

how do you design fans and welcome back out of all the different tangible elements that you're going to add to your landing pages. Images, graphics, videos, illustrations are the most important things. A landing page without any graphics without any imagery. It looks naked, it looks just not complete, unfinished. It just gives off an immediate sense of unprofessionalism. A landing page where images are used properly creates a warm, welcoming and cohesive feel creates the environment, the aesthetics of the page in a way that will absolutely increase your conversion rates when done. Right in this lecture, we're going to just run through a bunch of different important techniques, practical ways that you could approach adding images to your landing pages in a way that will increase your conversion rates and will increase the time people engage with your pages. So let's just quickly jump right into the slides. Images and graphics of the limbic systems. Favorite asset. Remember we spoke abou...

t that limbic system which is that middle part of the brain that is responsible for all these gut reactions, visceral reactions, falling in love, feeling warm feeling, trust and safety. The emotionality of your landing pages completely conveyed through your use of images and graphics, imagery is the number one most important component that will give users a first a good first impression. We've mentioned this a few times and I'll mention it again that first impression that that sense of high quality, that sense of production quality of professionalism is conveyed. It's it's decided by the user studies have shown within a half a second or even less of a user landing on a page and immediately feeling of oh, this is good. Oh, this is what I'm looking for. Oh this looks great. This just makes sense. This is this is the type of website that I want to be on that. I want to spend more time on. Look at the image of the right artists and baby products and high quality imagery like that creates, it evokes emotion, it creates a sense of belonging. It creates a sense of that thought and effort was put into this landing page and this is a place where I want to spend time. This is a place where I want to shop. Alright, good use of imagery could spell the difference between user staying and users leaving. Here's a couple of tips for where images improved converse rate and how images can decrease conversion rate. Images will improve conversion rate when they tell a story. The image, the image is just not some cut out from some stock photography. The image conveys a message. It tells a story when there are people in it. That's another important aspect of using images that you want to have people in your images as much as possible when they support the product or service based on conventional understanding based on my conventional understanding of your product or service. If I'm shopping for women's boots are from shopping for software, I should see certain types of images for women's boots and certain types of images and illustrations for a software product or a device, something like that. So that's also important as well. Very important is when images evoke emotions, which is why it's so important to have real people, not necessarily just stock photography you found online. When possible, if you evoke an emotion, if you could get someone to feel sad or happy or anxious or enthusiastic, you'll have an incredibly higher level of engagement on your page. When your images help clarify a confusing concept. You see this done all the time with software companies with B two B goods and services, an image, a product demo or an image of the actual product that you're going to get or that you're gonna interact with. That helps clarify a complicated product or a complicated service is hugely powerful, right? Because the brain just processes that processes that image in the background and it helps them read the text and read the copy and understand what it is, you offer better you want your images to be high quality condensed so they don't take up too much bandwidth original. You want to avoid stock photography when you can and they want. And overall those images should give your site a professional look. Images will decrease conversion rates when they make the text harder to read. So if you have a background image, we're gonna talk in the next few slides about a bunch of different tips and tricks, but when the when the image makes the text harder to read, you lose that you lose the importance of the image and you lose the importance of the text when it's unclear what the image is. If my remember this concept of don't make me think if if an image is complicated or it's unclear or it's fuzzy or it's pixelated and I cannot really process easily what this image is. You're going to decrease the effectiveness of that graphic image is also will create confusion when they're not in line with the brand aesthetic or the brand style guide or the brand messaging. So think about color schemes, think about emotionality, think about aesthetics. They're not going to be great when they look like typical, typical stock photography. You've all seen websites that have that just clearly cheap, you know, free stock photo sort of look, you typically may not have the budget or the capacity to include original photography. Um but when you can try your best to to make that happen and when there are too many of them, if you have too many images, too much, too many illustrations, too many graphical components, that's gonna also decrease the effectiveness and decrease your conversion rate. I want to show you a bunch of different examples for helping you create background images in a way that will not detract at all from the text that's overlaying those background images because this is one of the most trending common styles and it's often overlooked. The importance of clarity. Going back to the very, very first lecture in your presentation, background image tips and tricks. First of all, all of these screenshots are from landing pages that that we've designed in house for our clients. So one is using a solid background container through the text on top of an image. So over here we have um this very, very emotionally charged image. Right? It's, it's really, really well done original photography and you have the text very readable on a almost completely opaque background color. Another trending design is to use an overlay that matches your brand style, it reduces the brightness and also the complexity of the image. So over here we have a screenshot of a landing page we designed, you have step one and step two. Both are pretty intricate images. But using these color overlays which can be done in Photoshop or using CSS, you reduce the complexity, you reduce the brightness and you create a unified color scheme For your website. And if you could, you could tell that the text is very, very easy to read over those images instead of using a colorful overlay, you can just use a solid black overlay. That's something which is often done to reduce the brightness of the image. You typically want it at 80 or 95% opacity. Oftentimes LCU landing pages that will have a A dark overlay but at 20% capacity and still the text is very difficult to read. So make sure the text is as easy to read and you could use this slide as an example. This technique does create a very polished professional sort of corporate look and does not reduce readability at all. Another great tip to uses is positioning of your background image with CSS you could float or align the text off to a solid portion of an image. So if you see in this, in this example for another client of ours you have the background image of the map with all the different map pins but the text and the cost to action in the description is floated to the left where we specifically positioned it over a solid part of the image so there's no interference with the actual graphical component of the background image. Another great tip is to use gradient overlays. This is something which also you could do with CSS or Photoshop or in whatever photo editing tool you use where if you don't want to just have a straight overlay whether it be white or black and then just reduce the opacity a little bit, you could have it fade. So if you see the left hand of this image is almost pure white and it fades to opacity over the actual background image where there's more coming through the image on the right hand side of the image. So you get that nice professional feel of there being a background image, but the text, the headline and the paragraph is very, very clear and it's still very, very readable above it. Another one of my favorite tips, this is, here's another landing page we created for a client in the UK is to blur the background image but blurred enough where the text above it becomes very readable, but not too much, that you lose the concept of the image. So if you, if you look at this page, it's for wedding, wedding photography is what we're going for here is kind of advertising to people who want to advertise it in front of a big community of brides and grooms to be and you kind of have that background blur, it looks like a party, some sort of event, people socializing. It's blurred enough that the text is what's really readable, it's really clear, but you still have the concept the emotionality that that image is conveying. That's another great tip. Feel free to combine different techniques to create a unique experience without interrupting the readability of the site. So this is a screenshot of our Adventure Media's website that we're redesigning. And you see you have those background images, you have the solid white container to create a place where the eye is drawn for the text and then you have on top of that, a cool gradient overlay behind the headlines. So this is a unique, it's trendy, it seems pretty modern. It has some imagery, some graphical components, but ultimately it's still very readable alright, images can and should be able to replace text. This is it might be a novel concept for some of you, but it's when it's done well, it's it's incredibly, incredibly powerful. Can your imagery describe your target market, your price point, your level of expertise when your imagery could replace and substitute text or make text easier to understand the same way a headline Prime's a user for the copy that follows it. So to imagery primes the user for the text that it represents for the products or services that represents in this example for another client of ours, they sell a product that itself is not complicated but there's a huge range in the industry of custom walk in coolers. Some of them are very small that are used in homes, some of them are massive that are used in warehouses and they sell ones that are used mid size displays like in seven eleven's quick marks, things like that. So by the image clearly defining the product and that image being so prevalent and so prominent on the page, it clearly substitutes text describes our target market. This is the type of cooler we offer meaning, it's not the ones that go in warehouses and it's not the small miniature ones that go in homes. These are the types of coolers that you'll find in the display at a 7 11. This is our target audience. You immediately get a sense of price point, right? Um, the fact that we're showing one of our product images inside the store describes expertise. So when done right, imagery could replace text. Right? So, so quite powerful example there don't overlook the importance of icons and thumbnails, right? They create a sense of structure, cohesiveness and organization. Here is another example of a landing page for a client in this top section over here. Airport transportation abed for hotel accommodations. A guy surfing, right? These are things that help the user makes sense and they prime the users for what is to follow with the text. We spoke about how people don't read, right? They look for things that are relevant to them. They look for representations of what they were expecting to see. And if somebody is coming to this page which is describing a surf camp and what they want to know is hey, how do I get there? Do they provide some sort of transportation? Oh, I see. I see an icon of a plane that is probably going to talk to me about transportation options and yet it does. So their eyes will immediately go to that section and potentially ignore these two sections that are not important to them. Right? All because of the good use of icons. So icons are very important, thumbnail images down here, we could have created this page without any thumbnail images. We have some imagery at the top and we just we're just talking about a different different surf packages but they create a sense of organization. These images not only act as relevant information to the user, but they really act as structural components to help break up these different content containers. Right? So without those images it would just look like a lot of text and a few buttons with these images. It looks more professionally designed and it looks it gives the user a clear sense of structure and organization in that section of the page. Right. So thumbnails and icons very, very important. Uh could do wonders. Images could also add a lot of interest and visual appeal. Right. If you see your landing page that just simply has a lot of text in a row. And here's another example of a page we designed for a client using unbound and this section just kind of came out with just a lot of text in it. So what we did was we took brand style guides, we created these these icons and we use them, they're not really traditional icons or thumbnails. They're just used as a way to break up the text and create a sense of sense of organization and we de cluttered the page and just adding interest. Right? Just letting the I be drawn back, not in a an obnoxious way, not just overwhelming the text but in a soft, subtle way to make that text more digestible. Right. Really important thing. Another very, very common, powerful and recommended technique is this concept of alternating columns. If you have a section where you're providing your listing different features or different benefits, right? And you're you want to include imagery. So use this alternating column concept where you have left, right, right, left, left, right, and so on and so forth. Where on the top you have the image on the left copy on the right and then you flip it around. That helps the I kind of come down the page in a digestible way where you're not just seeing a straight line of paragraph and a straight line of imagery. It's it's breaking it up. It helps define different sections in specific containers. Right? So I have one container here, a container here and a container here. And this is accomplished with this easy but often underutilized way of breaking up the content into alternating columns. So another great recommendation. Don't miss an opportunity to evoke emotion. Okay, this is really important if you could evoke emotion, especially if you're in the healthcare space. If you're in the retail space really any industry you could be and should be trying to evoke emotion. Here's a image of a homepage without the copy that's above the background image for a photography company they sell cameras. What does this picture do for the brand? Do I even have any idea what they sell. Right, forget about evoking emotion for a second. If I asked a bunch of people to take a look if I did a five second test, I bet you most of the people will not understand what are we Not even guess in the range of what they sell here is just it's like a bland picture of mountains. If you sell photography gear, you have such an opportunity to evoke emotion and here's what the page looks like with their actual copy. I could shop. I could sell but they could have been doing so much better, right? They could have been doing so much better with their background image having photography that evokes emotion of people being together of people involved in meaningful activities. So don't miss that opportunity when you're designing your especially your hero images, especially that hero section. Try to think of a way, try to think of a type of image that you could use that will evoke some sort of emotion that will encourage your customers to engage in a more meaningful way with your brand. Here are two quick examples of companies that really did a great job. Abbott Health Healthcare Company live healthy, strive to be healthier and more vital. Right? And look at look at their image. It doesn't look like stock photography. It just evokes such a sense of joy, such a sense of love. A father with his child relaxing. It looks like almost like in some sort of vacation utopian scene like with the light streaming through the trees. It's just like it just works. I just feel good. I want to learn more about the author. I want to buy their health care. This is the type of product that I want. This is the type of company I want to be involved with, right? It's it makes a big difference. And research has shown this to be true time and time again. Let's take a quick look at a homepage for veterinarians. Again, I don't think that the text is as readable as it could be above this image. I would redesign this page in terms of the information architecture and how it's visually presented. But the point is that the background image is fantastic, right? Once again looks real. Doesn't look like stock photography. High quality evokes emotion. The cute dog, the caretaker giving care giving, love feeling good feeling positive. This is the type of emotion that they want to evoke and they're doing a good job doing that and they are seeing an increase in brand engagement because of that. So important to think about evoking emotion. I was going to include a separate lecture altogether on video, but I'd like to just include it here because a lot of the same principles really apply. Here's a quick word about video when done, right? Video can have a huge, huge. Positive impact on conversion rate, right? Videos are great because they appeal to visual and audio learners, right? Going back to that idea of giving people content in a way that works for them. A few rules don't auto player videos, right? That's just annoying. Let a person pick to play the video of themselves high production quality. Make sure your videos videos are professional, right? A cheaply shot video will absolutely hurt the perspective of your company. They will hurt how people view your company and they will hurt your conversion rate. Keep it short, short and simple, one minute, 90 seconds maximum. Right? If it's obviously it's a longer corporate video could be longer, but if it, if it's an explainer video going on the landing page, 30-90 seconds relevant and informative. Get rid of the Jargon, get rid of the hyperbole, get rid of all the adjectives. Just give my facts, be useful, be objective, be relevant and show me the information that I need. Be very careful with bandwidth on mobile devices. You should definitely not have background videos on mobile devices and you should consider not embedding your videos on mobile landing pages as well. It's almost always best if you're a small company, it's almost always best to host your videos on a third party like Youtube Vimeo or wish to, you'll get the best band with you get the best resolution in the fastest time frame, fastest loading. Obviously if you have your own larger company servers. That might be something which is different. Embedding videos in a lightbox typically worked very, very well. And as you can see here in this image this section over here, why do customers love to recruit recruit with Jazz? HR There's this typical conventional play icon and then that pops up into a pop up video that something which which studies have shown to be very, very effective where the video is out of the way. It's, it's available if you want to watch it and it pops up into an easily close double, attention grabbing lightbox pop over. So that's a good thing to do. Key takeaways, right from using videos, images and graphics properly. Make sure to use high quality images, avoid stock photos whenever possible, relevant to your product and services. Right. Bonus points for evoking emotion. Don't let the image distract the user from reading the text. That something which is very important. Great images like we saw in the example of modern story the walk in coolers, they can replace text and describe your value proposition. E commerce the more the merrier. Right? Lots of product shots, lots of product detail, shots. Images are so important if you sell products, right? Just the more the merrier in almost every case use graphics, icons, illustrations, simple images that will create page structure, visual appeal icons that will prime the user with for what they're looking for and they'll prime the users for what the text that for the text that corresponds to that icon. And in simpler illustration. So use that to create page structure to group like minded elements like all the different examples that we've seen. If you take even some of these principles and apply them to the image layout and the way you use graphics on your computers. Just three or four of these concepts, I guarantee you'll see an immediate increase in conversion rate, an immediate increase in time on site. So I encourage you right away to take some of the key takeaways, improve the infrastructure, improve the quality of the images, improve the information architecture that's being used with images on your site and you will see an increase in conversion rate. You'll see an increase in time on site and a decrease in bounce rate. So with that I will leave you to you and your images and I'll see you guys very soon in the very next left.