The biggest web challenge today is designing for a dwindling human attention span. Thanks to smart phones, the average human attention span has dropped from 12 seconds to 8 seconds from 2000 to 2015 -- according to a study by Microsoft.
The effective use of graphics on your website can immediately grab users attention, communicate to your audience what you stand for, and present your company’s personality. In addition, imagery SEO (search engine optimization) done right can boost your search engine rank and actually attract new organic visits to your website.
But like all things web, there is a right way to implement images for success and effectiveness. Follow these tips when placing graphics on your website to better reach your audience and drive traffic and clicks:
1. Use meaningful, high-quality imagery
As soon as a visitor lands on your website, they should be able to tell what your company is about and how it serves them. Incorporate meaningful, impactful images into the home page and other landing pages that make the purpose of your site immediately apparent to draw visitors in to learn more.
This usually means using proprietary images – your own images or those of your customers using your product/service – to present a compelling, realistic representation of who you are. Stock imagery is often too generic to represent your unique value add. However, many organizations find that their own imagery lacks the quality required for the size and prominence required on their home page. In that case, consider bringing in a professional photographer to capture your products and do them justice.
2. Use stock imagery sparingly and carefully
If you don’t have the budget or time to gather professional imagery for your site – or lack permission from your clients to use their images – you may find yourself relying on stock imagery to communicate who you are. Do your best to select stock photos that relate as much as possible to your applications and industries. Generic stock imagery of business people sitting in a meeting room, for example, turns off visitors to your site and doesn’t say anything about who you are. Use very specific, long-tail keywords when searching stock imagery sites to find the best images for your needs. And work with a graphic designer who can recommend the right stock images for the dimensions of your site’s layout.
TREW client, Vertech, buys industrial and technology focused graphics instead of standard stock photos. Not only does this showcase their brand, it also sets them apart from competing system integrators.
Some stock imagery repositories TREW uses include stock.adobe.com, 123rf.com, istockphoto.com, and gettyimages.com. In addition, various industries have their own stock libraries, such as the science and medical image library at Science Source. The US government also offers royalty-free images on many agencies’ websites, such as NASA. These are a great resource for specific photos that can make a visual impact on your website.
3. Incorporate graphic icons for better usability
Icons have played a role in software for many years as a way to visually cue users to perform a task. But they also provide an effective way to offer your web visitors choices when there are many options. After all, web usability studies have pointed to higher bounce rates when visitors are faced with too much text, especially when making drill-down choices.
Use simple graphic icons to break up text when there are many paths to choose from, such as on your homepage or service/solutions pages. In the below example from TREW client, Wineman Technology, icons are visually pleasing and help users quickly make selections without having to read a lot of small print on their homepage.
4. Enhance scanning with smart imagery in body text
It’s no secret that web visitors only read 20% of the text on the page, and the eye tends to gaze on images more than text. Why not incorporate more graphical elements within your body text to facilitate scanning and quick comprehension of content?
TREW client, Hallam ICS, does this by incorporating statistics and graphical bullets on their About Us page to break up text and draw visitors in. The below example demonstrates how graphical bullets can serve both as an infographic as well as a unique presentation of body text in graphical form in a services page.
5. Make your CTAs visually stimulating and clickable
Graphical buttons are an effective way to direct the user’s eye toward the next step, or the action you desire they take on your site when perusing a page. Buttons that are bold, well-designed, and that incorporate action-oriented verbiage are more likely to convert your users.
For example, a recent test of button designs by an e-commerce site saw a 35% increase in conversion when the site’s call-to-action button was redesigned using a bolder color that stood out better from the text. In addition, changing button text from a generic label like “Submit” to actionable, specific verbiage such as “Download Whitepaper” provides the visitor with a visual cue about what they’ll receive after they click through, which can help motivate your users to continue, and will garner more clicks as a result.
You also can create unique graphic CTA buttons in tools like Canva that take users to lead generating content. These images can be repurposed into your social media posts. TREW's client, Vertech uses graphic CTA buttons to get users to click-through to engaging content and offers from their blog.
6. Use at three images or graphics in each web page
Break up text on web pages and blog posts with pictures, icons or graphics. At TREW, we always advise clients to use at least 3 images in every web pages -- even blogs. Sometimes it can be hard to come up with good images to include in blog posts. Be creative here! Add in screen shots of products and demos if that's applicable. You can also include logos or certifications badges into blog posts where you're talking about specific services and products.
At TREW, we make blog banners for every blog post. These blog banners get repurposed in our social media posts and you'll find them featured on our homepage too. We use a blog banner template for each banner that pulls in our brand colors and fonts, but each banner is different and unique to its parent blog post. Check out some examples below.
7. Always, ALWAYS optimize your images for search engine optimization
It may seem like just one more thing on your “to-do” list when redesigning your site or refreshing its content, but optimizing your images for search is a critical must-do that’s often forgotten or de-prioritized in the rush to get new content live. Don’t fall into that trap, because optimized images will display prominently in Google image searches, which can bring new visitors to your site. Companies who optimize their images for search experience a bump in visits – in some cases seeing between 20% and 60% of new visits coming from Google image search.
But how do you optimize your images for SEO?
- Name your image files using relevant keywords in image file names, keep the file name to five words or less, and use a hyphen (-) between words without spaces. Be sure to avoid nonsensical image names such as the typical file names for stock photos – just rename them meaningfully. And consider naming the image based on where it is used on the site so that the file name also ties the image tightly to the body text and keywords on the page.
- Make sure each image is tagged with alt text in your CMS, and be sure to incorporate keywords in alt text as well. Alt text should be limited to five words separated by commas.
- Place all images in the same sub-directory on your web server, because images that live in multiple directories will be more difficult for search engines to find.
- Test your site to see how well your images are tagged by visiting the free SEO tool at Feedthebot.com.
Smart use of imagery online is definitely an art and a science, and it requires time and thought to pull off. If you lack an in-house graphics department to assist you in making your website a piece of art, contact TREW to learn more about our web design services today!
Read our eBook, “Smart Marketing for Engineer: Website Redesign” to learn more about improving and optimizing your technical B2B website.
This blog post has been updated since it's original publish date of March 31, 2015.