Witnessing Jaws for Windows

A shark, swimming towards the camera.

These days not only is there a big push for Web Accessibility it is a legal requirement in many countries, including the UK (although there is an interesting article about this on A List Apart).

It was Jeffrey Zeldman’s excellent book Designing with Web Standards (soon to be published in its second edition) that drove home to me why accessibility is important.

You see, Web accessibility is more than simply allowing blind or disabled computer users’ access to your content. It is also about allowing users who view your website on their mobile phone, or on a small screen PDA, and it is also about allowing users who haven’t upgraded their web browser from Opera 5.14, because Opera stopped developing for your chosen operating system (EPOC R5/Symbian OS v.5, since you were asking). Web Accessibility is more than simply applying real world disabled access concerns to the Web; accessibility is as much about physically able-bodied users as much as it is about users who cannot view a screen, or use a mouse.

That said, I jumped at the chance this week to watch someone from church use their PC using Jaws for Windows, one of the world’s most popular screen reading applications for the Microsoft Windows operating system.

I’ve read about screen reading software, but never seen it (or heard it) in action. I’ve been encouraged to include alt tags in image code, so that screen reading software can read out what the image is of. I’ve been encouraged to set up accesskey attributes in links so that users can access the links quickly using keyboard shortcuts (eg Alt+2). I’ve been encouraged to write pages so that the page hierarchy makes it easier for users to navigate (using different levels of headings within a page, for example).

George — a member of one of the congregations I’m working with just now, who is blind — booted up his PC and introduced me to Jaws. A few things struck me as I witnessed George navigating the Windows XP desktop and then his browser (Mozilla Firefox, I’m pleased to report).

For some reason, with screen reader software I assumed that the user would wait until the software had read the whole screen (or window) from top to bottom, starting with the window title and working its way down until he or she made their next move. But why would they? That’s not what sighted users do. Sighted users quickly scan the page, find what they are looking for and click through to the next experience.

George did exactly the same, only his was an audio scan. Using a combination of key presses (and trust me, with Jaws there are many, many, many key combinations to learn) George was able to hear what was on the screen. In Firefox, for example, he was able to immediately hear how many links were on a page (and have them read to him one by one — he could quickly skip to the next with a key press until he found what he was looking for). Or how about headers? Jaws could give George a quick overview of the structure of a page by reading out the headers in order (and their level of heading: 1, 2, 3, up to 6). The same was true with tables, lists, images and just about any screen element, or window element.

What I also found a little surprising — though not as surprising as George — was the accesskey settings on my blog. They conflicted with Jaws’ built-in shortcuts. The accesskey keyboard shortcuts use the Alt key plus a key that you can specify in your code. When George pressed Alt+3 my accesskey page setting took precedence and whisked George off to the Archives page on my blog.

“Oh! What happened there?” said George, rather surprised.

I explained that I’d set accesskeys to make the page more accessible, but that I now realised that it interfered with Jaws’ default keyboard shortcuts. I’m not sure what the way around this might be. Presumably there may be some users who would appreciate the shortcut keys who don’t use screen reader software, while the Jaws’ users who might not use the shortcuts find that it interferes with their setup. Hmmm…

I was there for over an hour, carefully watching and listening, and asking George questions about what he was doing, and why. The experience has made me realise that when I do Website usability studies in the future it would be important to include at least one study with a screen reader and/or braille keyboard user.

Sadly George’s braille keyboard was being sent back for repairs, otherwise that too would have been fascinating to watch. Seemingly the keyboard is two way: you can read the screen contents, created using on long line of interactive braille dots on the keyboard, but you can also enter text in a similar way that you can on a standard braille typewriter. You what this means? I’ll just have to go back!

All in all we’ve come along way towards making computers and the Web accessible. But there is still a long way to go.

Halted by progress of science

Screenshot of the Glaucoma website

A few online friends have pointed me to this over the last couple of weeks, and for good reason. For equally good reason is it listed on the Web Pages That Suck website.

I am of course referring to the Association of International Glaucoma Societies website at www.globalaigs.org.

It’s not just the design. Or the colours. Or the inappropriate use of frames. Or the Terry Gilliam-esque dancing heads in the top left corner. I mean, those are terrible. But the “hymn to glaucoma” is just … something else! Here are the lyrics:

Glaucoma Hymn
Glaucoma, Glaucoma, Glaucoma
Constricting vision slowly
Halted by progress of science
Vision of a world united
Beyond all science knowing

but you really must visit the site to hear it for yourself. And you can download the Glaucoma Hymn.

