Maybe this scenario sounds familiar? Your gung ho, newly hired web designer tells you your site needs an update. Currently, your site is downright ugly and makes you look like an amateur. It almost makes you feel ashamed to connect it to your fine brand.
So, What's the Solution?
A complete website redesign is an obvious answer. Mind you, not just a few strategic tweaks, but a reinvention to bring your tired old website into the modern world. Your new site will have full-page background photos with high-resolution, cute animated scenes, snazzy vector paths, jQuery carousels, etc. The end result will be a breathtaking design that will break your budget to create. However, you shouldn't hesitate – it’ll be worth it because:
- People enjoy eye candy, so sites with enticing images encourage people to browse.
- Web graphics and images are attention-grabbers and new visitors won't hit the back button.
- An eye-catching site impresses prospects and makes them more likely to convert.
- Flashy images demonstrate that you're modern and hip, the kind of company that people trust, thus leading to more sales.
- To sum it up, for every piece of eye candy on your site, your sales will go up by a certain percentage.
WRONG, WRONG, WRONG!
Web graphics and images can actually lead to a reduction in readership. Yes, images certainly do catch people’s eyes. Take away some rather specific conditions and you’ll notice that eye-catching images do not necessarily mean people will read the body copy – let alone pony up the cash to buy whatever you’re offering.
Four Principles to Ensure Your Images Increase Your Readership
The following are best practices to follow to increase your readership. The only way to know for certain how they will work for you is by testing your chosen web graphics and images.
Placement Matters
Reading involves a very specific natural order. First, people look at the image, then they scan the headline, and then they read the body copy (if the headline interests them enough).
Placing an image at the top of a page is a common way to catch people's attention and draw them into what you want them to read. However, you should ensure that the image is above the headline.
Example: COR Cellars' headline is situated below the image, where it is most likely to get read.
On average, headlines placed below an image are read by more visitors than headlines situated above. Since reading the headline is a prerequisite for reading the body copy, you run the risk of losing a percentage of your audience by distracting them with an image positioned in the wrong place.
Captions are Read Four Times More Than Body Copy
An image placed somewhere in the middle of your content draws the reader's attention to the image rather than to the text. It might even draw the reader out of the copy. Therefore, it's crucial to place a caption under every image. A caption should press your main point home and hopefully get the reader back into the copy.
Captions below web images are read on average 300% more than the body copy itself, according to Stack Exchange, so not making use of them or not using them in the right way means you are missing out on the opportunity to engage a huge number of potential visitors.
In copy that aims to sell your product or service, captions need to include both your brand name and brand promise. This gives you another opportunity to grab your readers' brief attentions and interests and push them back into the copy – or channel them directly to a call to action.
Don't Break Up the Left Margin
When people read, they rely on the left margin to always be there as an anchor – it provides a place to return their eyes. Absent a consistent left margin, it isn't easy to follow the text. The reverse is true for languages where the text is read right-to-left.
This is why, in the Western world, the body copy should never be justified to the right or center. If the left margin is broken up, the eye path is interrupted, along with the train of thought.
So, don't scatter left-aligned images throughout your body copy. This practice forces the left margin of the copy to change location. It breaks the reader's flow and forces them to readjust. Far from helping to keep their attention, such a technique threatens to lose it.
NEVER, NEVER BREAK UP YOUR LEFT MARGIN
Web Images Lacking Obvious Relevance are Wasting Space
Don't confuse your readers with images that are not clearly aligned with your value proposition or the central theme of your page. At best, such images will be pointless distractions. At worst, they'll provide the wrong impression and result in readers feeling disappointed or tricked.
Tip: If you can't think of a good caption for an image, it's probably because the image has no place on the page.
The best web images can be placed in just two categories:
- Images with story appeal.
- Images that demonstrate something.
An image with story appeal is best placed above your headline to evoke a strong sense of curiosity in your readers. They will want to know what's going on and be encouraged to read the copy to find out.
Story appeal images are not very easy to come up with. It's harder to go wrong with a demonstrating image because it does just that – demonstrates something written in the copy. However, your image needs to convey your central theme or value proposition with more force than the copy alone can achieve. Before-and-after shots, product photos, and graphs or charts showing comparisons all work nicely.
Tip: If the image needs to be downsized, make it clickable to enable readers to view a larger version in a lightbox.
Web Images to Avoid
Some kinds of images should be avoided like the plague. The reason is that their visual dominance will distract readers without the benefit of interesting them. Such web graphics and images will likely convey the impression of thoughtlessness about the page content, incompetence, or the inability to provide anything of real quality. Such images include:
- Obvious stock photographs. Their lack of imagination and generic dullness will rub off on your brand. Even if a stock photo is attractive, it doesn't mean that it will be effective.
- Poor quality images. Better to not use anything than to show a low-resolution image or one that is badly resized, over-compressed, pixelated, or otherwise shoddy-looking.
- Crowd shots. The best photos have a single main subject—crowd shots are boring because there's no one to focus on.
- Bigger than life-size face images. Readers will tend to avoid them because they seem somewhat grotesque.
- Web graphics and images relating to historical subjects will mostly be perceived as boring (unless you're catering to an audience of history enthusiasts).
Example: The above DATACOM website provides a study of images done wrong. A stock photo top center depicts a model everyone knows doesn't work for DATACOM – and, worse, it's been distorted by resizing. The images above the columns beneath the top image convey no value whatsoever as they demonstrate nothing.
Make Each Image Worth Readers’ While
Finally, while you mull over the fancy graphics your enthusiastic web designer wants to use to spruce up your page, also mull over this:
SLOW PAGE LOADING TIMES LOSE READERSHIP
A loading time increase from 0.4 seconds to 0.9 seconds decreases traffic by 20%, according to Stackpath. Needless to say, web images increase page load time. So take a long hard look at your latest image-enhanced content and ask yourself the following questions:
- Is the extra weight really helping?
- Is each image demonstrating my brand's value proposition forcibly or teasing my reader into my copy with story appeal?
- Is each image positioned correctly and captioned in an enticing way?
- Is each web graphic and image worth its weight in gold?
If you're unsure of your answers, it's time to begin testing, measuring, and perhaps culling to ensure your images are done right.
Conclusion
Choosing the right images is more crucial to a website’s overall success than many realize. By carefully selecting the images that make the most sense for your content, you’re more likely to boost the user experience – and ultimately increase conversions.
Contact Americaneagle.com to learn all of the ways we can help your website succeed.
