iMetLion.com

He started off by explaining from personal experience, how autism affects the way people use the web. Autism is about processing. It’s just a different way of thinking. Most people with autism are affected by changes in sensory input. For example, Jamie sometimes can’t read when there’s a background sound. So having an audio file play when your site loads is not only irritating it’s inaccessible.

Language processing can also be a challenge. When people talk very quickly he often can’t keep up. For example, when web videos cut quickly from scene to scene he finds he gets left behind, he has to rewatch them over and over. This can be stressful.

Following a theme from the previous presentation, Jamie expressed an issue with literal commands. His experience is, early in his life when asked to wash his hands ‘in the toilet’, that’s literally what he did. Subtleties in life and on the web can cause problems. For example, when adding friends in Facebook, the function performed by the site can be different depending on the context. On some pages the functionality is to simply add people who are already registered, on other pages you’re expected to enter their email addresses.

After this initial section the presentation changed format. Seeing as it seemed to have worked in the past, Jamie then struck up an interview dialogue with Henny. She posed questions along with the rest of the audience. The next bit follows that format (with a stream of consciousness thrown in).

Q. You said with video you have to rewind. This would be awful when streaming video (e.g. iPlayer), how can this be made more comfortable?

A. Captioning and transcripts. The BBC now has a nice live text captioning system using HTML5. However, sometimes he uses a screen reader when he gets stressed, Jamie explained. In fact, to help him process information he built his own screen reader using a Mac, the inbuilt VoiceOver and some AppleScript. His reader uses Microformats and embedded semantics. He built it because he uses non-sighted navigation quite often to understand a page, but can find this difficult because the visual and code order of the page are often different. This means unmodified VoiceOver can be difficult to understand. Using AppleScript he gets the website to read in the order he wants. Snow Leopard now has intelligent select so VoiceOver has caught up with what he needs.

Q. Is his screen reader source available?

A. Err… Yes but it’s hacky and built specifically for him.

Jamie is keen to break down assumptions on assistive technology, it’s not just blind people who use screen readers. With this in mind, his opinion is that web designers should not use the title attribute. He’s noticed an obsession with using nice long titles. Often web designers use title and ALT text plus the usual copy all at the same time. Jamie hears all of them. An example of this is the Amazon website. It’s really accessible with all of these attributes, perhaps too accessible.

The discussion moves to VoiceOver and any specific features that make it easier for Jamie to use:

• Detection, one to one representation of movement on the keyboard and movement on the screen, this is new with the Mac gestural track pad.

Of note, screen readers can be too fast for Jamie. Also there are some that try to sound clear and others that go for a human voice. So which does he choose? His answer was enlightening, he chooses a human sound if the page is written in a human voice, this helps his understanding. Concatenative speech engines sound better but are less responsive. Most developers are not even aware that there’s more than one voice. One problem with VoiceOver is it can take too long to read keywords.

Q. Did he create his own presentation design?

Yes. ;)

Antonia (hiantonia.wordpress.com) has been working in accessibility for 10 years. She’s a web designer and consultant. See Antonia’s notes at her blog or see her slides.

Her belief is that people are not defined by their disability, partly because they could have many. There are lots of ways to go online, not just one fit. Learning disabled people have increasing control of their lives, and expect to be able to use the web. On the web people like to take their time and not feel judged by their disability. However, many people are locked out of websites. Design is often the key to whether a site is accessible.

Antonia played her first video interview. It features Martin, a man with autism, using the eBay site as Antonia sits beside. Generally he likes it. He likes the wealth of information displayed and the clean layout. He could comfortably associate items with the descriptions. For him the interface fails when he sees the first ‘buy it now’ icon.

He clicks on it, gets confused when nothing happens (it’s not a link) and this stalls his flow. Once he was through to the product page he understood what parts of the page were actionable.

Websites sometimes use context as part of their interface, this causes issues for those who fail to pick up on such subtleties. That’s a cognitive accessibilty problem.

