Make AJAX Work for Your Site and Your Users A Case Study on Improving Product Selection Steve Mulder Riccardo La Rosa

Conversion Funnel Visitors Find Product Choose Product Checkout Buy Abandon Total Visits 12,620,248 6,115,084 728,944 655,936 52% 88% 10% 5.2% Conversion Rate

Single-Screen Checkout

Conversion Funnel Visitors Find Product Choose Product Checkout Buy Abandon Total Visits 12,620,248 6,115,084 728,944 655,936 52% 88% 10% 5.2% Conversion Rate

Finding Stuff: The Early Years

Finding Stuff: Adolescence

Too slow Not enough control Faceted Navigation

Too slow

Not enough control

AJAX to the Rescue!

The Experiment 1.0

Small and agile Whiteboard sketching Build and design as we go Usability test Evolve and grow Design and Development Process

Small and agile

Whiteboard sketching

Build and design as we go

Usability test

Evolve and grow

Usability Testing

A/B Testing

A/B Testing

What Worked Well

Slowing It Down

First-Time vs. Regular Use

What We Wanted Users to Feel

What Users Actually Felt

Power Can Feel Like Complexity “ It feels like a site for wine experts.”

The Desire for Control

The Desire for the Familiar If it looks like a drop-down and acts like a drop-down…

If it looks like a drop-down and acts like a drop-down…

The Back Button Conundrum People expect the Back button to work People expect Undo functionality Most recent action, whatever that might be Leveraged Really Simple History framework

People expect the Back button to work

People expect Undo functionality

Most recent action, whatever that might be

Leveraged Really Simple History framework

Testing Another Winnowing Tool: MyRatePlan.com Users liked: Ability to narrow down phones quickly Ability to see phone details on this screen Usability issues: Initial overwhelming complexity Unexpected or unclear behavior

Users liked:

Ability to narrow down phones quickly

Ability to see phone details on this screen

Usability issues:

Initial overwhelming complexity

Unexpected or unclear behavior

Testing Another Winnowing Tool: Kayak.com Users liked: Simple, clutter-free design Fast and responsive (animation helped) Easy-to-use interface elements

Users liked:

Simple, clutter-free design

Fast and responsive (animation helped)

Easy-to-use interface elements

The Experiment 2.0

Technology: How It All Started Easy to get started for .NET developers Very little JavaScript development Not enough control on UI effects Poor documentation APIs changed during different releases + X Fully embrace JavaScript development Great utilities Great visual effects Poor documentation Excellent unit test examples

Easy to get started for .NET developers

Very little JavaScript development

Not enough control on UI effects

Poor documentation

APIs changed during different releases

Fully embrace JavaScript development

Great utilities

Great visual effects

Poor documentation

Excellent unit test examples

Architecture Endeca + ASP.Net Sliders Appear/Disappear effect Histograms Star rating

Endeca + ASP.Net

Sliders

Appear/Disappear effect

Histograms

Star rating

Sliders Script.aculo.us offers different type of sliders: Vertical Horizontal Predefined values Multiple handles Easily customizable look and feel with styles and images Easy to extend

Script.aculo.us offers different type of sliders:

Vertical

Horizontal

Predefined values

Multiple handles

Easily customizable look and feel with styles and images

Easy to extend

Sliders: An Example new Control.Slider(‘SliderPriceHandle',‘SliderPrice', { sliderValue:100, // this is the offset axis: 'horizontal', range:$R(0,100), restricted:true, onSlide:function(v) { $('priceFilterValue').innerHTML='$'+(v)+' or less'; // here we change opacity }, onChange:function(v){ // here we perform blind up } });

new Control.Slider(‘SliderPriceHandle',‘SliderPrice',

{

sliderValue:100, // this is the offset

axis: 'horizontal',

range:$R(0,100),

restricted:true,

onSlide:function(v)

{

$('priceFilterValue').innerHTML='$'+(v)+' or less';

// here we change opacity

},

onChange:function(v){

// here we perform blind up

}

});

Histograms Histograms are home made Server side code Recipe: Create hash of value/count pairs [($10, 5), ($11, 7), ….] Use the maximum value of count as the scale factor Create images directly from your hash < img width =&quot;2&quot; height =&quot;<%=heightHistoBar%>&quot; src =&quot;Images/h2.gif&quot; /> Depending on your values, change the width of the images

Histograms are home made

Server side code

Recipe:

Create hash of value/count pairs

[($10, 5), ($11, 7), ….]

Use the maximum value of count as the scale factor

Create images directly from your hash

< img width =&quot;2&quot; height =&quot;<%=heightHistoBar%>&quot; src =&quot;Images/h2.gif&quot; />

Depending on your values, change the width of the images

Applying Rich Interfaces Where They Matter Most Visitors Find Product Choose Product Checkout Buy Abandon Total Visits 12,620,248 6,115,084 728,944 655,936 52% 88% 10% 5.2% Conversion Rate

What’s Next More iterations and user testing Accessibility Compare functionality Infinite scrolling Content mashups Dynamic cross-selling

More iterations and user testing

Accessibility

Compare functionality

Infinite scrolling

Content mashups

Dynamic cross-selling

Thanks! Riccardo La Rosa [email_address] Steve Mulder [email_address] wine.molecular.com