Download - Making Web 2.0 Usable: Ajax Case Study

Make AJAX Work for Your Site and Your UsersA Case Study on Improving Product Selection

Steve MulderRiccardo La Rosa


Conversion Funnel

Visitors

Find Product

ChooseProduct

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

ChooseProduct

Checkout

Buy


12,620,248

6,115,084

728,944

655,936

52%

88%

10%



Finding Stuff: The Early Years


Finding Stuff: Adolescence


• Too slow• Not enough control

Faceted Navigation


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


Usability 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…


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


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


Testing Another Winnowing Tool: Kayak.com

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

• Fully embrace JavaScript development

• Great utilities • Great visual effects• Poor documentation• Excellent unit test

examples

+

X


Architecture

• 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


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 } });


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


Applying Rich Interfaces Where They Matter Most

Visitors

Find Product

ChooseProduct

Checkout

Buy


12,620,248

6,115,084

728,944

655,936

52%

88%

10%



What’s Next

• More iterations and user testing• Accessibility• Compare functionality• Infinite scrolling• Content mashups• Dynamic cross-selling


Thanks!

Riccardo La Rosa

[email protected]

Steve [email protected]

wine.molecular.com