Last week I read two books that combined to convince me that I need to start really pushing usability testing.
I have been encouraging clients to do this for some time now, but in the small voice "it might be a good idea, if you have the budget" way. Needless to say, that hasn't gotten any traction. I believed in it, but I didn't believe in it.
I am looking for some attractive form designs. If you have seen any that you like, I would love to have a look at them. I would also like to find attractive data tables and administrative menus.
I went with my wife to Baltimore this week for a conference.
Among the vendor booths at the conference is a company that makes software targeted at the businesses attending. Knowing that I am a programmer, my wife's boss asked me if I would talk with one of them. I cautioned him that this was desktop software and I am a web programmer, so I would be of limited use. He understood, but was curious what I would think.
This sounded like fun, so I went there after we finished our lunch (at the Hard Rock of Baltimore which seemed to be populated mostly by those of us from "Flyover Country").
Upon talking to the people at the booth, it quickly became clear that my questions were too technical for them, but they did their best. This software is sufficiently old to be what I would call DOS-based (green text on a black screen). They didn't care for this term - preferring text-based. They are also coming out with a new version that their pamphlet calls "windows-based", but they preferred to call it the GUI version.
I was mostly asked to find out about the GUI version, so I directed most of my questions about that. The girl I talked to indicated that the GUI version wouldn't be full ready for a few months, but that the text-based version was very, very stable.
Now (and here comes the interesting part), she also told me that the text-based version is much faster. I said something about it being faster for the computer, but not the user. She said "Oh. If you know the keyboard commands, you can actually use the text-based version very quickly." I nodded and told her that I was sure she was right.
Among design professionals, Flash intros are not popular. Even so, sometimes a client will insist. I had this very situation recently.
I made the argument that it was bad for usability. No avail, working in a visual medium, they were very concerned with making a visual impact. I made the argument that it would be bad for search engines. No avail, the client was only concerned with visitors already familiar with the company.
Having failed to convince the client not to have a Flash intro on their site, I was left with figuring out how to best accomplish their request. I couldn't do anything about the usability (the intro did include a "skip intro" button though). The search engine problem, however, seemed like something that I should be able to solve.
I recently needed to download a trial version of MS Office 2007. Microsoft made me fill out a bunch of forms in order to do so. This wouldn't have been that bad except that they apparently have never heard of the "label" tag.
Not exactly new, the label element has been around since the introduction of HTML 4 (so from at least 1999). Despite its antiquity and usefulness, it still doesn't seem to get much use.
By way of review, the label element associates some text as the label for a form element. This is useful for assistive technology, but also for everyone else.
If you click on the text in a label associated with a text field, it will automatically give that form field focus. More useful, however, is its effect on checkboxes and radio buttons.
Compare a checkbox without a label:
Check this box
to one with a label:
Notice that they both look the same, but the second one allows you to use the text as part of the checkbox itself, making it far easier to use. This takes advantage of Fitt's Law: The time to acquire a target is a function of the distance to and size of the target (source - also see Wikipedia's entry on Fitt's law).
Using label elements is easy to do and makes form fields easier to use for everyone. If you aren't using them already (and I am always surprised by how little they are used), best start today.
I just found an interesting article by Pete Forde arguing against the "next" button and paging through records entirely.
He even points to an example or two of how this could be done.
His point is basically that since the web is non-linear, pages don't make sense. After all, the contents of "page 2" today won't necessarily match the contents of "page 2" tomorrow.
When I first started surfing, I would try to click the text next to a radio button or checkbox in order to select it (after all, that works in most Windows programs). I suspect many web surfers still experience this annoyance.
This is a problem because it violates the expectations of some users and because the size of a clickable area determines the ease with which it can be clicked.
In fact, Joel Spolsky has a whole chapter called "People Can't Control the Mouse" in his book "User Interface Design for Programmers" in which he argues (in part), "you should design your program so that it doesn't take a tremendous amount of mouse-agility to use correctly" (think of the poor person with a ThinkPad or other hard-to-control-mouse).
The need for mouse-agility and the dissonance with many Windows programs (thus violating Mr. Spolsky's cardinal axiom of "A user interface is well design when it behaves exactly how the user thought it would"), makes this behavior a bit of a usability no-no.
Fortunately, a tag added in HTML 4 allows us to solve the problem. The <label> tag, when used correctly, will solve this problem and more.
I have noticed that a great many ColdFusion sites show the default ColdFusion error when something goes wrong. This is a bad idea for many reasons.
In the "Research-Based Web Design & Usability Guidelines" (pdf) put out by Usability.gov, "Detect Error Automatically" was given an importance of 5 out of 5. In his popular "Top 10 Web Security Tips" article, Michael Smith listed "Have an error-handler" as his number-one security tip.
In his article "Toward Better Error Handling" (part 1, part 2, part 3), Charlie Arehart covers some techniques for error-handling in ColdFusion. As of the release of ColdFusion MX 7, a new method exists for handling errors in ColdFusion; the onError event of Application.cfc.
Eyetools Research will let you resell their services and offer eyetracking studies to your clients.
For the uninformed, eyetracking studies measure where users actually look on your web site. This will include the order in which people look at things on a web page as well as where most people look (using a Heat Map). This information can be invaluable in determining how usable your web page is.
Although I don't pretend to know anything about the industry, their pricing seems reasonable and they offer discounts to resellers.
I find this really exciting and I plan to mention this to my clients (by way of this blog entry). It would be really nice if Eyetools made some materials available for use on reseller web sites and promotional materials. I would love to start offering this service in the future and have information that I could easily put on my web site to accurately and effectively describe the service.
Find out more about offering eyetracking to your clients. I will definitely continue to keep an eye on Eyetools (especially their eyetracking tests of CSS Zen Garden).
Eyetools Research is running an eyetracking analysis on CSS Zen Garden. Their eyetracking analysis shows where users actually look on a web page. CSS Zen Garden shows the same content (indeed, the same HTML) with multiple designs.
The nice thing about an eyetrack study of CSS Zen Garden is that it is possible to see how people react to the same exact content in different designs. So far, they have tested the original design and one other. They are taking votes for what designs to test next.
If you haven't done so yet, you might want to check out the Eyetools blog. If you are interested in CSS Zen Garden, you might want to look at the CSS Zen Garden book.
