Serie de usabilidad de Shopify parte 3: Headphone.Com

Bienvenido a la parte 3 de la serie de facilidad de uso de Shopify. Si los perdiste, puedes encontrar Parte 1 aquí Y Parte 2 aquí.

En esta serie, nos centramos en los problemas de usabilidad comunes encontrados en las tiendas de Shopify. Las tiendas que elegimos para la característica obtener asesoramiento sin trabas sobre el diseño y la usabilidad del sitio web, los titulares, y copia.

También les damos consejos sobre cómo obtener más conversiones en los formularios y productos de correo electrónico y usted consigue cosechar los beneficios, y capaz de poner las ideas y sugerencias para usar en su propia tienda.

Para la parte 3, Headphone.Com está en la línea y es hora de entrar en ella.

Headphone.com

El sitio web se ve elegante y muy profesional. El diseño y la fotografía lo hacen lucir como una marca premium. Su logotipo es perfecto, tienen una gran variedad de productos. Puedo ver que esto se convierte en una ventanilla única para las personas que aman los auriculares y la música.

La barra de Hola se utiliza realmente eficazmente para resaltar su no impuesto a las ventas y envío gratis sobre $49 política, y el número de teléfono en la parte superior es una gran adición. Está vinculado para que si hago clic en ese número mientras estoy en mi teléfono, se llamará automáticamente a través de. Ideal para la experiencia del usuario.

Derribar #1: Página de inicio

Al igual que encontramos con las tiendas de la parte 1 y la parte 2, Headphone.Com está ejecutando un juego pop-up muy agresivo.

Este pop-up cubre la página en cuestión de segundos de aterrizar en el sitio. Los usuarios no saben si quieren comprar algo todavía, así que es demasiado pronto para ofrecerles algo.

Una vez que el tiempo se ha retrasado para esperar un par de minutos, el siguiente paso es abordar la copia.

La redacción de esta oferta no hace su trabajo. Cualquier oferta que hagas debe ser específica y sencilla. No hagas que sea difícil para la gente entender lo que estás ofreciendo, y no hagas que sea confuso para ellos actuar en ello.

El titular, ' Sweet Discount Only for you ' parece un poco esquiva, sobre todo porque le sigue la advertencia de que este acuerdo no está disponible en todos los artículos (debido a las "restricciones de proveedor" que suenan ominosas. Yikes.)

Actualmente, hay dos directivas en este pop-up, que es uno demasiados. O bien que los sigan o se suscriban a su boletín informativo, no a ambos.

Recomiendo que se pegue con el boletín de noticias ya que le permite comunicarse con ellos directamente y elimina cualquier confusión sobre cómo van a obtener su código (no está claro cómo recibirían el código de seguimiento en las redes sociales).

La siguiente copia del cuerpo Lee ' o suscribirse a nuestros maravillosos y ocasionales correos electrónicos. ' Llámame escéptico, no es que muchos correos electrónicos de mercadeo sean realmente maravillosos.

¿Qué tan ocasional es ocasional? ¿Semanal? ¿Mensual? ¿Cada vez que tienes algo nuevo que vender? El idioma aquí crea más preguntas de las que responde, es probable que se deshagan de la gente.

Intente reemplazar todo esto con algo simple. el Titular debe ser algo como "obsesionado con conseguir el mejor sonido?"

La copia del cuerpo

Pruebe algo como "Suscríbase a nuestro boletín semanal para conocer lo mejor de la tecnología de sonido y obtener un 10% de descuento en los audífonos seleccionados en la tienda."

Finalmente, quite la etiqueta ' Powered by Beeketing ' en la parte inferior. Dado que el resto de la tienda tiene una sensación de primera calidad, esto parece un poco descuidado. Este es un problema común con las aplicaciones de correo electrónico y revisión.

Los paquetes gratuitos o de bajo nivel a menudo tienen ' Powered by [name] ', con algunos CSS que normalmente puede ocultarlo. Sólo tiene que añadir [! Important] al final de la clase CSS (sin corchetes), y esto anulará el código para esta pequeña etiqueta.

Como nota al lado: estamos empezando a ver a los usuarios conseguir ' ceguera de anuncios ' en los pop-ups. Esto sucedió con los anuncios de banner y los anuncios de la barra lateral hace un tiempo-la gente ni siquiera mira la oferta antes de que cierren las cosas, porque tanta publicidad ha sido irrelevante para ellos. Simplemente asumen que no les importa, por lo que es tan importante retrasar tus ventanas emergentes unos minutos para que la gente esté comprometida lo suficiente como para prestar atención a tu oferta.

