The Ecommerce Homepage UX Checklist

Last Updated
August 29, 2020

Affiliate commissions partially fund our unbiased reviews, at no extra cost to readers. Learn more

An ecommerce homepage has a variety of tasks to perform for users, from helping people to find and buy products, to signposting other key information such as help from customer service.

In this guide, we’ll look at the different elements and features that retailers should consider including on their homepages, in order of importance.

The guide is a detailed exploration of the 48 elements included in this tweet thread, from @danbarker, and by reading this article – in just a few minutes – you’ll have an excellent picture of how common Ecommerce homepages function (and, perhaps, how you may improve your own).

Some of the features referenced here may be essential for any retailer selling online, while others are extras that are useful to have, or more applicable to certain types of ecommerce sites.

The challenge for retailers is to make sure that visitors can find the things they’re looking for, while keeping the page easy to use and navigate.

One way to do this is by following an ‘inverted pyramid’ design, in which features are ordered according to their importance to the retailer and visitor.

In this way, new and casual visitors see key USPs and the products retailers want to push, while more committed shoppers can find the more niche features and content they’re looking for.

Key ecommerce homepage elements

These are the elements and features that most frequently appear on ecommerce homepages, listed in the the order in which they tend to appear, from the top to the bottom of the page.

1. Top navigation bar

This contains the key links to different departments and / or product categories as well as other key elements like site search, log in and shopping cart.

2. Visible search icon

This allows shoppers who prefer to search directly for items to easily access site search. Somesites will show a search bar, like M&S above, while others use an icon.

As some studies have shown, site search users may be more likely to convert, and arriving at a site with a specific product in mind can indicate a greater intent to purchase.

3. Shopping cart link

The shopping cart link should be visible, while it’s also useful to highlight the fact that items have already been added to the cart. This is also good spot to place links to visitors’ wishlists.

4. Offer bar

The offer bar is a place where retailers can highlight key information, often around delivery and returns, or perhaps current promotions.

It helps to ensure that visitors are aware key points that may affect their decision to purchase. For example, if shoppers know that delivery is free, then they don’t need to look for this information later on.

5. USP bar

Unlike the offer bar, the USP bar is about telling people about the brand’s unique proposition. For example, a retailer might highlight that its products are ethical or organic.

6. Main category entries

This is where sites will show the most popular categories, those that visitors are most likely to click on and buy from.

7. Seasonal categories

These categories are appropriate for the time of year, or events taking place at the time, and so are adjusted from time to time.

Here, for example, Sweaty Betty shows jumpers and base layers when the weather is colder.

8. Entry for topic collections

Some occasions will be significant enough for site to create topics around them. For example, sites may devote space to promote gift guides and related content.

9. Seasonal individual products

This is also a place to show individual seasonal products. This reduces the amount of effort and number of clicks from the homepage to the product page.

For example, sites can show known best sellers or deals straight from the homepage during big ecommerce events like Black Friday and Cyber Monday.

10. Content

Ecommerce sites will prioritise content according to how important they see this for customer acquisition and conversion. It can help to engage customers and to give them ideas and inspiration for purchases.

Net-a-Porter places content at the centre of its homepage, with articles shown more prominently than on many other ecommerce sites.

11. Recommended products

Recommended products can be shown based on preferences at an individual user level, or visitor segments. For example, you could show different products based on a shopper’s previous purchase history.

12. Recently viewed products

If a customer has recently viewed a product it’s a clear declaration of interest, so it can be worthwhile reminding them of the products they viewed when they return to the homepage.

This image has an empty alt attribute; its file name is amazon-homepage-1024x573.png

13. Services

Some sites offer finance options, or perhaps membership schemes for delivery and other perks, as Amazon does with Prime.

Currys PC World, for example, displays its finance and flexible credit options several times across the homepage – in the offer / USP bar, on the carousel, and just underneath its featured categories.

14. Email signup

Most visitors won’t buy straight away, so it makes sense to offer email sign up so they can consent for marketing communications and you can build a list of prospects.

Many sites will place email signups towards the foot of the page, but it can also help to trigger more prominent messages after visitors have been inactive for a period of time.