But the scariest thing is in the left-hand framed menu. Scroll to the bottom and there is an eye, staring at you. And if you watch for long enough … it … slowly … blinks. Arrrrggghh!! That is horrible!

Whose vision was that website?! It truly is both a terrible website experience, and a web classic all rolled into one blurred mess.

Upgrade to WordPress 2

Screenshot of ImageManager plugin for WordPress 2
Screenshot of ImageManager 2.0 plugin for WordPress 2

At last, I’ve gone and done it. I’ve finally upgraded my blog from WordPress 1.5.2 to the latest version, WordPress 2.0.2.

Back in January I tested out the then newly released WordPress 2.0 and decided that I’d hold back on my upgrade until I found a suitable response from the WordPress community over how version 2.x handled image uploads. I wasn’t satisfied with the abolition of the Upload option, since I switch off the WYSIWYG post editor, in favour of inserting my own XHTML codes.

The upgrade went without hitch. The WordPress Codex has a good article to keep you right on how to upgrade from one version to another.

Image Manager

Today I discovered this plugin ImageManager 2.0 that changed all of that for me. And before you could say “database backup” I had backed up my blog and moved up three upgrades in one giant leap.

Here’s what the author has to say about ImageManager 2.0:

The ImageManager plugin integrates the stand alone PHP ImageManager + Editor with WordPress. The ImageManager provides an interface for browsing and uploading image files on/to your server. The Editor allows for some basic image manipulations such as, cropping, rotation, flip, and scaling.

And it does exactly what it says, however I have a few initial gripes with it. Because I have nearly 500 images in my uploads folder whenever I upload an image it took absolutely ages to refresh as it reads all 500 files to create thumbnails of each. Also for some reason the edit and delete buttons aren’t showing beneath images (I discovered that this had to be set in RoleManager). Also the image filenames aren’t listed and there appears to be no way to sort the images other than by its default sort order (whatever that is).

Still, it’s a vast improvement on the built-in image upload. Some more tinkering under the bonnet to be done methinks.

Role Manager

Another WordPress plugin I found today was Role Manager.

The Role Manager allows you to alter the capabilities of your WordPress roles, delete unused roles, and add new roles.

I’ve not explored this plugin thoroughly, but it could come in very handy for some larger projects that I’m using WordPress to manage.

Light and labels

A desk lamp underneath my desk, illuminating the back of my PC

Here’s my Top Tip for the day: a desk lamp beneath my desk allowing me clearly to see the (labelled) connections on the back of my PC case.

Light

The lamp is for those moments when I have to crawl down there to (un)plug an audio or USB cable, or when I’ve got the side panel off the box just making sure that everything is okay. I’ve got so many power sockets under there anyway I might as well employ one to help me while I’m guddling about under my desk, like some kind of IT troll.

Labels

A muddle of PC cablesAnother thing that I find useful is to label cables. Take a look at the mess of cables beneath my desk (right). The only way that I’m able to determine which cable is which, especially when it comes to power cables and USB cables, is because I label them all.

Power cables

All power cables have a label on the plug telling me what they are, e.g. PC, Monitor, hp 1000 (laser printer), hp 5150 (colour printer), etc. No more accidentally unplugging my PC when I meant to switch off the printer.

USB cables

All the USB cables have a little label flag (simply a label folded round the cable and back onto itself) on each cable at the PC end, telling me what they are, e.g. HP 5150 (colour printer), USB Hub, etc.

At the other end, on my 4-port USB Hub I have little label flags there too: Belkin Media Reader, hp 1000, SiPix Webcam, and IrDA.

This way I don’t have to waste time untangling cables between peripherals and my PC to find out what’s what. I just have to switch on my under-desklamp and read the labels.

(The lamp is really good for keeping my feet warm, too, on cold mornings!)

Design down the tubes

London underground map
A portion of the award-winning London Underground map. I used to live near Victoria and then between Elephant & Castle and Borough.

During the last couple of years as I’ve thought more about what makes for good website design I’ve been encouraged to read more widely around the subject of design in the real world. Two books that I’ve found particularly interesting and helpful are Design for the Real World: Human Ecology and Social Change by Victor Papanek and The Design of Everyday Things by Donald A. Norman.

The good, the bad and the ugly

Design, both good and bad, affects us all. Good design very often goes unnoticed, it allows us to get on with whatever task we are doing without thinking about it. We don’t waste time stopping to try to figure out how to use something, whether it is a door handle or a pen or a computer’s graphical user interface. Bad design very often stops us in our tracks. At best we’re forced to puzzle for a few seconds about whether to push, pull, twist or turn the door handle, at worst we give up and try something else.

