Web usability design patterns don't apply only to the web. Imagine a world where nothing needed instructions, all actions were completed with a minimum number of steps, and you got non-intrusive feedback for everything.

It's becoming a more popular internet design pattern to have the "submit" action on a form done with an actual button and the "cancel" action is done with a plain link. This draws attention to the more often used element.

I was in the elevator and someone was coming. The "open door" and "closed door" buttons have different symbols in every elevator. In my morning, caffeine depraved brain, I couldn't translate the images fast enough to hold the doors and since my focus was on the buttons, I didn't think to throw out an arm to stop the door. I tell myself this happens common enough and I'm not an idiot.

The "open door" button should be different than all other buttons on the elevator's interface. When you get in the elevator, there's no rush to hit the button for your floor. If you're impatient, you can mash the button to close the door. Opening the door (and I suppose the emergency buttons) is the only action that you might hit unexpectedly.

If only all things were as easy and modular as web programming. Imagine if only Otis and ThyssenKrupp could change their button coding in one place and magically all their elevators in the world would be updated. Larger, colored "open doors" buttons everywhere!

It recently hit me how no two of my coworkers save their files in Flex Builder the same way. One uses Save under File, another always uses Save All, yet another hits the save disk icon. And I use the keyboard shortcut or let Flex Builder save everything for me when I run the app. There are so many different ways to save your progress, how odd that no two people seem to do it the same way.

[More]

I washed my filthy car yesterday at one of the do-it-yourself car washes. I don't know why, I always feel ripped off at these. Having control over the cleanliness of my car is a bad thing too, since I ALWAYS miss a spot, then I only have myself to blame. This was the interface given.

• A dial with the different steps of the carwash process and two "Stop"s
• A slot to put in quarters, a place for rejected quarters
• A light saying the station is operation
• Another light saying you're on your last coin
• A blurb telling you to put in six quarters slowly

First things that are wrong with this:

1. What order do I do these steps in? There was a giant poster on the wall to my left, but the dial should be order, clockwise. There appeared to be no order to the dial. The top half is "high pressure" things, the bottom is "other". There may be a mechanical reason for the order, but why do I, the user, care about how the back end of this dial works?
2. How long will six quarters give me? It would increase the cost of this interface if it gave a digital "time remaining" display. But the "Last coin alert" is easy to miss. And if you run out of time, you have to start over with the base six quarters.
3. *NO WHERE* does it say that you can buy more time with more quarters. If someone didn't know how these places work, they might assume they could actually wash their car for $1.50. When in fact, $1.50 is just enough to cover your car with suds, but not enough to wash it off.

The first time I went to this station, I started with tire cleaner and began spraying the tires. When I got to the third tire, the sprayer sputtered and started spraying green tire cleaner... I now know better and stand there with "tire cleaner" selected for 20-25 seconds until it starts working.

There may be a lot of marketing involved in how this particular station works. Things to slow the customer down slightly enough that most wouldn't notice, but enough to eek out a few more bucks a day. So, things to learn from this to take into the web.

• Put controls in a logical order and put the instructions *ON* the control. Turning my head 90 degrees to see what the next recommended step isn't much of a problem, but why should I have to. If the dial was in a useful order, you wouldn't have to even look at the dial. But as is, every step I have to careful choose what's next.
• Have your controls operate as they logically should. Otherwise you'll leave visitors feeling stupid. "Tire cleaner" took a long time to start working. You could relate this to locking your application while key information is being refreshed, so that users don't keep using the old information.

Last week, I found that Robert Hoekman, Jr has a new book coming out, Designing the Moment: Web Interface Design Concept in Action. I told my manager and he immediately got me a copy. I loved Hoekman's first book, Designing the Obvious, so much, I had my manager get a copy for everyone in the group. Hoekman ranks way up there with in the field of usability experts, with Steve Krug, Alan Cooper, Jakob Nielson.... I've found Hoekman's writing style so easy to read and follow. He remains generic enough that his books won't easily become outdated, but is specific enough that you can immediately apply his points. If you're interested in some usability tips, I'd very much recommend picking up his books.

...are the lamest type of security. I tried logging into my student loan site last night and it asked me some security questions. I didn't know if it was trying to set them or if I messed up my password and was trying to verify me.

Question: What was your first job?

My attempts to remember what I typed 15+ months ago: stockboy ... (do spaces matter?) ... stock boy ... (was I specific?) ... stockboy at norman's market ... stockboy at norman's ... stock boy at normans ... professional replenishment engineer ... (oh wait, I had a paper route...) ... paper boy ... paperboy

I didn't get that far, my account is now locked and I have to call their support number. Another popular security question is "what is your pet's name?". Well it was Fluffy, but Fluffy was run over and now I have Biscuits, but when did I answer this question? I had several pets then, which did I name? Static questions (mother's maiden name, city of birth, father's middle name, etc) are so simple to find out from quick Google searches, they're not really secure.

