Adobe Scene7: Delivering Immersive Dynamic Media White paper

Delivering immersive dynamic media experiences across your siteUser-experience (UX) best practices for site design

The Internet today is full of different images, videos, layout designs, search attributes, and robust media viewing options. Website experiences can draw customers in or drive them away, but it can be difficult to determine which elements and features will engage visitors the most. Furthermore, constant site redesigns can be expensive and confusing for users to navigate. This guide can help you optimize product pages with enhanced media implementations and deliver truly immersive online experiences with site-wide implementations of relevant, dynamic visual-design and motion elements. These elements can help you serve your visitors’ needs and preferences and strengthen customer relationships from landing page to checkout.

This best-practices guide is based on work with numerous desktop and mobile viewer implementations, including a recent implementation study of Adobe® Scene7® conducted with several online retailers. This guide focuses on several aspects of site-wide, dynamic media implementations for organizations to consider before designing or redesigning a site, including:

• Tailored homepages

• Optimized search pages

• On-site video

• Dynamic mobile delivery

There’s no place like home: tailoring dynamic homepage banners to segmented audiences of one

For most online sites, the sales funnel begins on the homepage. Homepages set the tone for the entire visitor experience and can offer key conversion opportunities when optimized with relevant content for unique visitors through continuous segmentation, targeting, and automated personalization.

Homepages that offer relevant, dynamic content engage visitors the most. Cultivating strong visitor engagement on homepages requires an understanding of what customers want and then delivering on those expectations. This can be done through behavioral data analysis and testing and by delivering relevant, dynamic experiences as efficiently as possible.

The first step toward an optimized, immersive product experience is to segment traffic into new and repeat visitors and offer each segment tailored banner content that is designed to pique interest and encourage engagement right away. Typically, new visitors respond well to featured top sellers, new arrivals, and time-limited promotional announcements, whereas returning prospects convert at higher rates when presented with targeted content that takes into account past purchases or browsing history.

Table of contents1: There’s no place

like home: tailoring dynamic homepage banners to segmented audiences of one

2: In search of relevance: optimizing the search page

3: The power of suggestion: merchandising product and category pages

3: Delivering the goods: perfecting product pages

4: Engagement in motion: delivering on-site video site wide

5: Accessibility on the go: serving dynamic mobile experiences

6: About Adobe Scene7

New customer offer

2Adobe Scene7: Delivering Immersive Dynamic Media White paper

For example, an athletic apparel and footwear site offers new customers a free shipping promotion that opens in a full-page overlay when the page loads, while repeat visitors see a targeted homepage banner that includes free shipping and specifies the visitor’s gender and offers a link to a gender-specific product section.

Repeat visitor offer

The more that banners are targeted toward specific customers, the more personalized and engaging the experience. The banner on the left highlights how this apparel company targets returning female shoppers residing in a particular geographical location who have previously browsed Gucchi-brand clothing and accessories.

In search of relevance: optimizing the search pageEnhanced search functions that are customizable and interactive have the power to create engaging experiences that increase conversion. Shoppers’ needs and motivations may differ with each site visit; however, when potential customers use a site’s search functionality, they are already conveying some level of interest, intent to purchase, and indication of what they are looking for. Online visitors must be offered relevant choices and efficient browsing features when searching for specific products or product categories.

Featuring top-selling products that most visitors are likely to look for is a great first step toward optimizing product searches, but offering relevant, engaging, visitor-selected filtering options and pairing complementary products creates dynamic shopping experiences that more closely deliver the enjoyment of brick-and-mortar store visits.

Just as with tangible store locations, online stores must design their product placements with best-practice merchandising in mind. Offering six to 10 well-displayed results above the fold, with the option to increase the amount of product results shown based on the visitor’s individual preferences, presents enough product choices to create an engaging online experience without overwhelming the visitor with too many options. Enhanced filtering choices are also critical in helping a prospect move toward purchase. A shopper must be able to easily narrow product selections by size, color, style, and brand.

A German footwear retailer, Mirapodo, offers its customers enriched search options beyond size and price-point selections, including color, fabric, shoe shape, and style filters with rollover-driven front and side rotational views. Delivering search pages with dynamic browsing options like alternative views creates a more efficient customer shopping experience. With more than 11,000 shoes to choose from, Mirapodo helps its customers make the right purchase decisions by automating content, sizing, and zoom functions that manages its vast collection of product images. Using a single high-resolution product image, the retailer dynamically sizes each one for many uses across its site, from thumbnails in search results, to larger images on product pages, to full-screen interactive zoom views.

