100 ways to "Save As..." a cat

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]

Usability in the real world

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.

Hoekman II

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.

Security measure: Security questions...

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

Usability: Unsolicited advice

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.

Usability: Date yourself

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.

Learning usability from the masters: Modality

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.

Overcomplicating a signup process

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.

Learning usability from the masters: Deleting files

After reading Robert Hoekman's "Designing the Obvious", I've become very interested in the topic of usability. One of the best ways to learn usability is to examine examples of poor usability. And what better resource for that than Microsoft products?

Here's a common Windows error:

The error message says what the problem is (can't delete file/folder), what's causing it (it's in use), and how to fix it (close stuff and retry). It has the three core things an error message needs, but it's a very generic, completely useless error. "Which program should I close?" is the top question.

How to improve your error messages...

Don't include the word "or".

  • "Error deleting file or folder", does Windows not know which you're trying to delete, a file or folder? Doesn't instill much confidence in the application. Write out an error message for each possibility. That'll take more time of course, but users will be more comfortable when they're told exactly what's wrong and how it happened, not just getting a generic "check engine" light.
  • "It is being used by another person or program", how are these different? If another user is using the file, they'd likely be using it in a program, yes? It's your application's job to figure out what's wrong, not guess at it.
  • Ideally, the user would NEVER see an error message, but we know in the real world, that's not always possible. If the system is smart enough to know an error happened, it should be made smart enough to know how the problem happened and fix it on its own if possible.

Don't make the user fix the problem all on their own.

  • In the case with this error, I had listened to the mp3 in Windows Media Player, closed the player, and tried deleting the file. Nothing on my system was obviously using the file. The file was is on my desktop, so no one else should be using it. What do I close before retrying? (The answer is usually "Windows") There's obviously some rampant process or thread marauding around with my mp3 (in Windows?! Never!). The "how to fix it" text is worthless here and would cause most people to call their smart nephew.
  • This error message SHOULD contain a list of processes or programs or users that are using the file. Even if there are no options for blocking access to the file so it can be deleted, it would give me somewhere to start if I could see what's using it.

In the past I have found (and lost) links to programs that will show you exactly what processes are locking a file but that's a core job of the OS; file management. Always be sure that the core functionality of your application is working flawlessly before adding on the bells and whistles.

BlogCFC was created by Raymond Camden. This blog is running version 5.9.002. Contact Blog Owner