Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making Web 2.0 Usable: Ajax Case Study

3,323 views

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
  • Be the first to comment

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

×