Serie de usabilidad de Shopify parte 2: Scrubba

¡ Bienvenido a la parte dos de la serie de facilidad de uso de Shopify! Si te perdiste la parte uno, puedes encontrarlo aquí (tiene algunos consejos difíciles que querrá usar en su propia tienda).

Este caso práctico de Shopify está diseñado para resaltar los problemas comunes de usabilidad encontrados en las tiendas de e-commerce. Prometimos asesoramiento sin trabas sobre el diseño y 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 estarán cubiertas con imágenes, comentarios y resúmenes de las lecciones que puede implementar todo lo que lea aquí en su propia tienda.

En la parte dos, nos vamos a sacar los guantes de nuevo con El Scrubba, una tienda de viajes y equipos de acampada. Vamos a hacerlo.

El Scrubba

Antes de entrar en el meollo, el equipo de The Fregba está haciendo un trabajo increíble. Ellos tienen una línea de productos realmente innovadora. Lo más importante, un grupo leal y entusiasta de clientes que claramente aman comprar de ellos.

• Las imágenes en el sitio son muy puntuales. Realmente encapsula el aspecto y la sensación del estilo de vida de viaje, y resalta todas las características de cada producto de manera muy efectiva.
• Hacen un gran trabajo demostrando cómo usar sus productos a través de imágenes y video
• Tienen un tono agradable y consistente a lo largo de todo su contenido escrito.
• Su logotipo es cool, el sitio web parece legítimo, y es fácil de navegar.

Derribar #1: Página de inicio

Área de cabecera

El equipo de Scrubba tiene una redirección inteligente que identifica la dirección IP del usuario. Los dirige a la versión adecuada de la tienda para su región, que exploraremos un poco más abajo.

Sin embargo, antes de que haya tiempo para decidir si desea cambiar de tienda, una ventana emergente invade su pantalla... Literalmente llegué a tu sitio hace 5 segundos. Lo primero que quiero es que su pop-up para ir lejos, no conseguir un 10% de descuento en un producto que ni siquiera he visto todavía!

(Scrubba no está solo en esto — Amor que la bolsa de la parte uno tenía el mismo problema, que han fijado desde entonces 🙂. Este es un gran cambio para los nuevos visitantes. Asegúrese de retrasar sus ventanas emergentes para que solo se muestren una vez que los usuarios hayan estado en el sitio por más de 2 minutos o que tengan varias vistas de página.)No subestimes lo valioso que es este área de cabecera.

Es tu oportunidad de comunicar exactamente de qué se trata tu marca y de crear un lugar para que los usuarios participen en una oferta o actividad.

En este caso, hay demasiado espacio en blanco en el área del encabezado. Un tercio completo de mi pantalla es tomada por el espacio en blanco, y los otros dos tercios no son intuitivos

Al llegar a la página, parece que el encabezado es sólo una imagen, pero en realidad es un vídeo incrustado. El botón de reproducción está por debajo del pliegue para que la gente ni siquiera se dan cuenta de que está allí!

El video necesita reproducir automáticamente sin sonido o ser más pequeño/más alto en la página con un botón de reproducción en el medio.

El botón de reproducción debe ser visible por encima del pliegue, combinado con un título para que los usuarios sepan lo que es y si quieren verlo.

Este video tiene casi dos minutos de duración. Esto es una gran pregunta para los nuevos visitantes. No asuma que la gente tiene este tipo de atención para algo de lo que no saben nada. O incluso para algo, ellos sí saben. Prueba un video más corto y comprueba si el engagement (tiempo dedicado a ver el video) aumenta.

(Los vídeos largos pueden funcionar — ver el vídeo en vinomofo.com por una risita. Sólo asegúrese de que sabe lo que es correcto para su marca.)

Pestaña revisar

La pestaña de revisión deslizante en el lado derecho de la página cubre parte de los diagramas y las imágenes del producto y agrupa aún más la página de inicio.

Algo que aprendí durante mi tiempo haciendo pruebas de usabilidad en persona, fue que nadie lee un texto vertical. Sólo los distraes con algo con lo que no van a involucrarse.

Es mejor poner dos o tres de sus mejores comentarios sobre los proyectores del producto. Deje el resto para las páginas de productos: las reseñas deben ser algo que los usuarios descubran orgánicamente a medida que se mueven a través del sitio de acuerdo con sus intereses, en lugar de que los empuñen en su cara en cada turno.

