I was responsible for most of the programming beneath the navigation bar on the home page, and every time when I book a ticket there’s a small feature I enjoy so much I want to tell you about it: the buttons on the date selector are really, really tiny (16 × 8px). As you know thanks to Fitt‘s Law, there are even formulas to calculate how much better big buttons can be hit.

So I just added some padding. And that makes a huge difference: try to click on the same buttons later on in the booking process where the padding is missing.

If I could make one improvement I would add keyboard functionality to those buttons. Alas as the datepicker itself came from a third party, the assembled code was beyond my control. But I know that the Deutsche Bahn is listening to the needs of people with disabilities and their disability advisory board members are highly competent, so I trust these and other issues will be fixed soon …

You can see and download the slides at Slideshare (German). As I promised to write a detailed post about ARIA enhanced tab navigation for the Webkrauts web standards advent calendar (think of a German version of 24 ways) you will be able to enjoy an English tutorial soon. Never mind the references to Chris in the slides — I had to choose an example from my flickr pictures, and I believe there are too many presentations already with kittens.

The conference was surprisingly innovative: I half expected a crowd of suits as the event was co-organized by the Austrian Ministry of Health, Family and Youth, instead there were many young faces and a fair percentage of women. Things I have learned (and tweeted about) include:

• As of January 2009, websites sponsored by the Austrian Ministry of Health will only receive funding when they are accessible. That doesn’t come as a surprise as a European Ministerial Declaration in 2006 announced that accessibility and best practices could become mandatory in public procurement in 2010.
• Artur Ortega showed examples of Dirk Ginader’s accessibility features for Yahoo! Finance, including two input fields where the labels were dynamically updated after a currency was chosen. So a screenreader read “convert pound sterling to euros” instead of “convert currency to currency.”
• One reason for JavaScript enhanced HTML controls for Flash objects like Yahoo! video is that the Flash object cannot get tab focus when the wmode param is set to opaque or transparent. Still without that param it is impossible to tab into a Flash object in Firefox 3. Or did I overlook something?
• Designer Maria Putzhuber quoted an interesting delusion: 70% of designers believe that visitors are almost always able to maintain orientation while in fact just 10% of the visitors are able to achieve this. What do you think is the reason?

Deutsche Fassung

Note: when your flickr account is fresh, your photos will not be search indexed unless flickr staff has approved them as “safe.” Also you need to approve your photos for public search: “hide your photos from searches on 3rd party sites that use the API?” must be unchecked.

Your photos

• Minimize the number of text fields in your interfaces down to the absolute minimum necessary.
• Minimize the number of clicks / keystrokes / gestures necessary to accomplish actions in your interface.
• Make your interface as responsive as possible — minimize the latency of each and every action a user might take in your interface.

In short: keep it simple. Don’t make me think. Don’t make me wait.

Brilliant! Then a couple of days later I found the time to finally read Jef Raskin’s book The Humane Interface (2000) where he demonstrates four methods of quantifying the efficiency of a software interface: Fitt’s Law (1954), Hick’s Law (1952), Raskin’s own measures of efficiency, and the GOMS method, in particular the Keystroke-Level Model (1980).

I hadn’t heard of at least half of them before, and so did my colleagues. Apparently those methods are well established in software UI design, but less known among web developers. Which is a good reason to blog about them.

Fitt’s Law

You most probably have heard of that law. Given the size S of a target (like a button) and the distance D to move a cursor, you get the average time it takes to hit the button:

time (in msec) = a + b log2 (D / S + 1)

a and b are empirical constants, like the reaction time or time to click a button. You can use an approximation of a = 50 and b = 150. Also the smaller horizontal or vertical value for the size is good enough, and an average distance on a screen. The binary logarithm log₂ is the equivalent of the binary chance to hit or miss the button. That said, a large button is easier to hit.

For some practical examples see Kevin Hale’s excellent article, or Microsoft’s application of Fitt’s Law in Office 2007.