It’s important to ensure these messages don’t interrupt the customer, so timing and placement is key.

15. Testimonials

Testimonials from existing customers can help to persuade new visitors that a site is trustworthy, and that they’ve been happy with their purchases.

These are different from product reviews, and normally talk about customer service and delivery rather than the products themselves. It can help, especially when customers may be less familiar with the retailer.

16. Ancillary links

These links are for information which customers may head to the homepage for, but are likely to find even if they are further down the page.

This include links to help and FAQs, delivery and returns information, as well as links to related sites, about us pages and more.

17. Social links

Many sites will show social links in the footer, though some fashion sites will choose to place them higher as they see social playing a key role for them.

18. Terms & Conditions

For those visitors that are looking for them, Ts & Cs are normally to be found in the site footer.

19. Payment icons

Shoeing payment icons, also often in the footer (as on Schuh above) allows customers to see at a glance if their preferred payment method is available.

20. Live chat

Live chat is a useful customer service channel for customers. It can be a more instant option than telephone or email, so it makes sense place a link on the homepage for visitors who arrive looking for it.

21. Contact numbers

Contact numbers and other details like opening hours are displayed in different ways by retailers.

Some will place them in the footer, while others choose to place it in the top header where it’s easier to find.

Secondary homepage features

The following are some of the more niche elements and features that are useful extras for some sites, or perhaps more applicable for some types of retailer than others.

22. Shop the trends

For fashion sites, this may be the latest trends, or perhaps seasonal products related to events like Easter or Christmas.

23. Shop by body shape

Allowing customers to shop by body shape on fashion sites, or perhaps to shop by room on homewares sites can speed up the journey for shoppers by helping them to narrow their product selection quickly.

24. Shop by size

This is another option which gets customers into product selection more quickly.

25. Buy again

If customers have bought an item before, showing it when they return is a useful prompt. This can be especially useful for products which shoppers often buy regularly, such as pet food, groceries or consumables like razor blades.

26. Trade in your old X

Trade in options are useful on certain sites, such as console and games retailers, or mobile phone retailers such as Carphone Warehouse.

27. Blocks for USPs

Some retailers choose to make their USPs more prominent if they are key to the retailer, using blocks rather than a more easily ignored bar.

A company such as TOMS places ethics at the heart of its business model, and therefore devotes a big portion of its homepage to USPs.

28. SEO text

SEO copy, i.e. text written mainly for the search engines to pick up, has vanished from lots of ecommerce homepages.

This is partly because sites are trying to avoid being seen as ‘over-optimising’ by Google.

When you do see it, it can give you a strong indication of the terms businesses see as the most important.

For example, Hotel Chocolat used to have a prominent and slightly incongruous ‘dark chocolate’ link in the offer bar. When this screenshot was taken the site ranked ninth on Google for this term so was clearly looking to improve this.

29. Security icons

Security icons are there to reassure potential customers that the site is secure and safe to shop from.

This can be more applicable to retailers who may not be familiar to some shoppers, and get help to remove any concerns.

30. Download the app icons

For mobile sites, it’s useful to highlight the shopping app, which can provide a better shopping experience for the user.

31. Store finder

For multichannel retailers, it’s important to cater for ‘offline’ shoppers, and some will be looking for data on store locations, opening hours and contact numbers.

32. Product configurator

Product configurators are a useful starting point for some retailers, where products come with several different add-ons or options, such as laptops.

33. Track your order

Order tracking information is often linked to from order confirmation and shipping notification emails, but it should also be visible on site.

34. Inspiration carousels

Carousels used to be very popular on homepages. They are far less popular now, largely because of a few blog posts.

In some cases they are useful, but are best treated with a ‘show the most important item first’ methodology.

The carousel below from Tredz is a good example. It has left and right icons to navigate and it rotates quite slowly and if you hover over it it remains static so you can read it.

This allows visitors to see the promotions and featured products, rather than just having them pass by without noticing them.

35. B2B login

For sites that sell to both public and trade, a B2B logn options helps to provide a tailored service for each.

36. Push notification opt-in