Next Antonia asks Martin to visit the Amazon website. He likes it, it’s nice and bright with lots of colours plus using search is OK. But Antonia asks ‘How would you buy an arsenal shirt?’ He selects a size, this brings up another window with sizes to select. It puts an orange border around the selection, he notices that the information on the right side of the page changes. He knows where the checkout is because the icon looks like a shopping cart. Beyond this he gets frustrated. He thinks the link to account is the ‘go to shopping’ button. He’s right, it’s hard to find. How to logout? He finds this difficult as well. He either wants to close the browser window or use the back button. In the end he had to be told where the sign-out button was.

Generally the Amazon site doesn’t have enough good or meaningful icons, in Martin’s case he only understood the shopping cart. Signposting was not relevant. There was bad typography and poor contrast between elements. Buttons were not defined enough, this denied Martin access to parts of the site.

But won’t catering for people with cognitive disabilities cause more design ‘noise’ on a website?

When designing for cognitive accessibility, making everything literal is key. In the same way as designing for someone with a physical disability, making your site accessible can often benefit everyone. Antonia displayed a poster meant to convey the message not to run on the tube. The poster was less than clear. Making it literal, e.g. with a big red cross over the runner, could’ve improved the explanation for all.

Design advice

• Use a hierarchy of visual language, e.g. headings that decrease in size.
• Group elements of a similar type or function. Sometimes less is more. Anecdotally, Antonia surveyed eight people and only one knew what ‘i’ meant when signifying information, the rest understood ‘?’. Sometimes it’s good to have one link that takes us through to a page that groups things together.
• Sometimes different sized icons are useful. Apple’s Interface Manual uses different colours for different contexts.
• Hovering states are really useful.
• Colour coding is also really useful, despite designers sometimes thinking it will ruin their design.
• Giving users alternative ways to change text size is important. They often can’t remember (for good reason) where to do it in the browser. Education can be the key here, often people don’t know the difference between a browser and a website. Discoverability for preferences is an issue. Just being able to get back to the view window is important, sometimes this becomes a major challenge.
• Use adequate spacing. For example, the BBC homepage is complicated but good because things are grouped with adequate gutters. Putting things into modules makes them look bigger.

Is this my responsibility?

It’s not just down to developers. It’s everyones responsibility, including the browser makers. Cohesion and consistency when working as a team is important. Martin was a confident user, but most people think their inability to use a web interface is their own fault.

Where to go from here?

Where can we get more information?

• Changepeople.co.uk are working on a manual for this kind of accessibility.

Apart from the BBC internet blog and backstage etc. @media 2008 had the fortune of hearing a whistle-stop tour of the redevelopment of the BBC homepage. This site has haunted many web designers since it’s launch with comments from colleagues of “Why can’t we do… {insert name of feature here}… like the BBC homepage?”. It became a shining example of what can be achieved.

Tom Cartwright and Claire Roberts presented their short piece on the development of a site that: took them three months to build; had to cater for 6 million users per month; couldn’t contain loops in the code; couldn’t process XML; had to be accessible; where 5% of users (that’s 300,000) didn’t use Javascript. This is web development at the sharp end.

A point of interest is that they managed to get 60 image requests down to just 3 using sprites. This had the affect of reducing the number of HTTP requests, a big saving on a highly trafficked site.

The size of this project is reflected in the fact that the development team recognised a need to drop JQuery as a Javascript framework and develop their own. Tom described Glow (www.bbc.co.uk/glow), a new framework that supports Safari 1.3 (apparently unlike JQuery). We were told that Glow would be available as open source software towards the end of the year, but judging by the password it looks like this still hasn’t been finalised. They also mentioned that their next project will look towards a pan-BBC identity system for users. The idea is that they’d have implicit and explicit personalisation and that, once logged into one BBC site, your credentials would follow as you traverse the sites. In support of this the BBC joined the OpenID federation, looking at becoming a consumer.

For insights into the future of the BBC homepage see www.bbc.co.uk/home/beta/. They recommended Steve Souders’ High Performance Web Sites (he really knows optimisation).

Jeff started by describing his childhood in the 1970s and how at the time the world was changing around him. At a young age he came across a pong game encased inside a table at a restaurant. For him, before then media had been a passive experience, suddenly there was interaction. He terms it as society going through a “conceptual progression in how we can communicate”.

He went on to describe how this expectation picked up momentum as data storage became cheaper and computer processing became more powerful. In his view Moore’s Law works across all technologies. The two key aspects vital to this revolution where the tools for participation and the scale of data.