Despite the leaps and bounds made in the last few years in making computer interfaces easier to use and understand (think of the difference between Windows 3.1 and Windows XP, for example) there is still a long way to go before computers can be used without even the shortest introductory course.

You are often not to blame

Something that I often find when helping people with their computer problems is that people frequently feel guilty or blame themselves for not being able to do something on their computer. “I’m really sorry, I’m not very good with technology,” they’ll say once I’ve finally figured out that the way to change the default spelling dictionary from US to UK within their application of choice is hidden within a complex array of menus and options, or that the only way to save a document in Lotus WordPro Millennium on Windows XP is that it has to be within a non-customized, yellow folder because of the way that XP handles “protected folders”.

But the problem isn’t that these people are stupid, it’s that the design of these applications still isn’t intuitive enough and they very often don’t offer users error messages that the average user can understand, using terms used are too “geeky”.

Bizzare error message
Create your own error message with Atom Smasher’s Error Message Generator.

Part of the problem lies in not being able to grasp the conceptual model behind what we are trying to do. Most users can easily grasp the concept of a desktop and a recycle bin, of folders and files because of how we use these in the real world. But their understanding falls down when they are asked to set spelling preferences in a dialog box that they can only access via Options… under the Tools menu. And then try to explain the concept behind WEP encryption for wireless networks, or JPEG compression settings to someone!

Jon Erickson in his article A Manifesto for Collaborative Tools argues that

computers should help us become smarter and work together better, and in many ways, they have. But instead of progressing, tool builders these days are moving in circles, treading water rather than swimming forward.

One reason for this stagnation is that we seem to think we’ve reached the limits of what software can do for us and what we can do with software. Nothing could be further from the truth. Our software tools — particularly in the collaboration space — are nowhere close to fulfilling their potential.

Redesign

It is one of the reasons that I’m delighted that Microsoft have completely and radically redesigned the user-interface for their forthcoming version of Microsoft Office 12.

Screenshot of the new Office 12 user-interface
Screenshot of the new Office 12 “ribbon” user-interface.

In previous releases of Microsoft Office, people interacted with the applications through a system of menus, toolbars, task panes, and dialog boxes. While this system successfully provided access to a wide variety of features, it became increasingly challenging to add capabilities in a way that made it easy for people to take advantage of them.

The overriding design goal for the new UI is to deliver a user interface that enables users to be more successful finding and using the advanced features of Microsoft Office. An additional important design goal was to preserve an uncluttered workspace that reduces distraction for users so that they can spend more time and energy focused on their work.

I’ve never found Microsoft Word’s menus particularly easy to use; I don’t find them as intuitive as I do the menus in Lotus Word Pro or OpenOffice.org. So I look forward to trying out this new design. And how long before other applications follow suit, or at least have the courage to move away from the current muddle of menus, sub-menus and confusing toolbars of incomprehensible icons.

London underground

So, I was delighted today to read on BBC News that the London underground map has been voted one of Britain’s best designs of the last century, along with the Spitfire and Concorde.

When Jane and I were in London a couple of weekends ago I was admiring the simplicity and beauty of the London Tube map, because while it is not geographically accurate it very effectively and efficiently maps the relationships between stations. Which is all you are really concerned about while using the Tube — you want to know where you are, where you want to get to and where you may have to change. It is good design largely because it puts the user’s needs first.

The London Underground map was designed by Harry Beck in 1931 when the Tube grew so large it became impossible to map the lines and stations geographically.

Instead, Beck designed the map based on an electrical circuit, with each line in a different colour and diamonds for interchange stations.
(Source: BBC News)

Now that is good design. It is wonderfully usable, and quite aesthetically beautiful too. If only all design could be like that.

In conclusion

Donald A. Norman ends his book with this plea:

If you are a designer, help fight the battle for usability. If you are a user, then join your voice with those who cry for usable products. Write to manufacturers. Boycott unusable designs. Support good designs by purchasing them, even if it means going out of your way, even if it means spending a bit more. And voice your concerns to the stores that carry the products; manufacturers listen to their customers…

And enjoy yourself. Walk around the world examining the details of design. Take pride in the little things that help; think kindly of the person who so thoughtfully put them in. Realize that even details matter, that the designer may have had to fight to include something helpful. Give mental prizes to those who practice good design: send flowers. Jeer those who don’t: send weeds.