A continuación, la imagen del encabezado es demasiado grande. Va por debajo del pliegue, que se ve raro, y de nuevo, la copia no está haciendo su trabajo aquí.

' Geeks de auriculares obsesionados ' debe reemplazarse con una descripción de la propuesta de valor de la tienda, o debe decirle al usuario qué hacer desde aquí.

El significado de este título no está claro porque el subtítulo "a su servicio" no es obvio a primera vista (sólo lo noté en mi tercer vistazo a esta área).

Es probable que los usuarios estén confundidos sobre si Ellos debe estar obsesionado con los auriculares con el fin de gustar este sitio, o si la tienda está obsesionada con los auriculares (y por lo tanto han probado todo en el mercado y puede dar una dirección clara sobre qué opciones son las mejores).

El posicionamiento ' Geek ' también es muy incongruente con el resto de la marca en este sitio. Es muy elegante y bien diseñado, y hay una percepción de que las personas que aman los auriculares son realmente geniales! Piense en gente famosa que está obsesionada con los audífonos, como Dr. Dre, es lo opuesto a geek.

Entrar en la cabeza de su cliente aquí: ¿por qué quieren los mejores auriculares?

Para disfrutar de un buen sonido para su música favorita, sí, pero también por lo que se ven mal-culo mientras escucha. Todo el mundo quiere ser esa persona.

Intente reemplazar el titular "obsesionado con los auriculares." Entonces la subpartida podría leer "¿tú también?" seguido de los botones comprar ahora o aprender más. Esto haría mucho más claro que el usuario está en el lugar correcto y darles un próximo paso específico a seguir.

A continuación, el ' obtener descuento ' y ' botones de ayuda ' se reventan constantemente (que, al igual que los pop-ups, ha sido otro problema común a lo largo de esta serie).

Estas pestañas son muy molestos y deseo que se vaya. Distraen a los usuarios de realmente interactuar con la página y a menudo cubren información importante (por ejemplo, la pestaña descuento obstruya a los usuarios de hacer clic fácilmente en una flecha de exploración más abajo de la página)

A medida que baje la página, recomendaría agregar un nombre al testimonio para aumentar la credibilidad asegurándose de que los tamaños de la imagen son consistentes a medida que se obtiene el área de productos destacados. Algunos son enormes y toman la mitad de la pantalla, otros son un cuarto del tamaño. Es visualmente confuso y crea una gran cantidad de espacio en blanco innecesario en la página.

Por último, eliminaría la sección del blog de la parte inferior de esta página. Una vez más, los tamaños de imagen incoherentes hacen que el diseño desordenado y distraiga.

Lecciones clave de derribar #1:

• ¡ Haga su copia clara! No trates de ser inteligente.  que sea sencillo que las personas sigan sus directivas. Su redacción debe ser consistente con el resto de su marca. La gente se sentirá segura de que está en el lugar correcto.
• Compruebe los tamaños de las imágenes. Demasiado grande o demasiado pequeño, el tamaño inconsistente crea un aspecto caótico al diseño de la página y resta de su credibilidad.
• Resiste el impulso de saltar en cada vagón de marketing. Pop-ups, Fly-outs, y superposiciones sólo mear a la gente si se usa descuidadamente. Poner retrasos de tiempo en estos para que la gente está realmente comprometida antes de verlos. Limite las páginas que muestran para que sean lo más relevantes posible.

Derribar #2: Página de cobros (categoría inalámbrica)

Pasando a la página de colecciones, hay algunos elementos de diseño simples que se podrían apretar por encima del pliegue:

Es genial que tengan filtros configurados.  Esto hace que sea mucho más fácil para los usuarios encontrar exactamente lo que están buscando. La jerarquía de información se convertirá en un poco más intuitiva si las subpartidas fueran más pequeñas. El espacio en blanco que distrae el ojo se puede reducir reduciendo un poco el espaciado en este recipiente.

En el otro lado de la página, el botón "destacados" y la flecha desplegable deben tener un cuadro alrededor para indicar a las personas que es un menú de ordenación. De lo contrario, parece que esta es una página que se acaba de aparecer en el sitio.