Self-select product display and filtering options enhance online engagement.

3Adobe Scene7: Delivering Immersive Dynamic Media White paper

The power of suggestion: merchandising product and category pagesSuggesting complementary products is also a powerful conversion tool. Similar to in-store shopping displays, staged room collections and accessorized seasonal outfits help engage online customers and increase average order value (AOV). Featuring multiple product displays also helps enhance the customer experience. In the home and office examples to the right, showing individual furniture items paired with complementary accent pieces enables the reseller to display several additional complementary and alternative items that may interest a visitor and increase AOV.

The same concept works for apparel retailers. Dressing models in multiple apparel pieces and displaying complementary and additional related items in a recommended vertical product runner may also interest visitors. Showcasing complete outfits, but offering each piece as a separate, equally displayed item, complete with an “add to cart” button next to that item, can also drive additional sales.

Finally, displaying additional relevant products below a featured product is an effective way to increase customer engagement and AOV. The women’s retail apparel examples to the left showcase outfits, individual pieces, and complementary accessories that other customers also viewed.

Delivering the goods: perfecting product pagesProduct sales drive business growth, yet many online product pages are not optimized for conversion. In fact, as stated in the Adobe Online Retail Conversion Guide, only 3% of online visitors convert from browsing to buying, on average. There is a lot of room for online storefronts to improve conversion and AOV by implementing dynamic UX on their product pages. An optimized product page frequently translates into a good product fit and can lead to a purchase for an online customer.

Online visitors are more likely to purchase when offered relevant, engaging product page selections that are reminiscent of in-person shopping experiences. Visitors like to “try on” products of interest through the use of efficient dynamic selection functions like multiple thumbnail and swatch swaps and clearly expressed navigation and zoom tools. Best-practice dynamic product page attributes include large (preferably full-screen) product image sizes, immediate access to embedded zoom functions, click-and-drag panning functions, and hover thumbnail and color swatches, all of which can be reset by the visitor.

Bigger is better When it comes to product viewing, bigger is better. Products shown in a full-screen viewer provide the most immersive product experiences because the modal or pop-up viewers in many UX implementations do not present enough customer benefits to support the additional development investment or visitor use. Large format viewers are best launched with clear, explicitly labeled controls that combine language and visual conventions to indicate functionality. Images should not be opened directly in new browser windows or overlays that lack context.

Showcase displays and product pairings drive increased AOV.

4Adobe Scene7: Delivering Immersive Dynamic Media White paper

Zoom and pan functions should also be clearly expressed and embedded, offering immediate access to view products of interest more closely without needing to open a new window or overlay. When clicking to zoom, the zoom function should be indicated to the user with a persistent or transient icon or label that fades within seconds of initiation, while panning works best with click-and-drag functionality.

Thumbnail, color, and alternative view swatches engage online customers. When a customer hovers on a thumbnail or swatch, the image color or style should automatically swap out the main image with the new image, as well as indicate which image is selected. The most engaging swatches are pure-color blocks, not product shots. However, if product shots are used for swatches, they work best when cropped tightly with full bleed, focusing on the color and texture rather than the whole product form.

Throughout all pages, a visitor should be able to easily navigate using keyboard shortcuts. The “Esc” key should close modal windows and overlays, arrow keys should enable movement through image sets, and plus (+) and minus (-) keys should allow zooming in and out.

Progress loaders are also instrumental in reducing page abandon rates. If a loading image or swatch feature set requires time to load, clearly communicating load completion progress, rather than using a generic loading animation, can help to demonstrate progress to the user. Providing visitors with accurate wait times is a good UX rule of thumb because it helps build trust in the interface and encourages less fall-off.

Engagement in motion: delivering on-site video site wideAccording to Nielsen in its August 2010 global consumer report, How People Watch, approximately 70% of all online users watch video regularly. Site-wide video implementation is an increasingly important tool in the online commerce arsenal. Product demos and entertaining user-generated videos elevate an online shopping experience to new levels of engagements and conversion.

Videos also extend product and brand reach through social networking channels and search engines. Product videos should be highlighted in search results. Jupiter Research states in its Video and Image Optimization report that a page with video is 50 times more likely to appear in the first Google search engine results page.

