Los 70 de consejos d diseño para tu ecommerce

Cómo mejorar la experiencia de su tienda en línea: consejos basados ​​en la experiencia de un diseñador y desarrollador

Según Statista, más de 2 mil millones de personas compran en línea cada año y el 75% lo hace mensualmente. Por lo tanto, no hay duda sobre la importancia de las tiendas en línea y, por lo tanto, es fundamental considerar los factores que impulsarán el éxito de una tienda en línea.

Descargo de responsabilidad

Esta presentación se centra en los aspectos específicos del comercio electrónico de un gran diseño. Se recomienda aplicar también todos los principios generales de diseño que no se enumeran en esta lección (proximidad, jerarquía, resaltado de CTA, contraste, accesibilidad, etc.). Vale la pena subrayar que el éxito de una tienda en línea depende también de la calidad del producto y del uso de estrategias de marketing adecuadas.

Mejores prácticas

1. Ofrezca más que una simple tienda

La publicación de Asos de una mujer acostada en la cama viendo Netflix

instagram.com/asos

Tenga un blog actualizado regularmente, comprométase a usar correctamente las redes sociales, bloguee regularmente y muestre cierta individualidad. Trate de ser coherente, auténtico y familiar, y no tenga miedo de mostrar el lado humano del negocio. Esto generará confianza, impulsará el compromiso y lo ayudará a conectarse con su audiencia.

En el ejemplo anterior, esta publicación creativa de asos obtuvo 3 veces más Me gusta que una publicación normal.

2. No obligue a los compradores a crear una cuenta

De acuerdo con NNGroup , “el pago de invitados con registro opcional simplifica el proceso de pago y da la bienvenida a los visitantes para que se registren cuando estén listos, en lugar de forzar un registro no deseado”. Por supuesto, el registro tiene muchas ventajas (p. ej., mantener el contenido del carrito de compras, almacenamiento entre dispositivos, etc.), pero al hacer que el registro sea obligatorio, algunos clientes potenciales no se convierten en compradores reales.

3. Agregue un enlace de contenido principal oculto por razones de accesibilidad

Página de inicio de Adidas con un botón de salto al contenido

adidas.es

El enlace ‘saltar navegación’ o ‘saltar al contenido principal’ está (casi) en todas partes en la web. Dado que optimizar la navegación del teclado es crucial para las personas con discapacidades, tener un botón de este tipo puede resultar útil. En la mayoría de los sitios web, se puede mostrar presionando TAB. Además, hay una serie de aspectos fundamentales de accesibilidad a considerar: etiquetado adecuado, soporte para zoom, comportamiento de enlaces y botones, color, contraste, etc.

4. Cure las cajas abandonadas

Ventana emergente que muestra dos botones: ver bolsa y pagar

adidas.es

Mejorar los CTA: el 53 % de los CTA tardan más de tres segundos en encontrar a los usuarios, según Ripen . Eso es demasiado tiempo para la capacidad de atención de hoy. Utilice pruebas A/B innovadoras para que a los clientes les resulte más fácil encontrar su CTA.

Botón ‘Seguir comprando’: el 24 % de los compradores dicen que abandonaron un carrito porque la navegación les parecía demasiado complicada. Muestre un botón “seguir comprando” después de que los usuarios hayan agregado algo a sus carritos. El objetivo es hacer que la conversión suceda, por lo que el visitante realiza una compra.

¿Envío gratis? El 44% abandonará un carrito debido a los costos de envío. Haga que el envío gratuito esté disponible con un umbral ligeramente superior al valor de su pedido habitual. La mayoría de las veces, la inversión se pagará sola. por ejemplo, ‘Si agrega X dólares adicionales en productos, recibirá envío gratis’.

Otras ideas: correos electrónicos de pago abandonados, ofertas limitadas para rellenos de carritos, una política de devolución visible, chat en vivo para responder preguntas, pruebas sociales en las páginas de productos (testimonios y reseñas que hablan de la calidad y el valor del producto), mostrar el contenido del carrito (con miniaturas), indicador de progreso en la página de pago, ventana emergente de intención de salida.

5. Crea una barra de anuncios

Dos ejemplos de barras de anuncios

asos.com y barnerbrand.com

Use la barra de anuncios para mostrar descuentos, campañas, actualizaciones de inventario o información relacionada con el mantenimiento.

6. Sea transparente

