RE: Examples of interactive elements with what I consider missing or inadequate affordances

Brooks wrote:


  *   Which way does the nub go when the toggle switch is on, left or right?
  *   How can some users determine the selected state by the toggle switch background color, when the colors have such a low color contrast ratio?

> In my opinion, these are two distinct problems
I agree, and the contrast aspect is easier to define and deal with. Not easy, as we’ve discovered, but easier. (BTW I’d fail the toggle switch for non-text contrast.)

I’d just like to make a point that the term ‘affordances’ is very much like ‘art’, you know it when you see it, and not everyone agrees what it is and isn’t.

It is a very useful concept in product design, but the term has been greatly abused. A critical thing to understand is that it relies on knowing what the user expects. [1]

To take a couple of really extreme examples:

  *   If you’ve never seen blue underlines to represent links before, a standard link has no ‘affordance’. (When I started doing usability testing, about 30% of our participants were in that position.)
  *   If you know a product or type of interface well enough, there might be no visual indication that something is editable at all, the whole page could look like plain text. However, if it matches your expectations then it has sufficient ‘affordance’.

The toggle button example is somewhere in the middle of that, which is why they generally don’t rely on people knowing whether left is on or off.

I guess my point is that it is a really hard thing to pin down, there are massive differences based on context and individual differences (that are not related to disability as such). Someone might think a lack of affordances are rare, and for them they might be correct. Someone else might have little familiarity with a technology and find many things lack affordance.

My comment on the visual indicators draft<https://docs.google.com/document/d/1WhZAbswvPHs7A3stfqM_ATsaBHPeGbHtARcmaKMck1U/edit> was that there would be too many false positives, and thinking more, I’m not convinced it would catch things well either. Looking at Abi’s examples<https://docs.google.com/document/d/1szUxsXszXx2pRRScIr90as7fDgn7VZdxQsh2v6lZrfg/edit>, I don’t think they would fail the draft criteria. There are indicators, and half the problems were inactive content having indicators (which isn’t covered). And what counts as an indicator???

To be confident that an SC around affordances would actually work, I think we’d need to compile a massive list of UI components and what is an acceptable indicator in each case. (Like we did for non-text contrast & focus indicators, but logarithmically bigger because the possibilities are so much greater.)

In general I prefer methods like usability testing to establish whether something is providing enough (or too many) visual cues. It is such a hard thing to pin down in a context-less tool like guidelines.

Cheers,

-Alastair

1] https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/gulf-of-evaluation-and-gulf-of-execution