Shopify usabilidad series parte 1: me encanta esa bolsa

Invitamos a los miembros del VIP Blackbelt Commerce Dojo (que puedes unir aquí) para enviar sus sitios web para un buen desmontaje anticuado.

Prometimos asesoramiento sin trabas sobre el diseño, la usabilidad del sitio web, los titulares y la copia, así como punteros sobre cómo obtener más conversiones en los formularios y productos de correo electrónico.

Para cada desmontaje, tres áreas problemáticas principales serán cubiertas, con imágenes, comentarios y resúmenes de las lecciones para que pueda implementar todo lo que lea aquí en su propia tienda.

Decenas de personas se ofrecieron para entrar en el ring con nosotros. Hemos elegido tres al azar para construir esta serie alrededor.

Así que sin más preámbulos, vamos a sacar los guantes para nuestra primera tienda.

Me encanta esa bolsa

En primer lugar, unos pocos apoyos para el equipo en Me encanta esa bolsa. Están haciendo un montón de cosas bien:

• El sitio se ve limpio y profesional
• La fotografía es buena
• El logotipo parece legítimo
• La navegación es clara
• Hay llamadas consistentes a la acción – botones rojos utilizados consistentemente en todo.

Se obtiene una buena primera impresión del sitio, como lo haría, de entrar en una bonita tienda minorista en una parte elegante de la ciudad. Ahora, a los desmontaje.

Derribar #1: Página de inicio

Si está buscando en la página de inicio en un ordenador portátil, probablemente notará que la imagen de héroe (o ' cabecera ') es enorme.

Ocupa toda la pantalla, y para algunas personas incluso se extienden por debajo del pliegue.

Esto es sentido demasiado grande para una primera imagen. Ese espacio de héroe se llama espacio de héroe por una razón.  Es una inmobiliaria de primera, y su único trabajo es vender tu marca a un nuevo visitante. La superposición de texto en esta imagen es de color blanco, que se desvanece en la imagen y no es perceptible porque el fondo es demasiado ligero.

Para solucionarlo, el equipo de LTB podría poner un fondo transparente sobre la sección de texto, o hacer que el texto sea un color más oscuro. Haz la imagen alrededor de un tercio de esa altura, o al menos agrega un botón "más" que me lleva a la página en material fresco.

Siguiente: los tres módulos (auténticos bolsos de diseñador, $10 envío en todo el mundo y selección altamente comisariada) debajo de la imagen del héroe son bastante Good pero debe estar vinculado a otras páginas.

Recomiendo que pongan su oferta de envío $10 en la barra de cabecera pequeña en la parte superior de la página, en lugar de la ' compra venta consign ' contenido. Es una pieza de información mucho más útil para poner en la mente de la gente.

Las bolsas auténticas deben llevarte a la página de cobros.  El envío debe llevarlo a la página de detalles de envío.  Selección altamente comisariada debe ir a la página acerca de.

No desperdicies la oportunidad de hacer que un visitante haga clic en páginas adicionales cuando hayas trabajado tan duro para llegar a tu sitio en primer lugar.

Las categorías ' Shop [brand] ' son buenas. Los amantes de las bolsas reconocerán el aspecto distintivo de cada marca y sabrán hacer clic en sus favoritos... pero el siguiente enlace de YouTube va fuera del sitio!

Este es un no-no masivo. Desea mantener a las personas en su sitio, mirando sus productos, durante el tiempo que pueda.

No envíes a la gente lejos de tu sitio. Esto es particularmente importante si usted está pagando por el tráfico (por decir, con Facebook o anuncios de Google). Pueden ir a YouTube y no volver.

Su sitio es donde usted hace el dinero. No estás haciendo ventas a través de YouTube o en cualquier otro lugar que estés enviando personas. Si tiene contenido de vídeo, incruste directamente en la página o utilice una superposición.

El equipo de LTB también podría hacer que sea más fácil para las personas en su audiencia de medios sociales para comprar a partir de ellos haciendo su Instagram feed shoppable.

Esto muestra inmediatamente a los espectadores qué productos se presentan en cada imagen y se implementa fácilmente con foursixty.com. Siempre hacer que sea lo más fácil posible para la gente a comprar!

En el pie de página, describen lo que hace LTB, pero esta información debe ser mucho más alta en el sitio. Entender el qué/cómo/por qué de una marca como esta es crítico, particularmente si hay un gran volumen de tráfico frío al sitio.