Push notifications can be seen as intrusive by some users, but for more committed customers, it allows retailers to provide product alerts and marketing more directly.

37. Blog posts, TV ads and other content

Blog links are often an afterthought for some sites, but many (Net-a-Porter and Home Depot to name two) use content well for inspiration and product education.

For retailers who have TV campaigns running, it can pay to reinforce that message for visitors to the homepage, by showing the ad creative and any featured products.

38. Clearpay/Klarna icons.

Pretty Little Thing places its Klarna and Clearpay options prominently on the homepage so shoppers how they can pay in instalments if they prefer.

39. Social content

Displaying social media content is a useful form of social proof. It tells the shopper that other people are buying the products and enjoying them, and can act as inspiration for prospective customers.

This content can be pulled in automatically or curated by the retailer, as with French Connection here.

40. Editor’s picks

Here’s a good example from Net-a-Porter, where editors pick out their favourite styles from the season.

41. About the owner

This is an opportunity for a retailer to talk about the brand, perhaps emphasising the history of the brand, the provenance of products or other USPs.

42. Currency and language switcher

If you sell a lot internationally, it’s useful to provide the option for the user to switch language and / or currency.

It can also help to detect the user’s IP address and nudge them in the right direction if you’re serving the wrong content to them.

This is especially important if you serve multiple regions in the same language and if baskets are specific to each region.

43. Gift services

If you offer gift cards or boxes, or perhaps provide wedding list services, then it’s good to make these accessible via the homepage.

44. The dreaded ‘cookie’ block

Since enforcement of GDPR and even before, sites have been handling cookie notifications in different ways.

Many ecommerce homages now contain cookie notification bars at the top or bottom of pages do that users can accept or review how their cookie data is used.

Una página de inicio de comercio electrónico tiene una variedad de tareas que realizar para los usuarios, desde ayudar a las personas a encontrar y comprar productos, hasta firmar otra información clave, como la ayuda del servicio de atención al cliente.

En esta guía, veremos los diferentes elementos y características que los minoristas deben considerar incluyendo en sus páginas de inicio, en orden de importancia.

La guía es una exploración detallada de los 48 elementos incluidos en este hilo de tweet, desde @danbarker, y al leer este artículo – en pocos minutos – tendrá una excelente imagen de cómo funcionan las páginas de inicio de comercio electrónico comunes (y, tal vez, cómo puede mejorar su propia).

Algunas de las características a las que se hace referencia aquí pueden ser esenciales para cualquier minorista que venda en línea, mientras que otras son extras que son útiles tener, o más aplicables a ciertos tipos de sitios de comercio electrónico.

El desafío para los minoristas es asegurarse de que los visitantes puedan encontrar las cosas que están buscando, mientras mantienen la página fácil de usar y navegar.

Una forma de hacerlo es siguiendo un diseño de "pirámide invertida", en el que las características se ordenan de acuerdo con su importancia para el minorista y el visitante.

De esta manera, los visitantes nuevos e informales ven los USP clave y los productos que los minoristas quieren empujar, mientras que los compradores más comprometidos pueden encontrar las características y el contenido más nicho que están buscando.

Principales elementos de la página de inicio de comercio electrónico

Estos son los elementos y características que aparecen con más frecuencia en las páginas de inicio de comercio electrónico, que aparecen en el orden en que tienden a aparecer, desde la parte superior hasta la parte inferior de la página.

1. Barra de navegación superior

Contiene los enlaces clave a diferentes departamentos y / o categorías de productos, así como otros elementos clave como la búsqueda del sitio, inicio de sesión y carrito de compras.

2. Icono de búsqueda visible

Esto permite a los compradores que prefieren buscar directamente artículos para acceder fácilmente a la búsqueda en el sitio. Algunos sitios mostrarán una barra de búsqueda, como M&S arriba, mientras que otros usan un icono.

Como algunos estudios han demostrado, los usuarios de búsqueda en el sitio pueden ser más propensos a convertir, y llegar a un sitio con un producto específico en mente puede indicar una mayor intención de compra.

3. Enlace del carrito de la compra