In 1973 the IBM Winchester 3340  was released with a capacity of around 70Mb. On release it cost $100,000. In comparison, Google currently archives 4 – 5TB of data every afternoon. From this we see that the tools have developed massively and so has the scale of data.

Designers must turn this raw data into information. Whether or not this is achieved is a subjective judgement as it relates to perceptions of the audience. Jeff’s example was to communicate monthly rainfall based on the size of a cartoon raindrop. If the audience had been meteorologists, they’d probably have preferred a numeric representation, perhaps in inches or centimetres. So it is the job of the designer to remember to take the design of data from decorative to actionable. Success comes when the designer has managed to “convey promptly to the eye something that would otherwise require mental calculation”.

A great example of this was John Snow’s mashup of Cholera deaths and location (a street map). Just as valid is Charles Joseph Minard’s map of Napoleon’s March to Warsaw. Edward Tufte was another statistician who used chart’s to bring out the story with the crash of the challenger space shuttle. Also of interest is the air and ground traffic visualisations from Britain from Above (although mostly for entertainment purposes). All were designed to get the heart of the story without being untruthful.

Google Analytics was designed to do just this. Jeff’s tactic with this was to shelve any ideas and reassess them two weeks later. His inspiration for the final graph design was a travel montage from the film Indiana Jones. :)

The point is that the audience is all important. In his work with Adaptive Path, he would identify what people want to do, not what people want – an important distinction. They would take transcripts of user interviews and take out sections that sounded like tasks. Charting the mental model with sticky notes helps provide vital communication for designers and managers. To get the product to production, look at all the options and reduce down to only what you need at launch. What we leave out is more important than what we leave in, we must remember to tell the story.

Some further reading: The Ghost Map, Anything by Edward R. Tufte and of course the presentation.

So, this got me thinking about the whole concept of the click. What is a click? How central is it really to our experience on the web? Can we do without it? And if it was taken away, what would that web look and feel like? Read on for my research and opinion.

Background, FYI

(For the uninitiated, which included me to some degree). Computer mice and clicking have been with us for a while. The first commercial computer to include a mouse was the Xerox 8010 Star introduced in 1981 (according to Wikipedia, I was only just on the planet at this point so can’t vouch for it). Since then the concept behind clicking has been adapted to other input devices including trackballs, touchpads (generally used on laptops), touchscreens, graphics tablets etc.

Clicking is bound up in the WIMP (Window, Icon, Menu, Pointing device) approach to GUI’s (Graphical User Interfaces) and relates to the user clicking and selecting a part of the screen to activate a command on the computer. Before the GUI and the mouse, text based interfaces were dominant and the return key would be the usual part of the keyboard that did the activating.

Since its development, clicking has been so fundamental in the WIMP world that input devices such as touchscreens have extended the concept to variants such as ‘tapping’ etc. The terms may change based on the user experience but the general interaction remains the same, again due mostly to the unchanging fundamentals of the 2D GUI.

How does this relate to the web?

Clicking helps to define the overall experience of the web. For example, it’s the last action before making a payment to make a purchase. It’s in the modern psyche as an expression of intention. Amazon patented ‘1-Click’ in 1999 as it ‘refers to the technique of allowing customers to make online purchases with a single click’. A lot is happening behind the scenes, but for the user this is reduced to a single action/concept. Other examples would include the proliferation of hyperlinks with explanatory text like ‘click to proceed’, ‘click to pay’ and the dreaded ‘click here’.

It’s always interesting to me how the popular perception of a thing shapes its explanation. This is because, of course, for some ‘1-Click’ is actually ‘1-Press-Return-Key’ or ‘1-Tap’. Clicking doesn’t naturally enter into the experience of a command line user or someone using certain types of assistive technology. What is universal in these examples is the activating of the command to progress to another web page or buy a product. This is a fabulous example of why the link text ‘click here’ is so nonsensical (and on its own so non-descriptive and just lame).

Of course the web is built on the hyperlink and for most clicking has become central to this interaction. Which brings me back to dontclick.it. What happens if the click is taken away? Well, it’s disconcerting at first. However, even though the website is initially a strange experience, I found myself getting used to it quite quickly. This made me wonder why I’d been such a blind follower of the click for so long. I’d never questioned.