El equipo podría agregar un eslogan bajo el logotipo o incluir algunas oraciones sobre él en el espacio negativo en la imagen del héroe, como "obtener esa bolsa que se agotó en momentos-hemos hecho todo el trabajo duro de encontrarlo para usted."

Mucho más tentador que "comprar. Vender. Consign. "

Lecciones clave de derribar #1:

• No gastes todas tus propiedades inmobiliarias en la Página principal en una sola imagen de héroe. Asegúrese de utilizarlo para indicar a los nuevos visitantes de qué se trata su marca.
• Mantén a las personas en tu sitio tanto tiempo como puedas. No los envíes a plataformas de terceros donde no puedan comprarte.
• Hacer que sea lo más fácil posible para las personas a comprar de usted.

Derribar #2: el pop-up

Todos queremos recopilar direcciones de correo electrónico. Hay mucho beneficio en la construcción de una lista de personas que quieren saber de usted. Pero si la tripulación de LTB quiere esos deets, el pop-up que están corriendo no es la manera de conseguirlos.

En primer lugar, se muestra camino demasiado rápido. Al igual que, i've estado en el sitio web durante 5 segundos y haven't incluso visto en cualquier tipo de rápido. ¡ Es demasiada presión!  No sé quién eres ni qué haces todavía. Definitivamente no voy a inscribirte... e incluso podría ser empujado lejos de su sitio.

En segundo lugar, el diseño está todo desactivado:

• Hay mucho espacio en blanco alrededor del texto.
• "Nos encantaría enviarle nuestro boletín informativo" es una invitación que no se puede poner. Nope, mi bandeja de entrada ya está arruinada con todo el correo electrónico que se supone que lea, y mucho menos los correos electrónicos promocionales.
• La jerarquía de información, o diseño, es hacia atrás. Puedo enviar mi correo electrónico sin siquiera ver las casillas de verificación (pero resulta que las casillas de verificación son necesarias antes de que el opt-in puede ser finalizado). Todos están fuera de línea, lo que se ve desordenado, y es pedir demasiada gente de la derecha del bate.

Reduciendo el tamaño de la casilla opt-in para reducir el espacio en blanco alrededor del texto. Esto hace que sea más fácil para el lector comprender lo que está delante de ellos.

Cambia el texto del campo a "email" o "tu correo electrónico". Establezca la ventana emergente para mostrar después de 2-3 vistas de página o que han estado en el sitio por más tiempo. Unos segundos no es lo suficientemente largo para que la mayoría de la gente decida si quiere escuchar más de una marca.

Siguiente (y esto se aplica al campo de correo electrónico en el pie de página también), hacer que la llamada a la acción atractiva para el lector.

Averigüe cuál es su motivación para estar en su sitio. Ofrécitales un poco de la solución que están buscando.  Consejos de moda gratis?  Top 5 video reseñas de la bolsa más caliente de este mes?  Cualquier cosa va a hacer: hacerla más atractiva que "unirse a nuestro boletín", y sus inscripciones aumentarán.

Por último, haga que sea fácil para la gente darle su correo electrónico. Su dirección de correo electrónico real debe ser la única cosa estrictamente necesaria para suscribirse, no su nombre, o cualquier CheckBox, o cualquier información adicional. Cuantos más aros hagas que la gente salte, menos probabilidades hay de que completen la acción.

Lecciones clave de derribar #2:

• Haga que sus llamadas a la acción sean interesantes para sus lectores, no sobre lo que tú desea o lo que sería bueno para su negocio. Si lo haces sobre ellos, inevitablemente será bueno para ti también.
• Haga que sea fácil para las personas suscribirse a su lista de correo electrónico, sin ser agresivo o demasiado rápido. Dales un minuto para decidir si les gustas, y luego elimina toda fricción innecesaria para conseguir esa dirección.

¿Quieres ideas similares para tu propia tienda Shopify?  Puede reservar su propio sitio web de Shopify desmontaje aquí para un informe sin sentido, claro-inglés entregado a usted en 3 días hábiles.

Derribe #3: sección bilingüe

Al ser una tienda canadiense, el equipo de Love that bag es inteligente y ha añadido una sección de idioma francés a su sitio Web.

