Bag on Timbuk2

The importance of displaying products in eCommerce can’t be emphasized enough, yet sadly, it’s one of the most overlooked aspects of online visual merchandising.

Customers online are separated from the one thing that the brick-and-mortar customer takes advantage of each time she walks into a store – the ability to pick the product up, feel it, open it, snap its snaps and button its buttons. How does it look? What kind of quality is it? How much functionality does it have? How will it look on me? Is it worth the money?

For many buyers and managers, the thought process of how to keep selling the product once it’s placed into inventory stops at the creation of the item #. The same goes even doubly so for products on the web. But we need to be doubly vigilant about how a product is visually represented online for the very reason a customer is removed from being able to make a physical assessment in a store. For some reason, how products look on the web is taken even less seriously than how they would on a shelf. As more and more customers do their shopping online, and the cost of renting in commercial buildings skyrockets, retail companies need to pay attention to how their products look online, and to ensure that all the visual information needed is there to help the customer make a confident, informed decision.

If you are selling a product that doesn’t rely on the emotions or senses as much as just plain necessity, maybe this doesn’t pertain as much to you. But if you are selling apparel, home goods, jewelry or other lifestyle items, you should seriously consider how your products look online. Would you pay $739 for this blurry, moldy looking bag? I know this brand. They make gorgeous bags. You wouldn’t know it from this terrible picture.

Would you pay $739 for this?

The nicer your product is, the more you invest in making sure it looks impressive. What would you, as a customer, want to see?

Here’s the basics for better online product presentation:

1. Hire a good photographer with a professional camera with access to a good studio with proper lighting. You little point-and-shoot won’t cut it here. Make sure your photographer understands product photography and how to fill a frame. Product photography should be big, informative and clear.
2. Hire a designer proficient in Photoshop retouching with knowledge of web graphic optimization. Yes, this is what I do for a living, and I might be biased, but I can guarantee you that a solid Photoshop artist can drastically change the way your products look online, and, if consistent, your entire website. That designer should have expertise in color and tonal corrections, removing backgrounds, creating shadows or reflections, removing flaws, changing colors realistically without destroying textures or shapes, and sharpening images for clarity. They must understand optimizing images for the web at many different sizes. They also must develop a scalable content management system that allows them to keep the images organized.
3. I have a solid merchandising and retail background, but if your designer does not, you need to guide him or her, or make sure you have a merchandising department who can develop standards for how your products will be shown. For instance, a tote bag for my company will have a front shot, back shot, side shot if needed, open shot, detail shots of special features, and sometimes a model shot. Zappos does an excellent job at this. How they merchandise shoes with multiple views indicates they understand how online customers shop. The goal is to help the customer “pick-up” the product and look at it from all angles, as if they were standing in a store.

Bag on Zappos

4. Invest in Zoom software (Adobe Scene 7) or hire a front-end developer who knows how to use jQuery or Javascript to get you some whiz-bang rollovers and lightbox effects for multiple views of your product. Small thumbnails are fine, but what customers want are large images where they can see every detail. So make sure your thumbnails are linked to larger images, and that those large images are high quality. If you can’t afford the Zoom or rollovers, have a section of your product page or link to another page that shows more views of the product.

Product presentation is often skimped on because it doesn’t show an immediate cost benefit like email campaigns, special offers, or home page banners. But think how you shop. Perception is everything. If your products look fantastic online, customers will believe they are. Great product presentation is at its very core good customer service and excellent salesmanship.

Timbukt2's Build Your Own Bag

I love cool new ways to show product online. I can play with this thing for hours, but I gotta work! Timbuk2 clearly has one of the most user-friendly and fun ways to design your own Timbukt2 bag. Go to their website and try it out!

A screenshot of a portion of the Gucci.com handbag page.

Web designers are always supposed to be mindful of viewers’ monitors widths. A lot of us have very large monitors to work on, and it can be too easy to make a website that goes off the screen of another smaller monitor. Nobody wants to scroll horizontally!

The site developers and designers of Gucci.com have decided to go wide anyway with a very usable and sleek design that is like strolling down a 20′ foot line of high-end shelving in a real store, but it works well for any size monitor. I refer to their handbags page as I work with luxury bags myself, and like to see how other companies are doing it.

The Gucci handbags page opens up to show a nav on the left that allows you to narrow your search according to features, and then to the right of that, columns containing grids of up to six bags each. On my visit, you could horizontally scroll through about 10 columns. Next to each column is a small arrow which can allow the viewer to scroll easily through the columns, like turning pages in a catalog. No need to scroll!

Click any of the bags and the column expands. The bag comes out of it’s grid cell like someone is actually taking it off the shelf, then is showcased in an information pod at the right. This is where the copy is, and the “add to shopping bag” button.

This is how nice the zoom feature works for Gucci.com

What I really liked in addition to the great site design was the quality of the photography and the nice zoom feature. A viewer just clicks on the thumbnail and the zoom brings the viewer face to face with killer detail and texture. Here is where a great retoucher (like me!) can come in handy.

This is an inventive and intuitive way to show high-end bags online. I really feel like I’m in a beautiful store, and the way the bags are presented emulates as much as a web store can how it feels to pick up a product and ogle the details.

My only complaint: No alternative views or look-in shots of the bags. I want to see how much I can cram in it. Are there any pockets? What’s the back look like? What does it look like on a person? What other cool features would I need to see if I picked this up in a store? If your company isn’t brand-famous like Gucci, it would be wise to show multiple shots of all views.

If you can’t afford a massive site design overhaul like this, investing in quality photography, professional retouching and showing multiple views will go a longer way than most (because most aren’t doing it! Have you noticed?). Do you know anyone who’ll drop even just $200 on a blurry, muddy looking .jpg? Could be the nicest bag in the world. How would anyone know it?

One man's anguished cry for better usability

This post from Andrew Wilkinson at MetaLab would be really, really funny if it weren’t so true.

Now, Zappos ain’t gonna lose any love from me because I adore their selection and famous customer service. But what IS customer service, anyway? Awesome shipping policies? Yes. Crazy product selection? Yep. Quick and knowledgeable help via phone or email? Hells yeah. Zappos has all that. It’s going far and beyond what most companies are doing these days. Zappos should also get some credit for the way it displays its products on the main product pages. Multiple views of the product from all angles and a nifty color swatching feature help the customer visually pick up and handle the merchandise.

But the point is this: Usability IS customer service. Whether your customer has to shop dirty aisles and trip over floorstacks, or look at bleary jpgs and crappy navigational menus, it’s the same thing. Customers can “walk” into your webstore 24/7. Therefore, you should put as much effort into making the shopping experience for your online customers as intuitive and easy as you would for your earthbound store. A pleasant and groan-free shopping experience means more sales.

I am no web usability expert (yet). But I have enough years working retail floors, designing retail merchandising plans, conducting resets and remodels that I understand it instinctively. I also understand customer service. The more I work in eCommerce, the more I understand that what applies to real stores should apply to online stores as well. As more and more consumers buy online, it would behoove us to remember what it feels like to be a customer.