El envío y otras condiciones deben ser fáciles de encontrar. En mi tienda, noté que había muchos carros abandonados. Eventualmente (después de hablar con los usuarios) nos dimos cuenta de que la información de envío no era tan fácil de encontrar y los usuarios no completaban la compra debido a los costos de envío.

7. Crea escasez

Ideas: ediciones especiales, ofertas exclusivas, cuenta regresiva de entrega el mismo día o al día siguiente, colecciones de última oportunidad, ventas flash, ofertas de último día, hasta agotar existencias, lanzamiento limitado. Considere siempre cómo esto podría afectar la credibilidad de su marca. En Udemy, por ejemplo, he visto innumerables ofertas por tiempo limitado que se han relanzado continuamente. Encuentro estas tácticas agresivas y poco éticas.

8. Analizar datos O y datos X

Los datos cuantitativos incluyen análisis web, referencias y datos de conversión.  Los datos cualitativos incluyen comentarios, escucha pasiva y redes sociales.  Se pueden encontrar conocimientos procesables al combinar estos dos grupos.

Datos O y datos X

Según usertesting.com ,

Las profundidades de desplazamiento, los puntos de acceso de clics, las tasas de rebote, las tasas de conversión del sitio y más pueden ayudarlo a ver exactamente dónde sus clientes tienen problemas para interactuar con su sitio. Puede descubrir más fácilmente dónde se encuentran las experiencias rotas y arreglarlas para mejorar el recorrido del cliente.

Sin embargo, no es suficiente confiar en los datos recopilados por herramientas automatizadas. Aquí es donde intervienen los datos X: quiere saber qué piensan sus clientes sobre su tienda, sus servicios y su marca. Al combinar estos dos tipos de comentarios, puede elaborar un plan sobre cómo mejorar la experiencia de compra.

9. Usa enlaces claros a los productos

Encabezado Martin Guitar que muestra las siguientes categorías: guitarras, ukeleles, etc.

www.martinguitar.com

Si desea maximizar la oportunidad que ofrecen, asegúrese de usarlos correctamente. Incluya lo que tiene para ofrecer, cuáles son los beneficios y el valor de sus ofertas de productos/servicios, por qué las personas deberían confiar en usted y qué acción deberían tomar a continuación. Además, debe comunicar el tipo de productos que ofrece, así que no use solo la palabra “productos” en el encabezado.

10. Simplifica los pagos

Flujo de pago móvil con Apple Payment

Múltiples opciones: la integración de múltiples opciones de pago ayuda a que el proceso de pago sea más rápido y también reduce el abandono del carrito. Las opciones a considerar son Apple Pay, Google Pay, PayPal, Amazon Pay, etc.

Proveedores de pago seguro: el uso de servicios como Stripe Payment puede generar confianza y ayudará a los usuarios a sentirse seguros.

11. Adopta la gamificación

“”

fuente: Bond Brand Loyalty — Informe de lealtad de 2017

La gamificación es una técnica utilizada por los diseñadores, y no solo, para insertar elementos de juego, como tablas de clasificación, puntos de recompensa o programas de lealtad, en entornos que no son de juego para mejorar la participación del usuario.

En nuestro contexto, puede implementar un sistema de puntos (los usuarios acumulan crédito digital que pueden canjear por ventajas), ofrecer cupones y recompensas por referencia, y organizar concursos y obsequios para llamar la atención, retener a los usuarios y fomentar la lealtad. Tener un creador de viajes también es una opción emocionante: al igual que en un juego, el usuario crearía su perfil, basado en preguntas simples y divertidas, y mostraría productos que coinciden con sus preferencias.

¿Cómo ayudan estas tácticas? Aumentan tu visibilidad online y generan mucho tráfico (dependiendo de la creatividad de tu idea). Además, ayudan a convertir a los compradores ocasionales en clientes leales.

12. Lleva la búsqueda al siguiente nivel

Localización y sinónimos: en muchos escenarios, los usuarios no escriben palabras exactas, por lo que, en segundo plano, los algoritmos de búsqueda deberían ser más complejos (tipos de resultados: coincidencia amplia, coincidencia amplia modificada, coincidencia de frase, coincidencia exacta, etc.). En algunos casos, la búsqueda de sinónimos o traducciones puede hacer que el proceso sea más efectivo. Por ejemplo , Imágenes, imágenes en un marco, imágenes enmarcadas, fotos, pic deben mostrar todos los mismos resultados.

Independientemente de cómo lo maneje, el resultado final consiste en asegurarse de que los resultados sean relevantes para su visitante en función de dónde se encuentre en el mundo.