Mientras que los comentarios son una gran prueba social, demasiados de ellos en todas partes parecen necesitados y desesperados, así que sólo jugar fresco, ¿de acuerdo?

Diagramas

Entiendo la intención de demostrar los elementos del producto, pero esta no es la mejor manera de hacerlo.

La imagen del medio parece ser completamente estética. El texto de la marca es hacia atrás, tiene esta superposición verde intensa, y no nos dice nada sobre el producto.

La subpartida "las tablas de lavar hacen la diferencia" es confusa. ¿Qué significa eso? ¿Hacer la diferencia a qué? ¡ Algunas personas tal vez ni siquiera sepan lo que es una tabla de lavar! Yo reemplazaría esto con una imagen real del producto en acción.

En cuanto a las otras dos imágenes, el texto es demasiado pequeño. Deje los objetos visuales detallados para las páginas de productos donde los usuarios realmente pueden hacer zoom en un poco.

Este problema es particularmente pronunciado si usted está tratando de leer esto en el móvil. El texto es absolutamente pequeño, y también tenemos un lío en la parte superior, con el botón Registrarse ahora que cubre la barra de redirección de ubicación y que cubre el menú también.

Hay demasiados obstáculos en el móvil (que ahora representa más del 50% de todo el tráfico de comercio electrónico) para que el usuario realice una fácil decisión de compra.

Lecciones clave de derribar #1:

• No golpear a la gente con un pop-up de inmediato. Dales un par de minutos (o unas cuantas vistas de página) antes de mostrarles una oferta.
• Aprovechar al máximo el área de cabecera. Reduzca el espacio en blanco innecesario y utilice el área para educar a las personas sobre su marca. Entusiasmarse para explorar su sitio.
• Asegúrese de que cualquier contenido de vídeo tiene un botón de reproducción obvio y que el espacio alrededor de él no está desordenado y distraer con otras campanas y silbidos.

Derribar #2: Página de resaltado de producto

En primer lugar, hablemos de la página de la nueva billetera. El equipo de Scrubba corrió una exitosa campaña de Kickstarter (superando su gol en 2 horas!), pero han caído la pelota con este seguimiento.

Esto es lo que estamos viendo:

• La jerarquía de información de la página es errónea. Todo se trata de nosotros, de nosotros, de nosotros, no de ti, de ti, de ti. El Kickstarter tiene una gran historia, pero el usuario se preocupa Más sobre lo que hará la billetera por Ellos, y no ven nada de eso hasta que se desplaza hacia abajo, más allá de la llamada a la acción, más allá del video, e incluso entonces...
• Todo está tan aplastado en esta página que es demasiado difícil de leer. La altura de la línea es demasiado estrecha, y las imágenes y los cuadros de texto están demasiado cerca juntos. Esto hace que la página se sienta claustrofóbica e impenetrable.
• La mayoría de los productos de Scrubba tienen un precio entre $50 y $100. Este producto es sólo $10... y están enviando gente fuera su sitio para ordenarlo. Esto no tiene sentido. ¿Por qué enviar a la gente lejos de las compras de alto precio-punto donde se mantiene todo el dinero, con el fin de conseguir que compren un artículo de punto de bajo precio de una plataforma que no controla (y para un artículo que ya está financiado)?! Recomiendo ofrecer este artículo $10 como una upsell en los otros productos en su lugar.

Enviar gente fuera del sitio, aunque sea a tus propios activos en otra plataforma, es un gran no-no. Una vez más, Scrubba no es la única compañía culpable de esto. Me encanta que bag estaba enviando visitantes a YouTube, donde no pueden comprar nada.

No hagas esto. Usted trabaja duro para conseguir que la gente a su sitio.

No los rebote en otro lugar donde no pueden comprar nada (o donde el precio de compra es demasiado bajo).

Lecciones clave de derribar #2:

• Asegúrese de que su contenido sea fácil de leer, teniendo una altura de línea cómoda y contenedores de texto espaciosos.
• Su jerarquía de información debe centrarse en el cliente, ¿qué se va a obtener mediante el uso de su producto o interactuar con su marca (no lo que es tan bueno de usted!)
• No, por el amor de todo lo que es sagrado, enviar a la gente de su sitio! Mantenlos en tu plataforma el máximo tiempo posible para maximizar la posibilidad de obtener una venta. Preferiblemente en un punto de precio mucho más alto que lo que podrían gastar en otro sitio.

¿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.

Derribar #3: páginas generales de productos

