In Pursuit of Pizzazz: 5 Visual Tips to Boost Conversions
Images are easy to place in marketing collateral, so as a result, everyone within an enterprise has an opinion about their use.
"This page looks bland," the executive vice president would say. "There's too much white space here, and now the page looks empty," the marketing director would suggest. "The images here are too small," a colleague would exclaim. "Actually, the images are too large," the designer may protest.
Depending on what an individual is trying to achieve, each might be right in some way. They may be right while negatively impacting conversions, however, because they are actually trying to achieve something else. The objective as someone responsible for making improvements to a digital presence is to cut through all these different goals, and use images in a way that helps rather than hurts Web usability and conversions.
There are two possible reactions website users will have to the stock photo. They will either think it is a ridiculous photo and laugh, or they will ignore the photo. Option three, the one where they are impressed by the design element the site added for pizzazz and think "what a cool site showing the girl with the headset," just doesn't happen.
If brands want to give the warm-and-welcoming vibe, they should use real images of real people in a real environment interacting with something in a real way like Stanford does on its admission page.
"This feels bland," is a real thing that real executives say. Many, many designers and conversion specialists try to do right by their visitors and attempt to use images that support conversions, only to run into that wall.
Companies can actually use images to make a page "pop," but what they can't do is use images only for decoration. The images should in some way support the goals of website users, like Kayak's.
The background image isn't just there for design - it creates contrast with the white bar, driving user attention to the key task on the website. That's a win for "jazzing up the page" as well as a win for supporting user tasks. Now, look at what Ikea does.
Visitors can't see anything on the page that supports user tasks because of the slider. In fact, above the fold, they really can't see anything other than the showy element - that's a sad trade-off. If at all possible, try to avoid fancy images when they do one of the following things:
+ The fancy image pushes everything down, so there's no space above the fold for core user tasks
+ The fancy image feels like it's low on content, like it's just there as a design ornament rather than something that helps convey something to the website user
Then, for product pages and similar content, allow the user to zoom or use larger images specifically when they need it like H&M does.
"This page looks bland," the executive vice president would say. "There's too much white space here, and now the page looks empty," the marketing director would suggest. "The images here are too small," a colleague would exclaim. "Actually, the images are too large," the designer may protest.
Depending on what an individual is trying to achieve, each might be right in some way. They may be right while negatively impacting conversions, however, because they are actually trying to achieve something else. The objective as someone responsible for making improvements to a digital presence is to cut through all these different goals, and use images in a way that helps rather than hurts Web usability and conversions.
Let's explore a few ways to boost conversions with images.
1. Stay away from stock photos
One of the common things images are supposed to help marketers do on a site is show that the brand is welcoming and engaging. Unfortunately, many take this to mean "show the attractive stock photo girl wearing a headset."
There are two possible reactions website users will have to the stock photo. They will either think it is a ridiculous photo and laugh, or they will ignore the photo. Option three, the one where they are impressed by the design element the site added for pizzazz and think "what a cool site showing the girl with the headset," just doesn't happen.
If brands want to give the warm-and-welcoming vibe, they should use real images of real people in a real environment interacting with something in a real way like Stanford does on its admission page.
The photos used on the page hit the mark in two interesting ways: (1) originality, as they don't look like stock photos pulled out of some library, and (2) emotional response, as they invoke all the right emotions that support the website's goals.
2. Think twice before "jazzing up" that image
"This feels bland," is a real thing that real executives say. Many, many designers and conversion specialists try to do right by their visitors and attempt to use images that support conversions, only to run into that wall.
Companies can actually use images to make a page "pop," but what they can't do is use images only for decoration. The images should in some way support the goals of website users, like Kayak's.
The background image isn't just there for design - it creates contrast with the white bar, driving user attention to the key task on the website. That's a win for "jazzing up the page" as well as a win for supporting user tasks. Now, look at what Ikea does.
Visitors can't see anything on the page that supports user tasks because of the slider. In fact, above the fold, they really can't see anything other than the showy element - that's a sad trade-off. If at all possible, try to avoid fancy images when they do one of the following things:
+ The fancy image pushes everything down, so there's no space above the fold for core user tasks
+ The fancy image feels like it's low on content, like it's just there as a design ornament rather than something that helps convey something to the website user
For those wanting to spice up a page using visuals, think more Kayak and less Ikea.
3. Don't add fancy navigation images at the right
Various websites have taught us that the right column is where ads live. Time.com provides a good example.The issue is that users may experience banner blindness - essentially, they won't "see" that section, so if brands use images in that area to help users get somewhere (navigate), they should prepare to be disappointed.
4. Make your images support navigation
Check out what the Nielsen Norman Group homepage looks like.
It's not a very exciting page. The boring thing about the page is that the core visual elements are really just the navigation categories. The genius of the page is, well, the same thing - the core visual elements are really just the navigation categories. It conveys information at a glance, supports the right emotions and helps users perform tasks quickly - compare that to a rotating banner on a homepage.
5. Use large images only when they are requested by the end-user
Here's what an argument about image size can sound like:- Executive: Those images are way too small - our users will be bored SEO: We can't use large images here- Google will penalize us for the load time
- Designer: They're actually too large right now
- Developer: Making the images smaller here will break the page layout, and we'll need to adjust the...
- Executive: What? No. We can't have small images - our visitors will be bored
- SEO: But Google will...
Then, for product pages and similar content, allow the user to zoom or use larger images specifically when they need it like H&M does.
The large image is not there by default, but if users need to see the texture of the shirt, they can zoom in or view the product on full screen or they can see a larger image of the entire product through an easily exit-able popover.
Putting It All Together
Everybody has an opinion about design, but not everybody has conversions in mind. If conversion specialists stay away from stock photos, use photos to create contrast, refrain from putting critical images at the right, ensure that images support navigation and only load large images when users request them, their image use will lead to better conversions.
