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
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.
No comments:
Post a Comment