El enlace del carro de la compra debe ser visible, mientras que también es útil destacar el hecho de que los artículos ya se han agregado al carro. Este también es un buen lugar para colocar enlaces a las listas de deseos de los visitantes.

4. Barra de oferta

La barra de ofertas es un lugar donde los minoristas pueden resaltar información clave, a menudo alrededor de la entrega y las devoluciones, o tal vez promociones actuales.

Ayuda a garantizar que los visitantes conozcan los puntos clave que pueden afectar a su decisión de compra. Por ejemplo, si los compradores saben que la entrega es gratuita, entonces no necesitan buscar esta información más adelante.

5. Barra USP

A diferencia de la barra de ofertas, la barra USP trata de contarle a la gente sobre la propuesta única de la marca. Por ejemplo, un minorista podría destacar que sus productos son éticos u orgánicos.

6. Entradas de categoría principal

Aquí es donde los sitios mostrarán las categorías más populares, aquellas en las que los visitantes son más propensos a hacer clic y comprar.

7. Categorías estacionales

Estas categorías son apropiadas para la época del año, o eventos que tienen lugar en ese momento, y por lo tanto se ajustan de vez en cuando.

Aquí, por ejemplo, Betty sudororosa muestra saltadores y capas base cuando el clima es más frío.

8. Entrada para colecciones de temas

Algunas ocasiones serán lo suficientemente importantes como para que el sitio cree temas a su alrededor. Por ejemplo, los sitios pueden dedicar espacio para promover guías de regalos y contenido relacionado.

9. Productos individuales de temporada

Este es también un lugar para mostrar productos de temporada individuales. Esto reduce la cantidad de esfuerzo y el número de clics desde la página de inicio a la página del producto.

Por ejemplo, los sitios pueden mostrar best sellers conocidos o ofertas directamente desde la página de inicio durante grandes eventos de comercio electrónico como el Black Friday y Cyber Monday.

10. Contenido

Los sitios de comercio electrónico priorizarán el contenido de acuerdo con lo importante que ven esto para la adquisición y conversión de clientes. Puede ayudar a involucrar a los clientes y darles ideas e inspiración para las compras.

Net-a-Porter coloca el contenido en el centro de su página de inicio, con artículos mostrados de manera más prominente que en muchos otros sitios de comercio electrónico.

11. Productos recomendados

Los productos recomendados se pueden mostrar en función de las preferencias a nivel de usuario individual o de segmentos de visitantes. Por ejemplo, podría mostrar diferentes productos en función del historial de compras anterior de un comprador.

12. Productos vistos recientemente

Si un cliente ha visto recientemente un producto es una declaración clara de interés, por lo que puede valer la pena recordarles los productos que vieron cuando regresan a la página principal.

Esta imagen tiene un atributo alt vacío; su nombre de archivo es amazon-homepage-1024x573.png

13. Servicios

Algunos sitios ofrecen opciones financieras, o tal vez esquemas de membresía para la entrega y otras ventajas, como lo hace Amazon con Prime.

Currys PC World, por ejemplo, muestra sus opciones de crédito financiero y flexible varias veces a través de la página de inicio – en la barra de oferta / USP, en el carrusel, y justo debajo de sus categorías destacadas.

14. Registro por correo electrónico

La mayoría de los visitantes no comprarán de inmediato, por lo que tiene sentido ofrecer registro por correo electrónico para que puedan dar su consentimiento para las comunicaciones de marketing y usted puede construir una lista de posibles clientes.

Muchos sitios colocarán registros por correo electrónico hacia el pie de la página, pero también puede ayudar a desencadenar mensajes más prominentes después de que los visitantes han estado inactivos durante un período de tiempo.

Es importante asegurarse de que estos mensajes no interrumpen al cliente, por lo que el tiempo y la ubicación son clave.

15. Testimonios

Los testimonios de los clientes existentes pueden ayudar a persuadir a los nuevos visitantes de que un sitio es confiable y que han estado contentos con sus compras.

