Optimised web design

Americas

United States

English

Canada

English

Français

Puerto Rico

Español

Europe

Denmark

Germany

Ireland

Norway

Poland

Sweden

United Kingdom

Spain

Americas

United States

Canada

Puerto Rico

Europe

Denmark

Germany

Ireland

Norway

Poland

Sweden

United Kingdom

Spain

Ecommerce webguides

Back to Elavon

User-friendly navigation to boost your shoppers’ baskets

Simple, intuitive website navigation is an essential part of any successful website, regardless of its products or services. Ultimately, your site needs to be accessible to your users. Website navigation tools act like a map, allowing visitors to easily move around your website to find what they need.

If a customer is struggling to navigate through your website, they may become frustrated and leave. By improving navigation, you can combat this issue and create a more positive user experience. In turn, this can help to improve conversion rates, sales and revenue for your business.

Ecommerce expertise to turn browsers into buyers

Website menus

Website menus are the bread and butter of easy website navigation. They are typically positioned down the side or along the top of a page and provide links to the different areas of your website. Some can also be expanded to display pages nested inside primary website areas. These can be ‘sticky’ menus, meaning they follow the user as they scroll down the page, or fixed to the header.

Footers

Providing footers at the bottom of each of your pages can be a valuable addition to your website. When a user reaches the bottom of a page, it can be useful to guide them to other pages to increase engagement and encourage them to make a purchase. Include links to your popular pages or other relevant pages that your customer may be interested in within the footer, to encourage them to spend more time on your site.

Breadcrumbs

Breadcrumbs show a visitor how the page they are viewing is nested inside other pages, so they can easily navigate to parent pages or other relevant pages to find the information they need. This also helps users to orientate themselves on your website, which can reduce navigation frustrations.

'Next' buttons

Sometimes a user may have finished reading or interacting with one of your pages, but not know where to go next. Adding ‘next’ buttons to sequential pages on your site can direct users and improve user engagement.

Mobile navigation

Most mobile sites feature ‘hamburger’ menu bars. These are collapsible menus that streamline mobile sites by removing clunky fixed navigation menus that take up valuable space. These menus can be easily expanded when the user wishes to navigate to a new page.

How to investigate user navigation

Before you get started changing your website navigation, you need to understand how visitors are currently using your site to ensure you’re making effective changes. To understand your user behaviour on your site, you could use the following tools.

Google Analytics Visitor Flow

This feature in Google Analytics allows you to see the path that your users follow on your site. This can help to identify any areas where users typically get stuck or leave your site.

Conversion-assist reports

These reports are often found in marketing software such as HubSpot, and work by tracking the path of customers who typically make purchases on your site to identify popular pages. Identifying these pages can help you to understand which pages are accessible and which may need better navigation.

“By analysing customers’ spending and behavioural patterns, you can build on the information you’ve gathered from your loyalty programme subscriber lists and target customer segments.”

Peter Charmant, Head of Corporate Retail (Pan-EU and Ireland), Elavon Europe

Tips and tricks for easy website navigation

After you’ve identified which areas of your navigation need adjusting or improving, you can set about implementing these changes. Here are some of our tips and tricks for easy website navigation.

Be consistent

Consistent use of colours and layout can help to make your website more intuitive to navigate. Also, it can help create a smarter looking website and improve your brand image.

Streamline your navigation bar

Adding too many links into your navigation bar can overwhelm your users. Instead, provide links to key pages or parent pages, adding expandable options with links to subpages where appropriate.

Make your sidebars stand out

Make sidebar colours distinctive from your primary page colours. This ensures that navigation menus are clearly identifiable to users.

Ensure navigation bars are responsive on mobile devices

With many people using smartphones to search and shop, it’s important to ensure that your website navigation is as intuitive on mobile devices as possible. There’s less space for large menus on mobile, so your navigation tools need to be neat and concise to allow for a seamless transition from desktop to mobile.

