By Melanie Kinney, Content4Demand
“What makes an object clickable?”
It’s an interesting question, right? It’s easy to identify buttons and calls to action (CTAs) in traditional digital environments. On websites and in emails, you have an expectation of what a button looks like and what it will do when you click on it.
But what makes an object clickable? In the world of interactive infographics, there are all kinds of non-button objects that are clickable. Most of the time, the purpose of this object is different than a normal CTA, too. The user isn’t clicking on it to be taken to another place — they’re clicking to find out more information within the piece.
As designers and developers, we also have to consider how the clickable object is going to function on mobile devices and how it’s going to look. Before mobile became so pertinent, the hover-state was a perfect solution. The user could hover the cursor over an object and something would appear. That can still be done but there is no such action on mobile devices. You cannot hover over things on your tablet. Therefore, trends have shifted.
Over the past week, I’ve looked at more interactive infographics than I can count. I wanted to see what came across as “clickable.” Here’s what I found…
When you move through an interactive infographic, there is plenty of movement. Users see many objects appear on scroll or with a looping animation. It’s part of what makes this type of content so interesting.
Amidst all the movement, an object that pulses is an indication of something clickable. The object and animations are usually something that is reoccurring throughout the piece. This repetition also helps to reinforce the clickable action.
We talk a lot about not making people think too hard or jump through too many hoops while accessing content. Clear instructions are an obvious way to create a seamless experience for your buyer. Even something as simple as “click to tweet” is enough to explain the functionality of an object to the user.
A lot of the examples I looked at provided instructions like this at the start when the object appeared for the first time. After that, the action was to be assumed.
Directional arrows were also used multiple times. Whether it was a gallery of images and/or text that you could slide between or an arrow that pointed to a specific object. Arrows are another recognizable queue that there is something more to an object.
I like to think we borrowed this technique from traditional website buttons. Contrast in color makes an object stand out. If your primary website palette consists of mostly blues, your CTA will stand out much more if it’s orange or yellow. When the object breaks the color consistency, it draws your eye.
This works well in infographics, too. Below, you’ll notice that the primary colors are dark, rich blues. The clickable object stands out because it’s not. It draws my attention right away because it breaks form.
Animations, instructions and directional arrows or color contrast were the solutions that resonated the most.
Interestingly enough, unlike the hover-state, these trends all seamlessly lend themselves to mobile devices. Animations translate perfectly onto tablets. In fact, there’s likely no adjust needed on those objects. Likewise, contrast in colors is something we’ve been using for a long time in the traditional digital atmosphere. It’s perfect for mobile too.
Instructions and directional arrows can sometimes require minor tweaks on mobile. Placement of objects shift in order to better fit the space and arrows may need some adjusts. Also, the word “click” doesn’t apply as well as something like “tap” or “push.” Still, these things are easily adjustable!
Melanie Kinney is Digital Experience Director at Content4Demand. Learn more tips and best practices by visiting her blog.
