fbpx

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

Click above to listen to the 26 min audio.

Read Full Transcript

Sean Corbett:
Hello again everybody. This is Sean Corbett, Websites.ca marketing. Today, we’re going to talk about web design, but we’re not going to talk about it from sort of the froufrou, 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 your business look more professional, and basically helps sort of persuade and convert more visitors to customers. So I’m joined by the Websites.ca, head designer Paul Renault today, and Paul’s going to talk a little bit about what we do at Websites.ca to achieve those goals. But first I wanted to just ask Paul, why don’t you tell us a little bit about your background?

Paul Renault:
Well, it’s nice to be here. In the ’90s, I was in art school, I was interested in art. I was a kid in high school and I pursued a degree there. And then after I left school, the web was sort of coming up as a thing and I was looking for a career, a place to apply my skills. And I sort of taught myself in the late ’90s 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 23 years ago now.

Sean Corbett:
It’s wild. So you actually saw the transition from Web 1.0 to Web 2.0.

Paul Renault:
Yeah. Yeah, I was working at the time when that was going on.

Sean Corbett:
Yeah, sliders, everybody wants sliders at that point.

Paul Renault:
Yeah, that’s right. There was just more functionality, things that were possible with browsers, when it was pretty limited before.

Sean Corbett:
Yeah, for sure. Before we get into the questions, actually, that just brings to mind a thought I had. I was talking to some marketing people and they sincerely believed that it was a better world for marketers and Web 1.0 because things were cleaner and simpler. I don’t know if you’d agree or disagree with that, but …

Paul Renault:
I do, I can understand that point of view. In that, I mean, we didn’t have mobile designs, so that would be the major drawback that 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 and just do a retro site like that. I don’t think it would work today.

Sean Corbett:
You almost have to design sites for mobile first and mobile second and mobile third now.

Paul Renault:
Yeah, that’s a trend you’ll see as a term like that, “mobile first “and that’s what it refers to, is 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.

Sean Corbett:
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, the 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 extra oomph in terms of business and customers and tangible results?” So the first thing we’re going to talk about today is the sort of visual real estate of a website. In other words, every bit of space on your website could have value and have a use, but some of it has more value than others. So Paul, could you talk about or give me your opinion on the most important visual real estate of a website and why?

Paul Renault:
Well, obviously, it tends to be near the top and left of the page, but 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 it’s showing where people look, which is what we’re sort of interested in. And people tend to read pages in an F shape 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, say, just a page with text and fairly 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.

Sean Corbett:
Yep. Perfect. 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.

Paul Renault:
Yeah, that’s kind of become a standard thing. I do remember back long time ago when I started my career, we would put logos in lots of different places, sometimes on the left even. We were sort making to figure out what worked at the time.

Sean Corbett:
Yeah, I remember even 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.

Paul Renault:
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 identifying information is the top left.

Sean Corbett:
Yeah. For sure.

Paul Renault:
Logos can be centered too. But if you’re going to see a logo aligned, it’s going to be to the left usually.

Sean Corbett:
And thinking about now this F pattern, just to clarify for folks too, when he is saying an F pattern, you know that the top line of the F is longer, right? Then the next line is a little shorter and then there’s no horizontal line after that. And what that’s implying is that as people scan down the page, on average, they’ll read less and less and less and see and look less and less and give you less of a chance. 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 above folks’ heads, can you just explain a little bit about the publishing concept of Above the Fold?

Paul Renault:
Okay, Above the Fold is a term I think that comes from the newspaper business. 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 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 kind of where that concept comes from. And I even remember one, I’m kind of rambling here, but I do remember 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.

Sean Corbett:
There you go. And it’s a way to get, again, to use that term more real estate out there. So now we’re taking this above the fold concept and a lot of that did translate over into the internet world, at least in people’s minds. So the idea was whatever size of the screen that you have, the 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.

Paul Renault:
Yeah, again, they’ve done a lot of research. We can track with analytics where people look, whether or not, they even scroll a page. And what it’s revealed is essentially that sort of thinking is a little bit outdated. Almost everybody scrolls when they visit a page. It’s very high percentage of people. So worrying about the sort of above the fold, although it is important to think about that it’s 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 all the information and sometimes it gets crammed up in there and cluttered.
And then when you consider 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 … the actual content of 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’re looking at it on a phone holding it vertically. It looks odd and every time you open a page, you’re just sort of seeing a crammed up header that’s sucking up a lot of the real estate on your phone.

