Back
Atrás

Elementos de diseño y UX en tu tienda Shopify

Richard Sutherland
|
Carola Dinamarca
|
October 8, 2019
Conversion
Conversión

Desde el mismo nacimiento de Internet, es que la gente ha intentado hacer negocios con esta herramienta.¿Cómo hacer dinero con este nuevo recurso? Al comienzo tomó tiempo en que los usuarios ganaran confianza, pero hemos llegado a un momento en que la gente disfruta de comprar online. ¿Por qué?

A comienzos de los 2000, la experiencia de usuario (UX) online era un concepto poco conocido. La World Wide Web era como un desierto en el lejano oeste; había pocos elementos decorativos para diseños amigables y nadie sabía tampoco cómo debía verse una buena tienda virtual. Con JavaScript y Flash, llegó la opción de crear el propio look de tu web y hacerla tomar el camino que tú quisieras. Poco a poco, comenzaron a querer diferenciarse los desarrolladores y diseñadores web, para sobresalir entre el resto. En muchos casos, estos experimentos virtuales terminaron en errores que llevaron a sus compañías a desaparecer.

Usando una plataforma bien establecida como Shopify para vender online, te permite salvar de gran parte de estos errores del pasado. Shopify y otras plataformas siguen convenciones de diseño que se han probado como las más efectivas, para que no tengas que "reinventar la rueda" ni preocuparte en exceso de este tema. Teniendo lo básico que es funcional, solo debes preocuparte de darle el pequeño giro a la experiencia de tu usuario, que la adecúe a tu particular nicho, marca y cliente.

Pipsnacks usa Shopify con un tema personalizado, en su venta de snacks saludables

Una interafaz familiar

Una interafaz familiar y que funcione como la mayoría de los usuarios esperarían que lo haga, gana ante cualquier diseño muy "flashy" o movedizo en cuanto a éxito de ventas - por más creativo que este último sea. El usuario se siente cómodo en un sitio que parece familiar o conocido, que funciona como aquello que ya conoce, opuesto a alguno lleno de botones y links en lugares extraños (o peor aún, con sorpresas inesperadas).

Supongamos que estás eligiendo un nuevo modelo de teléfono y te entregan uno que tiene el teclado en un orden diferente al que acostumbras. Lo más probable es que prefieras el modelo que te es sencillo usar, el que sea más funcional. No importa la cantidad de nuevas funciones que tenga, probablemente no creará mucha confianza - o al menos, no será sencillo ganarla.

Tu tienda e-commerce, como un teléfono nuevo, debe ser funcional y verse bien. Estudios demuestran que sitios web estéticamente agradables se perciben como más user-friendly por sus usuarios. Si además realmente funciona de manera amigable, entonces estarás entregando a tu usuario aquello que espera.

Scentos ofrece un sitio único y vibrante con elementos que puedes arrastrar en el sitio, llamando la atención de su audiencia infantil. Pese a su look un poco diferente, su funcionalidad es percibidad como amigable y familiar por parte de los padres.

Que la compra sea "invisible"

La tienda e-commerce que gana es la que hace las cosas sencillas. Tu tienda debe intentar ser transparente en el proceso de compra, tanto que este sea casi invisible. Todo elemento de interacción con tu usuario debe apoyar en una compra satisfactoria. Puntos a tomar en cuenta son

  • Cada vez que en tu tienda ocurre algo inesperado, sobre todo cuando el usuario no tomó participación activa en esto, crea confusión.
  • Cada vez que aparece "algo" en el proceso de compra, le da la opción al usuario de cambiar de idea.

Ejemplos de elementos comunes que puedes evitar, pues el usuario no tiene el control de esto y son elementos inesperados, son los pop ups en sitio y sliders que cambian automáticamente.

Elecciones de interfaz de usuario

Toda tienda Shopify tiene tres grupos básicos de interfaz de usuario - elementos de has three basic user interface groups - input elements, navigation elements, and informational elements.

  • Elementos de entrada son aquellos que permiten a tu cliente ingresar detalles o realizar una elección. Incluyen campos de texto, botones y cajas de check.
  • Elementos de navegación permiten a tu cliente moverse alrededor de tu sitio para encontrar aquello que busca. Consideran banners, páginas, y buscadores.
  • Elementos nformacionales entregan a tu cliente información relevante a su proceso de compra, como notificaciones y barras de progreso.

Elegir la combinación correcta de estos elementos en tu "embudo" de ventas es como creas la experiencia de usuario casi perfecta. Los elementos hacen la diferencia en cómo interactúa el usuario con tu sitio. Es una de las cosas más difíciles de hacer, así que probablemente quieras hacer diversas pruebas para ver cómo funciona cada una.

