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

Question

I have a row of icons with labels. The first three are clickable and are in fact nav elements for the content area. The last icon isn't clickable... how do I make the lack of clicking affordance clear? I've considered using hover effects, but the website will be used primarily on mobile, so I also need the affordances to be clear from the outset.

I've tried making use of whitespace and an outlined icon instead of a solid icon to differentiate the last icon, but I'm not sure if it's clear enough.

Answer 1

Please Ignore the Following Rant

Congratulations. You’ve been web-abused. You’re the victim of all those other sites/apps failing to apply a consistent simple absolute distinction between clickable and non-clickable elements. After all, that’s probably only the most important single thing you need to communicate with your graphic design. So users get TAMIDS UIs (tap anywhere; maybe it does something).

Solving Your Problem

Okay, enough ranting. Let’s solve your problem.

Graying Won’t Work

Graying the non-link icons probably won’t work. For a lot of users, graying means a disabled control –one that is temporarily unavailable, usually until the user performs some action. These users may be frustrated that they can’t figure out the action they need to do to enable the icons. Other users may think a grayed control is not only disabled but invalid –that the data it shows in the label cannot be trusted. More users will fail to see the grayed icons entirely, precisely because you made them so inconspicuous and because their experience with other apps has trained their eyes to skip over anything gray. The remaining users think that gray means an active control, because relatively recently dark gray was a fashionable color, especially on mobile devices.

Relative Salience Won’t Work

Trying to make the linking icons simply more conspicuous than the non-linking icons on some arbitrary graphic dimension also probably won’t work. Simple graphic conspicuousness usually means a different level of importance in content, and who’s to say a link is necessary more important? User will not be able to anticipate what specific graphic dimension distinguishes linking from non-linking, so they won’t know what you’re trying to say. They may misperceive that the content of the text labels of the non-link icons is less important than the content of the labels of the link icons. Yes, if you make the non-links inconspicuous enough then users will stop clicking them, but only because they don't even notice them, and you don't want that.

Grouping Won’t Work

Grouping usually means the content has similar semantic meaning, not behavior. We embed links all the time among non-linking text (like in this post).

Solution 1: Back to Basics

Users most consistently relate two things to links: color, especially shades of blue, and underlining. Make all your icons monochrome and make the linking icons colored. Use the same color for all linking icons and all other links in your app. Your purple in the first icon might work –it’s close to blue, and some users may remember that purple used to mean a link too (a visited one). Otherwise, go with a shade of blue. Make your non-linking icons black. Not gray, but black, like inactive text.

Underline your linking icons with the same color as the icons. It may be unusual, but it probably will work. If you can’t abide with underlining an icon, put a colored square outline around the linking icons, using your chosen link color. There used to be a convention to outline all linking pictures with blue, and maybe some users will remember it, while others will generalized from underlining. You may want to reconsider Charles Wesley’s advice to put a button-like border around the icon and its text label (although I generally oppose confounding command buttons with links).

Make the icon labels links too. Color them and consider underlining them. At least they can be made distinguishable as links and non-links.

Solution 2: Give Up on Icons

Actually, in your particular case, maybe you should delete your icons and only use the text labels as links, using the usual means to distinguish linking from non-linking text. Some of your icons aren't saying anything the labels aren't already saying -they're a waste of precious space on a mobile app. With the space you save from removing the icons, you can add text to labels making it clearer what they mean (I don't really know -I can't tell from the mysterious icons). The solution to distinguishing linking from non-linking icons may be to not use icons.

Answer 2

We've dealt with the same issue here and there and when looking at yours, even the outline one still looked clickable but just appeared to be a different style. All the labels for each option appear to be the same color too. One of the things I thought of was in order to give more differentiation or contrast to the others, you could scale back the last one even more—a disabled feel, and maybe bring that purple color you used on the posts icon to the other two active links (30 followers & 5 Followers). Did a quick and dirty mock from yours to get the point across:

Hope this helps a bit.

Answer 3

You should limit the variation in the design of your icons to reflect the intended behaviour. For examples, you have already used colours versus grey on the icons to indicate something, and then used the difference in size to indicate another, and then using the whitespace and outlined icon to differentiate a behaviour. I would say that users are not going to understand the difference immediately however you present it because there are already many variations. The only thing on the page that I think can't be clicked are the letters and numbers that serve as labels/descriptions to the icons. I suggest reducing the variation on the designs of the icons then even if it is not obvious the users will pick it up quicker.