Sean Corbett:
Which is also creating maybe more visual choices than the brain and the eye even wants to process, like giving somebody too much choice in a sales environment. It’s similar in a visual environment, right?

Paul Renault:
Yeah, yeah, exactly. You’ll often see that in a business. It’s good, better, best, and they don’t want to overwhelm you with a million choices sometimes. And yeah, that’s true, I would say.

Sean Corbett:
Perfect. I also think, just to point out to the listeners that 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 scrolling on your phone.

Paul Renault:
Right.

Sean Corbett:
So we’re trained now to scroll more than we ever have been.

Paul Renault:
Right. And I think where some of that thinking came from the above the fold myth as it’s sometimes called, is 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 a big deal to worry about. But if you have a special offer, some pertinent piece of information, probably best to put it up near the top rather than … You want your number one piece of information probably be near the top, especially on the homepage.

Sean Corbett:
And as long as you’re grabbing people, you can listen to what Paul’s saying, if you grab them when they come to your webpage, they’re going to scroll down to read the full offer.

Paul Renault:
That’s right.

Sean Corbett:
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.

Paul Renault:
Yeah. And don’t overwhelm them with too many ideas or concepts. Which I think you just touched on too is because you are trying to usually direct a visitor’s 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 whatever it might be.

Sean Corbett:
Yeah, perfect. And I think that whole concept of visual busyness leads us into our next topic, which is kind of the bane of designers everywhere. I put this in there as a little bit of an inside joke, but I think it relates to 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 out of their website. So just to let you guys all in on 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, I was 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.

Paul Renault:
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 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 might fall in love with the logo and they want it 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. They’re probably there to see what offers you have or what you can do for them.

Sean Corbett:
Yeah, no, 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 oftentimes they forget that they’re not remembering their own customer journey. And I know as a customer myself, I’m not looking for a solution going, in most cases going, “I need a particular brand.” 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,” not did they use red or yellow in their iconography.

Paul Renault:
Yeah, I think the logo, the importance of the branding and the logo is going to be dependent on what field or what business you’re in. Because obviously for something like you say, running shoes, branding is super important, but maybe for a plumber it’s not as important.

Sean Corbett:
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, 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 in marketing, we’ll talk about proof elements being persuasion tools. So again, if somebody’s 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 when you claim something is the best. That’s much less powerful than, let’s say we embed a video on the homepage that demonstrates how the product works. Another example of a proof element could be if a celebrity endorses it or there’s just a testimony in general, things like that. A simplest example would be having a picture of the product as opposed to not-

Paul Renault:
A before and an after.

Sean Corbett:
Yeah, exactly. So maybe we could talk a little bit about visuals as proof elements and how you, as an expert designer, use them.

Paul Renault:
Okay. Well, usually when I’m looking at a design for the first time, where does my eye go first? What is the very first thing that my eye goes to? And not necessarily also just first, but where does my eye rest and where does it spend most its time and then where does it move from there? So you want to consider things like how the weight of these different visual elements, you might have a crest or a photograph or something and how do those … do they pop out? Do they recede into the background? Does it draw your attention?
So you have a site that say a corporate blue sort of color and you put a crest on it that says we’ve been in business for 12 years or 15 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 15 years. Maybe you want that visual cue to go to your offer, like you say, or like what we were talking about before with the proof. You want to direct them to the most important part of what you’re trying to convey.

Sean Corbett:
It could say a number one ranked real estate office for the last 10 years or something as opposed to we’ve been in business for X years. Right? Because then there’s that proof element.

Paul Renault:
Right. And also probably you want to make it a clickable element, if it’s something that you’re putting a lot of energy into getting somebody’s attention focused on, it should be something, I think, like something probably a button or a call to action or something like that.

Sean Corbett:
And the color contrast 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 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?

Paul Renault:
Yeah, I think that’s a good idea. And I’ve seen it where there’s sort of a going overboard element with trying to put too many sort of things at the top of the visual hierarchy, let’s say, where now you don’t know where to look or maybe you’re looking at the thing you know would your potential customer look at later on. Now they’re focused on it and they don’t understand the first part or something. You want to make sure that it’s comprehensible I think, and not overwhelming people. I think the term I would use, it’s just a balancing act really.

Sean Corbett:
For sure. And then the other factor 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. The term we use in stats, they’re going to bounce off your page and go somewhere else. So that is a balancing act of how can you grab their attention, hold it, but then not fatigue it or chase them away.

Paul Renault:
That’s right. I think that’s a good point is you don’t want to fatigue them, for sure.

