April Event Recap: Reimagining the Future of Advertising with the Google Art, Copy & Code TeamApril 21, 2015
MIMA Member Profile: Deluxe’s Heather RistApril 29, 2015
We sat down with Kelly Canavan, the market development manager, and Fred Arsenault, technology development manager, at 3M Visual Attention Technologies & Applications, to talk design, visual priorities, and the tools that help those processes succeed for this month’s sponsored blog post.
After all, you only have seconds to get your customers’ attention, so you’d better make sure your most important content stands out. That’s why many designers and marketers turn to 3M℠ Visual Attention Software (VAS), a tool that helps increase confidence in a design or marketing idea.
Here’s what we learned about VAS and how it helps designers and marketers alike.
What is VAS?
KC: VAS is our visual attention software that helps you increase the chance people will notice the things you want them to see when they visit your site, receive your newsletters, get served your ads, and so on. It’s an easy-to-use tool for designers and marketers, or anyone involved in visual communication and design decisions. You can upload images and analyze them using the technology, and in 20 seconds you can review 5 reports that can help you be more confident about your layout, and help inform revisions if you decide they’re needed.
Exactly what does VAS predict?
KC: VAS simulates an early phase of human vision that occurs when we first glance at something, but before we’re aware of what we’re looking at. You can use this information as you design to increase the chance of attracting “first glance” attention. That way, it’s more likely a person’s vision system will switch over to conscious viewing at your priority area within the design, giving the creative a chance to do its job.
Can you give us an example of how VAS has helped with a website or project?
KC: We used it on one of our own websites, testing several versions of a web page with subtle design changes to the “Where to Buy?” button. One of the designs drove 181% more click throughs to the Where to Buy page versus the original design.
That’s impressive. Can you walk through that discovery with us?
KC: The marketer’s hypothesis was simple. If the “Where to Buy?” button were more prominent, then more customers might click through to the “Where to Buy?” web page. So, the A/B test compared design combinations of button colors and placement, while everything else on the page was identical. The result was astonishing. Just by changing the button color to blue instead of the original red, and by placing it on the left side of the page vs. the right side, click-through increased by 181%. The VAS results predicted that the winning design’s Where to Buy button would be more likely to get people’s attention at first glance.
That is a crucial discovery. What elements from the VAS results were most helpful to you?
KC: So, the marketer’s hypothesis was correct. VAS helped them design to express that hypothesis in various ways, and get those designs approved quickly. VAS generates 5 reports to help designers and marketers understand a design’s visual hierarchy at first glance: 1) Areas of Interest, 2) Visual Elements, 3) Heatmap, 4) Sequence, and 5) Regions. The VAS tool lets you quickly analyze and compare these 5 results for the original design and the variations.
The Areas of Interest report shows that for the original design, it was only 61% likely a person will glance at the “Where to Buy?” button. But, in the design that ultimately performed best, that likelihood increased to 71%.
The Heatmap report showed stronger attention-getting power distributed across the entire button in the winning design. And, notice how attention seems to have shifted away from the woman’s face in the banner at the bottom of the winning design page?
The Sequence report showed that the winning design’s button is the first object a person is likely to fixate on at first glance.
We didn’t show the Regions report or Visual Elements report for brevity, but collectively, this data helped everyone be more confident that the design concept was ready for testing, and if the hypothesis was valid, might be better for the business.
Why should designers or marketers use VAS in their process?
KC: VAS is both a design tool and a collaboration tool. Our customers tell us VAS helps them gain consensus about a design’s visual priorities – which can be half the battle. They also use VAS results during presentations with decision makers to support design recommendations, adding objective data to the discussion which streamlines reviews and approvals. It may seem counter intuitive – adding a step to your process saves overall time and effort, but that’s what we’re hearing from our customers.
FA: We often say it’s like spell-check for visual communications. The tool doesn’t know your marketing goal, just like spell check doesn’t know what you’re writing about. But, like spell check quickly analyzes documents and finds words that need your attention, VAS quickly analyzes the pixels behind the design, and finds edges, intensity, differences in red-green and blue-yellow contrast, and faces – the 5 elements science has proven capture our attention in the first few seconds of glancing at something. Then, it’s up to you to decide if your design is ready to present, or if want to try to increase the prominence of whatever you prioritized, like the benefit visual, headline, call to action, etc. It’s useful information, backed up by solid science.
KC: Plus, it’s not just limited to web design. We have customers using VAS for websites, emails, ads, in-store merchandising, billboards, packaging, wayfinding signs, and even PowerPoint slides. There really isn’t a limit on what type of visuals you can upload and analyze.
Lastly, how does the tool work?
FA: The whole process takes about a minute – it’s super intuitive and efficient. Here’s how it works:
1. Sign Up – Using Chrome, IE, or Safari, go to https://vas.3m.com and click the Sign Up link to create a VAS account in minutes.
2. Upload images to your portfolio. Click on the Upload control or drag and drop screen captures of an actual web page, or mock up variations on the design.
3. Select an image type. The webpage setting tells the model that the viewer is about 2 feet away, there’s a bezel around the image, and shifts the center viewing bias to the top/left. There are additional settings for other types of visual communication.
4. Mark-up the image. Use our Areas of Interest mark-up tool to draw boxes or polygons around your visual priorities, such as a call to action, and other areas that might “compete” with your priorities for visual attention.
5. Click the Analyze button. The technology “rakes” the image, finding edges, intensity, blue/yellow contrast, red/green contrast, and faces. Analysis takes 20 seconds.
6. Review the VAS reports. The software generates 5 reports highlighting the areas most likely to attract attention, helping you understand what you might try to drive attention to your visual priorities and away from ‘distractors.’ You can review the reports within the user interface, and download them to share with your colleagues or clients.