Estos son diferentes de las revisiones de productos, y normalmente hablan sobre el servicio al cliente y la entrega en lugar de los productos en sí. Puede ayudar, especialmente cuando los clientes pueden estar menos familiarizados con el minorista.

16. Enlaces auxiliares

Estos enlaces son para información para la que los clientes pueden dirigirse a la página de inicio, pero es probable que encuentren incluso si están más abajo en la página.

Esto incluye enlaces a ayuda y preguntas frecuentes, información de entrega y devoluciones, así como enlaces a sitios relacionados, sobre páginas y más.

17. Enlaces sociales

Muchos sitios mostrarán enlaces sociales en el pie de página, aunque algunos sitios de moda elegirán colocarlos más alto a medida que ven que las redes sociales juegan un papel clave para ellos.

18. Términos y condiciones

Para aquellos visitantes que los están buscando, Ts & Cs se encuentran normalmente en el pie de página del sitio.

19. Iconos de pago

Los iconos de pago de shoeing, también a menudo en el pie de página (como en Schuh anterior) permiten a los clientes ver de un vistazo si su método de pago preferido está disponible.

20. Chat en vivo

El chat en vivo es un canal de servicio al cliente útil para los clientes. Puede ser una opción más instantánea que el teléfono o el correo electrónico, por lo que tiene sentido colocar un enlace en la página de inicio para los visitantes que llegan en busca de ella.

21. Números de contacto

Los números de contacto y otros detalles, como el horario de apertura, se muestran de diferentes maneras por los minoristas.

Algunos los colocarán en el pie de página, mientras que otros eligen colocarlos en el encabezado superior donde es más fácil de encontrar.

Características secundarias de la página de inicio

Los siguientes son algunos de los elementos más nicho y características que son extras útiles para algunos sitios, o tal vez más aplicable para algunos tipos de minoristas que otros.

22. Comprar las tendencias

Para los sitios de moda, esta puede ser la última tendencia, o tal vez productos de temporada relacionados con eventos como Pascua o Navidad.

23. Comprar por forma de cuerpo

Permitir a los clientes comprar por forma de cuerpo en sitios de moda, o tal vez comprar por habitación en sitios de productos para el hogar puede acelerar el viaje para los compradores ayudándoles a reducir su selección de productos rápidamente.

24. Comprar por tamaño

Esta es otra opción que lleva a los clientes a la selección de productos más rápidamente.

25. Comprar de nuevo

Si los clientes han comprado un artículo antes, mostrarlo cuando regresen es un mensaje útil. Esto puede ser especialmente útil para productos que los compradores a menudo compran regularmente, como alimentos para mascotas, comestibles o consumibles como cuchillas de afeitar.

26. Intercambia tu antigua X

Las opciones de intercambio son útiles en ciertos sitios, como los minoristas de consolas y juegos, o los minoristas de teléfonos móviles, como Carphone Warehouse.

27. Bloques para USPs

Algunos minoristas optan por hacer que sus USPs sean más prominentes si son clave para el minorista, usando bloques en lugar de una barra más fácilmente ignorada.

Una empresa como TOMS coloca la ética en el corazón de su modelo de negocio, y por lo tanto dedica una gran parte de su página de inicio a USPs.

28. Texto SEO

La copia SEO, es decir, texto escrito principalmente para que los motores de búsqueda los recojan, ha desaparecido de muchas páginas de inicio de comercio electrónico.

Esto se debe en parte a que los sitios están tratando de evitar ser vistos como "excesivamente optimistas" por Google.

Cuando lo ves, puede darte una fuerte indicación de los términos que las empresas ven como los más importantes.

Por ejemplo, el Hotel Chocolat solía tener un eslabón de "chocolate oscuro" prominente y ligeramente incongruente en el bar de ofertas. Cuando esta captura de pantalla se tomó el sitio clasificado noveno en Google para este término por lo que estaba claramente buscando mejorar esto.

29. Iconos de seguridad

Los iconos de seguridad están ahí para asegurar a los clientes potenciales que el sitio es seguro y seguro para comprar.

Esto puede ser más aplicable a los minoristas que pueden no ser familiares para algunos compradores, y obtener ayuda para eliminar cualquier inquietud.