Mobile accounts for approximately half of web traffic worldwide. In the last quarter of 2023, mobile devices (excluding tablets) generated 59% of global website traffic. Mobiles and smartphones consistently hovered around the 50% mark since the beginning of 2017, before surpassing it in 2020.

The importance of good product photos for ecommerce

Product photography is vital for any ecommerce business. As your customers can’t physically see or feel your products, your product images need to do the selling for you. Providing professional product imagery can also increase engagement with your website and build customer trust in your brand.

Producing high-quality product photographs doesn’t have to be expensive. Discover our useful guide for ecommerce businesses, so you can start creating professional product photographs that make your products stand out.

Approximately one minute of video is worth 1.8 million words. Websites see better engagement with video. A study found that the average user spends 88% more time on a website if it has video.

Types of ecommerce product photos

The main purpose of taking photos of your products for your website is to successfully convey to visitors what your product is and how your customers can use it. Here are five types of product photography to consider when photographing for your online store:

Hero

Big. Bold. Dominant. These dramatic shots are often used for social media posts, marketing campaigns or headers on your website to draw customers in. This style of image combines the visual features of your product with short and engaging text to encourage users to find out more.

Product

Simple product photos with plain white backgrounds and minimal distractions allow users to visualise how they might use your product. This style of photography is ideal for almost all product pages and can be found on most ecommerce websites.

GIFs and videos

GIFs or videos are a great way to display a product in action and can create visual clarity for users. They also allow for a more immersive experience and encourage user engagement with the product.
GIFs and videos have also been statistically proven to increase sales.

Lifestyle

Lifestyle photos feature your product in a styled scene to demonstrate to your customers how to use your product and demonstrate what makes your product special. This also gives you the opportunity to associate your products with a certain lifestyle to enhance their appeal to your website visitors. Lifestyle product photos are ideal for displaying decorative products or jewellery.

360 degree

This relatively new style of product display allows customers to move or spin the image to get a complete view of the item, creating a more immersive experience. 360-degree images are created using a fusion of software and sequence of panoramic photos, lined up to make a sustained circle around the point of shooting. These photographs are popular for displaying furniture, household appliances and shoes.

Taking and editing product photography

The quality and professionalism of product photographs can directly affect your brand image and trustworthiness, influencing potential sales.

Creating high-quality product images does not always require a professional photographer or studio. To get started taking great photos of your products, all you need is a camera, a tripod and a lightbox. Some products, such as food, people and clothes also often photograph better in natural light, making professional product photography even more accessible.

How to produce professional product photographs.

Use multiple angles

One of the biggest challenges with ecommerce sites is that a customer can’t see or touch your products. This is why it’s imperative that you show off your products from different angles to give customers a good idea of what your product is like.

Provide zoomed-in images

Including zoomed-in images or offering a zoom function on your photographs can allow customers to see the textures and patterns on your products.

Include product variants

If your product comes in multiple colours, make sure to photograph all of the colour options. Doing so can help to create a more immersive customer experience and can improve your chances of making a sale.

Context

Where possible, it’s always beneficial to show how your products look in context. For example, showing how a particular dress may look on a size 10 and a size 18 model, or a vase on both a plain surface and within a room sitting on a shelf.

Retouching

Once you’ve taken photographs of your products, you must ensure that they are as clear as possible. Retouching photographs can help make your photographs more professional and appealing to potential customers.

Some of the most common ways to retouch photographs for ecommerce include:

Background removal

Tools you can use include Pen tool in Adobe Photoshop and Photoshop’s Quick Selection tool (‘Select and Mask’). White backgrounds are an industry standard, and for a good reason: they remove the potential for distractions and direct focus towards your product. Also, they typically make for smaller file sizes, which can improve your website page loading speed.

Spot retouching

Tools you can use include Photoshop’s Clone Stamp tool and the Healing Brush tool. Removing blemishes or smudges from your product images can keep them looking neat and professional.

Colour correction

Colour correcting your images by increasing the contrast will make your product even more prominent against the background. Editing photos in this way can also allow you to produce consistent imagery across your ecommerce site, reinforcing your brand.