Hick’s Law

Hick’s Law is about the time it takes to make a choice from a number of elements. Be careful when applying this law to menus, because there are other factors like the size, design, sort order, or readability of menu items.

time (in msec) = a + b log2 (n + 1)

For example, ignoring the constants, we can boldly claim that choosing from a menu of eight items takes longer than from one of four items because log2 8 = 3 and log2 4 = 2. In theory, opening a submenu of four items in another menu of four items takes longer than the choice between eight, because 2(log2 4) = 4 and log2 8 = 3. Because human performance sinks on cognitive tasks involving more than 7 ± 2 items, choosing one of eight items could actually take longer.

Interface efficiency

The information-theoretic efficiency of an application is the minimum amount of necessary information divided by the actual amount of information. Sounds difficult, but is easy. Making a choice means one bit of information. “Push OK or Cancel.” One bit of information, requiring one click or keystroke. One keystroke is approximately 5 bits, so the efficiency is 1 / 5 = 0.2, or 20%. Thus you know there is room for improvement.

In the following example you got no choice at all, so the information efficiency is zero:

Of course it is necessary to inform a user that the search is over or that certain fields in a web form are required, but that can be done in an unobtrusive way without alert boxes. A yellow-fade does not require pushing a button and has 100% efficiency. If the user can only do one thing next, have the computer do it. Besides hitting “OK” soon becomes habitual and therefore pointless.

Goals, objects, methods, and selection rules (GOMS)

These rules were further described by Stuart Card, Thomas P. Moran & artificial intelligence pioneer Allen Newell in their influential book The Psychology of Human-Computer Interaction (1983). GOMS, and in particular the simplified Keystroke-Level Model (KLM), offers a simple approach to estimate the duration of tasks on a computer.

• K = 0.28 sec. — key press and release (keyboard)
• P = 1.1 sec. — pointing the mouse to something
• B = 0.1 sec. — button press or release (mouse)
• H = 0.4 sec. — homing, hands movement from mouse to keyboard or reverse
• M = 1.2 sec. — mentally preparing
• W(t) = t msec. — wait or response time (system)

Inserting mentals is probably the most difficult part of this, but there are six simple rules how to apply them. So in another infamous MS Word example when the user wants to change a radio button we get the sequence HMPBPB with a total of 4.0 sec., or HMPBHK with a total of 3.48 sec. when the user hits Return instead of clicking on “OK.”

3.48 seconds is pretty fast, but since there is only one bit of information but two keystrokes we know it could be faster:

The sequence required for this selection is HMPB or HMKK with a duration of 2.8 sec. or 2.16 sec., respectively.

Simpler interfaces increase usability and are faster. Because they are simpler, I don’t have to think so hard. Wait, that sounds familiar … it sounds like … cognitive load!

Let’s take Tantek’s examples where he describes the steps for instant messaging and writing an email. That would be something like:

• HMPMBBM(K × n)MK
• HMPMKKKKMKKM(K × n)MKM(K × n)MPB

Even without knowing and thus ignoring the amount of characters in the message and subject (K × n), the estimated time for writing an IM (5.58 sec.) is significantly smaller than writing an email (13.06 sec.).

I’m really sorry, it was a brilliant idea, but I’m afraid KLM-GOMS describes pretty well what Tantek calls Three Hypotheses of Human Interface Design. Unfortunately somebody came up independently with that established method for Human Computer Interaction, 27 years ago.

Speakers

• Richard Schwerdtfeger (IBM)
• Marian Oosting (anderslezen.nl)
• Chris Heilmann (Yahoo!)
• Miguel González-Sancho (European Commission)
• Michael Cooper (W3C WAI)
• Dominique Hazaël-Massieux (W3C Mobile Web Initiative)
• Dave Wilton (Legal & General)

