12 innovative features to make your product pages come alive!!! Inspiration to help bring the real world experience to ecommerce

its-alive

A few months ago, we published our top ecommerce trends of 2017, which featured some of the things we’re seeing (or would like to see) incorporated into online retail sites. In this round-up, we’re going to delve deeper into one of those trends: useful features.

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.

pop chart labs

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!

Cards Against Humanity how to play gif

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.

iphone 7 front and back view

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.

bellroy wallet colour change

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.

bellroy wallet colour change

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.

schuh 360 degree product image

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.

palace skateboards hover zoom

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.

piccadilly records product page

Hotel Chocolat

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

hotel chocolat sleekster box

Each individual chocolate is visualised below the box…

hotel chocolat chocolate menu

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

hotel chocolat ingredients

Wow, I feel like a child web developer in a candy store that has been designed quite well.

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..

ao.com product page

Look it’s Jamie Oliver!

ao.com product video with 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!?

ao.com product review video

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?*

adidas product page with instagram posts

(*through an Instagram filter, taken by experienced Instagrammers)

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.*

brickfielder technology swipe video

*One layer above the bitter competitiveness and empty threats to retire if you don’t improve on your 32 handicap.

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…

belazu product page

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

belazu product page featuring recipes

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

belazu recipe video

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…

jc penney product model in his underwear and danger coffee

Get a newsletter that isn't all about us...

Subscribe for weekly, hand-picked articles about UX, design, and more every Friday—from the Be Good to Your Users blog and the rest of the whole darn web.

...get a little taste right here. 👅 🍭

Christopher Ratcliff
Christopher is the Content Marketing Manager of WhatUsersDo. He’s also the editor of wayward pop culture site Methods Unsound.

He used to be the deputy editor of Econsultancy and editor of the third or forth most popular search engine marketing related website in (some parts of) EMEA.

Leave a Reply