13. La parte superior de la lista de productos siempre debe comunicar la gama de productos.

Imagine a un usuario navegando por la categoría de zapatos en un sitio web de deportes con la esperanza de encontrar botas de fútbol. Se dirigen a la lista de productos, pero, en las 3 filas superiores, solo encuentran zapatillas deportivas y deportivas. El usuario llega a la conclusión de que este sitio web no vende botas y hojas de fútbol.

Hay una solución simple a este problema. Verifique sus listas de productos para asegurarse de que las primeras filas de productos reflejen con precisión el rango de lo que está ofreciendo. Si este no es el caso, cambie el orden y la apariencia de su lista de productos.

14. Mostrar productos en cuadrículas

Una cuadrícula de 4 columnas de zapatos.

adidas.es

El espacio que ofrecen las pantallas de escritorio es perfecto para las cuadrículas de productos. Las cuadrículas se alinean con el escaneo de patrón F y permiten a los compradores comparar múltiples productos rápidamente. Son especialmente efectivos para artículos que son fáciles de explicar en imágenes.

Para maximizar el beneficio de las cuadrículas, intente mantener el número de elementos por fila entre dos y cuatro. Con cinco o más productos, las cuadrículas se vuelven significativamente más difíciles de escanear.

Además, a veces las soluciones antiguas y doradas son las mejores.

15. Mostrar precio/unidad para paquetes múltiples

El precio por unidad está indicado para un lote de productos

No es un buen diseño, pero hicieron esto bien: snick-ambalaje.com

Este atributo es importante para las personas (o empresas) que compran al por mayor con frecuencia y desean asegurarse de obtener la mejor oferta.

16. Combinar campos en formularios de entrega y facturación

Formulario de pago combinando nombre y apellido

emag.ro

Dividir estos campos no es una buena idea. En algunos países, el orden es diferente (p. ej., en húngaro decimos primero el apellido), por lo que es mejor que sea sencillo. Para el recibo/factura, el nombre está bien en cualquier forma de todos modos.

17. Haga que la búsqueda sea accesible desde cualquier lugar

4 ejemplos de búsqueda en la cabecera

aboutyou.com, eurobarca.shop, thomann.de, cel.ro

Es posible que los clientes no necesiten barras de búsqueda en los sitios de comercio electrónico que solo venden algunos productos, pero a medida que crece la cantidad de productos disponibles, la búsqueda se convierte en una herramienta cada vez más importante para que los clientes identifiquen productos que se ajusten a sus modelos mentales.

PERO: el 43% de todos los visitantes del sitio van inmediatamente a los cuadros de búsqueda. Las barras de búsqueda fijas aseguran que la búsqueda esté disponible en todas partes en cada página, pero es mejor eliminar la búsqueda de las páginas de pago por el bien de la conversión.

TopTal

La entrada de búsqueda también puede tener un texto de sugerencia.

18. Aumenta la confianza con la prueba social

Insignia de mejor vendedor en la página de inicio de un producto

greatjonesgoods.com

La popularidad es un tipo de prueba social. Cuando las personas no están seguras de sí mismas, buscarán la guía de los actos de los demás. Esto es especialmente cierto para los compradores por primera vez. Marcar ‘Best Sellers’ es una opción a considerar. Las reseñas y las calificaciones tienen un propósito similar.

Shop contribuirá con un porcentaje de todas las transacciones para luchar contra el cambio climático.

Ejemplo de donaciones de Stripe de mi sitio web

También hay otras formas de motivar a los compradores (y construir la marca). Por ejemplo, Stripe ofrece la posibilidad de donar un porcentaje de todas las compras a la lucha contra el cambio climático.

19. Aumente la confianza con distintivos de seguridad

Muestre distintivos de seguridad y avales de terceros para brindar comodidad a los clientes. Cuando se trata de dinero, la seguridad y la transparencia son cruciales.

20. Ofrecer checkout como empresa

Las empresas también pueden comprar casi cualquier servicio/producto, por lo que es importante que, en este caso, los usuarios tengan la opción de ingresar los detalles de la empresa para que la factura se pueda enviar en consecuencia.

21. Enviar notificaciones de ‘Volver a estar disponible’

Cuando un producto no está disponible, los clientes continúan sin él o compran a su competidor. Con un recordatorio de disponibilidad, puede nutrir su relación con sus compradores y hacer que regresen a su página.

22. Proporcionar autocompletado

