How to make irregularly shaped objects / elements look clickable?

Question

On our homepage, we have these irregularly shaped elements that are clickable above the fold (actual images are not cats, just for demo):

http://codepen.io/aguerrero/pen/pgvJoa

And this is how it's laid out in the homepage:

The issue is that the irregularly shaped elements (arrows) look like they're just images and are not clickable. It's not a typical way to navigate content.

How do I make it so that the images look like you can interact with them by clicking on them? They already have hover effects but it's not apparent until you happen to mouseover the images.

Answer 1

You should NOT rely on hover states.

Even if you’re not developing a responsive website, now that we have touch devices, the days of relying on hover states to imply "interactability" are gone. I think you have 3 options here:

1. As long as you don't have other animations, subtle movement is all you need to draw attention to the UI elements—and a user will likely assume they can interact with them.

Example:

---

2. Instruct the user explicitly they can click/tap on the elements.

Example:

---

3. Embrace the reality that your aesthetic taste here may not be the best design choice, and explore alternatives that better suit your goals and user’s expectations.

Answer 2

NNG Has a great article on Making Clickable Elements Recognizable specifically for images:

• Ensure smaller images enlarge when clicked.
• Make all elements (e.g., picture, icon, text) that are associated with each other clickable. Doing so increases the target size and improves the probability of capturing an intended click.
• Avoid multiple calls to action for a given image unless the options within that image are plainly presented, such as a bulleted list of hyperlinks or clearly labeled buttons.

I think your hover effects are a great start and I think you are looking for are signifiers that help users intuitively come to understand that those images are clickable. Depending on your audience age and other demographics and site goals it may be more or less advantageous to adjust the design to look more like buttons or continue with your strategy.

For example NNG goes into details of millennials vs other groups in Millennials as Digital Natives: Myths and Realities, Page Parking: Millennials' Multi-Tab Mania, and finally reference the ability to determine clickable elements in Long-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency

...young adult users (age 18–30) actually do seem to be better than older adults at detecting clickable elements, even when they have absent or weak signifiers — specifically, young adults identify possible targets more quickly.

There are several possible reasons for this phenomenon, and any combination of them might be true.

• Young adults may be more attuned to subtle placement clues.
• Young adults may have been more frequently exposed to flat interfaces or to other more exploratory interfaces (such as games).
• Young adults may be better at recognizing elements that tend to be clickable, and at quickly learning new design patterns.

And go on to point out:

• We recommend always using some amount of visual signifier on clickable elements—whether you want to use conventional, strong signifiers such as blue links or more subtle, weak signifiers (such as ghost buttons). Regardless of the design aesthetic you choose, follow our guidelines for signaling what’s clickable. Clearly communicating clickability is good for making users feel in control, but it can also help encourage them to take actions that they might otherwise not realize are available.
• For primary elements and features, don’t use hover as the only way to reveal a signifier. Using hover signifiers might be fine for secondary content when they fit naturally in a user’s workflow. For example, on e-commerce sites, a subtle magnifying-glass icon that appears in the corner of a product image when users hover over it will reinforce their expectation that clicking on the image will enlarge it.
• If you choose to leave visual signifiers out for aesthetic appeal, make sure you provide strong feedback. Immediate, noticeable feedback is always necessary for usability, but it becomes even more critical when users aren’t confident that they know what’s clickable. When users click on something with uncertainty, they immediately start looking for reassurance that they made the right choice.
• As always, your decisions should be influenced by the characteristics of your users. If you’re designing for younger users, they may be better able to figure things out without strong clickability signifiers—just be prepared to accept the consequences of making your users feel less ‘in control’ of the interface. And, as always, the best way to find out how your users will actually handle your interface is through user research and analytics.
• Watch out for the contextual clues in your interface. It’s not enough anymore to simply not underline a heading to communicate that it isn’t linked. Users are now more likely to click elements with no signifiers, because you can bet they’ve run into a situation in the past where that same element didn’t have any signifiers but was clickable anyway.