Click-less future?

Now onto a general theme for this blog; Apple. They’ve just released the MacBook Air to predominantly positive reviews and despite its other boundary-pushing features, the one they’re most keen to promote on their website is the ‘multi-touch’ gesture support.

For the first time, they’ve brought multi-touch gestures from their successful iPhone and iPod touch products into their main computer offering. Although these features don’t replace the click, they could point to (pun intended) a future without it. What about a Minority Report inspired interface where ‘point and click’ becomes just ‘point’?

For many years, Apple’s relationship with the ‘click’ has been embroiled in the one or two button mouse debate. Seasoned computer users have derided their choice to stick with one button mice and even now their offering is a kind of fudge.

With the correct interface, could the click be superseded by a gesture? Gestures in computing are nothing new. Again, according to Wikipedia, the first mouse gesture was “the ‘drag,’ …introduced by Apple to replace a dedicated ‘move’ button on mouses shipped with its Macintosh and Lisa computers”.

For most, removing the click would have a fundamental impact on the psychology of human computer interaction, as expressed in this quote from the dontclick.it site:

clicks make me think of isolated segments this is immersive.
01.17.2008 msg# 37833 by ‘roger doonan’.

Apart from the psychology, what about accessibility/usability? By extension, some replacement for the mouse (pointing device) could help those with motor control difficulties. i.e. not having to click on exactly the right pixel on the screen. Take it a stage further, replacing the keyboard with a gesture based interface could revolutionalise computer usage for those of us for whom the standard QWERTY keyboard represents a barrier.

The end is in sight

There are lots of interface design problems that would need addressing before the clicking could ever stop. I wonder how complex a system could get before a gesture became indiscrete enough to place ambiguity between it and the user. I also wonder if computer interface designers will ever get to purely gesture based interaction without a paradigm (I got that word in Rik!) shift from creating more and more complex interfaces, towards distilling it right down to what the user actually needs.

These are just my thoughts on what may be to come. As always I’m hoping to add to any discussion that’s taking place, this is not a bid for revolution (although could you imagine an online petition to abandon the click? “Click here to abolish the click!” – wholly hypocritical).

Update 22 February 2008: “Apple Depicts Advanced Multitouch Gesturing Control Panel in Mac OS X” – an article written a couple of days ago about possible developments using muiti-touch.

• If it didn’t make sense the title is a reference to a quote from Harold Wilson, it seemed fitting given Opera’s move against Microsoft. Something that’s provoked a passionate reaction from the likes of Eric Meyer and Andy Clarke, both very aware of the ramifications this is already having on the politics of the web community. Update 17 December 2007: Yesterday Andy posted a follow-up to his suggestion to reform the CSS Working Group, I think due to the incisive response he received. Molly Holzschlag comments and I think she’s in a good position to do so.
• Speaking of politics, this week the BBC Internet Blog posted an article by Jonathan Drori about the difficulties attached to implementing CMS technology across the corporation. He even mentions “fiefdoms” which I think many web managers across the public sector will identify with.
• Totally unrelated and on a happier note, Phil pointed out that the Beta version of Google Maps Mobile can now locate a mobile phone “with or without GPS”. Shame it’s (strangely) not supported on my phone.
• And finally, back in October I watched a presentation over at Mac Learning about the new accessibility features in Mac Leopard. With the recently released answers to questions posted during the session, I was pleased to find my question was included. I asked whether element navigation (what’s this?) is available in browsers other than Safari 3. Unfortunately (and I suppose unsurprisingly) the answer is no. However, I guess the fact that Safari 3 now implements long overdue features such as tabs may be some consolation for this.

What is element navigation? It may not be clear what feature I’m talking about so read on for a brief description. In Leopard using Apple VoiceOver and Safari 3, the user can jump through the page to elements of the same type e.g. all the Headings by type (H1, H2 etc), or links (both picture and text links). I suppose this is useful, I’ve been aware that this has been implemented in other screen readers for some time. Note: Apparently VoiceOver is not a screen reader in that it does not read the screen, it responds to direct programme output. Very clever, *smiles*.

