EVE Oslo: Reconstrucción de la navegación, las páginas de productos y la velocidad en una tienda de joyería

EVE es una marca noruega de joyería con una tienda en Oslo y una tienda Shopify en noruego e inglés. En las últimas semanas hemos trabajado en su tema mediante una serie de mejoras: una nueva forma de navegar por las colecciones, una página de producto más tranquila, una carga más rápida y estable, y una ronda de correcciones para móviles, tablets y accesibilidad. Este artículo detalla los cambios más importantes y el razonamiento detrás de ellos. El trabajo aún está en curso y se ha realizado en un tema de desarrollo, en paralelo a la tienda en vivo.

Resumen del proyecto

EVE vende anillos, pendientes, collares, pulseras, bolsos y accesorios, con un catálogo amplio en el que una familia de productos puede estar presente en varias colecciones: Anillos contiene anillos de Oro, Plata, 14k, Compromiso, Apilables y Sello, y algunos de estos se dividen de nuevo en Banda, Piedra Solitaria y Multiusa. La tienda había crecido a lo largo de varias temporadas de temas, y se notaba. Navegar por el catálogo era incómodo, la página de producto presentaba varias pequeñas inconsistencias y cada página se cargaba con saltos visibles.

El cliente envió comentarios en varias rondas. Convertimos cada ronda en un conjunto enfocado de cambios, los probamos y los registramos en un breve documento de diseño y en un historial de Git para que la próxima persona que trabaje en el tema pueda ver por qué las cosas tienen ese aspecto.

Objetivos

• Facilitar la navegación por el catálogo Una forma clara de subir y bajar por el árbol de colecciones, tanto en escritorio como en móvil.
• Limpiar la página de producto Tipografía, espaciado y controles consistentes, con el bloque de compra y los detalles presentados de forma tranquila.
• Eliminar los saltos y retrasos de carga Descubrir por qué las páginas se desplazaban durante la carga y por qué la primera imagen aparecía tarde, y solucionar las causas.
• Que funcione bien en todos los dispositivos Móvil, tablet y escritorio, con áreas de toque cómodas y un contraste legible.
• Mantener segura la tienda en vivo Desarrollar y probar fuera del tema en vivo, y hacer que cada cambio sea fácil de revisar y revertir.

Cómo trabajamos

Un tema de desarrollo, un documento de diseño y Git

Todo el trabajo se realizó en una copia de desarrollo del tema. Nunca se editó el tema en vivo. Escribimos un breve documento de diseño dentro del tema describiendo sus colores, tipografía, espaciado y componentes, y mantuvimos el tema en un repositorio Git privado con un commit por cambio, incluyendo una copia de solo lectura del tema en vivo como punto de partida. Cuando el cliente reaccionaba a algo, podíamos señalar el cambio exacto.

Comentarios en rondas

Las notas del cliente llegaron en lotes: primero la navegación por colecciones, luego la búsqueda, el diseño para tablet, la página de producto, las tarjetas de producto y la sección de Instagram. Tratamos cada lote por separado, comprobamos el resultado en anchos de móvil, tablet y escritorio, y dijimos claramente qué habíamos probado y qué no.

Mejora 1: Una nueva forma de navegar por las colecciones

Este fue el cambio más grande. En la tienda antigua, una colección principal como Anillos contenía todas sus subcolecciones. Al desplazarse más allá del último anillo de Oro, se continuaba directamente con la siguiente subcolección, mientras que un menú lateral destacaba dónde te encontrabas. Funcionaba en teoría, pero era confuso en la práctica: la página nunca terminaba, el menú lateral ocupaba un tercio de la pantalla en escritorio y, en móviles, se convertía en un cajón más una barra flotante de Filtro y Ordenar en la parte inferior.

El cliente pidió un modelo diferente: cada colección y subcolección es una página normal propia. Anillos de Plata muestra solo anillos de plata. Eliminamos la lógica de desplazamiento infinito y el menú lateral del tema, en lugar de ocultarlos, y creamos una única fila de navegación horizontal en su lugar.