El botón "más información sobre los audífonos inalámbricos" se interpone en la forma de ver los productos reales. Esto sería mejor como un enlace de texto, subrayado, por lo que es información complementaria.

No quieres alejarte de la compra. ¡ Esta página es donde empiezan a moverse hacia una decisión de compra!

Más abajo de la página, las reseñas de estrellas probablemente están haciendo tanto daño como bueno. Si usted tiene un listado con una revisión de 2 estrellas, no le está ayudando a vender más de ese producto. Y los productos sin reseñas sólo parecen crappy y abultan la página. Recomiendo eliminar las reseñas de la página de cobros y dejarlas para cada página de producto.

Lo mismo ocurre con las opciones de color: tenerlo en la página de colecciones para algunos artículos y otros no es confuso (especialmente porque algunas de las muestras están incompletas) y ocupa mucho espacio.

Lecciones clave de derribar #2:

• La consistencia visual es muy importante. Asegúrese de que todas sus imágenes tienen el mismo tamaño, en el mismo tipo de fondo, y que no está confundiendo el ojo con información innecesaria o incompleta.
• Demasiado espacio en blanco puede ciéndela una página y dificultar el procesamiento de la información que está leyendo. No querrás que todo se aplague uno encima del otro, pero asegúrate de que no esté nadando en el espacio.
• Eliminar cualquier cosa que distraiga a la gente de pasar a una decisión de compra. Ese es el propósito de tu sitio, ¡ así que no te hagas a tu manera!

¿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 de productos individuales

La página en sí se ve bastante bien, pero los chicos... "¿Es nuestro precio demasiado alto?"

Me muero dentro de 😭

No hay manera de que la gente no va a hacer clic en este enlace, con la esperanza de encontrar algún tipo de trato. Es genial que Headphones.Com sea compatible con MAP y que sea transparente al respecto.

(MAP — precio mínimo anunciado — es un acuerdo entre los fabricantes y sus minoristas/distribuidores de que los vendedores anunciarán el producto a precios específicos con el fin de reducir el descuento extremo y el uso de prácticas comerciales desleales. Está diseñado para mantener rentables a todas las partes dentro de la cadena de suministro.)

Pero este enlace les va a costar más ventas que cualquier otra cosa en todo el sitio.

Es básicamente invitando a los clientes a alejarse en busca de un mejor precio

Lo primero es primero: Si Tener tener algo como esto, ponlo al final de la página. No hagas que sea tan fácil que la gente te pague menos. Idealmente, ni siquiera estaría en la página del producto. ¿Por qué no tener un enlace "ver nuestra política de precios" en el menú de pie de página?

En segundo lugar, independientemente de dónde tenga el vínculo, actualice la copia de esta sección inmediatamente. En lugar de "¿es nuestro precio demasiado alto?" decir algo como "visto estos A un mejor precio?"

La copia del control flotante también necesita cambios. Actualmente, es demasiado suave emocionalmente, y es demasiado centrado en el negocio (en lugar del cliente): "Hemos encontrado que a la gente realmente le gusta comprar en HeadRoom y headphone.com, y nos encantaría hacerte un creyente, también."

¿Qué pasa con lo que quieren sus clientes? Asegúrese de que cualquier copia en cualquier parte de su sitio se centra en sus clientes, no en usted o su negocio.

La gente compra por lo que puedes hacer por ellos, no por lo que pueden hacer por ti.

Las imágenes

En los temas de Shopify, el contenedor de imágenes para la imagen principal siempre se expandirá en altura para acomodar el tamaño de la imagen más alta en el carrusel. Si hay imágenes de diferentes tamaños, esto significa que habrá un gran trozo de espacio en blanco debajo de la imagen principal la mayor parte del tiempo.

La gente puede incluso pensar que sólo hay una imagen si se pierden las flechas. Sólo se muestra cuando se pone el ratón sobre ella. Es clave que los tamaños de imagen sean consistentes, o que fuerce que las imágenes adicionales se hagan a la derecha debajo de la imagen destacada.

¿El siguiente? Las críticas. Hay demasiada espacio en blanco alrededor de ellos. Tanto que hace que parezca falso, como si el diseñador acaba de levantar una mesa de otro lugar y pegado en. También crea paginación, lo que significa que las personas tienen que hacer clic a través de 3 páginas para obtener todas las críticas... no hacen que la gente trabaje tan duro para leer cosas buenas sobre ti!

