The Science Behind the Click: Understanding Interaction Design

By July 26, 2019 January 6th, 2020 Interactive Content, Science of Color & Design
Screen showing interactive infographics design

A company’s website can serve a breadth of functions, from showcasing products to providing the latest news to making room for discussion. But no matter whether it’s a traditional landing page, a microsite, or an interactive infographic, you probably have the same goal: to capture visitors’ interest enough that they’ll click through to another page to learn more. To achieve this, you’ll optimize your user experience and interaction design. 

General consensus is that sparkly cosmic backgrounds are no longer the most attractive choice in web page design (shout-out to all of our MySpace, Blogspot, and Tumblr pages!). So what can you do to engage today’s visually literate audiences — and make them want to learn more about what your company has to offer? 

We set out to uncover some principles that transform websites and interactive infographics that live on your site into the most effective marketing tools possible, and to learn what makes people — in the most literal sense — click.

Interaction Design for Emotional Connection

Getting someone to click through to your content requires creating an emotional connection, not only through visuals but through language as well. According to the Advanced Marketing Institute, headlines that have a higher Emotional Marketing Value (meaning they inspire more feelings in readers) will ultimately earn you more engagement. 

Infographic layout wireframe example

One way to get people interested is to help viewers see themselves in what your page is offering. So, make it first-person. In an A/B test, unbounce.com increased their clickthrough rate by 90% by changing “your” to “my” — that’s it.

Similarly, when it comes to visuals, focusing on building a personal, emotional connection can increase user interaction with your page. A story with a hero character or told with a particular perspective in mind is easier to relate to for most people. Think about just how popular video games are — interfaces in which the user is the star of the show. This builds an emotional investment that makes them want to continue along their journey — and in many cases, keep clicking. 

Whether your goal is to encourage site visitors to buy a product or save a password, it’s essential that you communicate without jargon. Plain language will ensure that users know exactly what’s about to happen, even if the behind-the-scenes action is slightly more complex. 

And make sure that any calls-to-action inform the reader about what that action is. Consider the differences between “Submit” and “Open my account,” or “Sign up” and “Join our marketing community.” Calls to action that foreshadow what will happen next help readers know what they’re getting into — and that they actually do want to click.

Strategize Your Layout

The organization of your web page or interactive infographic is a fundamental consideration when it comes to interaction design, and it can have a big impact in how your viewers interact with the page. After all, only 41% of people actually spend time reading the pages they click.

Measuring Content Engagement

The way you organize the user experience can help guide visitors in finding the most important information — and taking action. Arrange your information in 1 of the following 3 structures to balance how the eye scans a page with how the brain understands that information:

  • Gutenberg diagram: Especially helpful for large blocks of text, this mirrors how the eye moves on the page
  • Z-pattern layout: A strong choice for pages with a few key elements
  • F-pattern layout: Organization for key information according to eye-scanning patterns

An effective layout will ensure that your readers are picking up on the information you want them to have, but it also makes sure your pages aren’t too cluttered. White space around text has been shown to increase focus and understanding by almost 20%. It can develop emphasis and build connections between areas of information — which, in turn, helps your web page stand out.

Click into Color

Using your brand’s colors strategically can have a big payoff. While we’ve all heard the adage “Don’t just a book by its cover,” humans subconsciously judge based on looks: 62–90% of first-impression judgements on a product are based solely on color. 

However, it’s not enough just to use color to reap the benefits. Color needs to be both unique and accessible to have the widest possible impact as part of your interaction design strategy. In one test, HubSpot found that their CTA button generated 21% more clicks when they changed the button’s color from green (which matched other elements on the page) to red, likely because it needed to stand out visually to get users interested. 

This translates to an effective strategy for brand color. An accent color used for action items such as buttons or important information can amplify a brand’s visual identity and improve overall interaction design. You’ll notice, while browsing the Killer Visual Strategies website, that our accent color is pink. Compared to blue and white, we use this color relatively rarely so that, when it is used, it stands out and grabs viewers’ attention. 

You’ll also want to make sure that your use of color isn’t driving away some of your potential customers. Visual contrast and other strategies provide a more accessible reading experience, ensuring that any viewer will be able to see what you’re showing.

Crafting Clickable Interactive Infographics and Sites

Encouraging people to click on your website, interactive microsite, or other visual content takes structural and visual precision and strategy. Activating design principles that inspire action will help your pages stand out — and help you see results.

Abi Pollokoff

Author Abi Pollokoff

Abi Pollokoff is the Director of Content for Killer Infographics. Originally from the Chicago area, she moved to Seattle in 2014 from New Orleans. With a BA in English, French, and Italian and an MFA in Poetry, she is dedicated to exploring the nuances and possibilities of language. Before joining Killer, Abi spent time as a writing instructor as well as the associate editor at a book-publishing company. These experiences bolster Abi’s work with Killer and enable her to write for diverse audiences, and she strives to apply this perspective to target the unique goals of every Killer project. Abi enjoys developing strong working relationships with clients and creating a human connection through the writing process.

More posts by Abi Pollokoff

Leave a Reply