Cómo crear una página de producto con imagen perfecta para su negocio de comercio electrónico

El diseño de la página de su producto es una de las páginas más importantes y complejas de su tienda. Considere todas las situaciones en las que un cliente potencial podría llegar a la página de su producto:

• Directamente desde un motor de búsqueda
• Después de navegar por su tienda
• Después de hacer clic en un anuncio dirigido

Como uno de los pasos finales de una venta, la página de su producto debe ser:

• Optimizado para garantizar que se pueda encontrar fácilmente,
• Lo suficientemente informativo como para infundir confianza en su cliente, y
• Bien diseñado para brindar una excelente experiencia de compra en línea

Hay una serie de cosas que puede hacer para mejorar las posibilidades de que las personas encuentren la página de su producto y aumentar la tasa de conversión una vez que lleguen allí. Para desglosar las cosas, hemos creado una guía de cinco partes para crear la página de producto perfecta.

Parte 1: Comprender los componentes de un gran diseño de página de producto

Antes de profundizar en los detalles de cómo optimizar cada aspecto de la página de su producto, veamos un excelente ejemplo de diseño de página de producto para comprender cómo encaja cada uno de los componentes y por qué son importantes.

Uniqlo Australia tiene un excelente ejemplo de una página de producto diseñada pensando en el usuario. Aquí hay una captura de pantalla de una de sus páginas de productos típicas con los componentes clave resaltados:

Inmediatamente, notará que> 90% de la página está dedicada a brindar más información al cliente sobre el producto que está viendo y casi no se desperdicia espacio en la mitad superior de la página. Para desglosar cada sección aún más:

• El título del producto y la descripción general son fáciles de localizar. De la misma manera que los edificios y los letreros actúan como puntos de referencia cuando visita una ciudad nueva, los buenos títulos ayudan a los clientes a navegar por un sitio nuevo.
• Una galería de imágenes que muestra el producto desde varios ángulos, con un modelo y de cerca.
• La imagen del producto está al frente y al centro. Una foto clara sobre un fondo blanco muestra el producto con la mejor luz. Las imágenes son lo que busca el cliente, por lo que vale la pena destacarlas.
• Una descripción única y detallada del producto que describe qué es, el pensamiento detrás de su diseño y cómo resuelve el problema del comprador.
• Comentarios sinceros de los clientes que ayudan a generar confianza en su producto y marca.
• Los clientes saben lo que quieren, pero es posible que no sepan cómo encontrarlo. Mostrar productos vistos recientemente o relacionados les ayuda a reducir sus opciones más rápido y le brinda la oportunidad de mostrar los productos que cree que podrían preferir.
• Un montón de opciones y variantes en una página significa que un cliente no tiene que navegar a través de varios productos.
• Inmediatamente después de que el cliente termine de seleccionar sus opciones, el botón "Agregar al carrito" los estará esperando.
• ¿No estás listo para comprometerte? Los enlaces a información adicional, como su política de envío y devoluciones, ayudan a responder cualquier pregunta persistente.

Siempre encuentro útil ver cómo otras tiendas han diseñado sus páginas de productos. Tampoco es necesario buscar tiendas dentro de la misma industria. Considere ver qué estrategias están haciendo los sitios web populares en otras industrias que a los clientes les encantan pero que sus competidores no están utilizando.

En las páginas de productos más exitosas, encontrará una variación de estos mismos componentes:

• Descripciones claras y únicas
• Gran fotografía de producto
• Reseñas para infundir confianza al comprador
• Opciones de personalización
• Borrar el botón "Agregar al carrito"
• Información adicional de envío o compra

Parte 2: Responda estas preguntas en la copia de su producto

Una buena copia es crucial para la página de su producto. No solo para sus clientes, sino también para SEO. El uso de información del fabricante o del producto genérico es una forma segura de asegurarse de que su producto no sea competitivo en los rankings de búsqueda.

Para crear una excelente copia de la página del producto, hay algunas preguntas que puede responder.

¿Qué es?

