What Makes An Object Clickable?
Date: March 1, 2016
|
Posted by:

“What makes an object clickable?”

It’s an interesting question, right? It’s easy to identify buttons and CTA’s in traditional digital environments. On website 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 looking 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.

On the web, when you click a button the expectation is that it’s going to take you somewhere else. In an interactive infographic, when the user clicks an object, most of the time, they’re being given additional information. The expectation is different.

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 last 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..

 

headlines_animation

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 & animation are usually something that is reoccurring throughout the piece. This repetition also helps to reinforce the clickable action.

pulsing-cut

 

headlines_instructions

We talk a lot about not making people think and clear instructions are an obvious way to do that. 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.

blog_instructions_v2

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.

 

headlines_color

I like to think we borrowed this technique from traditional website buttons. Contrast in color make 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.

blog_color

headlines_end
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!

Until next time, everyone.

melanie

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *