Role of Images in Ecommerce

The role of imagery in ecommerce is most apparent when considering its use in relation to product display. The nature of conducting transactions across the internet distances the user from the physical product – so they have none of the sensory information usually available when physically present such as touching, feeling, examining, seeing the product from any angle they wish, trying it on, etc.

Online retailing distances the user from the physical product - imagery plays a vital role in filling this sensory gap

Imagery therefore plays a vital role in filling this sensory gap – and as technology advances, the extent to which images can portray product information increases too.

There are a number of factors to consider when using images in the context of an ecommerce website, to ensure that imagery delivers optimum product representation, site functionality and enhances the user experience:

Clarity

The clarity of the image is vital in displaying a product in the best manner possible. It is extremely important to provide the most accurate representation of the product - focus, contrast, front-lighting and reflection need to be carefully coordinated in order to maximise definition, pick out contours, colours and textures.

Poor vs. Good - Comparison of lighting, contrast and texture

This is especially important in the evaluation of products or items where colours or fabrics are used extensively, eg. Clothing, home furnishings, etc

Point of View/Angle

Imagery needs to be able to display the product from a variety of different angles, in order to give the user a comprehensive understanding of the shape, colour and texture of the product from every viewpoint so there are fewer barriers to a purchase decision.

This may be as simple as front/side/rear elevation, but may require more views depending on the item in question. For example, an asymmetrically-shaped product may require more views/angles to explain its shape and properties. It may also be that the straight-on viewpoint (front elevation) does not deliver the best angle – and images should be taken at an isometric angle, in plan, or use perspective.

In automotive marketing for example, the lines of the car and a viewer’s natural point of view might indicate that a downward shot would be more appropriate to convey the product’s styling and attributes as the car would be seen in the real world.

Standing human’s point of view - this best conveys this cars styling

360degree Viewers

360-degree product viewers give the user the ability to see the product at whatever angle they wish, rather than being limited to the options given by the photographer, and are often made in Shockwave Flash..

360degree product viewers convey a wealth of information about a product - delivering great benefits to users

360 degree product viewer delivers some nice benefits to the user, they are able to view the product in an environment which provides a more 3D experience and conveys a wealth of information about how a product is used, reacts, looks, hangs, etc.

However, it should be noted that Flash can create accessibility issues - so a static gallery alternative should be provided, in order to ensure that the content is accessible to all visitors, browser types and form factors.

Enlarge/Zoom

The ability to enlarge the product image, or zoom in and out to see more detail is vital – often image thumbnails are used to reduce the footprint within the page layout, but thumbnails fail to deliver the resolution and depth of detail required, so a larger format is required.

A mechanism must be provided to present the user with a large version of each product image to see the product and all detail in the highest resolution possible, in order to provide the best representation of the product to enable evaluation.

This zoom mechanism could be implemented as a:

• new page containing the larger image
• second pop-up window containing the larger image
• overlaid “div” layer in the page, overlaying other elements
• overlaid “div” layer as a “lightbox” effect, obscuring everything below
• dynamic zoom-in effect, in a Flash product viewer

Peter Werth high-resolution product image pop-up

Image Trigger Mechanisms - Hover vs Click

The are a number of methods of triggering the image enlargement mechanism – but they mostly boil down to “hover” or “click”. Each has its advantages, but each also impact on the functionality they can trigger.

The “Hover” Method

When the user rolls-over a thumbnail, a “div” layer appears containing the enlarged image(s), and disappears when the user rolls-off. The images will have been loaded when the page loads, so the enlarged version will appear instantly with no delay.

The div layer vanishes when the user rolls-off the active area, so this requires the user to “hover” over this space for the div layer to appear - restricting mouse usage while viewing the larger image version.

The “Click” Method

When the user clicks a thumbnail, a new page is loaded or a pop-up window or “div” layer appears. This may contain a single enlarged image, or multiple images featuring a navigation device (often a small thumbnail gallery within the pop-up).

A method of closing the window or div is usually incorporated into the pop-up, so that it stays visible permanently until “actively” closed. This functionality enables the user to use their mouse freely without the risk of inadvertantly rolling-off and closing the pop-up.

Branding

Images set the tone for brand expectation. Exposure to consistent imagery associates a brand with the lifestyle or aspirations those images portray, helping to build a brand identity that consumers can identify with.

Images evoke an emotional response and communicate in ways that verbal messaging cannot, with good creative projecting messages of quality and desirability, and helping to build a positive brand image in the mind of the consumer.

