8

There is a tendency to use badges or status images to show information, but very often these badges look like other items which you interact with, such as buttons.

There is a lot of information on affordance and how to indicate it, but what about on how to show non-affordance?

Background: I'm working on a mobile app where we need to show the status of an item (think of the listing of apps in the AppStore) as being inactive. The most elegant way of doing this seems to be using a status icon on it, but some people try to interact with the icon. So I'm looking for ways of making it clear that it is not something to interact with. The question however would be more useful to other people if the answers are kept general.

6
  • Interesting question; the inverse counterpart to the more normal problem of signalling affordance. I imagine the answers are going to be tightly tied to the same general principles.
    – kastark
    Commented Jul 26, 2012 at 11:11
  • In terns of Don Norman's use of the term 'affordance' (Design of Everyday Things) there wouldn't be any such thing as a 'non-affordance'. What you want is an affordance that indicates flags up the lack of interaction potential.
    – PhillipW
    Commented Jul 26, 2012 at 12:25
  • @PhillipW - as I understand the term, affordance must suggest an action. Non-affordance would therefore imply a lack of affordance, implying a lack of potential action. I think I'll expand this line of thinking into an answer to explain further.
    – kastark
    Commented Jul 26, 2012 at 13:48
  • 3
    I have always considered "constraints" to be the opposite of "affordance" (ref. Don Norman, "The Design of Everyday Things"). Eg: Disabled/flat buttons, "illegal action" icon, square-peg-in-a-round-hole etc Commented Jul 26, 2012 at 13:54
  • 3
    ...Why are users clicking the icon? Maybe there's an action you can actually attach to the image - even if it's just opening a tooltip or modal dialog explaining what the icon means and what the user can do about it. Commented Jul 29, 2012 at 0:51

4 Answers 4

3

There are two ways of looking at this problem. One suggests that you create objects without affording interaction. The other suggests that you actively imply to the user that an object is non-interactive.

To satisfy the first, the method is simply stated: avoid techniques that are typically used to afford interaction with an element. What you're doing here is not adding in the various design cues like shading, onHover states, contrasting colours, and so forth.

The one element which almost everyone can agree is usually non-interactive is uncoloured plain text. The simple (or lack of) styling on elements like this means that they don't stand out. Users also have a mental model of the internet (built from general web practices) which suggests that plain text doesn't usually do anything. If you have status messages, for example, you could render them in plain text and not give them any major styling or animation. By presenting them in this way you are not affording any action with them.

Various other attributes of affordances can be avoided - funky colours, shadows, animations, onHover effects, borders which look like buttons, mouse cursor changes. Keeping an element plain means that users will have less reason to believe that it affords an action.

One other technique is to present something which is more obviously an interactive component. If you're showing a status message, then perhaps you could add a control which hides the message or performs some other action - because the affordance will be much more obvious, it is more likely that the user will act on it by preference. This is the same principle which suggests giving more visual weight to the action you want a user to perform when they're presented with multiple choices.

To satisfy the second is more difficult, but there are examples. There are a number of cues that actively suggest that a component is inactive. By doing this, you are relying on the user's memories of having encountered similar items in an inactive state.

Inactive items will seem to recede from the design or blend in with it. A common example of this is greyed-out icons or text (or more generally, elements with a lower contrast than active items). They will also lack the various other affordances that active items have.

In particular icons or badges could blend with the surrounding content in such a way that it does not look like a self-contained object. Buttons are easy to press and afford their pressing largely because they are contained - avoid containment and users will have vastly less opportunity to interact with the icon. For example, try this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

There are a few other methods, but these are by and large the most common of directly indicating that something is inactive.

And finally of course, it's worth investigating other solutions to the deeper problem. As others have suggested, using the affordance to your advantage and adding functionality may be one solution, as might simply removing the icons themselves altogether if their presence causes more problems than it solves.

2
  • How would you apply this to a mobile situation where (referring to Android), dark grey icons with no drop shadow or gradient are used as interactive items?
    – JohnGB
    Commented Jul 26, 2012 at 15:17
  • Tricky question, and I'm not sure there's a good answer that I can see. The Android developer guidelines don't mention inactive icons, so you'd probably have to rely on lowering contrast or using something that doesn't look like an icon/removing the icon entirely (though that may not be possible).
    – kastark
    Commented Jul 26, 2012 at 15:23
3

I think you'd need to look at your site and see how affordance is currently shown - are your buttons shown as raised, do you have mouseover states, and so on? I'd also be interested to know how you know that your users are trying to interact with the icon - if through observation, can you ask them why? Is there a way you could turn this to your advantage - can you improve the UX by making the icon an interactive element?

3
  • We know this from watching and speaking to users. The answer is that "it looked like something I could tap" is the general consensus. We've considered making it an interactive element (which we can), but that introduces other issues for us, as this status (paused) is not shown for active items, so if tapping the status icon allows you to un-pause, then people get stuck when trying to pause again. Either way, I'd prefer to keep the topic general so that it's not just focused on my problem.
    – JohnGB
    Commented Jul 26, 2012 at 11:55
  • Hi John, I'm not sure how general an answer can be! On this site, clickable stuff is either a link (which follows general standards) or a button/tag, both of which have the same styling (copy in a shaded box with a keyline). Could you provide examples of the icon people are getting confused with and the clickable content?
    – Peter
    Commented Jul 26, 2012 at 12:15
  • This is a mobile app, so look at general example in Android, where a simple flat icon is used as a "button".
    – JohnGB
    Commented Jul 26, 2012 at 12:58
2

I think you hit the nail on the head with this statement:

This is a mobile app, so look at general example in Android, where a simple flat icon is used as a "button".

The problem may not be the lack of affordance with this item. It could be that items which should have affordance don't. You should look into not just removing affordance from this item, but also adding affordance to actionable items in the interface.

Click affordance can be affected by altering things like these.

  • Color - vividness, clarity, contrast
  • Opacity
  • Effects - sheen, tarnish, reflection
  • Boldness
  • Movement - frequency, coverage, delta
  • Borders
  • Backgrounds
  • Height/Depth - embossed, flat, elevated, shadows
  • Uniqueness - Items unlike any other lack actionable inference.
  • Layering - overlapping non-actionable elements with actionable ones.
  • Placement - Proximity to other actionable items.
  • Image - Push Pin, Check, Radio, Pencil
0

I don't use an Android, but "graying out" (=low contrast as the previous answerer said)?

I wanted to also say about playing with less deep in emboss, shorter shadows, whatever, but whenever I say this, I have to look at the unchecked checkbox widget in android, for which I always have to remind myself as a user "no, this isn't disabled: this is a non-checked checkbox"...

In the old black&white mac os times, we had this dotted notion, removing every second pixel from the foreground.

I tried out now, I guess it still does show disabledness pretty well.

However, it depends on the PPI, and the user's own eyesight... for me it works, but I don't have a big bunch of different android devices right here...

"dodging" (removing shadows, "dotting out", and blurring

Also tried blurring, but that wouldn't work very well on small screens I guess.

(and here's a link for the original image, just to be correct, I hope it's eligible to fair use - I mean, hey, it's a screenshot of Android's preferences...)

Your Answer

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

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