Having recently looked at accessibility in Mac OS 10.5 (Leopard) I started playing around with VoiceOver. It’s also included in OS 10.4, which is what I’m using. Having mostly used Windows (90% of the time) over the last few years, testing with a screen reader always seemed beyond my reach given the price. Also, I’d managed to pick up the advice that there’s no point, simply because as I’m sighted, the methods I’d use to interact with a computer would be different to those people using this interface out of necessity. So my previous experience in this area is limited.

Working on a site recently, I decided to get VoiceOver to read it back to me. All seemed fine until it read the phone number. Changed slightly for this example, the number ’07000 121 022′ was read back to me as “seven thousand, one hundred twenty one, twenty two”. Notice how it misses off the first zeros on the ’07000′ and ’022′ sections of the number. Had I not included the spaces, the number ’07000121022′ would have read as “seven billion, one hundred twenty one thousand, twenty two”. So you see, still unintelligible to the listener.

I started to look on the net for a way around this problem. Nothing jumped out at me as a solution that worked. I then came up with the following idea:

0<span>7000</span> 1<span>2</span>1 0<span>2</span>2

In VoiceOver this reads “zero, seven thousand, one, two, one zero, two, two”. Notice I kept the ’7000′ as one number; to me “seven thousand” is more memorable than “seven zero zero zero”. This works with VoiceOver (so I’m assuming it also works with JAWS etc). One good thing about this solution is that, when spoken, it splits up the numbers without affecting the spacing for the visual user (it still looks like ’07000 121 022′). Also, only the spoken style is affected (even though I recognise it’s using otherwise unnecessary spans). If the number is copied and pasted, the content is not compromised as it doesn’t include any extra spaces.

Rik suggested I try aural CSS (media type ‘speech’). My research into aural CSS properties found that the property I’d need is already there – ‘speak-numeral: digits;’ – and given that I use microformats wherever possible, I could simply reference a ‘speech’ CSS file and attach this property to all tags that include the ‘.tel’ selector. But from what I’ve found, there doesn’t seem to be much support for aural CSS in the current crop of browsers.

Request for comments

I’ve written a test page that includes each of the formatted versions of the number.

I know JAWS has already produced this kind of functionality, but is this technique useful for other screen readers (and users on older versions of JAWS)? What about the new version of VoiceOver, has that changed its handling of such content? Has anyone got a screen reader that they could use to test this and critique the idea? Overall is the span method a valid or worthwhile technique? Is there any method available that’s more elegant?

So, there’s a date for your diary.

I find myself wanting to find out more about the multitude of listed features, however those that jump out for me include ‘Positional Audio Effects’, ‘Drag-and-Drop Support’, ‘Hot Spots’ and the (OS based?) enhanced web navigation.

On a similar subject, Roger made the point in a previous post that Apple’s iPhone could’ve been better had it included some kind of tactile feedback. Well, it’s recently become clear that Apple did research the idea of a physical feedback interface when it was developing it’s Multitouch technology.

All of which (if implemented) could mean a real boon for the accessibility and usability of OSX.

Design is not like fine art, where there are no boundaries. The challenge for a designer is that there are going to be certain boundaries and you have to work within them. Firstly, you define the boundaries and then you define how you can exploit them. Within the boundaries, you look for opportunities and it’s that process of identifying the opportunities that can make or break a good design.

This piqued my interest and I started thinking how it might be applied to web design. Even in these days of millions of colours and oodles of display configurations the boundaries are there, they just may not be as apparent (in fact, trying to accommodate portability within your design may present a boundary in itself).

So I started a list of general (maybe obvious) boundaries that I think exist:

• Viewport size, accommodating the multitude.
• Colour variance on different displays (despite millions of colours).
• The medium is 2D.
• Web is geared towards using text. Text must be horizontal.
• Page download size (even in a broadband world, it must be considered).
• Usability and Accessibility. e.g. the clarity of text and the design/interface.
• The Grid.
• Browser implementations (limitations).

These are some of the ‘boundaries’ that I think about when I start to design a site. I get satisfaction out of trying to ‘exploit’ these challenges and hopefully becoming a better designer. However, in order to utilise them they’ve got to be identified and understood, so this may be the beginning of a useful (cathartic) exercise.