Cada página debe ser considerada en sí misma y está diseñada para un objetivo particular. Alguien que llega a tu inicio por primera vez está en otra etapa que alguien que revisó la página de una categoría. Cada etapa debe ser considerada y mejorada.

En honor a tu tiempo, discutiremos los pasos que tu típico cliente realizaría en tu tienda Shopify y las consideraciones de UX para cada uno.

1 - Primera impresión

El inicio de Fronks dice en pocas palabras todo lo que debes saber de los productos y la marca.

Sin duda, gran parte de la experiencia de usuario se compone de la impresión que se lleva la primera vez que visita el sitio. Puede ser cualquier página de este, aunque por lo general será la de inicio. Por lo anterior, cada página debe ser cuidadosamente diseñada para entregar lo mejor de tu marca en un vistazo.

Haz que sea obvio

Alguien que llega a tu sitio debe entender lo que está viendo. Si llega a tu Inicio, ¿es intuitivo para el usuario llegar a ver productos que le interesen? Si llega a una página de producto, ¿puede observar también productos relacionados - que quizás tengan mejor match con su intención de compra? Si quiere realizar la compra, ¿es obvio cómo seguir adelante?

Motiva al lector a llegar "below the fold"

Hay una decisión clara en si alguien está interesado en un sitio a primera vista, o no. Lo primero que llamará la atención del usuario y lo motivará o no a seguir bajando en tu sitio, será lo que vea "above the fold", la zona principal de tu página. Crea un "above the fold" que inste al usuario a seguir leyendo y que esto se vaya poniendo más interesante mientras navega hacia abajo de sitio. Puedes agregar información cada vez más detallada de tus productos, algún llamado a la acción (Call to Action o CTA), o algún paso que requiera de su participación.

BonBonBon tiene un vibrante "above the fold" con un claro llamado a la acción.

Familiar y sencilla

Como mencionado arriba, el diseño general de una tienda Shopify puede ser lógico y limpio fácilmente. Mientras el usuario navega por el sitio, debería ver siempre un mismo estilo en general. Es reconfortante saber qué esperar y es más sencillo concentrarse en los mensajes que realmente importan.

Que el texto trabaje para ti

Pese a lo que le gustaría a los amantes de la escritura, el texto en una página de producto es una de las cosas menos importantes. Hoy, los usuarios de internet tienen poco tiempo para leer grandes bloques de texto; lo más probable es que escaneen rápidamente la página buscando algo que llame la atención.

Rompe largos cuerpos de texto en pedazos que sean fáciles de leer. Usa distintos formatos cuando quieras resaltar información, pero sin abusar (si todo es relevante, entonces nada lo es). Evita jergas.

"Rompe" tu oferta de valor en pequeños y simples términos, y si es posible pruébalos con algo de Social Proof (comentarios y ratings) que hablan por sí solos. Esto hará que tu usuario baje barreras y continúe al siguiente paso.

Crossrope entiende la importancia de los detalles de pequeños sets de texto.

2 - Navegación

Como discutido arriba, la gente espera que tu sitio siga los pricipios básicos de navegación a los que están acostumbrados. Si notas al hacer pruebas que a la gente le está trayendo dificultades o más tiempo de lo necesario el llegar de punto A a punto B, arréglalo.

El sistema de navegación debe ser lógico, justificado y claramente identificable. No te pongas muy creativo en títulos de menús o links. Hazle a la gente entender qué obtendrán al hacer click en algún elemento y haz que esos más buscados sean fáciles de encontrar.

Botones de Call-to-Action (CTA)

Tus botones de Call to Action son, claramente, acciones que quieres que tu usuario tome. Ejemplos comunes son "Compra ahora", "Añadir al carrito" o "Únete al newsletter".

Diferencia tus botones de CTA de aquellos que usas en navegación. Déjalos claramente identificables, reconocibles y bien posicionados. Diferentes grupos de CTA deben ser categorizados como tal, de modo que cada grupo tenga un estilo diferente. No es lo mismo un CTA de compra, que otro para obtener más información y otro, para recibir ofertas especiales.

De esta forma, los estilos de tus botones pueden servir como un atajo identificable a distintas áreas del sitio.

New Chapter tiene distintos estilos para botones de Call to Action que son diferentes de elementos nde navegación.

3 - Búsqueda

Barras de buscador son prominentes en gran parte de las tiendas Shopify pues cuando se hacen bien, son un elemento clave en una conversión de venta online. Cualquiera que ingresa detalles a un buscador está comprometido con buscar algo en particular y cree que puede resolver esta necesidad en tu tienda. Es un comprador motivado, y tu trabajo es ofrecerle justo lo que busca a un precio razonable.

Los buscadores deben estar situados en un lugar prominente y verse desde cualquier página del sitio. Vale la pena que tengan un color que contraste un poco con el resto del sitio, para que resalten.

