12 innovative features to make your product pages come alive!!!

Being able to bring products to life on a two-dimensional screen has been a difficult issue for ecommerce UX people. How do you translate the physical interaction between a person and a product they can fondle in a shop to the online world? (Yes, I’m no longer allowed in Tesco anymore).

Buying clothes online always felt like a risky venture. It’s only thanks to an overly generous returns policy that some online retailers have maintained trust between them and their customers. What about bigger, more expensive stuff? Have you ever bought an oven online without seeing it in the real world? How about a car? A shed? A pony?

Don’t be ridiculous, you wouldn’t buy any of these things without first ruining your weekend traipsing around a retail-park/car-showroom/place-where-ponies-live looking at endless variations of the same model.

But look, here’s the thing. People don’t want to waste their time joylessly ambling around shops, with all the disappointments, frustrations and queuing that shopping in the real world brings. The internet is much nicer, quieter and quicker.

However the internet still has to catch up with the real-life experience of endlessly pulling open a cupboard door in IKEA and saying, “hmm, that’s a smooth action, but I don’t like the clunk.”

The following examples bring potentially difficult to describe, expensive to buy or overly feature-packed products to life beyond the standard text-based description or paginated product shots.

CAVEAT CORNER: we’re not saying these are in anyway suitable for your own product pages, your audience will have different needs and expectations. These are more for your own inspiration; to help you think about how you can bring your own product pages to life.

Pop Chart Lab

The ‘infographics for your own home’ retailer has a simple solution to show off its ‘scratch and reveal’ 100 novels you must read checklist poster in a simple way… GIFS! Yes, gifs.

Hope you like gifs btw. This round-up is lousy with them.

Cards Against Humanity

Whether you think it’s brilliant and hilarious, or an easy way to get a cheap laugh, Cards Against Humanity has an elegant way to visualise how to play the game in the header of its homepage. Ha ha ha, Vietnam flashbacks!

Apple store

If you’d like to learn more about the features of the new iPhone 7, you could watch the 119 minute keynote featured on the Apple store. OR if you’ve already wasted your life enough this week and just want to blindly throw some money their way, you could jump straight to the customisation page. Here you can catch a glimpse of how the front will look when hovering over your preferred colour. Which you’ll obscure with a custom-made, sea-shell encrusted case anyway.

Bellroy

The wallet company that exclusively generates all of its awareness from web design round-ups like these, helpfully visualises exactly what you can fit in the wallet down to the last coin and expired loyalty card.

Also for bonus points, you can click on any of the available colour options and EVERY SINGLE image view will change to that colour. With just a little bit of extra photography work, you can cater to any view your visitor may want of their desired configuration. What a time to be alive.

Schuh

Schuh work their boots off trying to translate the real-life shoe buying experience to the online world. Product pages are festooned with images, customer reviews, sizing comparisons and live-chat. My favourite is the 360 degree spin, as featured below.

Next they just need to send a load of teenagers round to your home to occupy all the seats so you can’t sit down anywhere to try them on.

Palace

Sure, most ecommerce stores have a hover-zoom function, but this one zooms right into the very fibres of the top. You’ll come to Palace for the laughs, but stay for the quality stitching.

Piccadilly Records

Although this may seem like a no-brainer, few online record stores do it. Instant playback of featured tracks on the webpage itself. Sure you can fire up your preferred music streaming provider and research that way, but that’s an extra few steps and if the record is obscure, there’s no guarantee you’ll be able to hear it any other way. Plus it means you no longer have to brave asking the record store clerk to have a listen on the shop decks and embarrass yourself because you don’t know the right speed to play it on.

Hotel Chocolat

Hotel Chocolat takes you on a deep dive into its chocolate boxes (not literally)…

Each individual chocolate is visualised below the box…

And each chocolate has a ‘quick view’ that lets you explore the flavours and ingredients in greater detail.

AO.com

Large white goods – are you really going to buy big expensive items without first seeing them in a showroom? Well, judging by the success of AO.com – Yes. Yes they will. But success doesn’t come easy, AO has piled a ton of thought into how to replicate the showroom in your front room. Mainly through using loads of video explainers and walkthroughs..

Look it’s Jamie Oliver!

Although the above is clearly a branded video, AO also offer plenty of their own independent guidance. Here’s how to cook the perfect chicken. Step 1: buy a laminator!?

Adidas

Simple one this: user generated content on product pages. Trainers suspended in negative space may be the norm, but what do those same trainers look like in the real world?*

Brickfielder

This may be a bit too technical for the average product, but I like Brickfielder‘s use of swipey-ness (go on, find me a better term, I’ll wait) to show what’s going on underneath the golf shirt.*

Belazu

Selling food on the internet is a tough one to bring to life. Virtual Reality headsets replete with a tube to shove down your throat are thankfully a few years away yet, but in the meantime Belazu have at least provided a practical and appealing way to demonstrate its ingredients by providing lots of lovely recipes…

The above product page scrolls down to a number of options…

And you’re then treated to this lovely video, that accurately depicts the steps in the written recipe itself.

Bonus tip…

And remember, if you’re featuring clothing on your website. Always remember to include images of the clothing as they look on real people, not just folded neatly in a white room. For instance, here’s an image of me wearing my JC Penney underwear while precariously holding a cup of coffee above my crotch. Just like in real life…