If you’re tight on time and resources, there are plenty of free and affordable online tools available for easy photo editing. So, no matter the size of your store, you can offer your customers informative and professional product images.

Linking optimisation of product pictures to SEO

Taking time to consider an appropriate name for your product images can be beneficial for your website’s search engine rankings. Ranking higher in search-engine results pages is essential for reaching a wider potential customer base.

Once you’ve created and edited your product photographs, add ‘alt text’ to your images to help search engines to understand what your image is showing. Optimising your image’s alt text with keywords and providing an accurate description can demonstrate to search engines your website’s relevance to a user’s search terms. This process is relatively simple and can ensure that your carefully crafted photographs are displayed to potential customers.

What makes a good product page design?

For anyone who is just about to set up an ecommerce website, or already has one, the first thing to get right is the homepage. The homepage is the first thing your customers see when they arrive on your site, so it needs to be right.

The main objective for any ecommerce website is sales, so a product page needs to be designed well enough to show your visitors exactly what you’re selling and that it’s something they absolutely can’t live without.

With around 70% of online shopping carts being left abandoned, your product page is a vital part of your website to improve your ecommerce conversion rates. Essentially, your product pages should clearly tell your customers:

What your product is

The needs your product fulfils or problem it solves

The details a customer needs to see to decide whether to buy or not.

Here we’ll look at the following to help you increase your sales and revenue by improving your product pages:

Product page: the basics

Images and product descriptions

Persuading customers

Product page layout

The average 70% cart abandonment rate means that only three out of ten customers who fill their shopping carts make it to checkout to complete their purchase.

Before you begin – product page basics

As already mentioned, when a customer reaches your product pages, they should be presented with the right amount of information to help and convince them to buy what’s in front of them. The main aim is for your product page to make the process as instinctive and simple as possible. So where do you begin with this? Ideally, you should make sure it focuses on the following:

Your product

As this is a product page, this is a place for it to shine. Depending on what you are selling determines how it is presented.

Your target audience

Who are you targeting? Who is buying your products? Who are you speaking to? Answering these questions will help you shape your product page and the content you should be writing. Short and snappy? Informative and lots of detail? Videos or GIFs?

Your page design and user experience

When creating your product page, consider how content is arranged and what is or is not included within it. These aspects can ultimately have a huge impact on your conversions.

Your brand

It’s vital that your branding is displayed across your product pages. Due to the very nature of online shopping, a customer might never land on your homepage, but this ensures they will see your brand.

Your tone of voice and copywriting

Your brand’s tone-of-voice guide should determine or certainly help with your copywriting. In this case, the copy used to describe your product should be written in a way that matches your brand.

Images and product descriptions

A strong image can speak a thousand words. Images communicate thought and emotion, whilst communicating your narrative in a way words alone can sometimes lack.

93% of consumers consider visual appearance to be the key deciding factor in their purchasing decision.

Therefore, selecting which images to include and where and how they sit on a product page is vital. Your products are unique and you need to showcase them in such a way that will encourage customers to spend money on them.

Product descriptions

Product descriptions help prop up your product photos, giving your customer everything they need to understand what it is and why they should buy it. Your customer isn’t browsing in-store with the ability to touch and feel your product. This means your product descriptions must be persuasive to sell the product.

“Product description really speaks to the quality of your ecommerce product, whether that’s a website, app or other channel. Make sure your descriptions are fair and accurate, but also to the point.”

James King, Head of Professional Services, Elavon Europe

Yonder: Online survey of 1,082 adults in Ireland in March 2023. Q: Which, if any, of the following would encourage you to shop online?

Elavon research shows the importance of the design and writing on your website. Almost a third (31%) of shoppers said more detailed descriptions would encourage them to shop online, and more than a quarter (29%) said better images would motivate them to shop online.

Here we’ll look at the following to help you increase your sales and revenue by improving your product pages:

Product page: the basics

Images and product descriptions