Lo primero que debe abordar la copia de su producto es qué es exactamente el producto. Si el cliente está buscando un producto específico, esto es lo primero que quiere que se le responda.

En el caso de los productos nuevos, quieren saber qué es exactamente y por qué deberían estar interesados.

¿Cómo resuelve el problema?

¿Qué problema resuelve su producto y cómo lo resuelve? Esta es la pregunta fundamental que debe responder a sus clientes.

Quizás sea tan simple como una función de utilidad como un suéter que te mantiene abrigado. En ese caso, incluya qué materiales o procesos de fabricación han ayudado a hacer posible la solución de su producto.

O tal vez el problema está un poco más abajo en la jerarquía de necesidades y el producto simplemente te ayuda a lucir más elegante. ¿Qué historia o proceso detrás del producto hace que sea deseable poseerlo?

Sea lo que sea, al identificar el problema que resuelve su producto, puede comprender las preguntas que su cliente se haría a sí mismo al comprar y adaptar su copia para responderlas.

¿Por qué su producto?

Ha establecido que existe un problema y cómo su producto puede resolverlo. Ahora bien, ¿por qué deberían elegir su producto sobre uno de la competencia? ¿Qué medidas adicionales ha tomado para asegurarse de que su suéter sea el más abrigado? ¿Qué ingredientes usas que nadie más usa? Esta es su oportunidad de mostrar por qué su producto es especial.

Incluso si vende productos de otro fabricante, tomarse el tiempo para demostrar que comprende la razón por la que este producto es mejor demuestra que se ha tomado el tiempo para investigar.

¿De qué está hecho?

El último detalle que debe agregar es lo que podría considerarse metadatos para su producto. Proporcionar información sobre los materiales o ingredientes que se incluyen en sus productos ayuda a compensar la incapacidad de los compradores en línea de sentir los productos por sí mismos.

Información simple, como los ingredientes, e instrucciones básicas, como cómo cuidarlo o su uso previsto, pueden ayudar al cliente a visualizar el producto y proporcionar un mayor contexto a los motores de búsqueda.

Parte 3: Cree excelentes imágenes de productos

Las fotos de sus productos suelen ser lo que el cliente ve primero en la página y pueden mostrar instantáneamente su producto de manera negativa o positiva. Pero además de las primeras impresiones, las fotos de los productos también ayudan a transmitir una cantidad de detalles mucho mayor de la que es posible con el texto solo, lo que puede ayudar a vender el producto. La fotografía de productos bien hecha puede incluso reducir la cantidad de recursos gastados en servicio al cliente y devoluciones.

Entonces, esto es lo que debe hacer para crear excelentes imágenes de productos:

Comience con una buena fotografía

Las fotos mal iluminadas tomadas sin un equipo decente pueden ser una señal de alerta para los clientes. No tomarse el tiempo para tomar fotos decentes puede costarle más tiempo en lo que respecta a la edición.

Pero ... no necesitas gastar mucho dinero para conseguir una gran configuración de fotografía pequeña. La guía A Better Lemonade Stand Guide para la fotografía de productos de bricolaje enumera cómo puede comenzar con la fotografía de productos de bricolaje con cualquier presupuesto.

Sus requisitos básicos para una configuración de fotografía de productos de bricolaje deben incluir:

• Una cámara o un teléfono inteligente de buena calidad: no necesita necesariamente una cámara DSLR para la fotografía de productos. Su teléfono inteligente producirá fotos que tengan una resolución lo suficientemente alta y una cantidad adecuada de configuraciones para ajustar las condiciones de luz y apertura.
• Una fuente de luz constante: su iluminación debe ayudar a iluminar las características más importantes de su producto y ocultar las sombras. La luz natural es ideal para empezar, ya que no es tan cara ni delicada como la iluminación artificial; sin embargo, también necesitará usar una luz de relleno o un espejo para distribuir uniformemente la fuente de luz desde ambos lados.
• Un fondo blanco: los fondos blancos ayudan a desviar la luz de manera uniforme, por lo que se necesita menos trabajo para corregir el contraste. También hace que editar la foto más tarde con la varita mágica o la herramienta de lápiz sea mucho más fácil. Puede utilizar un rollo de papel o incluso una hoja suficientemente blanca para empezar.
• Una superficie estable: para tomar sus fotos de manera uniforme.
• Clips: para mantener el telón de fondo o la iluminación en su lugar.
• Un trípode: para sostener su cámara. Tener un trípode no es una necesidad, pero te ayudará a tomar fotos consistentes rápidamente para muchos productos diferentes. Si trabaja con una sola persona, también puede facilitar las cosas y ahorrarle tiempo en la postproducción.

