Consejos de diseño de Shopify y mejores prácticas de UX

Shopify impulsa a más de medio millón de empresas de comercio electrónico en 175 países. Desde 2012, la cantidad de comerciantes en la plataforma Shopify ha crecido un promedio del 74 % anual, y estos comerciantes han logrado más de $55 mil millones en ventas como resultado de que Shopify es una de las plataformas de comercio electrónico más conocidas y fáciles de usar en la actualidad.

Con Shopify ocupándose de los dominios, el alojamiento, todo el back-end y algunas funciones de front-end, se puede gastar más tiempo, dinero y recursos en el diseño de UX. Para 2021, se espera que las ventas de comercio electrónico en todo el mundo alcancen un nuevo máximo de 4,9 billones de dólares, y dado que el diseño de experiencia de usuario de calidad inferior es uno de los mayores contribuyentes a las compras abandonadas, está más que claro que la implementación de las mejores prácticas de comercio electrónico seguirá demostrando ser muy eficaz.

En este artículo, exploraremos los principales consejos de diseño de Shopify.

¿Qué características tiene Shopify?

Shopify viene con todas las características que esperarías de una plataforma de comercio electrónico superior:

• Integración con pasarelas de pago externas, como Stripe y PayPal
• Acceso a Shopify Payments, con tarifas cero en comparación con las opciones externas
• La capacidad de permitir el pago con tarjeta de regalo o crédito de la tienda
• Una página de pago personalizable (solo para clientes de Shopify Plus)
• La opción de cuentas de usuario o checkout de invitado
• Páginas estáticas (p. ej., Política de privacidad o Términos y condiciones)
• Landing pages con contenido promocional
• Acceso con contraseña para tiendas en desarrollo
• Variantes de productos con una gama de opciones personalizables
• Colecciones inteligentes para automatizar la categorización de productos
• Funcionalidad de búsqueda y etiquetado para ayudar a descubrir productos
• Funcionalidad de blog con la capacidad de incrustar productos en publicaciones.
• Una API para ayudar a los desarrolladores a crear sitios web dinámicos y aplicaciones móviles

Impulsar el descubrimiento de productos de comercio electrónico

De manera similar a la forma en que las tiendas físicas están organizadas por departamento para que los clientes puedan ubicar artículos específicos preguntándole a un miembro del personal, los compradores en línea necesitan la capacidad de navegar, filtrar y buscar para que puedan encontrar lo que buscan fácilmente y rápidamente

El 40% de los clientes de comercio electrónico abandonan los sitios web que tardan más de 3 segundos en cargarse, lo que sugiere cuán impacientes son cuando se trata de descubrir productos. Afortunadamente, Shopify tiene una serie de características que facilitan la creación de una navegación personalizada, la organización de productos y categorías, y la implementación de la funcionalidad de búsqueda.

Navegación personalizada

Presentar al cliente demasiadas opciones puede causar parálisis en el análisis (cuando hay demasiadas opciones disponibles para tomar una decisión de manera efectiva, se produce frustración y abandono). Al diseñar una navegación personalizada, podemos priorizar los productos y las "colecciones" que generan conversiones de manera más efectiva, por ejemplo, mostrando visiblemente la colección "Escritorio" si los productos de escritorio son los más populares. Estas navegaciones personalizadas también se pueden editar en Shopify CMS para habilitar pruebas A/B casuales.

Hablando visualmente, los temas de Shopify que mejor convierten muestran el título de la colección con claridad y usan suficientes espacios en blanco para ayudar al usuario a identificar fácilmente lo que está buscando entre todos los productos, colecciones y páginas que se ofrecen.

Colecciones

Una colección es un grupo organizado de productos similares. Los productos se pueden clasificar en colecciones de forma manual o se pueden clasificar automáticamente en función de criterios coincidentes (por ejemplo, si el título del producto contiene una determinada palabra clave, se le ha asignado una determinada etiqueta o se encuentra dentro de un rango de precios específico). Las colecciones también pueden ser temporales (es decir, de temporada o para una venta por tiempo limitado), lo que garantiza que los diseños de los sitios web de Shopify sean siempre relevantes, oportunos y, sobre todo, altamente generadores de conversiones.

