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

If it was clear enough with contrast alone then designers wouldn’t use color for the on and no color for the off – but they do.   Apple also has an iOS setting to put O’s and line for on and off on the switch for native apps.   I’ve had designers use green red and yellow to indicate positive, neutral, and negative in a Likert scale – and then tell me that the color don’t actually mean anything and that they don’t need to be accessibly communicated because they don’t communicate more than the numbers alone.   In short what I’m saying is that there is some implicit bias in use of color and shading and in different cultures that people use and they say isn’t important – but we all know that it is important and it really does communicate something to some of their audience.

Jonathan Avila, CPWA

From: Alastair Campbell <acampbell@nomensa.com>
Sent: Sunday, January 5, 2020 8:24 PM
To: Newton, Brooks (TR Product) <Brooks.Newton@thomsonreuters.com>
Cc: w3c-wai-gl@w3.org
Subject: RE: Examples of interactive elements with what I consider missing or inadequate affordances

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

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