Dirección de envío autocompletar

adidas.es

La sugerencia automática hace que sea más fácil y rápido completar formularios. También puede predecir patrones de búsqueda comunes. Las búsquedas inteligentes pueden mejorar la UX mediante el uso de la detección automática del tipo de tarjeta de crédito o la adición instantánea de tarjetas de crédito.

23. Ponga no más de 3 o 4 elementos seguidos

“”

Hugo Jenkins: Tamaño y diseño de las cuadrículas de productos de comercio electrónico: un estudio de caso de investigación de usuarios

El diseño de 3 o 4 columnas podría ser una solución segura: un cliente podría escanear entre 50 y 70 elementos más cada cinco minutos utilizando diseños ampliados de 3 o 4 columnas en comparación con el diseño genérico más pequeño de más columnas. .

24. Mejorar imágenes

Un anillo de oro sobre una mesa de madera.

fuente: Peter McKinnon

Imágenes de alta calidad: asegúrese de que los activos (incluidas las imágenes ampliadas) no estén pixelados. Según el tamaño, trate de mantenerlo por debajo de los 79 kilobytes.

Admite deslizamiento horizontal: ¡Pulgares arriba! Permita que los clientes se deslicen fácilmente horizontalmente a través de fotografías de productos en lugar de desplazarse hacia abajo para ver una sucesión de imágenes.

Muestre imágenes contextuales: la contextualidad hace que los productos parezcan más convincentes, pero también comunica elementos adicionales de la marca. Por ejemplo, un anillo de plata queda muy bien junto a objetos de color y material similar.

25. No escondas las críticas negativas

Si todas las reseñas son demasiado positivas, la gente tiende a dudar de la calidad de las reseñas. Según ciertos estudios, el 30 % de los consumidores asume que las reseñas en línea son falsas si no hay reseñas negativas. La retroalimentación negativa te da la oportunidad de reaccionar positivamente. También se puede utilizar para mejorar la experiencia.

26. Muestra tu propuesta de valor en la parte superior de la página

Titular de Puma: SOLO VE GRANDE

puma.es

La propuesta de valor es un componente central de cualquier página de inicio. Comunica el propósito de un sitio y cómo una empresa es diferente y superior a sus competidores. Como piedra angular de la página de inicio, las propuestas de valor deben colocarse en la parte superior de la página, donde tienen más posibilidades de llamar la atención.

27. Mantén un tono consistente en la copia

“”

Introducción a la revisión de redacción de textos publicitarios de conversión

En el año 2000, la capacidad de atención promedio de un ser humano era de 12 segundos. ¿Este Dia? Otro estudio encontró que nuestra capacidad de atención es de solo 8 segundos. Menos podría serlo ahora que TikTok reina en el mundo de las redes sociales.

Aquí hay algunas cosas a tener en cuenta:

1. Las oraciones cortas parecen menos comprometidas

2. Las oraciones simples sin estructuras complicadas tienen el mismo impacto

3. No debe haber más de 80 caracteres por línea.

4. Los párrafos cortos (3 o 4 líneas, como máximo) facilitan el escaneo. Los grandes bloques de texto son abrumadores.

28. Evita la redundancia y las explicaciones excesivas

“”

Cualquier palabra que sea vaga cuando podría ser específica, compleja cuando podría ser sencilla, no es una palabra que desee usar.

Convencer al usuario de comprar

29. Genera zumbido

“”

Generar entusiasmo (publicación de Absolut vodka) y marketing de influencers

Lo más probable es que no venda su producto sin promoción. Las posibles opciones incluyen marketing de contenido, comunicados de prensa, marketing por correo electrónico, trucos de relaciones públicas o acciones de personas influyentes. Quieres que la gente hable de tu marca.

30. Ofrezca envío gratis, devoluciones fáciles y otros

Envío gratuito resaltado en la barra de anuncios

Acerca de ti

Cuando se trata de hacer una venta, endulzar la olla es uno de los trucos más antiguos del libro. Los incentivos de compra, como el envío gratuito, los descuentos urgentes, las muestras de bonificación, las funciones gratuitas adicionales y las devoluciones sin complicaciones pueden reducir la fricción de compra y atraer a los clientes para que verifiquen sus compras.

Inc.com

En cuanto al envío gratuito: por supuesto, requiere una planificación financiera precisa, el estándar es que el cliente puede beneficiarse de la entrega gratuita si el valor de su pedido supera una cierta cantidad.

