Trade secrets from the autistic mind: How autistic people think, and what we can learn from them.
This is a companion piece to my primer on Cognitive Accessibility. It’s a journey into what someone with a cognitive difference - autism in my case - experiences in navigating the Web. This is what cognitive access, or the lack of it, feels like.
I’m going to be looking at a single page from last year’s Internet Governance Forum (IGF) conference: https://igf2019.sched.com. It’s the what’s on where, schedule page. Should be pretty straightforward, no?
Before we find out whether that’s the case or not, might I suggest that you open it in another window and look over it yourself. See what you think might be issues in terms of cognitive accessibility. We can compare notes at the end, not just your experience vs mine, but what you think I might have experienced vs what I actually experienced. I’m mainly concentrating on the header/intro section and the navigation tools on the right. So let’s dive in.
At the top of the page, the first elements we get to are the IGF and UN logos, plus another icon with some lines between them.
I’ll bet you hardly noticed them, right? Not me. There are a couple of things here that jump out immediately. The first is that there’s no Alt Text descriptions. God knows what screen-reader users make of it, this doesn’t even meet WCAG 1.0 guidelines from 20 years ago. The second is the vertical stripe icon in the middle. I have no idea what it relates to, especially in the absence of any descriptive text. What ARE those vertical black, red, yellow lines? The German national colours, yes, but vertical rather than horizontal? It’s closer to the Belgian flag than the German one. I’m already confused.
Below the logos we get to the main header in a large font on a solid blue background: Internet Governance Forum Berlin, plus on the right, the year, 2019. On first glance, nothing problematic there. But wait … the 2019, why is it tilted rather than horizontal? And why is there a dot in the middle of the zero? Perplexed, I grapple for answers, and here comes the cognitive load. The running commentary in my brain is working overtime.
Next up we reach a line of text: Welcome to the IGF 2019 in Germany!
The questions come thick and fast, especially as I now have to parse the new information while cross-referencing the old. For starters, this is the third repetition of IGF. My brain spins into gear trying to find a reason for why an organisation’s name has appeared three times at the top of the page when once (or OK, twice) would have sufficed. Because there must be a reason, right?
The “Germany” in this line troubles me as well. We’ve already been told that the conference is in Berlin. Which is in Germany. We’re effectively giving the same information in two slightly different ways. Why? My brain disappears down a rabbit hole of hierarchies, systems of classification, geography, the German politico-administrative system, wondering whether Berlin is a city or a state - I pause at this point to open another Tab and check and it turns out that it’s both and I make a mental note to explore other cities that have dual status and whoops, where was I …?
(Actually here, I can guess as to why both Berlin and Germany are included when either one would have been enough: it’s because both governments are sponsoring the conference and so need to be acknowledged, and clients being clients, acknowledged at the top of the page. Score: Clients 1 Usability 0)
Similar story with the repetition of the 2019 at the end of this line. Yes, we know it’s in 2019 because you already told us. In fact, you insisted on it: the 2019 in the top right uses the largest font on the whole page, which tells me that you think it’s the most important piece of information here. Though the image of the tower in front of it opens another can of accessibility worms as it makes the presumption that I’m familiar with Berlin’s landmarks. A cardinal rule of designing for cognitive access is don’t presume what your users know. Though already by this point any number of cardinal rules for accessible design have been trashed, so it’s no surprise that we’re adding to the list.
Finally, to close off that line, after the 2019 we get an exclamation mark. “!” But surely this is just a statement, a standard opening phrase, why end it with an exclamation mark? After all, exclamation marks are to express “surprise, astonishment, or any other such strong emotion”. Given that we’ve already been told that the conference is indeed in Germany and in 2019, that rules out both surprise and astonishment, so I ask myself (that running commentary again) is there some “strong emotional element” that I’m missing?
Due to all the above, I’m already overwhelmed or close to it. I’m fighting with myself to suppress what my brain doesn’t want to ignore, to bring focus back to the task at hand. All of this “what’s going on here?” and “why is this like this?” is mentally taxing. I feel not just overloaded but stressed and anxious.
Let’s see if things improve when we get into the page a bit more, such as with the navigation tools over on the right. Underneath a row of familiar-looking icons (very good) there’s a Search box. Well, I’m presuming it’s a search box, even though it doesn’t use a search icon such as a magnifying glass and the “Search” button is on the subsequent line. Though is it a button or a label? Hmm.
Still, however poorly implemented, at least we have a search function. Great. Regardless of how opaque all this is, I can use that to find conference sessions that interest me. But in that box there’s a grey “Schedule or People” placeholder. Now I don’t get on well with placeholders, and it turns out I’m not alone:
“Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments.”
Apart from issues with placeholders per se and the increased cognitive load they impose, the text itself is misleading. While this will indeed display your search results as People or Schedule - which whoops, is the opposite of what it says - it turns out that it’s just a common and garden search engine. So no, you’re not limited to searching only for “Schedule or People” you can search for whatever you want. Heck, you can even search for Schedule AND People. Because even though “Schedule or People” is the placeholder in the search box, that’s not referring to the search function itself or what you’re searching for, oh no: it’s referring to how the results are displayed! (I’ll allow myself a little exclamation mark of surprise or astonishment here.)
Moving down from the Search Box we come up against another issue. It’s the “Filter By Date” element. You could write an essay on this there’s so much wrong with it in terms of Cognitive Accessibility. Or any kind of accessibility for that matter.
For starters, why use the word “Filter”? That’s a technical term. Using it implies a priori knowledge that not all people would have - remembering once again the usability/accessibility recommendation to not make assumptions about what your users know. Filter? Why not just use plain language? For example, if you want people to make a choice, then just use the word “choose”. If you want them to make a selection, then just make it easy on everyone and use the word “select”.
This relates to one of the central ideas of accessibility and universal design: affordance. If you want people to do something, SHOW them what it is you want them to do. If you want them to click on a button, make it look like a clickable button. In this case, don’t use the word “Filter” when what you mean is “choose”. Filter is a process that’s happening in the background, we don’t need to see it on the surface, you’re not redesigning the Pompidou Centre. (Yes, I’m making a presumption about my readers’ general knowledge.)
But is even “choose” what we need here? What task are we looking to accomplish? Is it to choose or select dates? Technically yes, but that’s not our ultimate goal. What we’re really trying to do is display conference sessions, and to do so by date. The “filter dates” is just a step along the way. So if we’re trying to “display conference sessions by date”, why not just use: Display Sessions By Date?
Though even that’s almost too much information. We could probably cut the “sessions” given that that’s the whole point of this page and we could assume that people are managing to keep that idea in their working memory while navigating. So we could get this down to something even simpler: “Show By Date” or “View By Date” or just “Display By Date”.
Amongst all this, let’s remember that when you come to this page, you don’t know what’s on it. You don’t know that it’s going to give you an option to “display by date”. So not only did the page need to give you the tools to “display by date”, it needed to make it clear that you had that possibility: here’s what you can do and here’s how to do it. As it stands, it fails on both counts.
But the whole filter/choose/display confusion is not what gets me most at this point, oh no. There’s something else here that threw me completely from the moment I first set eyes on the page.
The label says “Filter by Date”. But (work with me here) it gives a date range. That is, a date filter has already been applied. November 25th till 29th is a specific range of dates that has been extracted (filtered) from the set of all possible dates. It’s even worse in the next line down, where “Filter by Venue” gives … a venue.
My reaction to this was one of troubled confusion which normally would have brought me to my cognitive knees. Short of leaving the page, my only solution is to do what everyone does in these circumstances: do the designer’s work for them by just semi-randomly clicking to see what happens. And when I click on the infamous “Filter by Date” its function becomes clear. It displays the sessions, by date. I didn’t even need the Nov 25-29, 2019 and all the confusion it caused because after all, it’s not going to display sessions on dates when they’re not occurring.
And before continuing, I’m just going to note the unnecessary repetition, yet again, of 2019. And also note that November is abbreviated as Nov which … well, I think you know the rest. There will be people out there who don’t know that Nov means November, especially without a full stop to indicate that it’s an abbreviation. Or people who do know but at the present moment don’t have the cognitive capacity to simultaneously read one word while thinking a different one. Which is a bit like this:
You’re probably sick of all this discussion of show/display/view dates by now, I know I was in trying to hack my way through all this as a user. But just to close it off: what happens after you carry out your date filtering? Well, you get the sessions displayed by date. OK. But then how do you get back to where you were? You’ve applied a filter, so logically, what you want to do is “Clear Filter”. Reader, there is no “Clear Filter”. What we get instead is an element that says “View All Dates” (if you can find it amongst all that busyness at the top of the page.). So whether or not we needed Filter in the first place, at least we needed consistency, which we don’t have. Though paradoxically, we do get a term that we should have had all along, “View” Dates. And paradoxically again, if you select “by Venue” or “by Type” of session, both of those do use “Clear Filter”. The consistency across the site is non-existent.
I shouldn’t have to jump through all these hoops just to access basic information and simple functions. And believe me, I did have to jump through hoops. Reread the above and look at just how much work I’m doing. That’s not me writing a blog page, that’s me narrating what I went through.
And no, this isn’t just me. These access issues are universal. Everything I highlight here is covered in some form or another by WCAG 2.1 guidelines. Yes, maybe you can get around this page just fine. But some people can see just fine, yet that’s not an argument against wearing glasses.
In summary, this page shows how far we have to go and how poorly understood accessible design is, especially designing for cognitive access. I only have to glance at this page to see that it’s problematic, yet presumably multiple people at various stages of the design and development process have ticked off on it. And I’m guessing that no-one with a cognitive disability was consulted.
I’ll leave you with a final point, one that in the context of all the above is almost farcical. Because for all the work that’s gone into this site, all the (poor) decisions that have been made, all the time and money that’s been spent on it, there is in fact an accessible version just one click away. It’s a version that strips away all of the above and leaves us with a (mostly) clear, intuitive, logical interface, one that probably would have worked for the majority of users. I only found it by accident when I came back to the page in writing this blog. This accessible version is hidden behind a single icon that doesn’t even mean “take me to a more accessible version”. What is it? This:
The Printer icon, over on the right hand side. I never clicked on it because I never wanted to print anything. Oh what could have been.
Something that surprises me is that there aren’t more people documenting these kinds of experiences. After all, we’re surrounded by inaccessible ICT, it’s not as if there’s a dearth of choice. Dr. Chris Atherton has written a great piece along similar lines, “An interaction designer tries to make a bank transfer.”
Further to all the above, if you’re interested in having me review or test your site for Cognitive Accessibility, get in touch. Or get in touch to say hi, always interested in furthering the discussion. God knows it’s needed.