Site of interest: Mountain, Ltd

I was asked to add a job ad for these folks to the Detroit CFUG site. Before adding the ad, I had to make sure they're really doing what they say they are, so I hit their site. And I left with some comments.

The front page isn't too bad. It has some wasted white space on the top and right. All other pages have a different size navigation than the front page.

Branding isn't strong across the site. All pages have the logo and company name, but the company name is very generic. Tossing a slogan in with the logo would help visitors immediately know what they're looking at when they are dropped into any page of the site from a search engine.

Services page has FAR TOO MUCH UPPER CASE TEXT. UPPER CASE IS HARDER TO READ, LOOKS UNPROFESSIONAL, AND IS MEANT REALLY JUST TO HAVE SMALL BITS STAND OUT. When the whole page is full of upper case text, nothing stands out.

Jobs page requires you click a type, should default to one of the three options.

The block of text at the bottom "equal opportunity" blah blah merges into the rest of the body of the page on several pages. Putting a different color background to this or an hrule would help.

I'm trying to find out who is playing the local Arts, Beats, and Eats festival this Labor Day weekend. But the AB&E site is down. So I Googled for it, hoping someone else would be mirroring the information or that Google would pick up a post on the different bands' websites. I found a post on a local news station website, saying that the B-52s and The Verve Pipe will be playing. Wait... that was a few years ago...? And actually Sponge "headlined", not the B-52s. Sponge was on last, but everyone left after Love Shack was played.

The article doesn't give a date anywhere. At the bottom, it says copyright 2004 and mentions it's the 2004 article, but at a glance you wouldn't know when the article was released and might think it's current information. Be sure that whenever you post information that will become dated, always include a date with it.

From Wikipedia: In user interface design, a modal window (often called modal dialog because the window is almost always used to display a dialog box) is a child window which requires the user to interact with it before they can return to operating the parent application. Modal windows are commonly used in GUI systems to absorb user awareness and to display emergency states.

I have been trying literally all day to get CFEclipse working again. When I open a cfm or cfc, I get an error saying it can't open the file and I get a long Java stack trace. I've uninstalled Flex Builder, put on plain Eclipse, tried different versions, nothing works.

But while installing, I got irritated and so another tip on usability: Modal windows.

1. The Flex Builder 2 installer is an attention hog. In the last half of the installation, it keeps stealing back OS focus.
2. I installed Flex 3 onto Eclipse 3.3 and got an error at the end, telling me where to find the log file of the error, but the error window was modal over the entire OS (not technically, but it immediately retook focus and moved to the front when I clicked elsewhere), I couldn't browse to the file until I closed the error.
3. The other week I was using Outlook and Word and something happened such that the address book in Outlook was modal over my Word document.

Three very bad examples of modal usage. A window should only be made modal ONLY if the user MUST give that window attention before the app can continue doing anything. But certainly, one app should never be able to pull focus from another.

Another fun MS example is the "Updates were made, restarting system in 5 minutes" countdown window. You can either "Restart Now" or "Restart Later". But the second option is really "Remind Me Later" because 5, 10, however many minutes later, that restart countdown pops up over everything and you have to stop it again. The window doesn't tell me the benefits of restarting (the updates will take effect, so what? What are they?). But I do know restarting will disrupt my work for 5-10 minutes so I put up with clicking option two until lunch, or a break, or a meeting, or just click it all day until I shut down my laptop at night.

And Ray Camden is my hero even more now. I accidentally closed this tab twice while writing this entry and both times the content was still here when I came back. About time I start writing entries in Google docs I think.

Imagine you're making an app where someone needs to sign up. Easy enough to imagine, you've probably built a bunch of them. When they sign up, they supply their email, password, and a screen name. By the laws of the system, the screen name and email must be unique and the password must contain letters and numbers. I generally stop about #3, but then I'm also very lazy.

Attempt 1: Simple form, put in your screen name, email, and password (and password confirmation) and submit. If the screen name or email are in use or the password isn't valid, you get an error back saying there's a problem with that field and are asked to go back, fix it, and resubmit.

Attempt 2: Same form, but when you submit, if there is a problem, the form is displayed again with your inputs and errors.

Attempt 3: Invoke JavaScript to do some on-the-spot validation. Disable the submit button until the password is valid and matches the confirmation, the email is a valid email, and the screen name is filled out.

Attempt 4: AJAX time, include a button to check the availability of your screen name and email before hitting submit.

Attempt 5: If the email is in use, give the user a "forgot my password" form. If the screen name is in use, show a list of available screen names that are similar to choose from.

Attempt 6: After hitting the "check screen name availability" button, the screen name is put in a reserve status so someone else can't ninja it while the user fills out the rest of the form.

Attempt 7: Take out the "check availability" buttons and do it onChange or onBlur on the fields.