Persuading customers

Product page layout

The copy sitting next to the main product image (above the fold) need not contain fluffy words. It should be short, snappy and to the point. A slightly longer, more detailed description of the product should then be placed further down the page.

Your copy should:

Be clear, simple and informative.

Include clear pricing

Avoid long sentences and jargon

Avoid using clichés or empty claims

Be persuasve. Excite your customers

Stick to your brand's tone of voice

Persuading customers

So, how do you persuade your customers to buy your product?
This is where social proof comes in. Social proof is the idea that consumers will adapt their behaviour according to what other people are doing. Or in this case, buy something because they see others doing so. This is why customer reviews and ratings are so important.

According to a study, 93% of consumers say online reviews impact their purchasing decisions.

So, it’s vital to have some form of social proof at the top of your product page making it instantly visible to shoppers. The best way to do this is to show the product’s star rating near the product title. Customer reviews should then be included further down the page so that people can see what other shoppers have thought about the product. For example: sites like Amazon and Etsy place star ratings and customer reviews prominently on their product pages.

Social proof adds credibility and can significantly help to boost sales. Reviews, testimonials and images from Instagram (from both customers and influencers) all help provide a vote of confidence in the value of the product. Additionally, any press coverage your brand receives is a great way to build brand awareness and highlights that your brand is worth paying attention to.

When creating your product pages, be sure to:

Update your product descriptions based on customer reviews
Add social sharing buttons to product pages
Show the logos of publications and websites your products have been featured in
Ask your customers for a testimonial as to why they chose a particular Product
Product reviews and customer testimonials should certainly be thought about when designing the page layout. Most reviews sit below the fold but it’s common practice to put the best reviews in the product description area
Show an average star rating of all reviews beneath the product title.

Product page layout

For an online store, the layout and design of a product page are important to get right. The design should pull together the product photos, pricing and descriptions whilst avoiding clutter in order to guarantee a sale.

There are various styles you could opt for depending on the type of product, but the three most prominent are:

The traditional template

This is the most popular template used for online product pages. The main elements are above the fold, with the product description and ‘call to action’ (CTA) placed alongside the main images.

Image focused

An image-focused design is perfect for showing your products and making them the centre of attention. However, it’s important to still include your product description, price and CTA above the fold.

Featured focused

This is ideal for focusing on the features of your product rather than how it looks. This style is often used for tech or digital appliances. In this case, the product description should outline the main features and technical specifications to stand out to the customer.

Essentials for good page design

Fundamentally, when designing the layout of the product page (whichever one you choose from the above) you should make sure you include a strong CTA button, good user experience (UX) features to make it easier for the customer to make a purchase, highlight product recommendations and build customer confidence throughout.

Personalised product recommendations drive revenue. Visits where a shopper clicked a recommendation comprise just 7% of all visits, but 24% of orders and 26% of revenue.

Build customer confidence

Communicating the quality and sizing of a particular product,
as well as return policies and customer service commitments, are all important elements to consider when laying out your product pages so your visitor feels comfortable buying from you and trusts you.

When we questioned more than 1,000 adults across Ireland, almost two thirds (63%) of those who answered said that free returns, labels and packaging would encourage them to shop online. A similar proportion (59%) said reliable delivery was a key reason to encourage shopping online.

Respondents were also keen for same-day delivery (42%), returns collected from their house (40%) and a wider range of delivery slots (20%).

Yonder: Online survey of 1,082 adults in Ireland in March 2023. Q: Which, if any, of the following would encourage you to shop online?

“This really underlines how important it is for you, as an ecommerce business, to develop an excellent relationship with a delivery firm.

We also see younger shoppers keen for same-day delivery, while a sizeable minority of all shoppers also like that availability. Something to consider, to help you compete with the high street or an edge over your competitors.”

James King, Head of Professional Services, Elavon Europe

Your product pages are the lifeline of your online store. If they aren’t presented well, you run the risk of losing a customer and a sale. Creating stand-out product pages will ensure you see customers returning, they’ll help with your store’s brand and reputation, and set you apart from your competition.