Desafortunadamente, al hacer clic en Français, la página va a una redirección 404 (enlace roto). La página no existe. Eso sólo va a alienar a todo los usuarios de habla francesa que van directamente allí esperando tener un tiempo fácil. (Apunta a/Francais que no existe-una solución rápida es ir a la navegación y apuntar el enlace a "#", que obligará a las personas a elegir uno de los enlaces desplegables en su lugar.)

Ahora, para hacer todo el elemento bilingüe fácil en sí mismos, LTB podría considerar el uso de un tema bilingüe o en el Langify aplicación traducir toda la tienda al francés, en lugar de solo tener una pequeña sección del sitio en francés.

El mercado de habla francesa es enorme, y ya que hay $10 envíos en todo el mundo, tienen una buena oportunidad para hacer sus productos tan accesibles como sea posible para los clientes en Francia u otros países francófonos.

Una vez que haga clic en las otras páginas en francés, como ' vendre Mon SAC ' (que tiene los mismos problemas en la página en inglés, ' vender mi bolso '), verá de nuevo que los elementos de diseño están fuera de sí:

Realmente creo que las dos columnas deben estar en contenedores horizontales. No hay necesidad de que la información esté al lado del otro. Es confuso, mientras se ve desordenado y es difícil de leer.

Hay una gran cantidad de espacio en blanco, que atrae el ojo por todo el lugar, y esto se ve exacerbado por cada uno de los puntos numerados que son diferentes longitudes (que termina buscando caótico y confuso).

También hay varias "viudas". Palabras solas en una línea. Estos son fáciles de perder si usted está desnatando texto, que puede confundir a los lectores, así como interrumpir el flujo del ojo sobre la página.

Por último, hay una caja de chat en vivo que apareció después de un tiempo en la página. Su mensajería era:

Cuestión?  Déjanos un mensaje. Su correo electrónico suele responderse el mismo día. ¡Gracias!

Si vas a tener un chat en vivo en tu sitio web, asegúrate de que esté en vivo y en el chat. Los usuarios pueden enviar un correo electrónico y esperar un día si son el paciente y todavía creen que las empresas responden a los correos electrónicos, pero muchos no. El beneficio del chat en vivo es obtener una respuesta casi-instantáneamente de una persona real. Cualquier hombre que constantemente, lista las horas que está tripulado o no lo tiene en absoluto.

Lecciones clave de derribar #3:

• Asegúrese de que ninguna de sus páginas está rota y dirigir a las personas a una página de 404
• Si tienes un público bilingüe, usa un tema bilingüe o una aplicación como Langify para traducir todo el sitio en lugar de solo un trozo de él
• Mantén tu diseño apretado. Espacio en blanco, viudas, formato wonky. Todo hace que sea mucho más difícil para el lector consumir su mensaje y tomar la acción que les está dirigiendo.

Tiempo para un respiro

Cubrimos muchas estrategias de usabilidad de Shopify en este post. El equipo en Me encanta esa bolsa están haciendo un gran trabajo, y nuestra revisión está destinada sólo con la mejor de las intenciones, para ayudar a. Es una oferta única con un mercado enorme, que es clave para tener una tienda de comercio electrónico exitosa, y su marca, voz e imágenes están en el punto.

Todos estos problemas se fijan fácilmente con un poco de grasa de codo, y estoy seguro de que van a ver un aumento en las conversiones y la satisfacción del cliente como resultado.

¿Quieres ideas similares para tu propia tienda Shopify?  Puede reservar su propio sitio web de Shopify desmontaje aquí para un informe sin sentido, claro-inglés entregado a usted en 3 días hábiles.

Mantente atento a la parte 2 de esta serie la próxima semana, y hazme saber en los comentarios si vas a poner cualquiera de estos consejos para usar en tu propia tienda Shopify o si tienes alguna pregunta.  ¿Quieres estar en el Running para futuras series de desmontaje?  Únase a la lista VIP aquí.

Gracias de nuevo por mantenerse al día con nuestro Shopify Insider blog @ Blackbelt Commerce. Por favor, asegúrese de revisar nuestra Servicios. También tenemos algunas recomendaciones principales del blog para que usted Compruebe hacia fuera; Los mejores recursos de la hoja de trucos de Shopify, SEO para tu tienda Shopify Y Consejos para impulsar sus ventas comerciales de comercio electrónico.  More sales and happier customers one time discount code and easy emails popups in shopif . Como siempre, vigila las nuevas publicaciones del blog.