31. Hablar dulcemente a los clientes existentes

Por ejemplo, ‘Gracias por hacernos un pedido y así contribuir a nuestro sueño de ganarnos la vida algún día con nuestro pequeño y entusiasta negocio familiar. Si podemos ayudar de alguna manera, por favor contáctenos.’

Según los estudios, atraer nuevos clientes es sustancialmente más costoso que convencer a los clientes existentes para que continúen usando sus productos o servicios.

Es por eso que hacer un seguimiento de los clientes después de que hayan realizado una compra es crucial. Agradézcales por su compra y envíelos a un embudo de ventas de respuesta automática donde pueden aprovechar las ofertas especiales. También puede confiar en sus comentarios y convertirlos en formas de mejorar sus productos y servicios.

32. Presta atención a la semejanza estética

Diseño feo vs limpio

Izquierda vs Derecha

¿A cuál preferirías comprar? Podrías ser un verdadero hippie si es el de la izquierda. La semejanza simplemente establece que tiendes a decir “sí” a las personas que te gustan. Lo mismo se aplica a los sitios web.

Pero, ¿por qué el de la derecha funciona mejor (la mayoría de las veces)? Las razones principales son la simplicidad, el diseño sin ruido, la jerarquía clara, el uso uniforme del color, la facilidad de escaneado debido al bajo número de elementos que se muestran, etc.

33. Anclaje de precios

En una lista de productos de zapatos, se cruza el precio más alto, se amplía el precio más bajo

epantofi.ro

Use un punto de precio inicial para establecer el valor de apertura contra el cual los clientes pueden percibir el precio final como la mejor opción.

34. No subestimes el poder de la familiaridad

Use un diseño simple que sea de baja complejidad y poco desorden. No te enfurezcas demasiado contra la máquina. Apéguese a un diseño prototípico que funcione como se espera para la industria del comercio electrónico.

“”

Use palabras y frases que sus visitantes encontrarán familiares y fáciles de escanear. Habla como ellos hablarían.

35. Incorpora sesgo atencional

En el pie de página de una tienda: bestsellers hechos éticamente

madetrade.com

El sesgo atencional establece que prestas más atención a los factores emocionalmente estimulantes y minimizas otros factores. Cuanto más intenso y conmovedor es algo, más atención le prestas. Eso tiene sentido, ¿verdad? Por eso el miedo y el sexo tienden a ser tan persuasivos.

36. El marketing por correo electrónico todavía tiene poder

Este no es un método obsoleto, pero a veces necesitas ideas más creativas que las estándar (perezosas).

Correos electrónicos genéricos: puede enviar notificaciones a sus suscriptores sobre nuevos productos, descuentos, ofertas y otras ofertas especiales. Este tipo de correo electrónico tiende a no ser nunca leído.

Correos electrónicos creativos: la venta blanda es una forma más emocionante de marketing por correo electrónico que gira en torno a educar a su audiencia o simplemente mantenerlos comprometidos entre compras.

Opciones de navegación

37. Muestra las categorías más importantes en la parte superior

“”

iStyle.ro

Los enlaces principales en el encabezado deben basarse en las categorías de productos raíz. Estos siempre estarán visibles (excepto durante el pago). Las subcategorías se pueden mostrar (haga clic o pase el mouse) debajo de las categorías principales. Este es un procedimiento estándar que funciona para la mayoría de las tiendas en línea.

38. ¿Cómo nombrar tus categorías?

“”

thomann.de

¡Haz un esfuerzo consciente! Para empezar, informa a los visitantes de la gama de productos que vendes de un vistazo, lo que les permite decidir si explorar más tu sitio o abandonarlo. En segundo lugar, estos nombres de categoría son factores clave desde una perspectiva de SEO.

39. Navegación personalizada basada en el comportamiento del cliente

“”

swarowski.com (concepto)

Si hay datos que muestran que un usuario en particular normalmente compra un producto determinado en el sitio, sería inteligente resaltarlo en la barra de navegación básica.

40. La mágica opción ‘Ver todo’

Mostrar todos los botones encima de las categorías de productos

objetivo.com

Según el Instituto Baymard ,

El 38 % de los sitios no tienen la opción “Ver todo” en cada subcategoría. Los usuarios que no han decidido por completo lo que quieren, que buscan inspiración o que no han podido inferir la taxonomía correcta del producto, a veces prefieren obtener una lista enorme de productos para explorar , incluso cuando el alcance es tan amplio que la lista puede contener miles de productos de un tipo casi aleatorio.

