Sounder SIGN UP FOR FREE Podcast Podcast

Episode 33 · 4 weeks ago

Persuasive Web Design


Experienced website designer Paul Renault talks to Sean about some of the concrete ways that the website visuals can motivate a user to choose your business over your competitors.

* * *

If you have a small business in Canada, get listed for free in the fastest growing website directory in the country: 

Music from

"Loopster" by Kevin MacLeod (

License: CC BY (

This is the Websites dot c a podcast where we help Canadian small businesses build and maintain an effective website and online presence. Hello again, everybody, This is Shaun Corbett Websites dot c A Marketing. Today. We're gonna talk about web design, but we're not going to talk about it from sort of the frou frou fancy you have to be creative and unique angle that would probably put you to sleep. We're going to talk about web design in a way that makes sure business look more professional and basically helps sort of persuade and convert more visitors to customers. So I'm joined by the Websites dot c A head designer Paul Rena today and Paul is going to talk a little bit about what we do at Websites dot's C to achieve those goals. But first I wanted to just ask Paul, why don't you tell us a little bit about your background. Oh, well, it's nice to be here. Um. In the nineties, I'm was in art school. I was interested in art as a kid in high school and I pursued a degree there and then after I left school, Uh, you know, the web was sort of coming up as a thing and I was looking for a career, you know, a place to apply my skills, and I sort of taught myself in the late nineties after school how to do web design and I've been working as a web designer ever since. And that's about well, that's almost twenty three years ago now as well. So you actually saw the transition from Web one point out to Web two point oh. Yeah. Yeah, I was working at the time when that was going on. Sliders. Everybody wants sliders at that point, that's right. There was well, there was just more functionality things that were possible with browsers, so when it was pretty limited before. Yeah, for sure. Before we get into questions, actually, that just brings to mind I thought I had. I was talking to some marketing people and they they sincerely believe that it is a better world for marketers and Web one point oh because things were cleaner and simpler. I don't know if you agree or disagree with that, but um I do. I can't understand that point of view, and that like, um, I mean, we didn't have mobile designs, so that would that would be the major drawback that you couldn't really you can't really go back now because of everybody accessing with their phones and everything. You really couldn't go back to that sort of era just do a retro site like that. I don't think it would work today. You almost have to design sites for mobile first, and mobile second and mobile third. Now, yeah, that is a that's a trend you'll see as a term like that mobile first where, and that's that's what it refers to. Is your first You're looking at how is this going to work on the phone, and then you worry about the other larger platforms after that. Yeah for sure. Okay, so jumping into it, then I did come up with some questions. Paul and I talked ahead of time about what might be helpful for In particular, killer it was a small business owner who's approaching their website and saying, what could we get changed, what could we polish up that would just give us that that extra in terms of business and customers and tangible results. So the first thing we're gonna talk about today is this sort of visual real estate of a website. In other words, you know that every bit of space on your website could have value and have a use, but some of it has more value than others. So we could you talk about or you'll give me your opinion on the most important visual real estate of a website and why, Well, it's it's obviously it tends to be near the top and left of the page. But people's they they've done eye tracking research on this, actually, and they can show people different screens track their eye movements and then it shows a heat map of where people are looking. So whether or not it's it's showing where people look, which is what we're sort of interested in. So, and people tend to read pages in an F shaped pattern, So they look at the top first, upper left, and they read from...

...left to right, and then they go down the page and they start reading left to right. So most of the visual attention, if you're talking about saying just a page with text and barely straightforward page, it's going to be in an F shape pattern where most of the visual attention of your viewer will be down the left side of the page. Yeah, perfect, And then so you would I mean, I guess that's why a lot of standard design puts the logo in the top left, because that's going to be the very first thing that most people's eyes is going to fall on. Yeah, that's kind of become a standard thing. I do remember back a long time ago, like I when I started my career, we would put logos in lots of different places, sometimes on the left even uh, you know, we're sort of making up trying to figure out what worked at the time. Yeah, I mean I remember even Yeah, some of the early sites would have which makes sense kind of when you think about it. It would have the main menu on the top left right. Yeah, you would see all kinds of but it's sort of become standard now and that's where people expect to look to find, you know, identifying information is the top top left. Yeah, for sure. You know logos can be centered to but if you're going to see a logo aligned, it's going to be to the left usually. Yeah. And thinking about now this F pattern, just to clarify for folks too, When you're saying an F pattern, you know that that the top line of the F is longer, right, then the next line is a little shorter, and then there's no there's no horizontal line after that. And what that's implying is that as people scan down the page on average, don't read less and less and less and see and look less and less and give you less of a chance. Um. Now, what that's brought to mind is a concept from the old publishing days and newspaper days, which is called above the fold. And again for folks, so we're not talking about folks heads. Can you just explain a little bit about the publishing concept of above the fold? Okay, above the old is a term I think that comes from the newspaper business. Uh, when newspapers would be on a news stand, they would be folded in half, and so what potential customer would see would be what was above the fold, and that was, uh, you know, the most important part graphically or for somebody's first impression, because that will often decide whether or not they're going to buy a newspaper. They might not pick it up and flip it over and look beneath the fold. So that's that's kind of where that concept comes from. And I even remember one. I'm kind of rambling here, but I do remember a the National Post when they first introduced their paper, they had a newspaper box that showed you the entire front page of the newspaper, which was an innovation at the time. I guess Now there you go, and it's a way to get again to use that term, more real estate out there. So now we two, we're taking this above the fold in sept And a lot of that did translate over into the Internet world, at least in people's minds. So the idea was, you know, however, whatever size of the screen that you have this section that people see first before they actually have to physically make a choice to scroll, that was seen as very valuable real estate. There may be a lot of validity to that, but I think you also had some comments on why website owners should not be obsessed with that. Yeah. I, um, they've again they've done a lot of research. We can track with analytics where people look at whether or not they even scroll a page. Ah, And what it's revealed is essentially that that sort of thinking is a little bit outdated. Um, almost everybody scrolls when they visit a page. It's it's it's very high percentage of people. So worrying about the sort of above the fold, although you know it is important to think about that,..., it's uh, probably not as crucial as most people think. And I guess where I see a mistake being made with that thinking is trying to cram everything up above the fold that uh, you know, all the information, and sometimes it does get quite uh, it gets crammed up in there and cluttered. And then when you consider how that, how is how is that going to look? On a phone, which is much narrower, it can get really busy and you can wind up with a header that might you know, the actual content to your website doesn't really start after the header, and it might be way down on the phone or even off the screen if you get if you're looking at it on a phone holding it vertically, it looks odd and and it's just like every time you open a page you're just just sort of seeing a crammed upheader that's you know, sucking up a lot of the real estate on your phone, which is also creating maybe more visual choices than the brain. And I even wants to process like give somebody too much choice in a in a sales environment, it's similar in a visual environment, right, yeah, exactly. It's like, um, you will often see that in a business, right it's good, better, best, and they don't want to overwhelm you with a million choices, sometimes say and yeah, that's true, I would say perfect. I also think just to point out to the listeners that the the interesting phenomenon about so many people using their mobile phones to browse online is that it is an absolutely accepted activity. In fact, I would theorize you get a dopamine drip from it from scrolling on your phone. Right, So we're trained now to scroll more than we ever have been, right, And I think where some of that thinking came from the above the fold myth, as it's sometimes called, is from uh, coming from people who maybe remember only surfing the web on their desktop. But you're right, I think people are very users scroll, so it's really not not a big big deal to worry about. But if you have a special offer, you know, some pertinent piece of information, uh, probably best to put it up near the top rather than you know, you want your most uh your number one piece of information probably be near the top, especially on the home page. Yeah. Yeah, And as long as you're grabbing people, you know, you can listen to what Paul saying. If you grab them, when they come to your web page, they're going to scroll down to read the full offer. That's right. That's how we'll balance it out. We'll figure out what's most enticing or visually grabbing or mentally grabbing, and then let the pro like yourself lay out the rest of the stuff on the page because they will read it. Yeah, and don't overwhelom them with too many ideas or concepts. Which I think you just touched onto is because you are trying to usually direct visitors attention to Often it's just one thing or one main thing that you want them to do, either to click on an offer, or join a mailing list, or you know whatever. It might be perfect. And I think that whole concept of visual business leads us into our next topic, which is kind of like the bane of designers everywhere. I put this in there as a little bit of an inside joke, but I think it relates to um, how how the listeners maybe can think of the most effective ways to talk to their web host and their web designer to get the best results of their website. So, just to let you guys all in a little joke, every time anyone builds a website, the number one request that comes back most often is to make the logo bigger. So Paul is wondering if you could talk to me a little bit about this phenomenon. Why you think it exists and why in most cases it's probably a little bit misguided. It does. Yeah, I don't know that I hear it every day. I definitely don't hear it every day, but it is something that does come up on occasion, and it's kind of about a bit of a balancing act because I think often when people get a logo, maybe they just got one made and they want to impress upon their visitors their new branding...

...they sort of make might fall in love with the logo and they wanted to take up the most amount of space, let's say, but it's probably not going to be the thing that is most interesting to the visitor. They probably didn't come to your site to see the logo, you know, They're they're probably there to see what offers you have or what you can do for them. You know. I think a lot of the pushback from business owners is, well, they need to know where they are, they need to know what company they're on, and I think we oftentimes they forget that, like they're not remembering their own customer journey. And I know, as a customer myself, I'm not going looking for a solution going in most cases going I need a particular brand, right, like if you're Nike versus Adidas, maybe, but on a small business level, it's more I have a problem I need a solution for and not know what did they use red or yellow in their iconography? Yeah? I think the logo the you know, the importance of the branding and the logo is going to be dependent on you know, what field or what business you're in, because you know, obviously for something like you say, running shoes, branding is super important, but maybe for a plumber it's not as important. So the next question I wanted to ask you about is and this one is a bit open ended, so we can talk about it for a while here and from different angles if you like. But how can companies use graphics, you know, colors, visual balance on their website to show what I call proof elements or to establish proof And just to give again a little bit of context and marketing, we'll talk about proof elements being persuasion tools. So again, if somebody is trying to decide whether to go with your business or another business, sometimes you need to actually demonstrate the effectiveness of what you're offering, as opposed to just claiming it. Right. When you claim something is the best. Uh, that's much less powerful than let's say we embed a video on the homepage that demonstrates how the act works. Another example of a proof element could be as celebrity endorses it, or there's just a testimony in general, um think things like that, right. The simplest example would be having a picture of the product ass and after. Yeah, exactly. So maybe we could talk a little bit about visuals as proof elements and how you, as as an expert designer, you use them. Okay, well, usually what I'm looking at, uh a design for the first time, I uh, where does my eye go? First? What is the very first thing that my eye goes to? Not necessarily also just first, but where does my eye rest and where does it spend most of its time? And then where does it move from there? So you want to consider things like how you know the weight of these different visual elements. You might have a crest or a photograph or something or uh, and how do those do they pop out? Do they recede into the background? Down? Does it draw your attention? So, say, using you have a site that's say a corporate blue sort of color, and you put a crest on it that says you know, we've been in business for twelve years or fifteen years and it's bright red. Well, that's going to pull your attention right away because it's sort of a contrasting color to the rest of the site. But maybe you don't want to waste that attention grab on just letting them know that you've been around for fifteen years. Maybe you want that that visual uh queue to go to something, you know, to your offer, like you say, or like what we were talking about before with the with the proof, you want uh, you know, to direct them to the most important part of what you're trying to convey. It could say it could say number one ranked real estate office for the last ten years or something as opposed to we've been in business for x years. Right, Because then there's the element and and you know, if you also probably you want to make it a clickable element. If it's something that you're putting a lot of... into getting some somebody's attention uh focused on. Uh, it might not, you know, it should be something I think like something uh probably a button or a contact call to action or something like that. Yeah, And the color contrast is is obviously as you said, it's so powerful you would want to be very thoughtful about how you're going to use it on the page and then probably only use it, you know, once maybe max two times on any given page, and then the rest of the design is going to be let's call it harmonious as opposed to contrasting. Would you say that's accurate? Yeah, I think that's a good idea if you, I mean you certainly. And I've seen it where some where, um, there's sort of going overboard element with trying to put too many uh sort of things at the top of the visual hierarchy. Let's say, where now you don't know where to look, you know, or maybe you're looking at the thing that's you know, you would have your your potential customer look at later on. Now they're focused on it and they don't understand the first part or something. You know, you want to make sure that it's comprehensible, I think, and not overwhelming people. And so it's just I think the term I would use it. It's just a balancing act really for sure. Yeah. And then the other fact that we haven't spoken about yet is that you also are on a limited time horizon, so people aren't going to stay on the page forever. Right, they're gonna the terms and stats, They're gonna bounce off your page and go somewhere else. So it's a that is a balancing act of how can you grab their attention, hold it, but then not fatigued or chase them away. That's right, I think I think that's a good point, as you don't want to fatigue them for sure. Yeah, okay, cool. And then one of the other interesting things that you had sent me a photo before we got on the recording here. Now it's gonna be hard obviously for people who can't see it, but hopefully we can describe it about how you could use graphics and relation to text on a website page to draw people's attention to to what you want them to read or look at. Right, So we we did talk about color and uh, you know, using a bright color, let's say, you know, the size of the element. Uh, different arrows and other things can be used to to sort of direct people's attention. But the photo you're talking about is one of a baby, uh, sitting next to the text. So we have sort of a two column layout where there's a baby on the left and the information is on the text. Information is on the right. And then there's two images showing and they're the heat maps I was talking about before where attracts user eye movements. And in the first example, the baby is looking straight at you, and in the second example, the baby is actually turned to the right and is looking up at the text. And what you see in the two heat maps is that the one where the baby is actually looking at where you want your user to look holds their attention longer and their eye movements stick. You know, those parts of the heat app are are lit up more than than on the other example on the left side. Yeah, it's almost a cue rather than a grabber. Like we're talking about contrast grabbing people. This is now shuffling them along or like you used an example of using an aerographic that happens so often on sales letter pages because it's so effective and it's also everybody knows what an arrow is for. Uh, And like in this baby example, where you have the subject of the photo looking in the direction that you want your user to look like, you say, it's more of a nudge rather than sort of Uh, it's a nudge. It's not really like a heavy duty kind of thing, like where you would have a big red crest. Let's say, Yeah, that makes sense to me. In the audio world, they often talk about how, you know, if you do a great visual job, everyone notices and praises the visual artist. But in the audio world, if you do a great job, that should mean no one notices the audio, right, So that's an interesting Yeah, there's these edges...

...are should be almost almost imperceptible or almost subconscious. And that's what I find with a really great designer, they're they're doing both things that you said, right, There's a lot of standout, flashy elements because obviously everyone wants to have a site that's attractive that they're proud of. But what's far more important and much more unsung, are all these little subconscious arrangements, um, which which leads me into one of the final things. A lot of times feedback to designers will be why is there so much white on the screen? And so that's the white space. So if you can talk about that a little bit, Yeah, that's another thing that it is, uh another balancing act. You know, like we were talking earlier with the mobile header, you don't want to be overwhelming. People are cramming in too much stuff so white space gives you know, the eye a place to sort of rest a little bit or to uh, you know, the the elements you want people to look at. They're going to be more focused on that because it's come off of a white with what it has some space around it, and it's not crowded out, uh you know, and and so that that that's sort of the reason behind it. I mean, you can definitely go overboard with white space, and then you know, the different elements that should be sort of connected on your page are now two two separate. So uh, you know, usually though that the tendency for people is to want to cram in stuff like they're trying to put you know, ten pounds of dirt and a five pound bag is sort of you know a way of looking at it. Do you find that it's an entirely different consideration when you're dealing with balance and white space on the mobile display as opposed to say a large wide screen HD desktop display. Yeah, that's hey, that's a that's a good observation. Yeah, there's obviously a lot more with a desktop, so you have more room to play with and on a mobile often the images get removed or truncated or replaced with something that's smaller or doesn't take up as much real estate. You know, you might just have, uh, you know, a different choice of image that would show up when when somebody is looking at it on the phone to accommodate sort of the new screen size. Would you generally be a fan of, say if somebody or when you know, when you look at that version of wide screen where there's so much unused real estate on the left and right hand side of the of the browser window, are you a fan of making that, you know, putting something in there like a background color or a pattern or something just for that view, which obviously isn't going to show up a mobile because there there is not that space, right, So yeah, we use the term white space, but really white space just means any sort of place that doesn't have like attention grabbing details. So it could be a color actually, uh, like a colored background or something like that, or even a stubtle pattern that that you could count as white space. Also, Um, yeah, I think that would especially for clients who own you have a widescreen monitor and they're not considering like you are, all these different views that might be less shocking for them to see that like there's something there in their brain as opposed to empty whiteness. Yeah. Often what I'll do is is I'll have a like when when you see ah the website on a large desktop display, there'll be a big image, let's say, and as you you pull out your phone or you you shrink the window, you'll see that a lot of that image is disappearing. Um. I might even uh put a background color behind it to give the text more contrast with the background. When you're on mobile, you tend to need a little more contrast because often people are outside or they're in high light environments and and you can't really go super subtle with you want a little more contrast when somebody's on the phone. Usually interesting. Yeah, I have thought about that. Well, we've covered some of the high level topics of why people could approach and look... web design and how we look at it, and then you know, there's always that back and forth between client and designer to come up with the best outcome. The final word goes to you, paulse or anything you'd like to sort of put a point on when it comes to web design for small businesses, Well, I think, um, yeah, I think we've covered it pretty good. I wouldn't want to overwhelm people. Um and uh. I do think that we touched on that with the above the fold and and that sort of thing, where where we're trying to put too much into into a page and I have I have some sites that I've worked on in the past where yeah, they really got top heavy essentially, and that would be something I would I would try to avoid and rather use more of these subtle direct you know, trying to direct people's attention to the thing that's most important, rather than say ten different uh, you know sections of your website or whatever. Yeah. Yeah, not even even it doesn't have to maybe on the homepage. You can have separate pages for singular ideas that are important to your customers. And that's not going to chase right, not going to chase people away. You might even give them the direct link to that page. Because I think another thing Ryan and I talked about a lot is um uh, people maybe don't consider how little cold traffic comes to the homepage of a of a small business website. Right. It might come to an e commerce website or or someone who's just a blogger or whatever. But a lot of small business websites have many different points of entry for many different types of customers, so they don't have to panic if you can't fit every element on the homepage, because there's probably a more appropriate place inside the website. That's right. I think we worked on a project like that where we were doing multiple landing pages. Uh, so there was different, like you say, points of entry, and there would be completely different pages set up for uh, you know, different audiences. That's awesome, Paul. I appreciate your time today. Thanks for coming out and chatting with me. Well, it's been a pleasure. I'm glad we got to do this. If you're not satisfied with your current website or the service you get from your provider, you can switch to websites dot c A for free and get a great support team behind you. Just visit websites dot c A or email Ryan directly at R y A n at websites dot c A. Thanks for listening, guys, Catch you next time.

In-Stream Audio Search


Search across all episodes within this podcast

Episodes (33)