Sean Corbett:
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 going to be hard, obviously, for people who can’t see it, but hopefully we can describe it about how you could use graphics in relation to text on a website page to draw people’s attention to what you want them to read or look at.

Paul Renault:
So we did talk about color and using a bright color, let’s say, the size of the element, different arrows and other things can be used to sort of direct people’s attention. But the photo you’re talking about is one of a baby 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 there are the heat maps I was talking about before where it tracks 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 holds their attention longer and their eye movements, those parts of the heat map are lit up more than on the other example on the left side.

Sean Corbett:
Yeah, it’s almost a cue rather than a grabber. We’re talking about contrast grabbing people, this is now shuffling them along or I use using an example of using an arrow graphic that happens so often on sales letter pages because it’s so effective.

Paul Renault:
And it’s also everybody knows what an arrow is for. And 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 a … it’s a nudge, it’s not really a heavy duty kind of thing where you would have a big red crest, let’s say.

Sean Corbett:
Yeah, that makes sense to me. In the audio world, they often talk about how if you do a great visual job, everyone notices and praises the visual artists, but in the audio world, if you do a great job, that should mean no one notices the audio. So that’s an interesting … Yeah, these nudges should be almost imperceptible or almost subconscious. And that’s what I find with a really great designer, they’re doing both things that you said. 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 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 could talk about that a little bit.

Paul Renault:
Yeah, that’s another thing that it is another balancing act, like we were talking earlier with the mobile header. You don’t want to be overwhelming people or cramming in too much stuff. So white space gives the eye a place to rest a little bit or to … The elements you want people to look at. They’re going to be more focused on that because it’s coming off of a white with … It has some space around it and it’s not crowded out. And so that’s sort of the reason behind it. I mean, you can definitely go overboard with white space and then the different elements that should be connected on your page are now too dis-separate. So usually though, the tendency for people is to want to cram in stuff like they’re trying to put 10 pounds of dirt in a five pound bag is sort a way of looking at it.

Sean Corbett:
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?

Paul Renault:
Yeah. Hey, 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 might just have a different choice of image that would show up when somebody’s looking at it on the phone to accommodate the new screen size.

Sean Corbett:
Would you generally be a fan of say if somebody or 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 browser window. Are you a fan of making that, putting something in there like a background color or pattern or something just for that view, which obviously isn’t going to show up on mobile because there is not that space.

Paul Renault:
So yeah, we use the term white space, but really white space just means any sort of place that doesn’t have attention grabbing details. So it could be a color, actually, like a colored background or something like that. Or even a subtle pattern that you could count as white space also. Yeah.

Sean Corbett:
I think that would, especially for clients who only have a wide screen monitor and they’re not considering 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.

Paul Renault:
Yeah. Often what I’ll do is I’ll have, when you see the website on a large desktop display, there’ll be a big image, let’s say, and as you pull out your phone or you shrink the window, you’ll see that a lot of that image is disappearing. It might even 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 you can’t really go super subtle with … You want a little more contrast when somebody’s on a phone usually.

Sean Corbett:
Interesting. Yeah, I never thought about that. Well, we covered some of the high level topics of way people could approach and look at web design and how we look at it and then there’s always that back and forth between client and designer to come up with the best outcome. The final word goes to you, Paul. Is there anything you’d like to sort put a point on when it comes to web design for small businesses?

Paul Renault:
Well, I think we’ve covered it pretty good. I wouldn’t want to overwhelm people and I do think that we touched on that with the above the fold and that sort of thing where we’re trying to put too much into a page and I have some sites that I’ve worked on in the past where they really got top heavy essentially. And that would be something I would try to avoid and rather use more of these subtle — try to direct people’s attention to the thing that’s most important. Rather than say 10 different sections of your website or whatever.

Sean Corbett:
It doesn’t have to maybe be on the homepage, you can have separate pages for singular ideas that are important to your customers and that’s not going to chase-

Paul Renault:
Absolutely.

Sean Corbett:
Right. Not going to chase people away. You might even give them the direct link to that page. Because another thing Ryan and I talk about a lot is people maybe don’t consider how little cold traffic comes to the homepage of a small business website. It might come to an e-commerce website 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.

Paul Renault:
That’s right. I think we worked on a project like that where we were doing multiple landing pages, so there was different, like you say, points of entry and there would be completely different pages set up for different audiences.

Sean Corbett:
That’s awesome. Paul, I appreciate your time today. Thanks for coming out and chatting with me.

Paul Renault:
Well, it’s been a pleasure. I’m glad we got to do this.

[et_bloom_inline optin_id=”optin_4″]