Utilice varias imágenes

No es suficiente usar una sola toma de producto. Los clientes quieren ver el producto desde una variedad de ángulos y perspectivas. La fotografía de su producto puede mostrar los aspectos más importantes de su producto mucho mejor que cualquier descripción, por lo que es importante que agregue tantas fotos como sea necesario para responder a las preguntas del cliente.

Las diferentes fotos también pueden tener varios niveles de importancia en diferentes etapas del proceso de compra.

Cuando los nuevos clientes descubren su producto por primera vez, es posible que prefieran ver imágenes de otras personas que lo utilizan. Esto es particularmente importante para productos, como Tile, donde el producto en sí no es suficiente para ilustrar lo que hace, y mucho menos sus beneficios. Entonces, la compañía usa fotografías de productos para ilustrar cómo y por qué las usaría:

Pero cuando profundiza en la página del producto real, encuentra fotos más detalladas que se enfocan en el producto en sí. Una vez que los usuarios están en la página del producto, han descubierto cómo su producto resuelve su problema y están más interesados ​​en saber qué tan bien lo hace.

Edita tus fotos

Una vez que tenga sus fotos, hay algunas cosas que debe hacer para que estén listas para la venta. La tarea más obvia es eliminar sus antecedentes. Tener una pantalla blanca hace que hacer esto con la herramienta Adobe Creative Cloud Magic Wand o Pen requiera menos tiempo.

Después de eso, es posible que desee ajustar el contraste o la configuración de iluminación para mejorar la calidad de su imagen o compensar cualquier cambio en la iluminación natural. Sin embargo, asegúrese de mantener constantes las condiciones de su imagen; No se recomienda agregar ningún tipo de filtro.

Si no tiene acceso al software de edición de fotografías, puede utilizar herramientas en línea como Pixlr, que tiene todas las herramientas que necesita para realizar la edición básica de fotografías. Los servicios como Pixc también pueden manejar sus necesidades de edición de imágenes por usted tomando sus imágenes sin editar y devolviendo fotos de productos editadas profesionalmente.

Optimiza tus imágenes

El último paso es asegurarse de que sus fotos estén optimizadas tanto para la velocidad como para el SEO.

Asegúrese de que los tamaños de sus imágenes sean razonables. Shopify recomienda mantener las imágenes de sus productos por debajo de 70 kb. Esto se puede lograr sabiendo en qué tipo de formato de archivo guardar sus imágenes. Como regla general:

• Los GIF son imágenes de baja calidad que sirven para iconos y miniaturas. También admiten animación, pero no son adecuados para imágenes grandes debido al tamaño del archivo y la mala calidad.
• SVG es un formato vectorial, lo que significa que usa XML para describir el contenido de la imagen en formato de texto. Cargará iconos e imágenes básicas casi instantáneamente y con un tamaño de archivo muy pequeño, pero las imágenes normales serán demasiado complejas para usar con este formato.
• Las imágenes PNG son archivos más rápidos que admiten menos compresión, lo que significa que conservarán la calidad de imagen original. También admiten escala de grises y transparencia, pero el tamaño del archivo generalmente es demasiado grande para fines de comercio electrónico.
• JPG se refiere a un método de compresión que le permite alterar el grado de compresión. Normalmente, las imágenes JPG pueden reducir el tamaño del archivo hasta 10 veces sin pérdidas perceptibles de calidad. Esto los hace ideales para crear imágenes de productos de alta calidad y tamaño de archivo reducido.

