Note: This is the old blog for rhjr.net. The new one is here.

The best scary phone call I've ever had

A woman from Visa Fraud Protection Services just called me. She wanted to make sure I was, in fact, the person who made several charges on my card last night. Wow - that's scary.

First, she asked me a series of questions to verify I was the cardholder. She started each questions with something like, "I have ___ as the first three digits of you social security number. Please verify the middle two numbers." She didn't ask for the last four. She asked similar style questions about my address and birthdate ("I have October listed for your birthday. Please verify the date."). This showed me the caller wasn't some stranger trying to pry information out of me. She had the info; I was just verifying small parts of it. I felt safe.

Then she asked if I was the person that made a purchase at each of the three places my card was used at last night. Yup - it was me. (What a relief!)

Last night, I used my card at a gas pump to start filling up my tank, and then I went inside the convenience store and bought quite a few other items. Well, apparently the gas station runs a $1 verification charge at the gas pump to verify the card is legit, then charges the actual amount of the gas when you're done and clears the $1 charge. So to Visa, it appeared that someone could have used it at the pump for a small charge to see if it would work, then went inside and spent a bunch of money. Something about the series of charges triggered a notification inside Visa, and they picked up the phone and called to make sure it was me doing the charging.

I thanked her profusely.

I am so impresssed with Visa right now. That was a fantastic experience.

"I don't want to spend too much time on it."

I have a friend, with whom I've worked on several projects recently. He's an excellent developer - he knows quite a lot about several languages and can work fluidly in any one of them - but when I start talking about user experience, he has this bad habit of saying "I don't want to spend too much time on it".

I know many of you have heard a statment like this before. And I know many more of you have been the ones to say it. So I wanted to take a few minutes to address this rather bad habit.

A statement like this one means something has gone wrong in the development process. It means that instead of focusing on the user, which is the only person that matters, you've resolved to believe that your application will automatically be good enough for anyone to use. After all, you built it, and you know what you're doing. So you start working and along the way, you start making little decisions that make sense at the time, but result in a questionable experience. In my friend's case, he recently finished up a web application designed to allow clients to report issues found within other projects being built for them. On the login screen of the application is a simple form consisting of Username and Password fields, and a Login button. But there's also a blue text link up in the top-right corner of the main content area of the page that says "Login".

Upon using the application for the first time, I think to myself, "What's that do?" The blue text link is the first thing I click on the page. It does nothing. I enter my username and password, and click it again. It does nothing. I click the Login button that looks like it's actually part of the login form, and I am logged in. I glance over to the little blue text link again, and notice it now says "Logout". Oh, I get it. It's a status indicator, and it toggles depending on your login status. I get that.

So why is it a link when you're on the login screen? And if it's not going to be a link, why put it there at all? The only time it says "Login" is when you're on the login screen. The login screen already has a Login button. "You should get rid of that blue text link link", I say. "It's confusing."

"It's a toggle", he says. "I know, " I say back. And then the conversation turns and we never get back to it.

Five minutes later, I watch someone else try to login for the first time. He does the same thing I did.

So let me get this straight. You don't want to spend a lot of time on user experience, so you're going to make your users spend their time figuring out how to use your application? Yeah, that seems like a bad plan.

The interface is the product. It's the part users use. It's what turns people into "users". Without users, your application is ... well ... useless. Users don'ts care how you built the tool, how long it took, how hard it is to maintain, or anything related to you job. They don't know you and they don't care about you. All they want to know is that when they use one of your tools, it will do what it's supposed to, as painlessly and easily as possible.

Now you've gone and made them think. And that's just sad. You went out of your way to add that link to the login screen, thereby creating the one thing on the login screen that is confusing. So your product's first impression is now confusing. Is that what you want?

The interface is the product.

Remember that. Chant it to yourself at night. Sing it to yourself on the way to work in the morning. Say it out loud to everyone that plays a part in application development in your company.

Instead of saying "I don't want to spend a lot of time on it", realize that "it" is the only part that matters, and that "it" is the implementation of the initial idea. Instead of saying "We need to get it done quickly, so let's build it now and clean it up later", build functioning mockups first (in this case, HTML pages) so everyone has something to "touch" while you're building out the logic. Adjust your code based on their feedback. You'll get done at the same time, if not faster, and you'll have a better application as a result.