Si bien estas colecciones se definen detrás de escena, es útil que los diseñadores de comercio electrónico estén al tanto de esta funcionalidad al diseñar para Shopify.

Etiquetas de productos

Las etiquetas mostradas/visibles ayudan a los clientes a encontrar productos similares y, como se mencionó anteriormente, también se pueden usar internamente para crear colecciones. Sin embargo, el mayor beneficio de las etiquetas radica en el hecho de que se pueden usar para crear una búsqueda por facetas , lo que permite a los clientes filtrar productos en función de un atributo de definición etiquetado como "Amarillo".

Tenga en cuenta estos consejos de diseño de Shopify:

• Para una aclaración adicional, muestre qué filtros se aplican.
• Permita que los clientes eliminen filtros para ampliar su búsqueda.
• Trunca los filtros para mostrar solo los más populares a primera vista.

Búsqueda

La funcionalidad de búsqueda es útil para los clientes que saben exactamente lo que están buscando y es especialmente importante para los compradores móviles que encuentran frustrante navegar y filtrar debido a la incomodidad natural de interactuar en un dispositivo móvil.

Estas son las mejores prácticas de Shopify a tener en cuenta al diseñar experiencias de búsqueda:

• Nunca oculte el cuadro de búsqueda; reducir la fricción haciéndolo inmediatamente disponible.
• Coloque la búsqueda donde los clientes esperan que esté (es decir, arriba a la derecha o centralizada).
• Muestra todo el cuadro de entrada, no solo el icono de búsqueda.
• Incorpore la funcionalidad de autocompletar para ayudar a los usuarios a buscar más rápido.
• Diseñe para el error humano mediante el uso de resultados sugeridos y autocorrección.
• Guarde las búsquedas de los usuarios y envíe correos electrónicos de seguimiento si no se realizó ninguna venta.

Prácticas recomendadas de Shopify para páginas de productos

Shopify ofrece todas las funciones necesarias para enganchar a los compradores de comercio electrónico y guiar a los usuarios con fluidez directamente al pago. Si combinamos estas características con las mejores prácticas de comercio electrónico, podemos empujar el número de pagos abandonados por debajo de la estadística promedio.

Use imágenes cautivadoras de productos

Lo que hace que un sitio web de comercio electrónico sea bueno son las imágenes que cautivan emocionalmente a los usuarios. Con ese fin, Shopify permite cargar múltiples imágenes y variantes de productos. Sin embargo, como práctica recomendada de Shopify, muestre al menos una de estas imágenes de productos a escala (es decir, rodeada de otros objetos para ilustrar el tamaño del producto) para establecer expectativas.

Los clientes desean realizar una investigación exhaustiva del producto antes de comprometerse a comprarlo para asegurarse de que todas las imágenes del producto sean vívidas, de alta calidad y ampliables.

Mostrar información clara del producto

Un número impactante (pero no sorprendente) de clientes de comercio electrónico abandonan sus carritos de compras debido a la falta de información sobre el costo real. El 60 % de los clientes mencionan costos inesperados (p. ej., envío, impuestos, tarifas) como el motivo del abandono del carrito y el 23 % no puede calcular el costo total por adelantado. La falta de transparencia es una forma segura de acumular conversiones en los sitios web de comercio electrónico, así que ten en cuenta estos consejos y trucos de Shopify:

• Utilizar técnicas de divulgación progresiva para estructurar la información con claridad.
• Muestre un desglose completo de los costos por adelantado.
• Comunicar la propuesta de valor de forma explícita.
• Haga que el botón comprar ahora/agregar al carrito sea visualmente distintivo.

Genere confianza y seguridad

