27/08/2009

Pictorial accessibility

I noticed these wonderful accessibility “point symbols” on the Eden project website. They are pictorial depictions of words… icons, which are used for to assist people with low literacy, learning difficulties or where English may not be their first language.

Enabled using AJAX the user interacts with the site text by rolling over a word which highlights and displays associated symbols. Despite the symbol illustration production values being fairly low, they succeed in their simplicity to communicate meaning.

Eden project's point symbols
^ Eden project’s point symbols

“When a visitor arrives at a Point enabled website and enables the function they don’t notice any immediate difference as the technology sits passively on the site. When they hover their mouse over a word, a box with the symbols for that word pops up. This helps with understanding the context and meaning of words. The pop up feature also means that the support is not intrusive or invasive, which is often what puts users off assistive technologies.” Jo Elworthy, director of interpretation at the Eden Project

The system has been developed by Widgit online, with more than 7,000 images covering a vocabulary in excess of 40,000 words.

I’m a fan of this kind of contextual interaction. At times the way to interact may not be obvious, but once learned it allows greater information density within the same display area. There are limits of course but for simple tasks giving the user some additional contextual help and feedforward benefits their experience.

The New York Times implement a sweet little dictionary. By highlighting a word, a question mark bubble appears that enables the user to look the word up.

New York Times dictionary lookup
^ New York Times dictionary lookup

Another incidence of contextual interaction is over at Ask.com’s search results. Rolling over the binocular icon displays a thumbnail of the destination website.

Ask.com search result feedforward
^ Ask.com search result feedforward

If you’ve seen any decent implementations of these ideas drop a link and comment below.

[+] QR Code, click to enlarge
[+] click to enlarge and snap

:]