• Un nivel a la vez. La fila comienza con un enlace de retroceso que sube un nivel («Todas las categorías» en la parte superior), seguido de los elementos hermanos o hijos del nivel actual. El elemento activo se destaca.
• Relaciones reales entre colecciones. En lugar de depender de etiquetas, las colecciones ahora conocen su colección principal, sus colecciones hijas y su etiqueta de navegación mediante metacampos de colecciones, por lo que el árbol es información que el cliente puede editar.
• Niveles faltantes completados. Creamos las colecciones Banda de Plata, Piedra Solitaria de Plata y Multiusa de Plata bajo Anillos de Plata, impulsadas por reglas para que se completen automáticamente a medida que se añaden productos.
• Fija en escritorio. La navegación, Ordenar por y los Filtros comparten una única fila fija, y la cuadrícula de productos utiliza todo el ancho con cuatro columnas más grandes.
• Deslizable en móvil. La fila se desplaza lateralmente con un vistazo al siguiente elemento, y Filtro y Ordenar se convirtieron en un solo icono que abre un único cajón combinado. Los filtros se aplican cuando el comprador confirma, no en cada toque.
• La tablet sigue el diseño del móvil hasta 1024px, donde el diseño antiguo presentaba estados intermedios incómodos.

Mejora 2: Una página de producto más tranquila

La página de producto cambió en pasos más pequeños, guiados por notas detalladas del cliente. El resultado es una página donde cada control tiene un único lugar claro.

• Se eliminó la etiqueta de color duplicada debajo de las muestras, por lo que ahora hay un único selector.
• La disponibilidad de recogida y «Añadir a favoritos» ahora están en una línea, alineados entre sí.
• Las filas de acordeón (Detalles del producto, Materiales y cuidado, Envíos y devoluciones, Garantía) comparten un único separador gris suave y un espaciado ligeramente refinado, tanto en la página como en los cajones.
• Los detalles del producto y los cajones de políticas utilizan la misma tipografía ligera, espaciado de párrafos, encabezados y viñetas más claras, para que el contenido de diferentes fuentes parezca una sola voz.
• El mensaje emergente «Guardado en favoritos» se reemplazó por una señal más discreta: el icono de la cuenta se convierte en un corazón dorado por un momento.
• Las reseñas de Judge.me se prepararon en la página, con una insignia de estrella junto al título y en las tarjetas de producto, para que el diseño no salte cuando lleguen las primeras reseñas.

Mejora 3: Tarjetas de producto que hacen más

Las tarjetas de colección ganaron un pequeño icono de carrito para añadir rápidamente. Descubrimos por qué faltaba en algunos productos: los productos de variante única cuya única variante tenía el nombre del color no se contaban como productos simples. Eso se ha solucionado, y los productos multivarianza, como los anillos con tallas, muestran el mismo icono como enlace a la página del producto, para que todas las tarjetas se comporten de la misma manera. El corazón de la lista de deseos se convirtió en un botón de 44px correctamente etiquetado con un anillo de enfoque.

Mejora 4: Velocidad y estabilidad

Medimos antes de cambiar nada, utilizando pruebas de laboratorio de GTmetrix en un perfil móvil desde Ámsterdam, y luego trabajamos en las causas una por una.

