
Better product selection through JQuery
Easy-to-drop-in navigation to improve user experience and conversion in online stores.
Conversion - it seems - is a simple equation. A number of visitors (X) check out your products; a percentage (Y) find products they like; and - for a percentage of those (Z) - the price and trust and delivery is attractive enough that they buy.
X multiplied by Y multiplied by Z = conversions.
While it's possible to increase X through ad spend and marketing, or increase Z by slashing prices, it's that middle value that's often overlooked and - potentially - the cheapest and most effective improvement that you can make to your site. If users can't find products they like, they're never going to become buyers. And the improvements you make can work across everything you sell and for all of time.
The online shopping experience is - by and large - a pretty templated and standardised affair: browse products, click products, buy products. Most online store systems offer this out of the box and few people take time to question or change it. Which is the first great lost opportunity.
Take laptops or mobile phones as an example.
I probably have a pretty good idea of what I need (in terms of spec and features) but the only way that I can find out whether a product has these is to click through and read the spec lists. Then I start scrawling notes and models. Then I can shortlist.
Surely we can build something better and a little more user-centred?
What I really want is a way to interactively filter and browse. 'Show me android phones'. 'Now show only phones with a physical keyboard'. Ok... there's not too much choice there... also show me phones with screens big enough to comfortably type on...'
You get the idea.
I sculpt my requirements to quickly drill down to a shortlist that works. Then I'm a click away from purchasing. No researching, no scrawling. Think Amazon meets Minority Report.
Phonefinder (click to view) is a quick and dirty proof of principle of this.
It's a combination of JQuery and Quicksand for animation, together with some custom javascript for filtering.
In order to drop easily into existing sites, it uses tags to select products. These can either be added to products as a text field or generated automatically (using product attributes or taxonomies). The idea is that it should be possible to drop the filtering mechanism alongside your existing products and have it just work.
It's far from perfect.
- A lot of the checkboxes could be replaced with sliders to select ranges.
- The checkboxes could be automatically generated to ensure that the only options available are ones that exist in the product list.
- The product thumbnails could include front, side and rear views.
- Product information could be held in a pop-up panel so that users don't have to leave their search to check details.
- It could use a 'sort-by' option
But, it's a step in the right direction. And one that I'm itching to try on a live site.