Slide User Experience Home with jQuery UI

A while back we started working with a team from AutoTrader Mexico to create a solution which will offer the optimal user interface design and user experience for their service. The project is still in the works, but I wanted to share an aspect of it that was a challenge for both teams. It offers a great user experience, while still maintaining the ability for the code to degrade if an older version of a browser is being used, thus being fully compatible to their dynamic demographic.

Focusing primarily on the search feature, you can imagine there is a lot of information to enter when you are searching for a car. You enter in a lot of data ranges for your search criteria, whether it be the price, year, mileage, etc. After adding multiple cars, entering the information manually by typing or selecting them from a drop-down can get tedious.

So, as a solution, we decided to add range sliders for the data ranges. Our final decision was using jQuery’s UI Slider library which offers a great user experience. Since we knew that some of the demographic we were targeting might be using older browsers, or might have JavaScript turned off, we needed the slider implementation to be able to degrade for those users.

We wrote our code so that all the sliders on the site are unobtrusively inserted into the DOM where any given <select> ranges are present in the HTML with a predefined class assigned to them. It grabs the min and max ranges from the values of their associated slider range, and when either of the handles are updated, the associated range <select> value gets updated. A text node is modified within the slider element for ease in establishing range choices. We can exclude the JavaScript object from firing on older browsers that would not be supported and the user would have the standard <select> to work with.

The benefits of using the sliders to the user are:

• It takes less time to enter your information, preventing the user frpm getting frustrated.
• It allows for a very pleasant experience to the user. Sliders are so much more enjoyable to manipulate than <select> fields.
• They were by far the best choice, given the context of the information being requested.
• They look good.

And with the the intention of building it to degrade, if an older browser is being used or JavaScript is disabled the search form still remains intact, thus not losing anyone to a broken feature. Instead of just hitting some of their demographic, they can get them all. jQuery gave us to opportunity to offer AutoTrader MX’s user the best option for user experience and design.

Cheers!

Related articles by Zemanta

• JQuery: JavaScript Library of the Future (slideshare.net)
• Single-Use jQuery Plugins (viget.com)