So all that to say firstly to consider the risks of your user base and if they won't be able to recognize the clickable element if it strictly in a link or button form. If you decide its you want to continue with your design some ideas for signifiers are verbiage worked into the design of the images as a call to action, or elements of skeuomorphism such as drop shadows (this is not my favorite solution but it is an option).

Aside from initial signifiers items like your hover effect are very useful. I suggest making sure you do not use washed out images or images that repeat the arrow/grid effect in your site that are not interactive so users don't confuse them. Another idea would be to add an additional but very subtle animation transition to the hover effect to really make it apparent for those who might suffer from poor color vision. Something as simple as enlarging the images as suggested by NNG might be enough. Being that you put up a code sample you probably have a good idea on the effects that are available but I've been using this site to get ideas Hover.css site for ideas.

Answer 3

These images simply don't look like navigation (as you admit) and won't be perceived as such. Users just don't expect oddly shaped images to be clickable. I don't think there is any magic solution to overcome that.

It may be worth rethinking your design in order to better conform to user expectations rather than trying to put a band-aid on the problem. Note that there are two ways to do this:

• Change the images to conventional rectangles which are much more likely to be perceived as clickable.
• Keep the arrow design, but don't make it central to your navigation. Let other navigation serve as the primary method of accessing this content (in this scenario, the images could still be clickable, but you wouldn't have to rely on the users discovering this).

Answer 4

Movement might provide you with an option. The human eye is so attuned to it that it need only be subtle. On completion of the page load you could consider a rolling increase in image size and shadow depth on each image, across the chevron from right to left.

This would draw a user attention in without having to "feel" the site. You then apply the same movement on hover. With the mouse change to pointer, I think 95% of users would get the idea.

Answer 5

Hover-over

Highlighting on hovering is worth doing, but, as you discovered, it’s not adequate by itself since the user has to make an effort to “feel” the interface to see what it can do, rather than just look at it. Hover effects also don’t do much for tablet users.

“Rectangular Arrows”

If you’re sure the problem is the non-rectangular shape, then work with the visual design to combine rectangularity and arrow-ness in a single acceptable shape. One alternative is simply:

Another closer to your original “paned” design is

Borders

If the problem isn’t so much the non-rectangular shape, or you can’t come up with any visually acceptable solutions that incorporate rectangles, then you can try incorporating static borders around your clickable images. A “raised” border will give the images a button-like depressable look that may encourage clicking. This is actually preferred if the “links” actually initialize an action (like “acquire kitty”) rather than simply display information. So, something like:

There’s also the old standard to outline clickable images with the same color you use for links. It might still work, especially if your link color is a shade of blue. From seeing text links on the page (e.g. in the "typical navigation" block), users may generalize that the use of the same color means the shapes are links too. So it could look something like:

Text

If no graphic solution is acceptable, you can include text with the images (in or under them), and make them visually links (colored and underlined). Text could be a label for what the link does or links to, which may be necessary as often pictures are not sufficiently self-explanatory. Worse case, use a generic label like “Step 1.” Even a simple instruction like “(click)” would help, although it’s rather klugey.

At first users will just click the text, which at least keeps them from getting stuck. Once they click the first time, they’ll see the whole image light up, which will signal them to click the (easier to click) image the next time.

Similar Questions and Answers

How to indicate that an image is a link too?

How do I indicate that a subset of icons aren't clickable?

Answer 6

As per our friends here at UX.SE, I suggest using a drop shadow.

It perhaps relies on the fact that it's surrounded by links anyway - but they indicate that there is something 'special' about the image by adding a drop shadow.

This is not hugely different from Michael Zuschlag's answer, but turning an image into a button didn't feel right.

A drop shadow also won't impact your current design too much.

I've made an SVG mockup in codepen based on yours

Answer 7

"How do I make it so that the images look like you can interact with them by clicking on them?"

Answer: You don’t. This answer is already given by @dan1111 but I like to add the following:

Is it really an issue? Than rethink your navigation. If you don’t use this as “functional" navigation, than there is no real issue here as long as the "real" navigation backs it up. In that case you can leave the arrows as something to discover (like an easter egg).