Recap of product-page features

Here’s a recap of the key things to remember when designing your product page:

Use high-quality images

Include simple informative product descriptions

Use persuasive calls-to-action

Use social proof to back up your products

Use product recommendations

The purpose of an effective product page is to persuade customers to buy from you. When it comes to making decisions on the layout, copy and design of your product pages, be sure to keep the customer at the forefront of your mind.

User-friendly navigation to boost your shoppers’ baskets
How to investigate user navigation
Tips and tricks for easy website navigation
The importance of good product photos for ecommerce
Types of ecommerce product photos
Taking and editing product photography
Retouching
Linking optimisation of product pictures to SEO
What makes a good product page design?
Before you begin – product page basics
Your copy should
When creating your product pages, be sure to
Product page layout
Essentials for good page design
Build customer confidence
Recap of product-page features

Americas

Europe

Americas

Europe

User-friendly navigation to boost your shoppers’ baskets

Ecommerce expertise to turn browsers into buyers

Website menus

Footers

Breadcrumbs

'Next' buttons

Mobile navigation

How to investigate user navigation

Google Analytics Visitor Flow

Conversion-assist reports

“By analysing customers’ spending and behavioural patterns, you can build on the information you’ve gathered from your loyalty programme subscriber lists and target customer segments.”

Tips and tricks for easy website navigation

Be consistent

Streamline your navigation bar

Make your sidebars stand out

Ensure navigation bars are responsive on mobile devices

Mobile accounts for approximately half of web traffic worldwide. In the last quarter of 2023, mobile devices (excluding tablets) generated 59% of global website traffic. Mobiles and smartphones consistently hovered around the 50% mark since the beginning of 2017, before surpassing it in 2020.

The importance of good product photos for ecommerce

Approximately one minute of video is worth 1.8 million words. Websites see better engagement with video. A study found that the average user spends 88% more time on a website if it has video.

Types of ecommerce product photos

Taking and editing product photography

How to produce professional product photographs.

Retouching

Linking optimisation of product pictures to SEO

What makes a good product page design?

What your product is

The needs your product fulfils or problem it solves

The details a customer needs to see to decide whether to buy or not.

Product page: the basics

Images and product descriptions

Persuading customers

Product page layout

The average 70% cart abandonment rate means that only three out of ten customers who fill their shopping carts make it to checkout to complete their purchase.

Before you begin – product page basics

Images and product descriptions

93% of consumers consider visual appearance to be the key deciding factor in their purchasing decision.

Product descriptions

“Product description really speaks to the quality of your ecommerce product, whether that’s a website, app or other channel. Make sure your descriptions are fair and accurate, but also to the point.”

Elavon research shows the importance of the design and writing on your website. Almost a third (31%) of shoppers said more detailed descriptions would encourage them to shop online, and more than a quarter (29%) said better images would motivate them to shop online.

Product page: the basics

Images and product descriptions

Persuading customers

Product page layout

Your copy should:

Be clear, simple and informative.

Include clear pricing

Avoid long sentences and jargon

Avoid using clichés or empty claims

Be persuasve. Excite your customers

Stick to your brand's tone of voice

Persuading customers

According to a study, 93% of consumers say online reviews impact their purchasing decisions.

When creating your product pages, be sure to:

Product page layout

Essentials for good page design

Clear ‘call to action’

UX features

Product recommendations

Personalised product recommendations drive revenue. Visits where a shopper clicked a recommendation comprise just 7% of all visits, but 24% of orders and 26% of revenue.

Build customer confidence

Recap of product-page features

Use high-quality images

Include simple informative product descriptions

Use persuasive calls-to-action

Use social proof to back up your products

Use product recommendations

On this page

Read more web guides

Speed demons: fast loading times to turn clicks into cash

Mobile mastery: optimising for on-the-go shoppers

Boost your average order value: easy wins for bigger profits

Customer service and support

Customer service and support