Además, asegúrese de nombrar sus imágenes con nombres de archivo apropiados y de usar títulos y etiquetas alt que describan la imagen y el contenido con precisión. Las etiquetas Alt se pueden usar para incluir palabras clave notables, pero su propósito principal es ayudar en la accesibilidad.

Parte 4: Mantenga la fotografía de su producto consistente

Las grandes tiendas de comercio electrónico utilizan fotos de productos que funcionan igual de bien en una página de producto individual o en una colección de productos similares. Tener imágenes consistentes facilita la búsqueda y comparación de productos y también puede crear coherencia y profesionalismo en torno a su marca.

Estas son las mejores formas de mantener la coherencia en la fotografía de sus productos:

Fotografíe sus productos sobre un fondo blanco

Una de las formas más sencillas de producir consistentemente excelentes fotografías de productos es utilizar un fondo blanco. En nuestra publicación de fotografía anterior, describimos cómo puede crear su propia configuración de fotografía y tomar fotografías de productos de calidad profesional.

Tener tus fotos sobre un fondo blanco te permite:

• Cree coherencia en todos sus productos
• Mejore ciertos aspectos de su producto
• Edite fácilmente sus fotos en el futuro y
• Venda sus productos en mercados como Google Shopping y Amazon que requieren un fondo blanco.

Utilice las mismas dimensiones o relación de aspecto

Nada destaca más en una página de colección que las imágenes de diferentes tamaños. A menos que haya establecido específicamente la altura y el ancho mínimos usando CSS, las páginas de su colección serán un desastre. Los usuarios tendrán que dedicar su valioso tiempo de compras a descifrar dónde hacer clic.

Considere incluso una simple página de colección de productos. ¿Cuánto más fácil es buscar y comparar los productos cuadrados de la derecha en comparación con los productos de varios tamaños de la izquierda?

¿Cuál luce mejor?

Si bien hay aplicaciones y complementos disponibles que cuadrarán sus imágenes por usted, el mejor enfoque es asegurarse de que las imágenes de sus productos siempre se guarden con dimensiones específicas.

Crear tus imágenes con dimensiones entre 1000px y 1600px en el lado más largo está bien, pero también debes tratar de mantener todas tus imágenes cuadradas. Las imágenes cuadradas se verán bien ya sea que la imagen sea horizontal o vertical y mantendrán sus imágenes consistentes en su tienda.

Utilizar plantillas de productos

Para lograr una tienda de comercio electrónico de aspecto profesional, debe crear coherencia en las imágenes de sus productos. Esto significa tener fotos que no solo tienen las mismas dimensiones, sino que también tienen un estilo similar y un posicionamiento consistente dentro de la imagen.

Si observa cualquier tienda de comercio electrónico exitosa, verá que sus imágenes se destacan por sí mismas, pero también encajan bien dentro de una colección, ya que todas están ubicadas a la misma distancia de la cámara.

Asegurarse de que sus productos estén posicionados de manera consistente en todas sus fotos puede ser complicado. Aquí es donde las plantillas de productos pueden ayudar.

Las plantillas de productos garantizan que sus productos se coloquen de manera uniforme en la misma área de la foto y se escalen correctamente. Pueden ser particularmente importantes si incluye algún texto en las imágenes de sus productos.

Para crear un archivo de plantilla de producto básico con Photoshop:

• Cree un nuevo archivo de Photoshop con el ancho y alto que desee. Asegúrese de que el modo de color esté configurado en Color RGB: 8 bits, la resolución sea de al menos 72 píxeles / pulgada y el contenido de fondo sea blanco o transparente.

• A continuación, en "Ver" en el menú principal, seleccione "Nueva guía".

• Cree una guía vertical del 10% y repita los pasos para tener:
  • 10% guía vertical y horizontal
  • 90% de guía vertical y horizontal
  • 50% guía vertical y horizontal

• Deberías terminar con esto:

