View
2.924
Download
0
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 3
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 4
Single-Screen Checkout
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 5
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 6
Finding Stuff: The Early Years
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 7
Finding Stuff: Adolescence
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 8
• Too slow• Not enough control
Faceted Navigation
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 9
AJAX to the Rescue!
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 10
The Experiment 1.0
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 11
• Small and agile• Whiteboard sketching• Build and design as we go• Usability test• Evolve and grow
Design and Development Process
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 12
Usability Testing
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 13
A/B Testing
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 14
A/B Testing
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 15
What Worked Well
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 16
Slowing It Down
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 17
First-Time vs. Regular Use
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 18
What We Wanted Users to Feel
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 19
What Users Actually Felt
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 20
Power Can Feel Like Complexity
“It feels like a site for wine experts.”
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 21
The Desire for Control
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 22
The Desire for the Familiar
If it looks like a drop-down and acts like a drop-down…
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 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 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 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 26
The Experiment 2.0
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 27
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 28
Architecture
• Endeca + ASP.Net
• Sliders
• Appear/Disappear effect
• Histograms
• Star rating
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 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 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 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 32
Applying Rich Interfaces Where They Matter Most
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 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 34
Thanks!
Riccardo La Rosa
rlarosa@molecular.com
Steve Muldersmulder@molecular.com
wine.molecular.com
Recommended