The best videos are succinct yet informative. While many shoppers enjoy video, Visible Measures reports in Benchmarking Viewer Abandonment in Online Video that 20% of viewers drop off after 10 seconds of video and 44% drop off after 60 seconds of video. Therefore, the ideal video length for most products is less than 30 seconds. Think of this timeframe like a traditional 30-second advertising spot: Focus on the product’s most compelling benefits by showcasing its best features. More complex products may require longer video lengths, which should be segmented using chapter navigation controls.

Clearly communicated video-player options increase online engagement.

5Adobe Scene7: Delivering Immersive Dynamic Media White paper

Video players must be optimized through clear calls to action that indicate “play,” “click to view,” and “click to play” buttons to communicate to a visitor that a video exists for that product or narrative feature. Additionally, as with product image viewers, the larger the size of the video player, the more positive the user experience. Larger video players are associated with increased view-through rates, indicating better engagement.

The best product videos to display during a first-time video implementation on a site are videos of flagship and high-margin products. As engagement increases site wide and the business expands, a site’s visitors can be introduced to additional product demonstrations and features through videos. Some products, like vehicles, succeed with informative videos displayed in a distinct content section that is prominently featured on the site. This section should include videos, photos, and articles. Large video libraries are best consolidated into a central video gallery or TV microsite.

Renault, a leading car manufacturer in the United Kingdom, integrates embedded video in its media gallery to offer informative and entertaining behind-the-scenes footage to help its customers engage with its products prior to visiting a dealership. In addition to stylish test-drive videos that highlight a model’s specific features, Renault also offers interviews with car designers and engineers, racing features that showcase Renault-brand racing cars, sustainable design shorts, and documentary-style clips that provide a look inside its many global branches.

Accessibility on the go: serving dynamic mobile experiencesDifferent devices deserve different experiences, and today’s consumers expect equally optimized visits across desktop and mobile devices. Luth Research states in its report Supply & Demand of the Mobile Web for Retail that delivering mobile-optimized experiences can lift consumer engagement by 85%, with slightly more than half of consumers reporting that they are more likely to purchase from retailers that offer mobile-optimized websites.

With increasing consumer demand for enhanced mobile experiences, brands must offer engaging and dynamic mobile UX design that meshes seamlessly with their optimized desktop experiences to provide a consistent UX across all devices and screens. As sites add mobile-optimized implementations, there are several best-practice attributes to consider.

First, the tablet and smartphone UX needs to focus on touch-driven controls as the primary visitor interaction, rather than mouse clicks and keyboard controls. According to the August 2010 Adobe Scene7 Mobile Commerce Survey: Are You Dialed In?, the difference in functionality shifts the UX focus to embedded, large-viewer interactive zoom and pan, 360-degree spin, and enhanced video functionalities. Second, mobile sites must be optimized for both smartphones and tablets. Currently, those who shop on tablets convert at much higher rates than those on smartphones, but making both site versions available is necessary for site-wide optimization.

Enhanced touch-driven controls, including zooming, panning, and 360-degree spin, create engaging mobile experiences.

6

Adobe, the Adobe logo, and Scene7 are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners.

© 2011 Adobe Systems Incorporated. All rights reserved. Printed in the USA.

For more informationwww.scene7.com

Scene7 enables visitors to access videos wherever they are and on any device

The first step in implementing dynamic media experiences on mobile devices is to develop a mobile-optimized site and then start integrating dynamic content to engage users and drive them to online properties.

Montrail, a footwear brand, implemented a mobile-optimized version of its site that serves both visitor segments. Depending on which type of device is used to access the site, pages resize dynamically and feature enhanced visual merchandizing attributes that impact online engagement positively, including full-screen and interactive zoom functions.

Putting it all together

Online visitors seek personalized and efficient experiences that cater to individual preferences. The primary goal of site-wide dynamic media implementation is to enhance the visitor experience and help companies achieve full revenue potential from their online channels. To optimize an online site, prospects and customers must be offered a variety of relevant, efficient, and dynamic media options that elevate the online shopping visit to an enjoyable, easy experience.

The site-wide dynamic media UX implementation best practices outlined in this report were based on Scene7 desktop and mobile viewer implementations across several online retailers. However, all recommendations should be validated with thorough user testing of each unique online property to identify and optimize segmented conversion levers that are unique to specific products, brands, and visitor segments.

About Adobe Scene7The Adobe Scene7 cross-media platform is the industry-leading solution for delivering dynamic, optimized content to desktop and mobile channels. With Adobe Scene7, businesses can improve online engagement by attracting and guiding prospects to their products, and converting these visitors into loyal customers. For more information, visit www.scene7.com.