Richard Schwerdtfeger works for IBM and is a member of the W3C WAI and the HTML working group, among others. I assume he had been invited because the organizers only knew him for having developed IBM Home Page Reader back in the 1990ies. But his current work involves the W3C working drafts for Accessible Rich Internet Applications (ARIA) and other core technologies that his team developed in cooperation with vendors of Assistive Technologies (AT, e.g. screen readers) and the Mozilla Foundation.

There’s a paradigm shift in the usability and accessibility of Web 2.0 applications. ARIA adds meaning, importance, relationships, fills the gaps in (X)HTML, and increases usability for all users through familiar navigation models from desktop applications.

From Marian Oosting (anderslezen.nl) I learned about DAISY. It’s a library standard mostly used for talking books for the blind. Based on MP3 and the W3C XML standard SMIL, it combines strong compression with superior navigational features. Quite intriguing to use that format for audio books, and since 2006 it’s becoming available and more attractive for non-disabled users. For example, talking books are quite popular with elderly people who constitute about 60-80% of public library users.

In his presentation Chris Heilmann (Yahoo!) emphasized the need to ask people with impairments because they use assistive technologies in other ways than a non-disabled developer might foresee. Don’t assume, integrate their advice!

Miguel González-Sancho (European Commission, Information Society Directorate General) presented the European programs for e-Accessibility, e-Aging, and e-Inclusion. ICT is becoming essential for socio-economic participation, yet 40% of the European population is left behind. Functional limitations and disabilities increase due to aging. About 20% or 100 million of the European population is concerned. Thus accessibility is gaining relevance and becomes a social imperative.

In “Web Accessibility in the Future” Michael Cooper (W3C WAI) was rather giving the big picture and avoided to announce a release date for WCAG 2.0. Although the updated version will definitely play an important role in the future of accessibility, so does the development of a common Accessibility API or authoring interfaces that generate accessible content (ATAG). Think of user contributed content where the authors are usually unaware of accessibility requirements. Moreover, professionalization of accessible design, programming, and manual and semi-automated evaluation will gain importance. We must keep an open eye on developing technologies (MathML?, Second Life?), advocate accessibility in early stages, and keep accessibility awareness in legislation and society.

Dominique Hazaël-Massieux (W3C Mobile Web Initiative) talked about the mobile web, of course. There are more mobile phones than computers, they are cheap, and about 80% of the world population has mobile network coverage. Mobile access is everywhere, will become ubiquitous. There are some limitations like the tiny screen, the lack of a proper keyboard, diversity is large and access slow. In fact mobile and impaired users have so many challenges in common that Dominique estimates an accessible website already meets half the requirements of the Mobile Web Best Practices. Bad news for militant accessibility advocates who keep emphasizing the differences between accessibility, universal access and device independence.

Dave Wilton from the large British financial services supplier Legal & General gave some real world examples why it literally pays to become accessible:

There are nine million people with disabilities in the UK. If 1% just bought a £300 policy, his company will make £27 million: “The cost of making the site accessible pales into insignificance.” If people can’t buy from Legal & General, they will go to their competitors. In surveys, helpdesk and logfile analyses they found 10% of their visitors don’t make it past the home page. That’s equivalent to slamming the door into the faces of 20,000 visitors each month. 30% never open a PDF file. Besides, every third Briton is older than 50, and as we have heard before, the incidence of disabilities increase with age. There are not only people with cognitive impairments, but also 3 million people who speak English as a second language, 1.5 million people lacking basic language skills, and 5.2 million adults who have sub-GCSE level English.

Next time somebody tells you “disabled people are not our target group” show ‘em these results:

• Online traffic surged with a 50% increase in natural search engine listings.
• The number of visitors receiving quotes increased by 100% within three months.
• The new content management system cut site maintenance costs by 66% with an annual saving of £200k.
• Without changing products or prices, conversion rates improved substantially, ranging between 26% and 300% increase with an average of 200% (something Jakob Nielsen seconds).
• The entire project delivered 100% return-on-investment (ROI) within just 12 months.
• Customer satisfaction was improved (not one accessibility complaint!)
• It was great PR!