Una foto de ambiente muestra un conjunto completo, un interior amueblado, un banco de trabajo equipado. El visitante ve el conjunto y no sabe qué productos lo componen ni dónde encontrarlos. Los puntos interactivos resuelven este problema, siempre que se coloquen e implementen correctamente.
El interés comercial de este formato se ha tratado por separado. Este artículo se centra en la implementación.
Dónde colocar los puntos
Cuatro reglas, en orden de importancia.
Sobre el producto, no al lado. Un punto colocado en el centro del objeto se comprende de inmediato. Un punto flotando a unos centímetros obliga a adivinar qué designa.
Separados al menos por el ancho de un dedo. Dos puntos demasiado cercanos son imposibles de distinguir al tacto. Cuenta una distancia equivalente a la zona táctil mínima entre dos centros.
De cinco a ocho como máximo por imagen. Más allá, la imagen se convierte en una siembra de pastillas y el visitante no abre ninguna. Si tu visual contiene doce productos, muestra ocho y ofrece la lista completa debajo.
Sobre zonas legibles. Un punto sobre una zona muy oscura o muy texturizada desaparece. Prevé un contorno o una sombra para garantizar la visibilidad sea cual sea el fondo.
El problema de las coordenadas
Dificultad técnica principal, y está subestimada.
Un punto colocado a 340 píxeles del borde izquierdo en una imagen de 1200 píxeles acaba en el lugar equivocado en cuanto la imagen se muestra a 380 píxeles en un teléfono.
La regla: almacena las coordenadas en porcentaje del ancho y del alto, nunca en píxeles. El punto permanece en su sitio sea cual sea el tamaño de visualización.
Segunda trampa: el recorte. Si tu imagen se recorta de forma diferente según el formato de pantalla, una imagen ancha en ordenador y cuadrada en móvil, los puntos calculados sobre una son erróneos en la otra.
Dos respuestas posibles. Usar la misma imagen en todas partes, simplemente redimensionada. O definir juegos de coordenadas distintos por formato, lo que duplica el trabajo de colocación.
La primera solución es la más sencilla y basta en la gran mayoría de los casos.
Lookbook Shoppable — Compra el Look e Imágenes con HotspotsEl lookbook shoppable que convierte tus fotos en ventas€79,00
El comportamiento táctil
Es lo que decide el uso real, puesto que este formato se consulta mucho en móvil.
En ordenador, el hover muestra una vista previa y el clic lleva al producto. En pantalla táctil el hover no existe, y trasladar directamente ese comportamiento produce una interfaz inutilizable.
Tres opciones para el táctil.
Un toque abre la vista previa, un segundo lleva al producto. Comportamiento habitual, con el inconveniente de exigir dos gestos.
Un toque abre una ficha compacta con imagen, nombre, precio y botón de añadir al carrito. El visitante puede comprar sin salir de la imagen, que es el mejor comportamiento comercialmente.
Un toque lleva directamente al producto. Rápido, pero hace perder el contexto de la imagen, lo que es una lástima en un conjunto completo.
La segunda opción es la que mejor convierte, porque permite componer varias compras desde la misma imagen.
Dos precisiones de implementación. La zona táctil debe ser más amplia que el punto visible, al menos cuarenta y cuatro píxeles de lado. Y el cierre de la vista previa debe ser posible con un toque fuera de ella, no solo en una pequeña cruz.
La accesibilidad
Punto sistemáticamente descuidado en este formato, y sin embargo resoluble en unas pocas líneas.
Una imagen con zonas clicables plantea tres cuestiones.
La propia imagen debe llevar un texto alternativo que describa la escena, no la lista de productos. «Salón con sofá gris, mesa de centro de roble y lámpara de pie» basta.
Cada punto debe ser un elemento interactivo con nombre, llevando el nombre del producto que designa. Un punto sin etiqueta es un botón mudo para un lector de pantalla.
La navegación con teclado debe permitir alcanzar cada punto en un orden lógico, y abrir la vista previa con la tecla de activación.
Añade un elemento que lo resuelve todo: una lista textual de los productos bajo la imagen. Sirve a los lectores de pantalla, a los usuarios de teclado, a los motores y a los visitantes que prefieren una lista. Es el complemento más rentable de este dispositivo.
Lo que ven los motores
Los puntos interactivos se construyen por script y su contenido no es necesariamente legible.
Tres consecuencias prácticas.
Los enlaces hacia los productos deben ser enlaces reales en el código, no elementos clicables gestionados solo por script. Si no, pierdes un enlazado natural entre tu página de ambiente y tus fichas.
El texto alternativo de la imagen lleva la información sobre la escena, lo que ayuda a la búsqueda de imágenes.
La lista bajo la imagen, mencionada antes, hace el contenido totalmente legible sin depender del renderizado de script.
El rendimiento
Una imagen de lookbook suele ser grande y pesada. Tres precauciones.
Servir la dimensión correcta según la pantalla, con formatos adaptativos. Una imagen de 2400 píxeles en un teléfono es puro desperdicio.
Declarar las dimensiones para reservar el espacio y evitar que la página salte cuando llega la imagen.
Cargar los puntos después de la imagen, pero reservar su posición desde el principio para que no aparezcan desplazados.
Punto complementario: si tienes varias imágenes de lookbook en una misma página, carga solo la primera de inmediato y difiere las siguientes.
El contenido de la vista previa
Cinco elementos, no más.
La miniatura del producto, que confirma visualmente de qué se trata.
El nombre, completo pero corto.
El precio, con la mención de no disponibilidad en su caso.
El botón de añadir al carrito, o de selección de talla si el producto tiene variantes.
El enlace hacia la ficha completa, para quienes quieren saber más.
En los productos con variantes se plantea la cuestión de la talla. Dos enfoques: abrir un selector en la vista previa, o remitir a la ficha. El primero convierte mejor en productos fáciles de elegir, el segundo evita errores en productos donde la elección requiere reflexión.
El mantenimiento
Aspecto que suele descubrirse tras unos meses.
Una imagen de lookbook envejece con su catálogo. Tres situaciones a tratar.
El producto está agotado. El punto debe permanecer, con la mención de no disponibilidad y eventualmente una alerta de reposición. Suprimirlo deja un hueco en la imagen sin explicación.
El producto se retira definitivamente. Dos opciones: retirar el punto, o redirigirlo hacia un producto equivalente con una mención explícita.
La imagen entera queda obsoleta. Una colección pasada. Prevé una fecha de fin por imagen, o como mínimo una revisión periódica.
Un control útil, a automatizar: listar los puntos que apuntan a productos inactivos o eliminados. En una tienda que ha acumulado veinte lookbooks, esta lista se llena rápido.
Medir
Tres indicadores.
La tasa de interacción con los puntos, respecto a las vistas de la imagen. Te dice si el dispositivo se comprende y se detecta.
El número de productos diferentes abiertos por sesión. Es el interés propio del formato: un visitante que abre tres compone un conjunto.
El ticket medio de las sesiones que pasaron por un lookbook, comparado con las demás. Ahí es donde el formato se justifica o no.
El módulo Lookbook Shoppable para PrestaShop implanta este dispositivo en PrestaShop 8 y 9: colocación de los puntos en coordenadas relativas para seguir siendo exactos a todos los tamaños, ficha compacta con añadir al carrito al toque táctil, lista textual de los productos bajo la imagen para la accesibilidad y el SEO, y detección de los puntos que apuntan a productos inactivos.
