Subscribe: Steve Bryant - Usability
Added By: Feedage Forager Feedage Grade B rated
Language: English
check  contrast  css zen  design  eyetools  label  page  people  text  usability gov  usability  version  web site  web  zen garden 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Steve Bryant - Usability

Steve Bryant - Usability

A Web Programmer's Exploration

Published: Sun, 19 Nov 2017 06:57:46-0600

Last Build Date: Wed, 27 Aug 2008 09:00:00-0600


I must Try Usability Testing

Wed, 27 Aug 2008 09:00:00-0600

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. [More]

Attractive Forms

Tue, 08 Apr 2008 06:30:00-0600

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.

The Importance of Speed

Fri, 10 Aug 2007 14:27:00-0600

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.


Search Safe Flash Intro

Tue, 24 Jul 2007 15:50:00-0600

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.


Label Your Fields!

Mon, 02 Apr 2007 13:37:00-0600

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.

No More Next?

Mon, 12 Feb 2007 06:00:00-0600

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.


Better Form Fields

Mon, 25 Apr 2005 20:47:00-0600

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

Hide Your Errors (Application Events: onError)

Tue, 22 Mar 2005 14:27:00-0600

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, "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. [More]

Offer Eyetracking to your clients

Sat, 19 Mar 2005 05:59:00-0600

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).

Eyetrack and Zen Garden

Wed, 09 Mar 2005 05:59:00-0600

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.

Color Contrast

Sun, 06 Mar 2005 05:59:00-0600

I know that I have referenced the usability study on several times in past entries already, but don't expect that to change now. It is a wealth of useful information.

The usability study makes 189 recommendations and ranks each on a scale of one (1) to five (5) on both "Relative Importance" and "Strength of Evidence". Of these, four (4) rank highest in both factors. I have already referenced one of these "Use an Iterative Design Process" (pdf) in a previous entry ("In Defense of FLiP").

Another of those four highest recommendations is "Use Black Text on Plain, High-Contrast Backgrounds" (pdf). Although the recommendation specifically states black text, the text of the recommendation ends with this sentence "In general, the greater the contrast between the text and background, the easier the text is to read.".

Fortunately, you can use Colour Contrast Check to check for both brightness difference and colour difference and check for compliance to WCAG (Web Content Accessibility Guidelines) Checkpoint 2.2.

Note, of course, that the degree of contrast isn't everything. According to, dark text on light background is easier to read. "When compared to reading light text on a dark background, people read black text on a white background up to thirtytwo percent faster."

To read more about color, check out "Color, Contrast & Dimension in News Design".

Here are some other tools and resources:

A downloadable tool, Colour Contrast Analyser (British spellings) allows you to enter the colors that you are using and it will quantify the contrast between the colors and compares it to a value of "acceptable contrast". If you would rather just see the results of different color choices (or you don't want to download software), you can try the Palettizer css color contrast picker.

Good luck!

Eyetrack and Usability Notes

Sat, 26 Feb 2005 13:19:00-0600

I recently discovered a new study on web site usage. Eyetrack III is a study of the eye movements of 46 people on fictional and real news web sites. They published a summary of their findings as well as an FAQ about Eyetrack. For ongoing reading on the topic, check out the Eyetools Blog.

While on the topic of eye tracking, I read one of the recent enties on the Eyetools blog and thought it was worthy of mention. The Washington Post web site just underwent a redesign. Eyetools created a Heatmap of the page from 19 visitors. The Heatmap reveals that the bottom of the page is getting very little attention.

What is interesting about this is that evidence demonstrates that this is NOT a below-the-fold problem. The Heatmap shows no dramatic drop in attention for areas below the fold.

So what is the problem? Eyetools says "ineffective line-height spacing and lack of white-space reduce reading". I think they are right, but their Heatmap shows a dramatic drop. I decided to go out to myself. I scrolled down to around the end of the area where people seemed to be looking and here is what I saw:


Looks like the bottom of a web page doesn't it? It isn't. The page continues, but no one is looking. This seems to coordinate with the "Avoid Scroll Stoppers" (pdf) guideline on, which gave a "Strength of Evidence" of 4/5 and a "Relative Importance" of 2/5.

This certainly seems like something to watch out for in your designs!

In Defense of FLiP

Fri, 18 Feb 2005 05:59:00-0600

In a previous blog entry, I criticized the Fusebox framework for some of its slight imperfections. So this may seem like a slight reversal. I still maintain that while Fusebox is a great framework, it isn't the choice for me. FLiP (Fusebox Lifecycle Process - the methodology associated with Fusebox and Mach-ii), on the other hand, is another matter.


Good 404 Error Pages

Fri, 04 Feb 2005 05:59:00-0600

The Dreaded 404 Page

No matter how careful you are, sometime someone is going to try to pull up a page on your web site that doesn't exist. You might move a page or they might mis-type a URL or follow a link of someone else that mis-typed a URL.

When it happens, unless you take precautions, the user gets your web server's default 404 page. This is generally a plain white page that tells them in geek-speak that the page doesn't exist. In observing casual web users, the most common reaction that I have seen to this error is for the user to decide that the site no longer exists (ouch!).


Unobtrusive Javascript

Wed, 02 Feb 2005 05:59:00-0600

I was reading through Bill Rawlinson's blog and in two different entries he mentions Unobtrusive Javascript. I had to check it out.

After reading about it, I have to say that I am thoroughly amazed. These are thoughts that I had been having about JavaScript in a general sense, but taken to a level that I hadn't yet reached (or, let's be honest, gotten very close to). From now on, my goal in writing JavaScript will be to meet those guidelines.

In short, Unobtrusive JavaScript is an an attempt to separate functionality from HTML so that functionality doesn't polute the mark-up. This is for essentially the same purpose as separating styling from HTML. It should also make sure not to hinder a page from working when JavaScript isn't available or get in the way of accessibility.

Read about Unobtrusive Javascript.