You are here:
Module 2: How to Plan a Website That Sells
Section 2: Your Customers and Your Website
Post 3: Show and Sell
In the original Wall Street movie, Gordon Gekko (played by Michael Douglas) is in his limousine with Bud Fox (Charlie Sheen). Gekko is making a point about success, as they are driven through the streets of New York.
He points to two men, standing on a busy corner. One is in a well-fitted suit, briefcase in hand. He looks clean and fresh. The other is digging through a trash can. He’s the opposite of the first man.
Gekko points at them and says, “You gonna tell me the difference between this guy and that guy is luck?”
We could launch into a social commentary here, but that’s not the point. The fact is – we judge people instantly by their look. Just like we judge books by their cover. And…
People judge your website by its appearance.
We discussed this in the first post of this Module – in the first split second on your site, people are already forming an impression of your brand.
Study after study shows that what people say and what they actually do are two different things. The reality is:
Content drives their ultimate experience. But early on, their opinions are based on the visual look and feel of your website.
Here’s an important principle to understand:
Trust is destroyed with poor design.
Trust is built with great content.
So design is defense. It won’t help you win the game, but it allows you to keep playing (i.e. the visitor stays on your site). Content is offense. It’s how you win them over.
In this post, we’ll talk about the visual part of your site. Don’t worry – we’re not trying to turn you into a web designer.
We do want you to understand what design that sells looks like. Then we can put together the pieces so you get a truly exceptional website.
What destroys trust on a website?
94% of the factors which form the first impression are related to design, according to research. [PDF]
Trust-destroying factors include:
- Inappropriate name for the website
- Complex, busy layout
- Lack of navigation aids
- Boring web design, especially use of color
- Pop-up advertisements
- Slow loading
- Small font
- Too much text
- Corporate look and feel
- Poor search capabilities
These factors are based specifically on a study of health sites. But a broader study [PDF] of various industries confirmed the importance of design in establishing credibility.
Out of 24 factors, “design look” was the #1 factor with nearly half (46.1%) of the study’s participants. They wanted clean, professional looking sites with related graphics that aren’t out-of-date or too flashy.
Now that you’re convinced of the importance of good design, let’s discuss some items to consider for your website.
Accentuate the negative for a positive user experience
Clutter creates confusion. So you don’t want your layout to be too busy or you’ll risk driving visitors away.
You can avoid this with white space. White space – also known as negative space – is the portion of a page left open.
It’s the area between your copy, photos, columns, etc. By leaving white space around a particular item, you make it stand out more than if other elements are crammed up against it. In other words…
White space helps visitors determine what’s important.
White space gives your visitors room to breathe. It’s especially important if you sell elegance or sophistication.
We can look to the real world for an example of this. Generally, upscale stores leave more room between the merchandise than a discount store. The same is true online – more white space creates the feeling of higher value.
Many business owners and professionals don’t understand the use of white space. It may be a carryover to the days when they crammed as much as they could into an ad.
After all, they were paying good money for it. White space was considered wasted space.
Ironically, their ads probably would have pulled better with more white space. But we digress. You don’t have the same constraints on your website as you do in a print ad or direct mailer.
You want each screen – what a visitor sees on their computer – to draw attention to what’s important. White space helps you do that.
Size sells (and so does contrast)
BIGG and bold will always get more attention than dinky and dull. For example, all else equal:
- Bigger trumps smaller
- Contrast conquers complementary
We’ll start with images to help you understand these two points. First, which box draws your attention in this photo:
It’s the second one from the left, right? A bigger image will get more attention than a smaller one, all else equal.
Rather than using size to call attention, you can also use contrast:
All these boxes are the same size. Yet the second one stands out, doesn’t it? A contrasting color will grab the eye faster than a complementary one.
But these principles aren’t restricted to images:
You’ll want to remember these two as you think about your compelling value proposition and call-to-action. For example, some people argue that the best call-to-action button is BOB. BOB is an acronym for BIGG Orange Button.
However, the most famous test of call-to-action buttons was reported on Hubspot:
As you can see, the two pages are exactly the same with one exception – the one on the left used a green call-to-action button while the one on the right had a red button.
They tested the button on over 2,000 visitors. Was there any difference?
The red button got 21% more clicks!
What’s the takeaway? Only use a red button? No. Use what works for you.
Just realize that it will probably be a contrasting color. Notice the red really jumps off the page at you whereas the green complements the other colors more.
Many business owners and professionals unwittingly sacrifice profitability for prettiness. You’ll get better results if you use contrasting colors to make your most important elements pop.
Another way to use contrast is to document before and after. Some products and services naturally lend themselves to this type of comparison.
But almost every business can find ways of doing this. For example – let’s say you provide a service for business owners. Last year, you increased their profit margin from 3% to 7%. Instead of just saying it, show it!
Break the pattern
As we said in the last post, website visitors want simple and familiar. It lends credibility to you, your business and your website.
But we humans are fascinating creatures. Our brains are wired to look for patterns. Once we find one, we get bored quickly.
And you know what people do when they get bored on your website? They leave.
So break the pattern to give them the variety they crave. How do you do this?
Think in screens. They may start above the fold on your Home page. Then they scroll down or click through to another page. You probably don’t want it to look exactly the same.
A simple way to break up the monotony is to rotate images left and right. Apple is a master of this. They use this style for a lot of their services. For example, here’s a snippet from iTunes:
You’re seeing below the fold here. It’s the second screen which you would only see if you scrolled down.
The key for you is: Make sure your website mixes it up.
Say “cheese” to avoid being cheesy
All photos are not created equal. A lot of business owners and professionals think this is the reason to use stock photos.
But they’re generally worth only one word: cheesy. Research reveals that people ignore them.
Many businesses think photos of “pretty people” are the way to go. But actually, it’s just the opposite.
Photos of normal people will get more attention than pictures of models. So assuming you’re normal, say “cheese” to avoid being cheesy – make sure your photo is on your site. If you have employees, we suggest that you include them as well.
Remember – business today is personal. We engage more digitally than in person these days. But your current and future customers still want to see who they’re doing business with. Photos of you and your people fill this void.
Accounting software-as-a-service provider Freshbooks is a great example of this. They have a photo and bio for all of their employees under their About tab.
Note that it’s not a team photo. These can quickly become outdated. For example – if you add a new employee, the team photo is now dated. So we recommend individual photos.
WHERE you see is what they get
When you’re face-to-face and you want to sincerely communicate with someone, what do you do?
Look them straight in the eyes!
You’ll want to do the same thing in your photos on your website. Research shows that people connect with you better if you’re looking right at them.
No fancy shot will work as well. No need to worry about which is “your best side.” Just look straight into the camera.
Here’s a snippet from the Home page for 37 Signal’s Highrise customer relationship management product:
You instantly see a customer telling you about their experience, while looking you straight in the eye. Real people telling real stories build real trust.
However, there is one exception to this rule. You can use the eyes to direct your website visitors.
They will look at whatever the person in the photo is looking at. So point them to something important.
Here’s one of the best examples we’ve ever seen of this. It comes from dating site Chemistry.com:
Note how this plays to what we discussed in the last article. Your eyes naturally start in the middle looking right at the person in the photo.
You can’t help but look at what her eyes are pointing to. They take you the primary purpose of this page: sign up to take their free test.
Of course, arrows will serve the same purpose. But doesn’t feel more personal with a human directing you?
They can’t touch your products, but they need to feel them
You’ve probably been somewhere – maybe even a retail store – and saw a sign with the following message:
Do not touch.
It’s a daunting sign (especially when you’re a kid). Doesn’t it just make you want to touch all the more?
Bricks-and-mortar retailers thrive on consumers touching their products. Research shows you’re more likely to buy an item you’ve held in your hand. And the longer you hold it, the more you’ll pay!
You don’t have the luxury of touch online. However, you can make your customers feel your products. How?
We’ll use Apple once again. When they launched the MacBook Air, they highlighted its unique advantage with this photo:
They knew they were competing on size, not power. So they showed someone pulling their computer out of an envelope.
You can’t touch it. But can you feel how small and light it is? It lives up to its name!
Here’s another thing to think about when it comes to showcasing your products online: bigger photos tend to sell better with one caveat. (We’ll get to that in just a minute.)
So instead of four columns of products, think three. Instead of three, try two. These can be products you’re highlighting with a specific strategy in mind. Here are some examples – they may be:
- loss leaders (if your strategy is to be a low-cost provider)
- high turning products (you feature them so customers find them quickly)
- your most profitable products (the ones you really want to sell)
So bigger product images are better – as long as they don’t get in the way. Then people ignore them.
However, testing shows people will click on a link to a larger photo. But many site proprietors don’t make them large enough – they should be at least twice as large as the regular photo.
In addition, picture a person picking up your product in the physical world. Would they just look at it from one point-of-view?
If not, show shots from alternative angles. You might even consider letting them see it from a 360 degree view using a low-cost service like 3DBin.com.
If you sell products, make them the stars! Spotlight them by helping customers feel what they’re like.
Don’t overlook video
Video is growing rapidly as a marketing tool. It’s becoming pervasive. In fact, video is used by more marketers than live demos by their reps.
Susan Weinschenk (aka The Brain Lady) is a consumer behavior psychologist. She’s worked with major companies in retail (e.g. Best Buy, Kohls, Target, Walmart), financial services (American Express, American Family, Charles Schwab, Vanguard) and more.
She says there are four reasons why videos sell. We humans love:
She says our brain is hard-wired to pay attention to faces. They help us gather information and judge believability.
When you bring voice to your content, it comes alive. We’re better able to process the information we’re receiving.
- Body language
We convey emotions through our body language. We naturally connect to people through the experience.
Our species survived by paying attention to motion. So movement appeals to an old part of our brain.
Of course, video alone probably won’t do the trick. It supplements all your other great content.
Why doesn’t video stand alone? Because most people won’t watch it.
But your most interested prospects very well may. And aren’t you most interested in moving your most interested prospects along?
Now, don’t think you need to go out and spend a bunch of money on professional videos. There may be times when it’s appropriate. But don’t neglect home-made, informative videos either.
Invest in your front door
We know a successful real estate developer who taught us an important lesson. He spent a disproportionate share of his budget on the entrance of the buildings he owned.
Why? Because he understands first impressions. He knows people who have a positive first impression subconsciously bring that into every interaction.
You know all of that. We talked about it in the first article of this section, Do You Have a (Split) Second.
Your Home page is like the developer’s front door. You’ll want to invest an inordinate amount of mental energy into determining exactly what you want on it.
But we’re getting ahead of ourselves. There’s still more to tell you.
So for now, just realize that images are not decoration. If you treat them as such, they’ll be ignored at best or drive visitors away at worst.
Images serve an important purpose – to show and sell. In the next post, we’ll look at how to tell and sell.
At this point, you can either can either dive into the next post or go through Part 3 of the Your Customers and Your Website Guidebook. (As you might guess, we recommend going to the Guidebook but you’re the boss!)
Should you have any questions at this point or as you go through the Guidebook, please email us at
email@example.com with “BTS QUESTION” in the subject line.