Professional creative direction is therefore vital to ensure that imagery:

• identifies the audience
• positions the brand
• articulates the correct messages
• illustrates product context
• retains consistency with brand identity

Images, art direction and styling complement branding to create a sense of visual identity and help express the brand “personality”

Art Direction

The styling and atmosphere created by images complements the branding to help create a sense of visual identity and help express the “personality” of the brand.

Correct composition and consistent art direction are extremely important to ensure that visual continuity is achieved, so plan your art direction to meet your marketing communication and brand identity, rather than use “generic” images.

For instance:

• Is a garment displayed on a live model, a mannequin, or laid out flat..?
• If live models are used, how is their hair and make-up styled?
• Is unusual lighting used to create ambience?
• Is there a background present, or has it been cut-out with image editing software?

Image Selection – Gallery vs Carousel

There are a two main methods of displaying multiple thumbnails for a user to browse, the traditional “gallery” or the “carousel”. Again, both have their advantages, but also impose possible limitations on website design and functionality:

Gallery

This is a traditional method for displaying multiple images. The image thumbnails are displayed next to each other in a grid format, with all thumbnails displayed together (or paginated).

Example of gallery-style thumbnail display

Thumbnail galleries enable users to view all thumbnails concurrently, the only drawback to this method being the amount of screen real-estate that the images take up, so the template layout must account for this.

Carousel

Carousels can be implemented in a number of ways, but all share the common characteristic of scrolling through multiple images in a fixed viewing area.

Example of scrolling carousel thumbnail display

This provides similar functionality to a gallery, but with a much smaller footprint, so it can be a neater solution where space is at a premium.

Carousels rely on Javascript or Flash to operate, however - If Javascript or Flash are not available, the carousel will not operate correctly, and may display all products at once. Therefore, the design must take this possibility into account to ensure it is still operable under these conditions.

SEO

Images provide a whole host of benefits for search engine optimisation, including:

Improved search visibility

Imagery can increase search visibility by virtue of presence in both image search and universal search.

Additional text elements

Image use increases the number of elements available to include supporting keyword/synonym-rich text, eg. “alt” attribute, caption and description, plus embedded meta data in the image file itself (XMP, EXIF, IPTC).

Image path context

Keywords in folder structure and filenames can support topic context, and help search engines understand product taxonomy.

Increased page count

Extra pages can be generated by image enlargements, which will include a caption and description text. Multiple image views increase “page count”, providing your website with more initial internal pagerank/link authority to distribute.

User Generated Content (UGC)

UGC can be a powerful tool in ecommerce, increasing trust factor and improving conversions, and these benefits can be further enhanced with the use of images.

For instance, holiday destination reviews are much more effective and useful if they complement text with images, using imagery to help convey the visual appeal (or lack of) of the location or facilities.

Imagery complements and improves UGC travel reviews

UGC containing images does require extra policing however, due to the nature of imagery and the associated risks involved, eg. unsuitability, copyright issues, image file sizes, etc - so “gatekeeping” and approval/abuse reporting should be considered.

Product Feeds

Formatting images for inclusion within product feeds is essential.

The same principles of image clarity apply wherever the product feed content is displayed:

• Google Merchant results in the universal search results
• In a feed reader
• As aggregated content within a parent page

Clear imagery with great definition will increase CTRs, and may give the edge needed over a competitor.

Ecommerce Platform choice

Your requirements for (and use of) images will have a bearing on your choice of ecommerce platform – factors that should be taken into consideration might be:

• What image functionality does each platform deliver?
• How does this functionality correlate to the above points?
• How search engine-friendly are these mechanisms?
• Is the functionality reliant on Javascript, or is it fully accessible?

Marketing Resources

Manufacturers or ecommerce stores can benefit by releasing galleries of freely-available watermarked images designed for re-use or hotlinking (ie. linking directly to your image, rather than copying and re-hosting it themselves).

Creating resource galleries for advertisers, affiliates and resellers has the double benefit of helping those 3rd parties sell your product(s) with high-quality, consistant imagery, while advertising your website and generating links for your site to improve SEO performance.

Conclusion

A well-thought out website design will combine all these factors into a single unified whole, using imagery in an appropriate manner to emphasise and facilitate the commercial objective of the site.

Correct use of imagery will aid a straightforward and intuitive user experience through good website usability; two of the most important elements of a successful ecommerce website.