Peor que el espacio en blanco, sin embargo, es que los comentarios no están siendo moderados.

Headphones.Com tiene una gama de reseñas, pasando de excelentes barridos de 5 estrellas a 1 y 2 estrellas.

Bad evaluaciones ver peor que no hay reseñas. Sólo te duele tener clientes enojados o decepcionados ventilan en un espacio público. Sí, debe permitir que algunos comentarios de 3 y 4 estrellas a través de demostrar que eres legítimo y no fingir sus comentarios, pero no aprobar los retañes.

Si tienes configurada la tienda para aprobar automáticamente, desactiva esa función y ve a través de ellas tú mismo. No solo se ve mejor en sus páginas de productos, sino que también puede lidiar directamente con clientes insatisfechos sin la presión de potencialmente entrar en las coincidencias de las páginas de productos para que todos lo vean.

Algunos puntos finales:

1. Páginas de producto, expanda la descripción a ancho completo en lugar de simplemente usar un tercio de la página una vez que el texto pasa por encima del contenedor de imágenes. Es más fácil para las personas leer y evitar el problema del espacio en blanco. (Consulte las páginas de productos en Fringe deporte, un cliente nuestro, para un buen ejemplo de esto.)
2. Un producto relacionado, en este caso, un auricular adicional, tiene el enlace abierto en una nueva pestaña. Por lo tanto, los usuarios no se les quita el producto que realmente quieren. Alternativamente, se puede configurar como una venta ascendente para que sea aún más fácil para las personas a agregarlo a su orden en el impulso.
3. Asegúrese de que todos los enlaces de la página funcionen y sean relevantes. En esta página del producto, el enlace al manual del propietario está muerto. No se abre en una nueva pestaña, por lo que lleva al usuario al sitio de Sennheiser (lejos de comprar), Y se rompe el enlace. Profundiza en esto en el post 1, pero baste decir que los enlaces rotos no inspiran confianza: ¿es este un modelo antiguo? ¿Este artículo es compatible con Sennheiser? ¿Son estos incluso reales? ¡ ¿Por qué está todo en alemán?!

Lecciones clave de derribar #3:

• No, por el amor de todo lo que es bueno, la gente de la mano una razón para no comprar de usted. Si usted tiene una política de precios interesante o transparente, eso es genial, pero mantenerlo sutil en las páginas de productos. Es mejor tener una página separada por completo para que no distraiga a la gente de comprar.
• Asegúrese de que sus imágenes son de tamaños consistentes y de que está utilizando eficazmente el inmueble de la página.
• Modera sus opiniones manualmente. De esta manera obtienes un buen spread que es representativo de las experiencias de tus clientes, sin dejar que las publicaciones automáticas o críticas desagradables lo estropeen para todos.

Headphone.Com es una gran tienda, y aunque hay cosas que arreglar, su oferta es excelente y tienen la ética de trabajo para hacer que las cosas sucedan rápidamente.

Al igual que con Me encanta esa bolsa Y Scrubba, el equipo de Headphones.Com dio un gran salto teniendo esta crítica hecha en público, y estamos muy agradecidos a todos nuestros participantes de Tear Down por confiar en nosotros lo suficiente como para darnos rienda suelta en sus negocios.

No es fácil escuchar comentarios como este, y todos han sido extremadamente buenos deportes.

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

Esperamos que hayas sacado algunas ideas útiles de esta serie, y las estás poniendo a usar en tu propia tienda. Si tienes alguna pregunta sobre cualquier cosa que hayamos cubierto en cualquiera de estos posts, por favor comenta y nos volveremos a ti tan pronto como podamos.

Esta serie ha sido muy divertido para nosotros, por lo que hay una gran probabilidad de que lo hagamos de nuevo en el futuro. Si desea que su tienda sea considerada la próxima vez, asegúrese de unirse a nuestra lista de correo privada a continuación para obtener la atención.

Gracias de nuevo por mantenerse al día con nuestro Shopify Insider blog @ Blackbelt Commerce. Por favor, asegúrese de revisar nuestra Productos Y Servicios. También tenemos algunas recomendaciones principales del blog para que usted Compruebe hacia fuera;  4 maneras de mostrar la prueba social en tu tienda Shopify, Más estrategias de diseño de ShopifyY Almacenistas en Shopify.  Media gallery for shopify the easy way to showcase your media feature, As always, keep a lookout for new blog posts.