Building A Great DHTML Chaser - DHTML Lab

DHTML in GreatEqualizer.com, I:
Overview

Early last year, I inherited my first major project at Ascolta Training Company. I was to continue development of an e-commerce / web-community style site that was - at that time - little more than Flash mock-ups, and some funding. As this was my first project that was to have a real sizeable audience, I was excited to get started. I had all the boundless enthusiasm, energy, and naivity of your average 21-year old developer. Nothing was impossible.

Although I had many goals for the project, in hindsight I can see that the principal one was to create a really "cool" UI that had as many jumping, spinning, and moving pieces as possible. My boss had entirely different objectives including really boring things like usability, short development cycle, high code-maintainability, etc. We weren't exactly on the same page.

After a few rough starts and an agonizing amount of documentation and research, we agreed on an interface pretty close to what you'll see if you go to the GreatEqualizer search page enter some values to search for, and click "search."

In the articles to follow in the next couple of months, I'll be showing you in detail how each of the major DHTML components for GreatEqualizer.com work, how I created them, why I chose the approaches that I did, what worked and what didn't, and do a general brain-dump of everything I learned in the process.

These are the pieces I'll be talking about:

The Chaser:
The panel on the right follows you around the screen as you scroll - thereby keeping important controls right within the user's reach. Not only is it really fun to play with, it continually draws attention to the red "checkout" icon at the bottom of the sliding panel. Pretty clever, eh?

Dynamic Short Descriptions:
In your typical shopping site, you'll have a list of products, with only their names, pictures, and prices. To decide which of several similiar products to buy, you'll have to go to a separate URL for each item to read a description of it. Even with a fast connection, this is a frustrating process. My interface avoided this hassle by having descriptions of each product displayed dynamically in the floating panel on the right.

Client-Side Shopping Cart:
By moving the logic to keep track of a simple list of selected items to the client, the user-experience can be shortened even more. What's more, controls can be toggled immediately to indicate that an item has been selected.