The new Macromedia Edge newsletter

The
new Edge newsletter is out, and aside from featuring my own article, titled "A First Look at Flash Professional 8", it also contains articles on the new Dreamweaver, the top 10 reasons to attend MAX 2005, and how to put the customer "up front" with Studio 8.

Check it out ...

Flash 8: What's your favorite feature?

If you have chosen a favorite
Flash 8 feature, add a comment to this post and tell everyone about it. If you haven't yet noticed all the new features, read about some of them here.

I'll start:

My favorite Flash 8 feature is ... hmmm ... I guess I'd say the new Video Import wizard. Import a video, edit and crop it, and choose a skin for the player, and in less than two minutes you've got yourself an FLV, a SWF for your content, a SWF for your player skin, and a source FLA. Now that's a great experience.

Working Example of Flash Player Express Install

Another feature of my eReader page and application is a
working example of the Flash Player Express Install. Downgrade your Flash plugin to Flash player 6r65 or higher (but not 8) and check it out. It's a great experience.

The Best Possible Flash 8 User Experience

To help celebrate the release announcement for Macromedia Flash 8, and the launch of my Macromedia Developer Center article,
Best Practices for Flash Player Detection, I decided to create the best user experience I possibly could for Flash Player 8 by building an eReader application, currently being used to display an excerpt of a book I'm working on in my spare time titled "The Web Commandments".

While this may not seem like a big deal, take a close look at the elements that make up the page and application.

First, the eReader application features a drop shadow, compliments of the new "Expressiveness" API built into Flash Player 8, and is a wonderful example of the new text-rendering engine built into Flash player 8. But there are a lot of other features in the eReader page as well.

For example, I put the new Flash 8 detection scripts to work. If you have a version of the Flash plug-in older than 6r65, have no plug-in at all, or have JavaScript disabled, you see alternate content that asks you nicely to upgrade or enable JavaScript, links to other content on my site if you decide not to bother, and a screenshot of what you would be seeing if your plug-in was correct. In other words, I offer you a way to get the upgrade, a way to get out, and a reason to stay.

If you have an old plug-in that is version 6r65 or higher, I use Macromedia's Flash Player Express Install, so the plug-in itself prompts you to upgrade. If you decline the upgrade or it fails for some reason, I react to it and show you alternate content to get you back on track.

You can test all this by uninstalling your Flash plug-in and visiting the page, then installing Flash player 7 and visiting the page again.

The eReader page also has a working Back button. Even on Mac. And I didn't use a single named anchor. This was done by sticking the eReader page into a framset and loading a history.html file into another frame. Clicking the Next and Previous buttons in the application reloads history.html to generate browser history, so if you hit the browser's Back button, the application is updated and you see the previous state of the application, not the previous web page.

This technique is a spin-off of the one originated by Robert Penner, but I needed something a lot more flexible for my eReader application, so instead of creating one html file for each state of the application, I simply reload history.html with a new ID appended to the query string each time.

And because not all browsers update Flash upon reloading the contents of a frame, I also use the JavaScript-Flash Integration Kit to make this work. Every time history.html reloads, it calls the eReader application via the FlashProxy obkect to notify Flash of the update (I have a method in the eReader that reacts to this call), so the Back button works consistently in browsers on both platforms.

Of course, if you are using a browser that does not support framesets, I show you alternate content in that case as well.

Finally, I offer a description of the Web Commandments via a toggle link. Once the eReader application loads the XML used for its content, it parses the description from the XML and calls the setDescription() JavaScript function, which then generates the HTML for the description. The setDescription() function also creates the "About the Web Commandments" link and sets it up to toggle the description. The link does not show up in any other circumstance.

Assuming you have the correct version of the plug-in and JavaScript is enabled in your browser, you see a simple, clean interface in which the controls (Next and Previous buttons) are separated clearly from the content of the application. The design is crisp, clean, and simple, as it should be.

At no point does the tool get in the way of the content. And at every step, additional content is in place to keep you on track should something go wrong.

So, do you wanna see this thing? Check it out now!

To learn more about the Flash detection method used for the eReader application, see my article, Best Practices for Flash Player Detection.