CommerceStyle.com

First things first.  Lets take a brief look at javascript libraries and how they can help you improve your user experience without a ton of development overhead.

There are quite a few javascript libraries out there today.  All are free and which one you use is pretty much up to you.  They all do just about the same thing.  For this article we're going to be using JQuery, but you could just as easy use MooTools or Prototype or any other javascript framework.

Javascript frameworks can do a ton of things.  If you're not familiar with them, think of it as a layer of your website that sits outside your development enviroment that handles all of your Ajax calls, animation and just about anything else that  you would use javascript for.  Now lets take a look at 5 tips/jquery scripts that will help you improve your e-commerce UI without costing you a cent.

1.  Load Content While Scrolling
Some products and pages can have a lot of content that goes along with them.  You don't want to leave this content out because not only is it good for the customer, it can also give you a decent SEO boost.  But at the same time, you don' want you're page to scroll for 10 feet. The solution to this problem is to only load enough content to fill the users screen and then when they scroll to the bottom of the page, load more content.

http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

2. Tabbed Content
With the different amount of information and features that e-commerce retailers are displaying for products, it can be hard for the customer to navigate the information properly and get the most out of it.  The best way to keep product information in a managable order is to display content in tabs.  Seperate items such as product reviews, videos, specs and even additional images into their own tabs and customers will be able to easliy find the buying information they need.

http://stilbuero.de/jquery/tabs_3/

3.  Featured Content Slider
One feature seen on most major e-commerce sites theese days are the featured content sliders, usually located on the home page of the website. One great thing about content sliders is that they are pretty easily available.

 http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

 4.  Modal Box
Lets face it.  The old school javascript alert pop-up windows are ugly and a crude way to alert customers on a website.  Enter the modal pop-up.  Modals started out life with the ever popular lightbox image viewers, but are now used as standard alerts on most website.  Its just a better looking and more user friendly way of messaging customers.

http://komunitasweb.com/2009/03/jquery-modal-box-round-up/

5.  Form Validation
I don't know anyone who likes seeing the results of a form that doesn't validate.  When you hit submit you just want it to work.  What's worse is if the form validation the website is using isn't intuitive enough to help you through the form.  Like most things with javascript, jQuery solves this.

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Thanks for reading.  We'll be posting lots more jQuery realated posts in the future so stay tuned.

Comments (42)