Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

UI/UX Strategies And Ecommerce




When a user makes a purchase on a website, there are many factors which contribute to a successful conversion. To name just a few, there is trust, design, speed and usability. It would be simplistic to narrow the reason down to just one such factor.

Assuming that your site’s design, speed, usability, and trustworthiness have brought the customer as far as the product page, one of the major selling points are the product images.

Indeed, product images are among the final pieces of the conversion puzzle. Here is how you can ensure that you are getting the most from your product imagery:


Don’t Skimp on the Images

It is important that an eCommerce site has as many images as it needs in order to show what the product looks like. As a website builds up its product image catalogue, there is the issue of redundant images. Images should be of a high quality, yet optimized for the web (a Content Delivery Network can come in handy here to serve high-res images). Without high quality photos, users may not be able to make a purchase decision and will steer away from the website.



Dynamic Images with 360° Views

A 360 degree product view allows customers to move the product around and see it from every angle. With a 360 degree view an eCommerce site will need far less quantities of images.

This technique attempts to replicate the experience of physically going into the store and touching and moving a product.


RES Phorensics Consulting Article: Mobile Devices & Ecommerce Infographic 1 Version 2.01


Contextual Product Images

An image that shows the target audience using the product will clarify exactly what the product is, how it is used, and who is likely to use it. It also gives the user a sense of the product in the real world.

Today, a lot of marketing is about selling an experience, and not just a product. Putting your product into context does just that.


The Perfect Zoom

Zoom is all about finding balance. Too little zoom can be useless, while too much zoom can put the product out of perspective. The image should zoom in enough for the user to see every relevant detail, mimicking the way a potential customer sees the product in a real, brick and mortar store.

The right balance of zoom functionality will give a better experience to the shopper. Remember that when a potential customer is in-store, they can pick the item up and look at it closely. The right zoom balance will make them feel more confident about their purchase.


The Product Texture

For certain products, texture is important. This can be problematic since it can be difficult to get a feel for the texture of a product with a digital image. This may unfortunately mislead a customer, making them unhappy with their purchase, apart from potentially writing a (justifiable) bad review about the product.


Show a Picture for Each Colour and Style

How many times have you bought something online only to find that it was not the exact shade of colour that you expected? Simply put, if your product has 12 different colours, you should have 12 different images showing the product in each colour.

Instead of just listing the colours, you should show the product in each available colour.

This can be done in 2 different ways:

  • List the colour options in the catalogue product page.

When a colour is clicked, it updates that page with the bigger image showing the product with the colour chosen.

  • Show multiple photos of the product in different colours

Each colour would have its own image in the list of product images.

The first option confines a product that has multiple styles/colours into one product page and is more usable for customers.

Typically, product images have a white background, instead of being in a real-world setting. When you need to show scale, the white background may not be enough. Putting the product in a real setting, such as a living room, kitchen, on a deck, etc. will help put the product into context and show the real size.


RES Phorensics Consulting: Infographic - Ecommerce & Gender


Advanced Search

The use of advanced search filters, especially where a product catalogue is large will enhance the customer experience. Javascript elements such as suggestions while you type, filtering by criteria such as product, manufacturer etc will simplify the shopping experience and more enable customers to find what they are looking for in a shorter space of time and enhance casual browsing of the web store.

 And Compression

In addition to compression you can also minify certain component types such as scripts and stylesheets that link to product images

Minification means striping extra code from your programs that is not essential for the program’s execution. The code you can safely strip is mainly comments and whitespace. Another part of minification is using the shortest possible syntax when there are several options. And, when safe to do so, minifiers can rename variables by using shorter names.

Minification is best done by a tool, because it’s nearly impossible to do it properly by hand. Luckily there are quite a few tools available and most are free and open source.