44

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:

enter image description here

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.

8
  • 9
    (actual images are not cats, just for demo) now that's how you make a good demo! Jan 28, 2016 at 0:13
  • 2
    Isn't it better to use button-like visual representations for buttons? Why start with mystery meat and then try to make it look less like mysterious meat? (Answer: PHB?) Jan 28, 2016 at 12:01
  • 7
    Unrelated to your actual question, but I find it somewhat irritating, that the images hover effect is applied only on the four "image-parts" of the arrow but not on the white lines which seperates the four pieces. I'd have the arrow as a whole button instead of four buttons with the same effect which happen to form an arrow shape.
    – Bowdzone
    Jan 29, 2016 at 7:13
  • 2
    Unrelated to your actual question, but I find that the delayed hover effect makes your site feel incredibly laggy. Like it only notices that you moved the mouse half a second later. Jan 29, 2016 at 17:40
  • 2
    You are aware that smartphones don't have mice that allow hovering over cats? Jan 29, 2016 at 18:11

7 Answers 7

35

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:

Subtle animation to suggest interactability


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

Example:

Explicit instruction to interact


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.

4
  • 11
    Good answer. I do think option #2 is sort of an admission of design failure (a good, intuitive design shouldn't need it). Nevertheless, it can be the easiest fix in many situations.
    – user31143
    Jan 28, 2016 at 12:10
  • I think this is a very important point. Used to be that only users on mobile devices used a touch screen, but that is increasingly not the case. Many laptops or tablets have touch screens while also a large enough resolution or PPI to trigger common "wired" or "desktop" breakpoints. Assume your users can't hover your UI.
    – Nathan K
    Jan 29, 2016 at 15:44
  • 3
    -1 for animation Jan 30, 2016 at 3:26
  • 4
    I just tried to click on the boxes in #1.
    – Bob
    Jan 30, 2016 at 6:11
25

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.

7
  • 13
    Interestingly, one NN article says millennials identify possible targets more quickly than older users while another says millennials make more errors. Maybe millennials don’t actually detect links better. Maybe they have just surrendered to the onslaught of intractable flat designs that web-abused them as they came of age. To quote the article, “Another young adult user responded… ‘I just start clicking and praying that it works.’” Older users are under the delusion that we web designers still try to make web pages understandable from just looking at them. Jan 27, 2016 at 14:40
  • 8
    @MichaelZuschlag Anecdote—I’ve watched my younger nieces and nephews use digital products, and they are significantly more willing to explore a UI than most adults. I’m not sure if they are better at perceiving UI elements, as much as being more likely to discover them.
    – jlmakes
    Jan 27, 2016 at 18:39
  • 3
    @jlmakes. Yes, I suspect that younger people simply have more disposal time to play around with the latest devices. That could in some cases translate into acquiring more skill in them. Jan 27, 2016 at 21:26
  • These are excellent points. Older adults may also not experiment as often because they are afraid of "breaking" something or not being able to tell where they are going to go. blogs.voanews.com/techtonics/2014/10/03/… has an interesting perspective, although not a research article.
    – Chromarush
    Jan 27, 2016 at 22:04
  • 1
    @Chromarush - another explanation is that older adults don't feel like spending the time to click around and teaching themselves how to use a site with an inscrutable UI, so they figure that if the site designer is going to purposely make it hard to use their site, then they'll go elsewhere. I have little fear of "breaking" a site or going someplace my back button can't return me from, but I don't like trying to guess how to use a "fun" UI a designer came up with.
    – Johnny
    Jan 29, 2016 at 16:52
11

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).
2
  • I don't think the images are part of the navigation
    – icc97
    Jan 27, 2016 at 16:52
  • 3
    @icc97 _ It's not a typical way to navigate content_ Quoted from OP; navigation is directly implied. Jan 27, 2016 at 19:25
11

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.

1
  • 3
    I'd test movement before committing to it. The issue isn't that users don't notice the shapes. The issue is they can't tell they're clickable. I'm not aware of a convention that movement means clickable except for advertisements, so movement may discourage users from clicking. Movement can also be an annoying distraction. User may click not with the intent to navigate to the indicated page but in hope to stop the movement. Jan 28, 2016 at 13:05
9

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:

Arrowheads on rectangles

Another closer to your original “paned” design is

Pane dividers as arrowheads

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:

Beveled edges on image

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:

Tight blue border around image

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?

3
  • I was thinking of drop shadow in stead of raised border
    – icc97
    Jan 27, 2016 at 16:49
  • 2
    @icc97. Might be worth testing. It could make the images look "pressable." However, I don't think there is much tradition for clickability being associated with drop shadows. Perceived clickability is mostly from learning rather arbitrary conventions. Things look clickable if they have the look and position of things that were clickable on a lot of other websites. Jan 27, 2016 at 21:29
  • Using a drop shadow or 3D border effect was my first thought too, to give it a button like look.
    – marsze
    Mar 13, 2017 at 12:08
4

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

enter image description here

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

enter image description here

2

"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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.