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...
Single-Screen Checkout
Conversion Funnel Visitors Find Product Choose Product Checkout Buy Abandon Total Visits 12,620,248  6,115,084 728,944 655...
Finding Stuff: The Early Years
Finding Stuff: Adolescence
<ul><li>Too slow </li></ul><ul><li>Not enough control </li></ul>Faceted Navigation
AJAX to the Rescue!
The Experiment 1.0
<ul><li>Small and agile </li></ul><ul><li>Whiteboard sketching </li></ul><ul><li>Build and design as we go </li></ul><ul><...
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 <ul><li>If it looks like a drop-down and acts like a drop-down… </li></ul>
The Back Button Conundrum <ul><li>People expect the Back button to work </li></ul><ul><li>People expect Undo functionality...
Testing Another Winnowing Tool: MyRatePlan.com <ul><li>Users liked: </li></ul><ul><li>Ability to narrow down phones quickl...
Testing Another Winnowing Tool: Kayak.com <ul><li>Users liked: </li></ul><ul><li>Simple, clutter-free design </li></ul><ul...
The Experiment 2.0
Technology: How It All Started <ul><li>Easy to get started for .NET developers </li></ul><ul><li>Very little JavaScript de...
Architecture <ul><li>Endeca + ASP.Net </li></ul><ul><li>Sliders </li></ul><ul><li>Appear/Disappear effect </li></ul><ul><l...
Sliders <ul><li>Script.aculo.us offers different type of sliders: </li></ul><ul><ul><li>Vertical </li></ul></ul><ul><ul><l...
Sliders: An Example <ul><li>new Control.Slider(‘SliderPriceHandle',‘SliderPrice', </li></ul><ul><li>{ </li></ul><ul><li>sl...
Histograms <ul><li>Histograms are home made </li></ul><ul><li>Server side code </li></ul><ul><li>Recipe: </li></ul><ul><ul...
Applying Rich Interfaces Where They Matter Most Visitors Find Product Choose Product Checkout Buy Abandon Total Visits 12,...
What’s Next <ul><li>More iterations and user testing </li></ul><ul><li>Accessibility </li></ul><ul><li>Compare functionali...
Thanks! Riccardo La Rosa   [email_address] Steve Mulder [email_address]   wine.molecular.com
Upcoming SlideShare
Loading in...5
×

Making Web 2.0 Usable: Ajax Case Study

2,976

Published on

Rich Internet technologies such as Ajax change the way the Web works, bringing exciting new possibilities to Web interfaces. But how do we give users a richer, more powerful interface without sacrificing ease of use? A common example of this challenge is product selection. Web sites that help users select products, services or content often use a variety of tools so that users find exactly the right item for their needs. Come see how we applied Ajax to this common challenge in order to create a rich interface that makes product selection easier (and more fun). We'll discuss how users expect these new interfaces to work and what usability issues occur when testing these types of Web 2.0 sites.

Published in: Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,976
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
90
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Making Web 2.0 Usable: Ajax Case Study

  1. 1. Make AJAX Work for Your Site and Your Users A Case Study on Improving Product Selection Steve Mulder Riccardo La Rosa
  2. 3. 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
  3. 4. Single-Screen Checkout
  4. 5. 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
  5. 6. Finding Stuff: The Early Years
  6. 7. Finding Stuff: Adolescence
  7. 8. <ul><li>Too slow </li></ul><ul><li>Not enough control </li></ul>Faceted Navigation
  8. 9. AJAX to the Rescue!
  9. 10. The Experiment 1.0
  10. 11. <ul><li>Small and agile </li></ul><ul><li>Whiteboard sketching </li></ul><ul><li>Build and design as we go </li></ul><ul><li>Usability test </li></ul><ul><li>Evolve and grow </li></ul>Design and Development Process
  11. 12. Usability Testing
  12. 13. A/B Testing
  13. 14. A/B Testing
  14. 15. What Worked Well
  15. 16. Slowing It Down
  16. 17. First-Time vs. Regular Use
  17. 18. What We Wanted Users to Feel
  18. 19. What Users Actually Felt
  19. 20. Power Can Feel Like Complexity “ It feels like a site for wine experts.”
  20. 21. The Desire for Control
  21. 22. The Desire for the Familiar <ul><li>If it looks like a drop-down and acts like a drop-down… </li></ul>
  22. 23. The Back Button Conundrum <ul><li>People expect the Back button to work </li></ul><ul><li>People expect Undo functionality </li></ul><ul><ul><li>Most recent action, whatever that might be </li></ul></ul><ul><li>Leveraged Really Simple History framework </li></ul>
  23. 24. Testing Another Winnowing Tool: MyRatePlan.com <ul><li>Users liked: </li></ul><ul><li>Ability to narrow down phones quickly </li></ul><ul><li>Ability to see phone details on this screen </li></ul><ul><li>Usability issues: </li></ul><ul><li>Initial overwhelming complexity </li></ul><ul><li>Unexpected or unclear behavior </li></ul>
  24. 25. Testing Another Winnowing Tool: Kayak.com <ul><li>Users liked: </li></ul><ul><li>Simple, clutter-free design </li></ul><ul><li>Fast and responsive (animation helped) </li></ul><ul><li>Easy-to-use interface elements </li></ul>
  25. 26. The Experiment 2.0
  26. 27. Technology: How It All Started <ul><li>Easy to get started for .NET developers </li></ul><ul><li>Very little JavaScript development </li></ul><ul><li>Not enough control on UI effects </li></ul><ul><li>Poor documentation </li></ul><ul><li>APIs changed during different releases </li></ul>+ X <ul><li>Fully embrace JavaScript development </li></ul><ul><li>Great utilities </li></ul><ul><li>Great visual effects </li></ul><ul><li>Poor documentation </li></ul><ul><li>Excellent unit test examples </li></ul>
  27. 28. Architecture <ul><li>Endeca + ASP.Net </li></ul><ul><li>Sliders </li></ul><ul><li>Appear/Disappear effect </li></ul><ul><li>Histograms </li></ul><ul><li>Star rating </li></ul>
  28. 29. Sliders <ul><li>Script.aculo.us offers different type of sliders: </li></ul><ul><ul><li>Vertical </li></ul></ul><ul><ul><li>Horizontal </li></ul></ul><ul><ul><li>Predefined values </li></ul></ul><ul><ul><li>Multiple handles </li></ul></ul><ul><li>Easily customizable look and feel with styles and images </li></ul><ul><li>Easy to extend </li></ul>
  29. 30. Sliders: An Example <ul><li>new Control.Slider(‘SliderPriceHandle',‘SliderPrice', </li></ul><ul><li>{ </li></ul><ul><li>sliderValue:100, // this is the offset </li></ul><ul><li>axis: 'horizontal', </li></ul><ul><li>range:$R(0,100), </li></ul><ul><li>restricted:true, </li></ul><ul><li>onSlide:function(v) </li></ul><ul><li>{ </li></ul><ul><li>$('priceFilterValue').innerHTML='$'+(v)+' or less'; </li></ul><ul><li>// here we change opacity </li></ul><ul><li>}, </li></ul><ul><li>onChange:function(v){ </li></ul><ul><li>// here we perform blind up </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul>
  30. 31. Histograms <ul><li>Histograms are home made </li></ul><ul><li>Server side code </li></ul><ul><li>Recipe: </li></ul><ul><ul><li>Create hash of value/count pairs </li></ul></ul><ul><ul><ul><li>[($10, 5), ($11, 7), ….] </li></ul></ul></ul><ul><ul><li>Use the maximum value of count as the scale factor </li></ul></ul><ul><ul><li>Create images directly from your hash </li></ul></ul><ul><ul><ul><li>< img width =&quot;2&quot; height =&quot;<%=heightHistoBar%>&quot; src =&quot;Images/h2.gif&quot; /> </li></ul></ul></ul><ul><ul><li>Depending on your values, change the width of the images </li></ul></ul>
  31. 32. 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
  32. 33. What’s Next <ul><li>More iterations and user testing </li></ul><ul><li>Accessibility </li></ul><ul><li>Compare functionality </li></ul><ul><li>Infinite scrolling </li></ul><ul><li>Content mashups </li></ul><ul><li>Dynamic cross-selling </li></ul>
  33. 34. Thanks! Riccardo La Rosa [email_address] Steve Mulder [email_address] wine.molecular.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×