• Ahora puedes colocar tu imagen sobre la plantilla. Las guías te darán una referencia para saber que tu imagen está centrada tanto horizontal como verticalmente. También lo ayudará a asegurarse de que todos sus productos se coloquen en una escala constante.

Ahora simplemente guarde su archivo como un documento normal de Photoshop (.PSD) y sus guías estarán allí esperándolo. La guía que ha creado le permitirá cargar rápidamente cualquier foto de producto editada y asegurarse de que se vea siempre excelente en todo su sitio web.

Parte 5: ¡Lleve las fotos de sus productos al siguiente nivel!

Si tiene una excelente fotografía de productos y excelentes descripciones de productos, tiene los elementos necesarios para una página de productos de alta conversión. Sin embargo, todavía hay algunas cosas finales que puede hacer para mejorar las fotos de sus productos y asegurarse de tener la mejor página posible.

Acelera tus imágenes

Las imágenes pueden tener un gran impacto en los tiempos de carga de la página. Si las páginas de sus productos tardan en cargarse, sus visitantes se sentirán frustrados al esperar que se carguen y visitarán menos. De hecho, el 40% de los visitantes abandonarán su sitio web si tarda más de 3 segundos en cargarse. Por lo tanto, las páginas de productos deben cargarse rápidamente y ser fáciles de navegar. Aquí hay varias formas en las que puede optimizar sus imágenes para lograrlo.

Por un lado, use CSS para el fondo de su página en lugar de una imagen. De manera similar, se debe usar CSS para crear bordes alrededor de imágenes y elementos de botones.

Las bibliotecas externas que cargan complementos o galerías de imágenes también pueden ralentizar el tiempo de carga general de su página y deben evitarse para los elementos críticos de su página.

También puede ejecutar su página a través de Google PageSpeed ​​Insights para identificar formas de acelerar su sitio móvil y de escritorio. Google PageSpeed ​​le dirá qué imágenes se pueden comprimir, cómo optimizar sus imágenes y cuánto espacio puede ahorrar al hacerlo.

Las herramientas de desarrollo integradas de su navegador también pueden identificar cómo su página carga archivos y qué archivos están tardando demasiado.

Para hacer esto en Google Chrome:

• Haga clic derecho en la página que desea analizar
• Seleccione la red"
• Recarga la página

Puede ordenar por "Tipo" de archivo para ver qué imágenes están tardando más en cargarse, por "Tamaño" para ver los archivos más grandes, por "Tiempo" para ver cuánto tiempo o por "Estado" para ver si algún archivo no pudo ser cargado.

Además, asegúrese de que sus imágenes estén optimizadas para la velocidad y el SEO utilizando los consejos de la Parte 3.

Optimice su página para dispositivos móviles

Es crucial dedicar un tiempo a observar cómo se muestran las páginas de sus productos en varios dispositivos móviles. Herramientas como Hotjar te permiten crear mapas de calor de cómo los usuarios interactúan con tus páginas. Y, si tiene Google Analytics instalado, puede comparar sus tasas de conversión de dispositivos móviles y computadoras de escritorio para determinar si su experiencia de compra móvil está a la altura.

Google Analytics puede proporcionarle una gran cantidad de datos útiles de comercio electrónico sobre tasas de conversión y viajes de compra, pero la forma más sencilla de experimentar cómo se ve su sitio web en múltiples dispositivos es experimentarlo usted mismo. Usando la barra de herramientas del dispositivo Chrome, o el modo de diseño receptivo si está usando Firefox o Safari, puede ver cómo se ve la página de su producto en cualquier dispositivo.

Algunas consideraciones para sus páginas de productos móviles:

• Haga que sus imágenes estén al frente y al centro. La información adicional debe estar disponible para los usuarios cuando la deseen, pero no debe interferir con las imágenes.
• Acelere su sitio asegurándose de que sus imágenes se hayan reducido de tamaño y no esté cargando demasiados complementos de terceros. Los tiempos de carga son especialmente importantes para los clientes que cargan a través de una red móvil.
• Considere usar una barra de menú fija para que el cliente siempre tenga acceso a la barra de búsqueda, el menú principal y el carrito.