Por supuesto, una vez en esta lista que muestra todos los productos, el usuario buscará opciones de filtrado.

41. Considere tener un retraso de desplazamiento en los menús desplegables

La necesidad de demora de vuelo estacionario es un tema controvertido. Algunos estudios sugieren que se recomienda utilizar un retraso de 300 a 500 milisegundos antes de mostrar el contenido de un menú desplegable. Esto es para evitar interacciones y parpadeos no intencionales.

Mejora adicional: aumentar el área de desplazamiento.

42. Resalta el alcance actual

Esto puede dificultar la navegación del usuario y esta confusión innecesaria puede degradar la experiencia. Las migas de pan por sí solas no son suficientes, muchos usuarios todavía consideran la navegación principal como su guía principal. Puede resaltar el alcance actual cambiando el color del enlace activo, cambiando el peso de la fuente, subrayándolo, etc.

43. Destacar subcategorías en la página de detalles de la categoría principal

En la categoría Muebles, las subcategorías se enumeran con imágenes;  por ejemplo, asientos, camas, etc.

ikea.com

Según el Instituto Baymard , el 48% de los sitios no presentan subcategorías como contenido principal en las páginas de categorías intermedias. Las páginas de categorías intermedias funcionan mejor cuando se enfatiza la navegación por subcategorías, con las subcategorías destacadas en la parte superior de la página.

44. Navegación Nest, si es necesario

“”

ikea.com

Para una tienda web con una amplia gama de productos, es una buena idea colocar los productos en la navegación anidada para que sea más fácil encontrar lo que el usuario está buscando.

comercio electrónico móvil

45. Diseño Responsivo + Adaptativo

Obviamente.

46. ​​Incorporar inicio de sesión biométrico

Pantalla móvil con inicio de sesión con huella digital

Google

La autenticación de huellas dactilares y reconocimiento facial acelera los inicios de sesión, ya que elimina la necesidad de iniciar sesión con un nombre de usuario y una contraseña. Además, puedes usarlo para validar diferentes métodos de pago. A los usuarios les encantan las cosas suaves.

47. Envuelva la navegación; mostrar la búsqueda en la mitad superior de la página

Navegación y búsqueda en la parte superior de los sitios web móviles

thomann.de | ikea.es | asos.com

Es una práctica común ocultar la navegación en el móvil detrás de un menú de hamburguesas (o similar). Sin embargo, el motor de búsqueda debe estar siempre visible, ya que es así como una parte importante de los usuarios llegan al producto que buscan.

La navegación también debe estar presente en todas las pantallas (excepto en el pago). Por cierto, arriba del pliegue significa en la sección superior de la página, por lo que es visible cuando el sitio se carga por primera vez.

48. Hacer sugerencias cuando no se encuentren resultados de búsqueda

“”

swarowski.com | sephora.com

Puede suceder que el usuario haya escrito mal la palabra que está buscando, en cuyo caso incluso puedes intentar adivinar lo que realmente quiso escribir. También es recomendable mostrar algunas opciones para que el usuario tenga más posibilidades de encontrar productos en otros casos. Siempre querrás asegurarte de que permanezcan en tu sitio web.

49. Incluye una barra de progreso

Barra de progreso en la parte superior durante el flujo de pago móvil

fuente: Mobbin

A los compradores (móviles) les gusta saber dónde se encuentran en el proceso de realizar una compra y hacia dónde se dirigen a continuación. Una barra de progreso facilita mostrar cuánto tiempo tendrán que permanecer en su aplicación antes de que se complete su compra.

50. Apunta a retratos

Imágenes altas orientadas a retratos en tiendas móviles

aplicación Zara | aplicación Asos | aplicación IKEA

En dispositivos móviles, las imágenes orientadas a retratos ocupan más espacio en la pantalla, por lo que los detalles son más visibles y las características de las imágenes de alta calidad son más notorias.

51. Habilitar zoom de imagen

“”

hallgatlak.tienda

El zoom de la imagen es importante para permitir a los usuarios ver mejor los detalles del producto y también es importante para mejorar la accesibilidad.

52. Dale sabor a las cosas con AR (realidad aumentada)

“”

Aplicación IKEA Place

Los especialistas en marketing pueden emplear la realidad aumentada para captar clientes e impulsar las ventas de las aplicaciones de comercio electrónico. Se ve profesional y ayuda a colocar los productos en un entorno real, optimizando así el proceso de selección. Actualmente, esta tecnología se utiliza principalmente en dispositivos móviles.