30. Descargar los iconos de la aplicación

Para los sitios móviles, es útil resaltar la aplicación de compras, que puede proporcionar una mejor experiencia de compra para el usuario.

31. Buscador de tiendas

Para los minoristas multicanal, es importante atender a los compradores "fuera de línea", y algunos estarán buscando datos sobre las ubicaciones de las tiendas, los horarios de apertura y los números de contacto.

32. Configurador de productos

Los configuradores de productos son un punto de partida útil para algunos minoristas, donde los productos vienen con varios complementos u opciones diferentes, como portátiles.

33. Seguimiento de su pedido

La información de seguimiento de pedidos a menudo está vinculada a los correos electrónicos de confirmación de pedido y notificación de envío, pero también debe ser visible en el sitio.

34. Carrusel de inspiración

Los carruselos solían ser muy populares en las páginas de inicio. Son mucho menos populares ahora, en gran parte debido a algunas entradas de blog.

En algunos casos son útiles, pero se tratan mejor con una metodología de "mostrar primero el elemento más importante".

El carrusel de Tredz es un buen ejemplo. Tiene iconos izquierdo y derecho para navegar y gira bastante lentamente y si pasas el ratón sobre él permanece estático para que puedas leerlo.

Esto permite a los visitantes ver las promociones y los productos destacados, en lugar de simplemente tenerlos pasar sin darse cuenta de ellos.

35. Inicio de sesión B2B

Para los sitios que venden tanto al público como al comercio, una opción de registro B2B ayuda a proporcionar un servicio personalizado para cada uno.

36. Opt-in de notificación push

Las notificaciones push pueden ser vistas como intrusivas por algunos usuarios, pero para los clientes más comprometidos, permite a los minoristas proporcionar alertas de productos y marketing más directamente.

37. Publicaciones de blog, anuncios de TV y otros contenidos

Los enlaces de blog son a menudo una idea posterior para algunos sitios, pero muchos (Net-a-Porter y Home Depot por nombrar dos) utilizan bien el contenido para la inspiración y la educación de productos.

Para los minoristas que tienen campañas de televisión en ejecución, puede pagar para reforzar ese mensaje para los visitantes de la página de inicio, mostrando la creatividad del anuncio y los productos destacados.

38. Iconos Clearpay/Klarna.

Pretty Little Thing coloca sus opciones De Klarna y Clearpay prominentemente en la página de inicio para que los compradores cómo pueden pagar en cuotas si lo prefieren.

39. Contenido social

Mostrar contenido de redes sociales es una forma útil de prueba social. Le dice al comprador que otras personas están comprando los productos y disfrutando de ellos, y pueden actuar como inspiración para los clientes potenciales.

Este contenido puede ser extraído automáticamente o seleccionado por el minorista, como con French Connection aquí.

40. Selección del editor

Este es un buen ejemplo de Net-a-Porter, donde los editores eligen sus estilos favoritos de la temporada.

41. Acerca del propietario

Esta es una oportunidad para que un minorista hable sobre la marca, tal vez enfatizando la historia de la marca, la procedencia de los productos u otros USP.

42. Cambiador de moneda y de idioma

Si vendes mucho a nivel internacional, es útil proporcionar la opción para que el usuario cambie de idioma y/o moneda.

También puede ayudar a detectar la dirección IP del usuario y empujarlo en la dirección correcta si está sirviendo el contenido incorrecto a ellos.

Esto es especialmente importante si sirve varias regiones en el mismo idioma y si las cestas son específicas de cada región.

43. Servicios de regalo

Si usted ofrece tarjetas de regalo o cajas, o tal vez proporcionar servicios de lista de bodas, entonces es bueno hacer estos accesibles a través de la página de inicio.

44. El temido bloque 'cookie'

Desde la aplicación del RGPD e incluso antes, los sitios han estado manejando las notificaciones de cookies de diferentes maneras.

Muchos homenajes de comercio electrónico ahora contienen barras de notificación de cookies en la parte superior o inferior de las páginas que los usuarios pueden aceptar o revisar cómo se utilizan sus datos de cookies.