Hay dos tipos principales de páginas de productos en Shopify. La página cobros, donde puede ver todos los productos enumerados en un solo lugar, y las páginas de productos individuales, donde puede ver un elemento individual y encontrar toda la información al respecto.

La página de colección de Scrubba se ve bastante bien.

Hay suficiente espacio en el diseño que no se ve apretado, y han elegido buenas tomas de producto para resaltar cada elemento.

Dos pequeñas sugerencias para mejorar esta página sería

1) Quite la superposición de vista rápida que aparece cuando pasa el ratón sobre un elemento.

2) ya que los productos son tan únicos, para añadir una breve descripción de cada artículo por debajo del precio para ayudar al visitante a entender cómo utilizarlo.

Por ejemplo, bajo los colgadores inflables, podrían decir "pesar 50g EA, paquete plano en su maleta y se puede inflar en 60 segundos para colgar cuando se está allí". A continuación, el visitante puede hacer clic en la descripción completa si desea saber más.

Las páginas de productos individuales también se ven bastante bien, pero algunas cosas ayudarían a pulirlas:

Hay mucha información en cada página, y de nuevo, la altura de la línea es demasiado estrecha. Esto le da a las páginas un aspecto de "pared de texto". O bien condensar la información en una copia más concisa o dividir el texto con imágenes.

Los comentarios parecen un poco esquivos, ya que se han expandido más allá del contenedor del sitio y se extienden hacia el borde izquierdo de la página. Esto se corrige fácilmente con un poco de CSS, pero actualmente se ve aún más pronunciado gracias a la enorme cantidad de espacio en blanco entre el final de la descripción del producto y el inicio de la sección de revisión. ¡ Tanto que no podíamos encajar todas estas sugerencias en una sola imagen!

Por último, en las páginas de producto, desea minimizar las distracciones tanto como sea posible, y es Muy distraer para tener la redirección de IP, Regístrate ahora botón y la barra lateral de revisión continúa siguiéndome alrededor.

Lecciones clave de derribar #3:

• Elimine tantas distracciones como sea posible. Superposiciones de vista rápida, revisar volantes y así sucesivamente reducir las posibilidades de que un usuario realmente llegar a una página de producto y tomar una decisión de compra.
• Dividir el contenido escrito con imágenes y titulares con el fin de que sea más fácil de consumir y menos abrumador.
• Si sus productos son inusuales o innovadores, considere tener una breve explicación en la página de la colección para que las personas puedan entender inmediatamente lo que hacen los productos.

Un par de pequeños puntos finales que notamos al rodar alrededor del sitio de Scrubba:

• Podrían considerar la sustitución de la ' global ' bajo el logotipo de cabecera de Scrubba con una explicación de su USP para que el inmueble de primer nivel se ponga a mejor uso: "equipo resistente al agua y al estrés para estilos de vida al aire libre", o alguna otra frase que describa el Productos.
• Muchos de los contenedores de texto son muy estrechos. Esto crea una gran cantidad de espacio en blanco alrededor del texto. Esto es una distracción y dificulta la absorción de la información. Ampliar el ancho de los contenedores ayudaría mucho. Una vez más, expandir la altura de la línea realmente ayudará con la legibilidad
• Siempre piense en si la disposición, el diseño o el contenido en el sitio va a hacer que sea lo más fácil posible para el usuario tomar la acción que pretende. Es mejor para fines de usabilidad que las cosas sean obvias y fáciles de usar, en lugar de ser "interesantes", artísticas o innovadoras.

Eso es un Wrap para este caso de estudio de Shopify...

Quiero enfatizar que el equipo de Scrubba está haciendo un trabajo increíble, creando productos innovadores y útiles.  Hemos compartido estas sugerencias porque sabemos que están haciendo una gran cosa y quieren ayudarles a tener aún más éxito en la obtención de los productos de Scrubba en el mundo.

¿Quieres ideas similares para tu propia tienda Shopify?  Puede reservar su propio sitio web de Shopify desmontaje aquí , you can also check where do you find customers for shopify storeY tips for boosting your e-commerce business sales. para un informe sin sentido, claro-inglés entregado a usted en 3 días hábiles.

Gracias nuevamente por seguir nuestra Shopify Insider blog @ Blackbelt Commerce.  ¡ Mantente atento a la tercera parte, llegando pronto! Además, asegúrese de consultar nuestra Cartera Y Servicios.

Si usted tiene alguna pregunta, por favor, háganos saber en los comentarios a continuación.