Los clientes pasarán menos tiempo navegando y leyendo contenido en dispositivos móviles, por lo que las imágenes jugarán un papel particularmente importante para sus compradores móviles. Asegúrese de que sus imágenes destaquen y se carguen rápidamente para asegurarse de que está brindando la mejor experiencia de compra móvil.

Recuerda SEO

Las páginas de productos a menudo parecen ser un recurso infrautilizado en términos de SEO. Las páginas de sus productos le brindan la oportunidad de presentar parte de su contenido más valioso y exclusivo que puede ayudar a que su tienda tenga una clasificación más alta en las listas de búsqueda. La mayoría de las veces, la página del producto es exactamente lo que su cliente quiere ver.

Para reforzar el SEO de su página de producto:

• Elabore una descripción de producto única que describa claramente cuál es su producto y coincida con los términos que buscan sus clientes.
• Optimice los metadatos de su imagen al incluir etiquetas ALT para describir la imagen, las etiquetas de título adecuadas y los nombres de archivo relevantes.
• Considere agregar videos a la página de su producto. Si agregar videos a su página o no ayuda con el SEO es un tema de debate, pero pueden ayudar a darle un mayor contexto a sus productos, lo que puede mejorar sus conversiones.

Optimizar imágenes para zoom

¿Ha notado cómo la mayoría de los sitios de comercio electrónico le permitirán pasar el cursor sobre la imagen para "acercar" el producto? Esta se ha convertido en una característica que es casi una segunda naturaleza. Esperamos obtener una versión más grande del producto cuando hacemos clic o colocamos el cursor sobre él.

Tener esta característica tiene un propósito importante. Permite a los clientes conocer en detalle la calidad del producto. También ayuda a infundir confianza en la compra del cliente cuando no puede sentir o ver físicamente el producto. A veces, la calidad de las costuras o el tono del color pueden marcar la diferencia entre que el cliente elija su producto y no el de la competencia.

Entonces, ¿cómo se asegura de tener una función de zoom en funcionamiento? El secreto es saber utilizar los tamaños de imagen correctos.

La mayoría de los sitios web de comercio electrónico tendrán varias "plantillas". Estas plantillas cambiarán el tamaño de su imagen para que coincida con el tamaño de la plantilla. Por ejemplo, puede tener:

• Una plantilla de miniatura de 50 px x 50 px
• Una plantilla de imagen de colección de 100 px x 100 px
• Una plantilla de imagen relacionada de 150 px x 150 px
• Una plantilla de foto principal de 500px x 500px

La función de zoom normalmente funciona mostrando la imagen en su tamaño original completo. Entonces, si tiene una imagen que ha guardado en 1000px x 1000px, cuando pase el cursor sobre la plantilla de la foto principal (que es de 500px x 500px), se mostrará al doble de ese tamaño.

Lo que esto significa es que para tener una función de zoom que funcione, debe asegurarse de que las dimensiones de su imagen sean más grandes que la plantilla de su foto principal.

Si son del mismo tamaño, el usuario verá la misma imagen cuando pase el mouse. Pero si son demasiado grandes, el tamaño de la imagen puede tener un impacto negativo en los tiempos de carga y ser demasiado grande para ser práctico.

Las dimensiones de la imagen entre 1000px y 1600px suelen ser un buen compromiso entre el tamaño del archivo y tener una imagen que pueda proporcionar suficientes detalles de primer plano.

Conclusión

En estos cinco capítulos, hemos podido cubrir ampliamente las áreas más importantes a las que debe prestar la debida consideración al crear las páginas de sus productos. Si sigue estas pautas, tendrá una página de producto que brinda una excelente experiencia de compra para sus clientes y disfruta de altas tasas de conversión. Ahora que tiene una guía, depende de usted salir y crear una página de producto ganadora que genere ventas para su tienda de comercio electrónico.