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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 2


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


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

Date post:	15-May-2015
Category:	Business
Upload:	molecular-inc
View:	2,923 times
Download:	0 times

Making Web 2.0 Usable: Ajax Case Study

Business