Our research and design experiments for e-commerce clients show time and again that visual detail and emotive motion engage customers at an emotionally profound level. Fortunately, technological advances and intuitive interfaces are making deeper engagement possible.

Detailed visuals can be worth ten thousand words

Surprisingly, not many e-commerce sites present visuals well. Although the capability to present inline images has been available since the first Mosaic browser in 1993, and visual overlays since early 2000, not many companies have spent the time and effort to present their products in the rich detail that customers want and expect when considering a purchase online.

Some product sites have clearly differentiated themselves with added levels of visual detail in the shopping experience.  One noteworthy example is Zappos, which does a good job of showing photographs from many different angles, and also provides many levels of zoom to look at minute details that otherwise are lost in images on the Web.

Another clothing Web site succeeds by using a technology called RealZoom, from A Far Site Better, that provides an extra level of visual detail through an intuitive, quick interface.  Betsey Johnson uses RealZoom, and customers notice. The perceived performance of these rich images is important, and sites need to optimize their entire interface with this in mind. The Zappos site does a number of things well in terms of enabling people to filter by size, show all products, and make selections that speed the shopping process.

Dynamic images, customizable for each customer, also create a compelling level of visual detail. Some auto manufacturer sites provide a sense of the final product by visualizing custom cars configured by customers to their tastes.  One of the most expressive sites in this category is Mini USA, which visually displays accessories as they are added and shows how the resulting car will appear.  There are ten million configurable combinations, but the options are seamless to the customer.

A site that combines visual richness with self-expression, and does it among a community of passionate enthusiasts, is a social networking site dedicated to styling clothing, called Polyvore, which lets members customize visual “sets” of fashion items from different designers, and share their sets with their online peers. This visual detail and expressiveness creates a number of strong, positive emotional responses.

We recently reviewed TheFind, which does a very good job of aggregating product information.  In one interface, it provides product details from sites all over the Web, including detailed views, as well as retailer sales and discounts, and what they call “UpFront” trust-building information that reassures shoppers of the credibility and trustworthiness of retailers participating in the program. The visual richness of this shopping aggregator helps it stand apart from other players.

Motion builds emotion through stories
With increased bandwidth we are able now to watch videos of products being presented, as evidenced by technology from companies like TalkMarket, a company acquired by Amazon last year.  Founded by ex-QVC executives, the service provides quick-to-start and easy-to-use product demonstrations that weave a story, when done well.  The addition of motion and stories to product visuals gives customers the opportunity to add layers of emotional meaning and to imagine its use and how it might feel in their lives, making it more compelling.

Similar to the difference between meeting someone in person and seeing someone’s picture, oftentimes seeing a product video gives a much better sense of a product’s “personality” than viewing a static product shot. When presented well in motion, as a story, a product can be much more compelling than its still image counterpart.

By using visual detail and emotive motion, along with the design recommendations that I discuss in The Design of Sites, Clean Product Details (F2) pattern, customers immerse themselves more emotionally in their shopping experience.

Ref: 2dnt9camgy