Por ejemplo, IKEA Place usa AR para mostrar productos IKEA en la casa de un usuario.

53 Minimice el esfuerzo de escritura del usuario

“”

Si el usuario necesitara ingresar datos sin procesar (por ejemplo, ordenar 100 piezas de un artículo determinado), puede combinar pasos con un campo de entrada

Según Nick Babich ,

Escribir tiene un alto costo de interacción; es propenso a errores y requiere mucho tiempo en los escritorios, pero en una pantalla táctil es el doble de difícil. En la mayoría de los casos, la página de detalles del producto no debe tener ningún campo que permita a los usuarios ingresar datos sin procesar.

Al hacerlo, evitará que los usuarios cometan errores. Por ejemplo, cuando sus usuarios necesitan proporcionar la cantidad de elementos, puede usar steppers para eso.

54. Reemplace los carruseles giratorios automáticos con imágenes estáticas

“”

adidas.es | epantofi.ro

Imagine el siguiente escenario: nuestro usuario está leyendo el texto de la imagen o preparándose para tocar la pantalla cuando el carrusel gira repentinamente. Frustrante, ¿verdad?

Según el Informe de pautas de comercio electrónico móvil de CXL , solo el 1% de los visitantes hicieron clic en el carrusel, por lo que no parece valer la pena el estado real requerido. Los usuarios también podrían confundirlos con anuncios e ignorarlos.

Utilice imágenes estáticas en su lugar.

55. El menú de navegación debe desplegarse o deslizarse

“”

nike.com | iStyle.ro

¡No intentes reinventar la rueda! El menú de navegación debe ser fácil de encontrar, ocupar poco espacio y expandirse como un menú desplegable desde la parte superior o deslizable.

56. Máximo dos columnas de productos

“”

hallgatlak.shop | adidas.es

A medida que aumentan los tamaños de pantalla de los dispositivos móviles, las 2 columnas se han vuelto más populares, mientras que tener una sola columna con cada elemento ocupando 1/3 o 1/4 de la pantalla es una opción segura.

57. Facilite el escaneo fácil al ‘fragmentar’

Parte de la información está oculta debajo de un acordeón.

nike.com | acerca de ti.ro

Según copyblogger ,

El 80 % de las personas lee los titulares, mientras que solo el 20 % lee el cuerpo del texto. Esto puede no parecer 100% aplicable a las tiendas de comercio electrónico, pero ilustra cómo los humanos leemos en línea: generalmente no lo hacemos.

Escaneamos. Por lo tanto, evite la sobrecarga cognitiva.

Otros aspectos

58. Notificaciones automáticas por SMS/correo electrónico

Los clientes rara vez volverán a visitar el sitio web para comprobar el estado de su pedido, por lo que es preferible mantenerlos informados por correo electrónico y SMS.

59. Conéctese a las tiendas de redes sociales

“”

Fuente de la imagen: Vogue Business

Las tiendas de Instagram permiten a los vendedores de comercio electrónico vincular sus catálogos de productos a sus perfiles de Instagram. Los productos se pueden promocionar directamente en Instagram a través de publicaciones e historias, en la pestaña Explorar y en una pestaña especial Comprar .

El objetivo es hacer que la promoción del producto sea lo más simple posible y limitar la cantidad de navegación multiplataforma que los clientes potenciales deben realizar para descubrir la página donde pueden comprar el producto de interés. También puedes lograr algo similar con Facebook.

60. Mejora los tiempos de carga

Posibles soluciones: minimizar las solicitudes HTTP, habilitar la compresión, habilitar el almacenamiento en caché del navegador, minimizar los recursos, optimizar las imágenes, priorizar el contenido de la mitad superior de la página, reducir la cantidad de complementos, etc.

61. Ten descripciones de productos breves y sencillas

Es ventajoso si el cliente puede leer la información más relevante sobre un producto en unos pocos segundos. Si están interesados ​​en más detalles, hay una sección separada para este propósito después de la breve descripción.

PERO: Para ciertas categorías de productos (p. ej., herramientas tecnológicas), es beneficioso si el nombre del producto incluye las especificaciones más fundamentales. Esto permite a los usuarios comparar rápidamente diferentes productos y encontrar lo que buscan.

62. Implemente un panel de administración utilizable

