Today I went to add Ayn Rand: In Her Own Words to my DVD wish list on Amazon.com. A few minutes later I received an e-mail stating that my order was received and would be shipped soon. I did click ‘Wish List,’ didn’t I? How was I suddenly buying this DVD? Luckily, I caught this in time to canceled the order. No harm done.

But darn it, I was pretty sure I had clicked the ‘Add to Wish List’ button. On the other hand, I found it difficult to contemplate how Amazon could make an error like that. I figured it was user error, and I went back and retraced my steps to figure it out.  Here’s what I discovered:

Upon first loading the page, the ordering box looked like image you see at the right. Now, I’m pretty fast with my mouse and am very familiar with the Amazon site, so I quickly went over to click the ‘Add to Wish List’ button, and then moved my eyes to another open window and thought that was the end of it.

So how did it the ‘Buy now with 1-Click’ button get clicked? It turns out that the image above is only part of the story; shortly after the page is fully downloaded into the browser (I’m using Chrome on Windows 7), some more options appear in the right-hand ordering box, notably a ‘Get it:’ option (shown at right) with the ability to select between Saturday delivery or Tuesday delivery.

Like MyUSAddress I love this ability to choose shipping options just before clicking the 1-Click ordering.  It’s pretty convenient.  However, because this portion of the page doesn’t load until the rest of the page loads, it actually pushes the content below it down a few pixels.  You can also read this article and get he best shipping options. Enough  pixels, in fact, that the time between when I saw and meant to click ‘Add to Wish List’ and when I actually clicked and moved on to other things, the ‘Buy now with 1-Click’ button had moved under its place and that was the button that was actually clicked.

The image shown to the right of this paragraph illustrates what that order box part of the page looks like before and after the page is fully rendered.  Comparing the two side-by-side, you can clearly see that the ‘1-Click’ button has moved down to exactly the part of the page where the ‘Add to Wish List’ button is in the image above it. Viola! I figured out what happened.

So let that be a UI design lesson for all you developers out there. Or perhaps it’s a lesson for me to stop surfing the ‘net like a maniac.

Either way, designers should  be on the lookout for how a page loads in real time, behaves over time, and how that impacts the user experience. You don’t want to accidentally be buying stuff on behalf of your customers.