<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>The Official Fluid Blog &#187; drew</title>
	<atom:link href="http://www.fluid-blog.com/author/drew/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.fluid-blog.com</link>
	<description>A blog for Fluid employees and friends</description>
	<lastBuildDate>Thu, 05 Jan 2012 18:44:47 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Product Detail Pages (PDP) &#8211; Offering an Engaging Experience between the Customer and the Product</title>
		<link>http://www.fluid-blog.com/2009/06/08/product-detail-pages-pdp-offering-an-engaging-experience-between-the-customer-and-the-product/</link>
		<comments>http://www.fluid-blog.com/2009/06/08/product-detail-pages-pdp-offering-an-engaging-experience-between-the-customer-and-the-product/#comments</comments>
		<pubDate>Tue, 09 Jun 2009 00:11:47 +0000</pubDate>
		<dc:creator>drew</dc:creator>
				<category><![CDATA[E-Commerce]]></category>
		<category><![CDATA[Online Retail / Interactive Merchandising]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://www.fluid-blog.com/?p=472</guid>
		<description><![CDATA[ 
Several years ago, I had the &#8220;misfortune&#8221; of being introduced to my first digital SLR camera. I was immediately hooked and since then I&#8217;ve been suffering the same symptoms as all other camera hobbyists: a compulsive need to purchase (or drool over) expensive camera accessories and gear. So when I &#8220;need&#8221; more camera gear, [...]]]></description>
			<content:encoded><![CDATA[<p><!--[if gte mso 9]&gt;  Normal 0   false false false        MicrosoftInternetExplorer4  &lt;![endif]--><!--[if gte mso 9]&gt;   &lt;![endif]--><!--  /* Font Definitions */  @font-face 	{font-family:Verdana; 	panose-1:2 11 6 4 3 5 4 4 2 4; 	mso-font-charset:0; 	mso-generic-font-family:swiss; 	mso-font-pitch:variable; 	mso-font-signature:536871559 0 0 0 415 0;}  /* Style Definitions */  p.MsoNormal, li.MsoNormal, div.MsoNormal 	{mso-style-parent:""; 	margin:4.3pt; 	mso-pagination:none; 	mso-hyphenate:none; 	font-size:10.0pt; 	font-family:Verdana; 	mso-fareast-font-family:Verdana; 	mso-bidi-font-family:"Times New Roman"; 	mso-fareast-language:#00FF;} p.MsoBodyText, li.MsoBodyText, div.MsoBodyText 	{margin:0in; 	margin-bottom:.0001pt; 	mso-pagination:none; 	mso-hyphenate:none; 	font-size:10.0pt; 	font-family:Verdana; 	mso-fareast-font-family:Verdana; 	mso-bidi-font-family:"Times New Roman"; 	mso-fareast-language:#00FF;} a:link, span.MsoHyperlink 	{mso-style-parent:""; 	color:navy; 	text-decoration:underline; 	text-underline:single;} a:visited, span.MsoHyperlinkFollowed 	{color:purple; 	text-decoration:underline; 	text-underline:single;} @page Section1 	{size:8.5in 11.0in; 	margin:28.35pt 28.35pt 28.35pt 56.7pt; 	mso-header-margin:28.35pt; 	mso-footer-margin:28.35pt; 	mso-paper-source:0;} div.Section1 	{page:Section1; 	mso-footnote-position:beneath-text;} --><!--[if gte mso 10]&gt; &lt;!   /* Style Definitions */  table.MsoNormalTable 	{mso-style-name:"Table Normal"; 	mso-tstyle-rowband-size:0; 	mso-tstyle-colband-size:0; 	mso-style-noshow:yes; 	mso-style-parent:""; 	mso-padding-alt:0in 5.4pt 0in 5.4pt; 	mso-para-margin:0in; 	mso-para-margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:10.0pt; 	font-family:"Times New Roman"; 	mso-ansi-language:#0400; 	mso-fareast-language:#0400; 	mso-bidi-language:#0400;} --> <!--[endif]--></p>
<p class="MsoBodyText"><span>Several years ago, I had the &#8220;misfortune&#8221; of being introduced to my first digital SLR camera. I was immediately hooked and since then I&#8217;ve been suffering the same symptoms as all other camera hobbyists: a compulsive need to purchase (or drool over) expensive camera accessories and gear. So when I &#8220;need&#8221; more camera gear, I&#8217;ll go online to shop because, aside from the obvious convenience factor, I like the ability to bargain hunt and easily research products. But with so many online camera retailers out there, it&#8217;s getting pretty hard to differentiate between the sites. They all sell the same products, offer the same product information, in a similar layout. So when I do my research, I&#8217;m usually looking for two things &#8211; product price and customer product reviews. <span style="background: white none repeat scroll 0% 0%; color: black; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">These are the two main components that really help me determine whether the product is highly recommended at a price point I&#8217;m comfortable with &#8211; which ultimately affects my decision to buy. But are there other things that retailers can do to help differentiate themselves above the rest?<span id="more-472"></span></span></span></p>
<p>Recently, I went online shopping for a Canon 430EX II Speedlight flash, a nice addition to my Canon digital SLR camera. As I did my price and product research, I decided to take an in-depth look at various product detail pages (PDP) of online camera retailers to see what similarities and differences they had.</p>
<p>My initial search yielded some pretty dreadful results. Sites like www.17photo.com and www.fadfusion.com tried to cram as much information as possible into their PDPs hoping that something would connect with the customer.</p>
<div id="attachment_473" class="wp-caption alignnone" style="width: 154px"><a href="http://www.fluid-blog.com/wp-content/uploads/2009/06/17photo_crowded.jpg"><img class="size-medium wp-image-473" src="http://www.fluid-blog.com/wp-content/uploads/2009/06/17photo_crowded-300x242.jpg" alt="PDP - Crowded" width="144" height="116" /></a><p class="wp-caption-text">17Photo PDP</p></div>
<div id="attachment_477" class="wp-caption alignnone" style="width: 100px"><a href="http://www.fluid-blog.com/wp-content/uploads/2009/06/fadfusion_crowded1.jpg"><img class="size-thumbnail wp-image-477" src="http://www.fluid-blog.com/wp-content/uploads/2009/06/fadfusion_crowded1-150x150.jpg" alt="Fad Fusion PDP" width="90" height="90" /></a><p class="wp-caption-text">Fad Fusion PDP</p></div>
<p class="MsoBodyText"><img src="/Documents%20and%20Settings/ayan/Desktop/PDP/fadfusion_crowded.jpg" alt="" /></p>
<p class="MsoBodyText"><span>Other sites such as www.fotoconnection.com and www.us1camera.com simply didn&#8217;t offer enough product information. </span></p>
<div id="attachment_475" class="wp-caption alignnone" style="width: 100px"><a href="http://www.fluid-blog.com/wp-content/uploads/2009/06/us1photo1.jpg"><span><img class="size-thumbnail wp-image-475" src="http://www.fluid-blog.com/wp-content/uploads/2009/06/us1photo1-150x150.jpg" alt="PDP - Not Enough Info" width="90" height="90" /></span></a><p class="wp-caption-text">US1 Camera PDP</p></div>
<p class="MsoBodyText">
<p class="MsoBodyText"><span> Most of the other camera sites I visited used a typical PDP layout: product name, price, and image at top followed by a tabbed interface below detailing the overview, technical and product specs, and related accessories. I&#8217;m a very visual person so the biggest problem I had with this layout was the lack of integration between the product image and the product features. Instead they were deliberately segmented into separate areas of the page forcing me to scroll up and down the page to read everything. So when I saw a cool product feature listed like &#8220;Wide-angle pull down panel&#8221;, there was no visual reference to the product image for me to make that connection. Was this truly the best way for a user to engage with the product?</span></p>
<p>Another common PDP feature I noticed was the ability to enlarge the product image. A nice feature, in theory, especially if the initial product images are small. For most sites that offered this functionality, clicking on the &#8220;view larger&#8221; button produced a new window pop up containing the larger image. But with no reference to the product specs, it really didn&#8217;t provide me any new information. Surprisingly, I came across two sites, www.radioshack.com and <a href="http://www.adray.com/">www.adray.com</a>, whereupon clicking the “View Larger” button produced a pop up window containing the <em>same sized</em> product image. Talk about a waste of a click!</p>
<div id="attachment_478" class="wp-caption alignnone" style="width: 160px"><a href="http://www.fluid-blog.com/wp-content/uploads/2009/06/radioshack.jpg"><img class="size-thumbnail wp-image-478" src="http://www.fluid-blog.com/wp-content/uploads/2009/06/radioshack-150x150.jpg" alt="Radio Shack - Enlarge Image" width="150" height="150" /></a><p class="wp-caption-text">Radio Shack - Image Zoom</p></div>
<p>Surely there were retailers out there with better PDPs that provided a cohesive and engaging customer shopping experience. I finally stumbled onto a fantastic photo and video site called B&amp;H Photo Video (www.bhphotovideo.com). I searched for my Canon 430EX II speedlite and landed on a PDP page that, at first glance, looked very much like all the other PDPs I had previously visited (although not as crowded and easier to take in). Above the fold was the product image, product name, and price. Below the fold were tabs that covered accessories, features, specifications, included items, and customer reviews. I then noticed a link by the product image named &#8220;View Demo&#8221;. I clicked on it and a new window opened loading a fully <span> </span>interactive flash demo (no pun intended). Immediately I noticed that I had all the information I needed about my camera flash in one defined space. Each section was organized in stacked accordion panes making it very simple and intuitive to navigate. Not only did I have access to product description, features, and specs, but I could also click, drag, and rotate the product image so I could view in all angles. This was already more engaging compared to other sites where I only saw one predefined angle. I was instantly hooked.</p>
<p>Here is a breakdown of how the information was organized in the demo.<br />
<strong>360 Product View:<br />
</strong>360 View<br />
Rotation Angles<br />
Multi View</p>
<p><strong>Images:<br />
</strong>Side View<br />
Back View<br />
Lens Extended<br />
Front View<br />
Flash Turned<br />
Mounting Foot</p>
<p><strong>More Information:<br />
</strong>Description<br />
Features<br />
Specifications<br />
<!--[if !supportLineBreakNewLine]--><br />
<!--[endif]--></p>
<div id="attachment_480" class="wp-caption alignnone" style="width: 160px"><a href="http://www.fluid-blog.com/wp-content/uploads/2009/06/demo1.jpg"><img class="size-thumbnail wp-image-480" src="http://www.fluid-blog.com/wp-content/uploads/2009/06/demo1-150x150.jpg" alt="demo1" width="150" height="150" /></a><p class="wp-caption-text">Demo - 360 Product View</p></div>
<div id="attachment_481" class="wp-caption alignnone" style="width: 160px"><a href="http://www.fluid-blog.com/wp-content/uploads/2009/06/demo2.jpg"><img class="size-thumbnail wp-image-481" src="http://www.fluid-blog.com/wp-content/uploads/2009/06/demo2-150x150.jpg" alt="demo2" width="150" height="150" /></a><p class="wp-caption-text">Demo - Product Images</p></div>
<div id="attachment_479" class="wp-caption alignnone" style="width: 160px"><a href="http://www.fluid-blog.com/wp-content/uploads/2009/06/demo3.jpg"><span><img class="size-thumbnail wp-image-479" src="http://www.fluid-blog.com/wp-content/uploads/2009/06/demo3-150x150.jpg" alt="demo3" width="150" height="150" /></span></a><p class="wp-caption-text">Demo - Product Description</p></div>
<p class="MsoBodyText"><span><br />
The best feature of all was something called &#8220;Multi View&#8221;. Clicking on this immediately split the main screen into equal quadrants showcasing a different view of the product (front, mount, rotated, back). When I clicked on a view, the other 3 quadrants minimized in size as the selected view grew into focus. On top of that, animating red &#8220;hot spots&#8221; were featured on various locations of the product vying for my attention. For example, when I moved my cursor over the red hot spot by the mount, a hop up appeared saying &#8220;Easy Attaching and Detaching: One-touch, quick-lock mechanism for easy attaching/detaching flash from camera.&#8221; Not only had this demo managed to engage me with the product, it successfully did so by integrating the product views with the product features and specs. The product demo validated my product research efforts which in turn made me feel confident in my decision to buy. It also invoked a feeling of trust with the retailer, B&amp;H. I felt that this retailer was valuing my time spent online </span><span style="font-size: small;">by providing added value that was relevant and appealing</span><span>.</span>
</p>
<p class="MsoBodyText"><span> </span></p>
<div id="attachment_483" class="wp-caption alignnone" style="width: 160px"><a href="http://www.fluid-blog.com/wp-content/uploads/2009/06/demo4.jpg"><img class="size-thumbnail wp-image-483" src="http://www.fluid-blog.com/wp-content/uploads/2009/06/demo4-150x150.jpg" alt="demo4" width="150" height="150" /></a><p class="wp-caption-text">Demo - Multi View</p></div>
<div id="attachment_482" class="wp-caption alignnone" style="width: 160px"><a href="http://www.fluid-blog.com/wp-content/uploads/2009/06/demo5.jpg"><img class="size-thumbnail wp-image-482" src="http://www.fluid-blog.com/wp-content/uploads/2009/06/demo5-150x150.jpg" alt="demo5" width="150" height="150" /></a><p class="wp-caption-text">Demo - Multi View Hot Spot</p></div>
<p>Having a product demo available for such a feature-rich product like the Canon Speedlite makes sense. The product is offered at a high price point and that alone can be a big barrier for customers to overcome. But if retailers can find the right combination of visually engaging and pertinent material that will best connect the user with the product then it accomplishes several things:</p>
<p>1) Satisfies customers who are doing product research to better understand the product they&#8217;re interested in<br />
2) Gives customers the confidence and motivation in making that decision to buy, especially when the product has a high price point<br />
3) Offers added value that differentiates itself from a competitive marketplace<br />
4) Encourages customers to come back for repeat business</p>
<p>As any camera hobbyist can attest, there&#8217;s never enough gear you can buy; if camera retailers can balance their product offerings with engaging supporting material that inspires confidence and motivation to buy, they&#8217;ll have customers for life.</p>

<div class="sociable">
<div class="sociable_tagline">
<strong> </strong>
</div>
<ul>
	<li class="sociablefirst"><a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fwww.fluid-blog.com%2F2009%2F06%2F08%2Fproduct-detail-pages-pdp-offering-an-engaging-experience-between-the-customer-and-the-product%2F&amp;title=Product%20Detail%20Pages%20%28PDP%29%20-%20Offering%20an%20Engaging%20Experience%20between%20the%20Customer%20and%20the%20Product&amp;notes=%20%0D%0ASeveral%20years%20ago%2C%20I%20had%20the%20%22misfortune%22%20of%20being%20introduced%20to%20my%20first%20digital%20SLR%20camera.%20I%20was%20immediately%20hooked%20and%20since%20then%20I%27ve%20been%20suffering%20the%20same%20symptoms%20as%20all%20other%20camera%20hobbyists%3A%20a%20compulsive%20need%20to%20purchase%20%28or%20drool%20over" title="del.icio.us"><img src="http://www.fluid-blog.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.fluid-blog.com%2F2009%2F06%2F08%2Fproduct-detail-pages-pdp-offering-an-engaging-experience-between-the-customer-and-the-product%2F&amp;t=Product%20Detail%20Pages%20%28PDP%29%20-%20Offering%20an%20Engaging%20Experience%20between%20the%20Customer%20and%20the%20Product" title="Facebook"><img src="http://www.fluid-blog.com/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  target="_blank" href="mailto:?subject=Product%20Detail%20Pages%20%28PDP%29%20-%20Offering%20an%20Engaging%20Experience%20between%20the%20Customer%20and%20the%20Product&amp;body=http%3A%2F%2Fwww.fluid-blog.com%2F2009%2F06%2F08%2Fproduct-detail-pages-pdp-offering-an-engaging-experience-between-the-customer-and-the-product%2F" title="email"><img src="http://www.fluid-blog.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fwww.fluid-blog.com%2F2009%2F06%2F08%2Fproduct-detail-pages-pdp-offering-an-engaging-experience-between-the-customer-and-the-product%2F&amp;title=Product%20Detail%20Pages%20%28PDP%29%20-%20Offering%20an%20Engaging%20Experience%20between%20the%20Customer%20and%20the%20Product&amp;source=The+Official+Fluid+Blog+A+blog+for+Fluid+employees+and+friends&amp;summary=%20%0D%0ASeveral%20years%20ago%2C%20I%20had%20the%20%22misfortune%22%20of%20being%20introduced%20to%20my%20first%20digital%20SLR%20camera.%20I%20was%20immediately%20hooked%20and%20since%20then%20I%27ve%20been%20suffering%20the%20same%20symptoms%20as%20all%20other%20camera%20hobbyists%3A%20a%20compulsive%20need%20to%20purchase%20%28or%20drool%20over" title="LinkedIn"><img src="http://www.fluid-blog.com/wp-content/plugins/sociable/images/linkedin.png" title="LinkedIn" alt="LinkedIn" class="sociable-hovers" /></a></li>
	<li class="sociablelast"><a rel="nofollow"  target="_blank" href="http://twitter.com/home?status=Product%20Detail%20Pages%20%28PDP%29%20-%20Offering%20an%20Engaging%20Experience%20between%20the%20Customer%20and%20the%20Product%20-%20http%3A%2F%2Fwww.fluid-blog.com%2F2009%2F06%2F08%2Fproduct-detail-pages-pdp-offering-an-engaging-experience-between-the-customer-and-the-product%2F" title="Twitter"><img src="http://www.fluid-blog.com/wp-content/plugins/sociable/images/twitter.png" title="Twitter" alt="Twitter" class="sociable-hovers" /></a></li>
</ul>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.fluid-blog.com/2009/06/08/product-detail-pages-pdp-offering-an-engaging-experience-between-the-customer-and-the-product/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