Además de los requisitos fundamentales de un sistema CMS, hay otros aspectos a considerar para un sitio web de comercio electrónico:

  • Gestión de facturas: la generación de facturas/recibos para cada transacción es de vital importancia desde una perspectiva administrativa/legal. Es importante asegurarse de que los servicios específicos estén conectados.
  • Gestión de inventario: Tener un inventario actualizado que se modifica automáticamente después de cada transacción ayuda a organizar mejor los productos y tiene una contabilidad impecable.
  • Procesadores de pago: numerosas pasarelas de pago facilitan el proceso de pago y ayudan a generar confianza con los clientes.
  • Seguimiento del envío: el seguimiento del envío requiere la integración de proveedores de envío/entrega y el envío de actualizaciones a los compradores.

63. Opción de filtrado: barra lateral a la izquierda

“”

nike.com

Según un estudio de Matt Isherwood , aproximadamente el 80% de todas las tiendas online utilizan una barra lateral para filtrar, por lo que la mayoría de los usuarios están acostumbrados a verla allí. Dado que esta es una característica clave de todo comercio electrónico, es mejor ceñirse a los estándares.

64. Opción de filtrado: barras horizontales

“”

redbullshop.es

A veces queremos crear algo diferente, en este caso, vale la pena considerar las barras horizontales como filtros: una de sus ventajas es que permiten que el usuario mantenga su atención en un lugar. En cualquier caso, un usuario no puede hacer nada más al mismo tiempo. Preferible si no hay muchas opciones de filtro.

Pero, una vez más, usar barras horizontales no es una solución estándar y los usuarios siempre tendrán que desplazarse hacia atrás hasta la parte superior de la página si desean ajustar los filtros.

65. Resalta siempre los filtros activos

Si hay varias opciones, coloque las seleccionadas en la parte superior de cada categoría y también ofrezca una opción para restablecer todos los filtros.

66. Filtrado interactivo vs por lotes

Este es un tema divertido, me gusta mucho cómo habla Kate Shokurova sobre estas dos opciones:

El filtrado por lotes significa que la página se actualiza y brinda resultados solo después de que haya realizado algunas selecciones y haya hecho clic en el botón Aplicar. El filtrado interactivo es cuando el sistema reacciona a cada una de sus elecciones y actualiza la página cada vez. Es más conveniente y requiere una acción de clic menos. ¡Pero solo cuando se hace rápidamente, por supuesto!

67. Permitir múltiples selecciones

Para evitar errores y malentendidos por parte del usuario, así como para recordarle los filtros disponibles, es una buena idea permitir realizar varias selecciones en una misma categoría a la vez. Esto puede parecer una idea muy simple, sin embargo, el 32% de los sitios de comercio electrónico no se adhieren a este principio.

68. Habilitar clasificación

La clasificación de los productos forma parte del proceso de filtrado. Es importante respetar los criterios básicos (precio, alfabético, por calificación), el resto depende del tipo de producto.

69. Reemplace ‘No se encontraron productos’ con contenido creativo

Si algún criterio de filtrado devuelve el valor “0”, debe excluirse de la lista de características del producto disponibles o visualizarse como inactivo por el diseño.

Un ejemplo es el sitio web de Nike, donde todas las opciones inexistentes se filtran al hacer selecciones.

En pocas palabras: imagina que tienes una tienda en línea que vende camisetas y pantalones rojos y azules. Un usuario primero selecciona el rojo de las opciones de color, pero no tienes ningún pantalón rojo, solo camisetas rojas. Entonces, después de que el usuario seleccione el rojo de la lista de colores, elimina los pantalones de la opción de filtro de categorías de productos. Prácticamente les estás ayudando a no caer en un callejón sin salida.

En pocas palabras: imagina que tienes una tienda en línea que ofrece camisas y pantalones de colores. En la barra lateral de filtrado, un usuario selecciona rojo de las opciones de color, pero solo tienes camisas rojas y no pantalones rojos. Entonces, después de que el usuario seleccione rojo de la paleta de colores, elimina los pantalones del grupo de categorías de productos. Prácticamente los estás ayudando a evitar un callejón sin salida.

70. Filtrado en el móvil

Los filtros se pueden envolver en un panel lateral. La activación de estos filtros se realiza haciendo clic en el botón Aplicar filtros . Tener este botón es importante , de lo contrario, no está claro qué sucede después de descartar este panel.

Fuente: https://uxdesign.cc/a-designers-70-ecommerce-tips-with-real-examples-3b92b2c672f9

Leave a Replay

Regístrate para recibir las novedades