Making Web 2.0 Usable: Ajax Case Study

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

Slide 3: Conversion Funnel Abandon Total Visits Visitors 12,620,248 52% Find Product 6,115,084 Choose 88% Product 728,944 10% Checkout 655,936 Buy 5.2% Conversion Rate Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 3

Slide 5: Conversion Funnel Abandon Total Visits Visitors 12,620,248 52% Find Product 6,115,084 Choose 88% Product 728,944 10% Checkout 655,936 Buy 5.2% Conversion Rate Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 5

Slide 11: Design and Development Process • Small and agile • Whiteboard sketching • Build and design as we go • Usability test • Evolve and grow Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 11

Slide 23: 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 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 23

Slide 24: 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 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 24

Slide 25: Testing Another Winnowing Tool: Kayak.com Users liked: • Simple, clutter-free design • Fast and responsive (animation helped) • Easy-to-use interface elements Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 25

Slide 27: Technology: How It All Started X + • Easy to get started for • Fully embrace .NET developers JavaScript development • Very little JavaScript • Great utilities development • Great visual effects • Not enough control on UI effects • Poor documentation • Poor documentation • Excellent unit test • APIs changed during examples different releases Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 27

Slide 29: 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 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 29

Slide 30: 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 } }); Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 30

Slide 31: 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="2" height="<%=heightHistoBar%>" src="Images/h2.gif" /> • Depending on your values, change the width of the images Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 31

Slide 32: Applying Rich Interfaces Where They Matter Most Abandon Total Visits Visitors 12,620,248 52% Find Product 6,115,084 Choose 88% Product 728,944 10% Checkout 655,936 Buy 5.2% Conversion Rate Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 32

Slide 33: What’ s Next • More iterations and user testing • Accessibility • Compare functionality • Infinite scrolling • Content mashups • Dynamic cross-selling Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 33

Slideshare.net (beta)