Un buscador avanzado, con buenos filtros y que idealmente puede personalizarse debe estar disponible para usuarios que quieran hacer su búsqueda más precisa. Aquellos que permiten autocompletar texto, y reconocen palabras mal escritas o sinónimos, son un gran empuje a la conversión.

4 - Checkout

El proceso de checkout es donde gran parte de la interacción con el usuario sepone a prueba y donde muchas tiendas (Shopify o no) pierden a sus potenciales clientes. El mejor diseño para un checkout dependerá de qué tan complejos sean tus productos o servicios. Por cada producto o servicio donde no es necesario hacer muchas preguntas al cliente, un checkout de una sóla página es genial. Si hubiese que rellenar mucha información, no querrás sobrecargar el espacio existente y permitir que el usuario comenta (más de) un error.

Checkouts de múltiples páginas son la norma, aún cuando deberías ser capaz de mantener tu proceso de en no más de 3 páginas. Divide el proceso en 1. Identificación (log in o continuar con cuenta de invitado), 2. Pago y envíos, 3. Revisión y confirmación.

The Mountain opta por un proceso de pago de cuatro secciones.

La gente espera mucho de un proceso de checkout y pago, por lo que debes asegurarte de cumplir estas expectativas.

  • Log in sencillo - Ofrece múltiples opciones de log in, por ejemplo via redes sociales o correo, además de la alternativa de continuar con cuenta de invitado -sin necesidad de generar una contraseña en sitio. Cuando sea posible reutiliza estos detalles para que la gente no deba completar la información dos veces.
  • Pago sencillo - Ofrece múltiples alternativas de pago. Muestra logos de tarjetas de crédito y medios de pago claramente para que la gente ya antes de pagar te haya informado del método que usará.
  • Garantías - Está en el punto de cuando la gente empieza a pensar "¿Y si esto me falla?". Muestra un mensaje con garantía de devolución de dinero para disipar dudas.
  • Sellos de seguridad en la transacción -  Probablemente el usuario está a punto de ingresar sus datos de pago. Mientras registra los números empieza a pensar en los fraudes online. Muestra los sellos e insignias de seguridad de tu sitio para demostrar que es un lugar seguro.
  • Carrito guardado - La gente dejade lado una compra por diversos motivos. Tal vez querían ver si agregarías cobros extra o cuánto costaba el delivery (si aún no lo informabas), se les olvidó la comida en el sartén o querían agregar otro producto al carrito antes de pagar. Permite que continuen con la compra aún habiendo salido del carrito y de tu sitio. Es probable que más de alguien vuelva a terminarla.
El proceso de checkout en Bliss comienza con una barra lateral que permite a los usuarios hacer cambios y agregar productos antes de completar el pago.

Tras la Conversión (post venta)

No te duermas en los laureles porque tu cliente logró completar tu CTA. Considera que eso es el primer paso, en una relación duradera y fructífera. Tras la conversión, tu sitio puede ofrecer algo a cambio, motivar a la referencia de amigos, compartir en redes sociales, o recomendar otros productos.

En este punto, tu cliente tiene unarelación "tibia" con tu compañía. Lo que puedes hacer es que su experiencia sea aún mejor entregándole algo valioso.

La experiencia de usuario es clave en e-commerce. Piensa en ella como si en un todo y descompone también cada parte del proceso, para saber dónde y cómo mejorar. Pide feedback a tus clientes. De las bases que Shopify te entrega, haz que cada paso sea uno que tu visita querrá completar para llegar al final.

Imagen de portada por Alvaro Reyes en Unsplash



About DataCue

DataCue is an automated plug and play personalization algorithm for e-commerce stores. We write about personalization and data analysis. Enter your email below if you'd like to keep in touch.

Thanks for subscribing! We'll keep in touch =)
Oops! Something went wrong while submitting the form.

Sobre DataCue

DataCue es un algoritmo automatizado de personalización para e-commerce. Nuestros posts tratan sobre la personalización web y el análisis de datos. ¡Ingresa tu e-mail abajo si te gustaría estar en contacto con nosotros!

Thanks for subscribing! We'll keep in touch =)
Oops! Something went wrong while submitting the form.

About the author

Richard Sutherland has worked in online marketing and search engine optimization for over 15 years. Excited about how we can offer the customer a streamlined, personalized online experience, Richard looks for every way to increase conversion percentages with a high return on investment.

Sobre el autor

Richard Sutherland tiene más de 15 años de experiencia en marketing online y optimización de motores de búsqueda. Apasionado por ofrecer una experiencia inteligente y personalizada a cada consumidor, Richard está constantemente buscando nuevas maneras de incrementar la conversión y, con ella, los retornos a la inversión.

Go up