Según el Instituto Baymard, la falta de confianza se cita como la razón por la que el 19 % de los clientes abandonan la compra. Afortunadamente, todas las tiendas Shopify se envían con SSL (pago seguro) de forma predeterminada, pero también permiten que los clientes dejen comentarios como prueba social.

La prueba social es una forma innegable de disparar las conversiones al potenciar la confianza en los sitios web de comercio electrónico . Según BrightLocal, el 88 % de los consumidores confía tanto en las reseñas en línea como en una recomendación personal, por lo que es esencial animar a los clientes anteriores a que dejen reseñas e indicarlo en el recorrido del cliente. La mayoría de los temas de Shopify también aprovechan el marcado Schema para integrar estas calificaciones directamente en los resultados de búsqueda.

Además de la validación social, considere aumentar la confianza del cliente implementando una solución de chat en vivo como Intercom, Zendesk, Drift o Kayako. Shopify permite la integración con servicios de terceros a través de su tienda de aplicaciones y mediante instalación manual.

Mostrar recomendaciones de productos relacionados

Todas las empresas líderes de comercio electrónico aprovechan las estrategias de venta cruzada y venta adicional. Las etiquetas, combinadas con integraciones de análisis y pruebas A/B, como las recomendaciones web de Optimizely, pueden ayudar a los diseñadores a empoderar a las empresas para mejorar las tasas de conversión al mostrar elementos alternativos o adicionales en los que los clientes pueden estar interesados.

Integrar la experiencia de compra Personalización

Las integraciones como las personalizaciones web de Optimizely, en combinación con las colecciones y etiquetas de Shopify, permiten a las empresas basadas en datos segmentar audiencias en función de sus intereses e historial de compras anteriores y cambiar el contenido de la página en consecuencia.

Con técnicas de diseño anticipatorio, las tiendas Shopify pueden mostrar contenido más relevante, manteniendo a las audiencias involucradas por más tiempo y, por lo tanto, es más probable que se conviertan en una venta. La personalización es clave para impulsar los resultados financieros de cualquier negocio de comercio electrónico.

Optimización de pago

Pago como invitado frente a cuentas de clientes

Según el Instituto Baymard, "el sitio quería que creara una cuenta" es la segunda razón más común (con un 35 %) por la que los clientes abandonan su proceso de pago sin comprar nada. Shopify recomienda permitir el pago de invitados (especialmente en dispositivos móviles) y, con ese fin, es la opción predeterminada para deshabilitar las cuentas de los clientes.

Identificar fallas de UX y reducir abandonos

Intentar resolver pagos abandonados sin un análisis sólido es tan efectivo como buscar un gato negro en una habitación oscura. La optimización de las experiencias de los usuarios y los flujos de pago funciona mejor cuando se trata de un proceso basado en datos.

Los diseñadores de Shopify pueden conectar Google Analytics a Shopify y configurar un embudo de objetivos que, después de recopilar suficientes datos, ilustrará exactamente dónde los clientes deciden que no quieren continuar con su compra.

Para obtener los mejores resultados, integre Shopify con herramientas como Crazy Egg, Hotjar y FullStory para observar estas áreas problemáticas con más detalle mediante mapas de calor y grabaciones de visitantes.

Conclusión

Para que los diseñadores puedan comunicar mejor los beneficios y capacidades de la plataforma Shopify y aprender qué soluciones puede y no puede proporcionar a los clientes, lo mejor es abrir una tienda de demostración gratuita. Además, los mejores diseñadores de comercio electrónico pueden convertirse en Shopify Experts registrados, lo que agrega más credibilidad a su currículum como diseñador de sitios web de Shopify.

Lectura adicional en el blog de diseño de Toptal:

• Lea el blog de Shopify para obtener más consejos y trucos de Shopify.
• eCommerce UX – Principios y estrategias de diseño esenciales
• UX de comercio electrónico para la experiencia móvil
• Cómo enganchar a los compradores de comercio electrónico a través del diseño UX
• Diseño receptivo: mejores prácticas y consideraciones