./with Imagination

Yahoo! Store gets rich interface with YUI

Monday, October 23rd, 2006

As another case of Yahoo! eating it’s own dog food, the Yahoo! Merchant Solutions team (not to be confused with Y! Shopping) has put together two new setup wizards to help design your store and add items into your product database.

As a UI Engineer on the project I opted to make the Yahoo! User Interface utilities part of the toolkit we would be sporting to aid development and focus on product features rather than browser bugs and limitations.

My specific area of development was channeled into the Design Wizard which allows a merchant to choose between various custom designed templates or pick a generic design with modified colors and/or layouts. My utilities of choice were heavily influenced by the tasks that needed to get done, and with that said, here is a brief overview of how I included each one into our application.

DOM Collection

I used the DOM Collection util to essentially manage styles in the DOM by getting and setting the various colors of the template when choosing a particular color palette (theme).

What this basically means is that you can go from choosing one layout such as the following:

To something else that might appeal to another:

Event Manager

The second (and perhaps obvious) utility of choice is the Event manager which almost always seems to go hand-in-hand with the DOM utility. This made for simple event attachment by allowing me to batch events to several elements at once:

Batching Events to an HTMLElement Collection

Event.on(
    Dom.get('color-list').getElementsByTagName('li'),
    'click',
    this.swapColors
);
Event.on(
    Dom.get('layout-list').getElementsByTagName('li'),
    'click',
    this.swapLayout
);

There are of course other hidden gems in the event utility that aren’t so obvious such as its ability of cleaning up after yourself when you leave the page to avoid memory leaks…. which essentially means that any events registered through the utility will be cleaned up automatically by the utility (with the exception of anonymous functions I believe).

Animation

Let me be the 1,000th person to say this; Not all animation is tasteful animation. This is perhaps why we went through several iterations of what constitutes a helpful animation. Often times when modifying the DOM when a user least expects to see a change, that may very well be the best time to add a bit of animation or a doohicky of some sort to let the user know that something is happening. Yes, it is slowing down the process, but with good intentions. Although some may argue that anytime you’re purposely slowing down the process, you’re burdening the user experience. In this particular case I believe it helps usability and gives a clearer understanding to the user of what’s happening on a level that is more beneficial than harmful.

As you can see in the following screen we’ve added a carousel of custom designed templates using the Animation utility that will move from side to side as you paginate through the gallery. Just an FYI: this was indeed the same carousel that inspired Bill Scott to roll out his YUI Carousel.

Then upon clicking any given template from the gallery chooser, your preview data is then fetched and loaded into the document… (segue to Connection Manager).

Ajax!!!

Or as we like to call it, the Connection Manager.

This made writing an Ajax application 1,000 times easier than I would have ever wanted to invest time into. Albeit the few differences among our A-grade list of browsers and how they have completely different API’s for dealing with behind the scene requests (xmlHttpRequest), the intelligence behind the Connection Manager made it the best Ajax API I’ve ever worked with. Perhaps my favorite convenient method is Connect.setForm(formName) which essentially allows you to set up your name/value pairs and send them with the connection without having to concat some string together.

My second favorite feature of the Connection Manager is that you can specify file uploads simply by passing in a flag (true) to the setForm method as follows:

File Uploads with Connect

Connect.setForm(
    'uploader',
    true
);
var c = Connect.asyncRequest(
    'POST',
    uri,
    {
        success : function() {  },
        failure : function() {  },
        timeout : 5
    }
);

Does this come with Web Standards?

I would say with our pragmatic approach toward achieving a semantic platform for our merchants, we’ve done a pretty damn good job. Having gone through several iterations of design specifications and the needs of a merchant and their customers, we ultimately came up with a solid html structure that would support several layouts and themes without hindering what the real-world would call a waste of time. After all, why would merchants and buyers EVER care about semantic markup and “Web Standards.” Half the time I could care less as I completely agree with Jeff Crofts second point on five things he’s doing to become a better developer by “getting over web standards.” It’s sometimes a shame when tools and technology take precedence over a good user-experience. However in this case; I think we’ve nailed both.

Other Press

Feel free to check out other postings that have featured our recently launched wizards.

• Insights Forum Flash walk-through
• The Y! Store Blog
• Y! Help Site screenshots