• La página que saltaba. Cada página se desplazaba hacia abajo unos 117px durante la carga. Después de instrumentar la página, encontramos la causa en el diseño del cuerpo del tema: una fila de cuadrícula configurada para llenar la altura restante se superponía a la barra de anuncios, que se estiraba a toda la pantalla hasta que llegaba el resto de la página. Un cambio de CSS de dos líneas lo solucionó.
• La primera imagen tardía. La imagen del producto se descargaba rápidamente, pero permanecía invisible hasta que un script la revelaba. Ahora cargamos la primera imagen de forma anticipada con tamaños correctos y utilizamos un desvanecimiento solo con CSS para la primera diapositiva del banner.
• Imágenes y vídeo. Las imágenes de marcador de posición tenían un peso oculto, por lo que cambiamos los marcadores a un formato más ligero, ajustamos los logotipos del encabezado a su tamaño real de visualización y detuvimos la carga del vídeo del banner hasta que su diapositiva está activa.
• Espacio reservado para contenido tardío. Las recomendaciones y el feed de Instagram llegan después de la página, por lo que reservamos su espacio con esqueletos del tamaño del contenido real, lo que evita que la página salte mientras se completan.
• Una página de inicio más ligera. El deslizador «Regalos dorados» renderizaba 50 tarjetas de producto a la vez. Ahora muestra 12 por defecto, con el límite como ajuste. Las sugerencias de búsqueda del encabezado se construyen solo cuando se abre la búsqueda.
• Scripts de terceros. Retrasamos el widget de chat hasta la primera interacción y rastreamos una etiqueta de Google duplicada hasta dos integraciones que enviaban las mismas etiquetas. Esa corrección está en las aplicaciones del cliente y es suyo confirmarla.

Resultados de laboratorio en la página de producto, perfil móvil (la primera ejecución es el tema en vivo, la segunda es el tema de desarrollo):

Estas son pruebas de laboratorio, no datos de visitantes reales, y GTmetrix se ejecutó con una ventana de ancho de escritorio. En la página de inicio, el mismo enfoque redujo el LCP de 4.8s a unos 2.1s, y la puntuación sigue limitada por JavaScript, que es el próximo área a trabajar.

Mejora 5: Móvil, tablet y accesibilidad

Revisamos todo el tema en anchos de tablet y corregimos saltos de línea, proporciones y cajones incómodos. En el lado de la accesibilidad, las áreas de toque de Filtro y Ordenar ahora tienen 44px, la insignia del carrito pasó de una relación de contraste de 2.8 a 6.8, los títulos de los cajones son encabezados reales y el botón de la lista de deseos está etiquetado. También corregimos el comportamiento de añadir al carrito en iPhone.

Mejora 6: Idioma, búsqueda y páginas de contenido

• Noruego e inglés. El cajón del carrito, sus recomendaciones, las sugerencias de búsqueda y el formulario de búsqueda ahora mantienen el prefijo de idioma del visitante, y las líneas de envío gratuito e impuestos están traducidas.
• Búsqueda. Investigamos por qué la página de búsqueda se sentía demasiado amplia. Shopify rellena los resultados y clasifica los productos agotados al final. Documentamos los hallazgos y las opciones y acordamos los próximos pasos antes de cambiar nada.
• Instagram solo en la página de inicio. La sección se eliminó de las otras plantillas.
• Páginas de contenido estilo de políticas. El aspecto de las páginas de políticas ahora es parte del tema, por lo que cualquier página de texto puede compartirlo.

Lo que aún está pendiente

• Relevancia de búsqueda y ubicación de productos agotados, pendientes de los términos de ejemplo del cliente.
• Más recorte de JavaScript, ya que el trabajo de scripts ahora limita la puntuación de la página de inicio.
• Pulido restante en los nombres de las muestras, la tarjeta promocional de pendientes y la consistencia de ordenar y filtrar.
• Volver a probar la velocidad una vez que las aplicaciones de reseñas y correo electrónico que se están configurando estén en vivo.

Resultado

La tienda ahora tiene un modelo de navegación que coincide con cómo piensa la gente sobre la joyería, una página de producto con controles consistentes, páginas que ya no saltan durante la carga y un tema que está documentado y revisable cambio por cambio.

• Colecciones de desplazamiento infinito y menú lateral reemplazados por una única fila de navegación horizontal, con un árbol de colecciones que el cliente puede editar
• Página de producto limpiada con el detallado feedback del cliente
• Añadir rápidamente en todas las tarjetas de producto
• Causa raíz de los saltos de carga de la página encontrada y solucionada
• Correcciones para móvil, tablet y accesibilidad, manteniendo el noruego y el inglés consistentes
• Documento de diseño e historial de Git para el tema