← Volver al laboratorio · Entrega para IT

Guía de los cambios de la Home

Qué hace cada cambio de esta entrega, en palabras sencillas: qué verá quien entre en la web y por qué. El cómo (código, selectores, medidas y orden) está en el LEEME.md de la entrega y en el detalle de cada cambio del laboratorio.

La entrega cubre la portada y la cabecera en todas las páginas (portada, listados y ficha de producto), más dos limpiezas que valen para todas. Cada cambio lleva un código (UX-HOME-01, UX-CAB-03...), que es el mismo en el laboratorio, en el código y en el LEEME.

Para verlo en vivo, el laboratorio (https://uxlab-home-ale.pampl.ing) enseña cada página dos veces, lado a lado: a la izquierda como está hoy y a la derecha con los cambios. Cada cambio se puede encender y apagar para verlo por separado.

1. La portada

La parte de arriba

• La cabecera va encima de la foto principal (UX-CAB-01). En vez de una franja blanca encima de la foto, el logo, el menú y los iconos van en blanco sobre la propia foto, con una sombra suave para que se lean bien. "Last Chance" sigue en su rosa. Cuando se abre Catálogo, Snoopy y licencias o Comunidad, la cabecera vuelve a ponerse blanca. Por qué: en el móvil, la cabecera y la foto ocupaban casi toda la primera pantalla y los productos empezaban muy abajo.
• La foto principal, más alta, y la franja de ofertas, más fina y justo debajo (UX-HOME-11 y UX-CAB-06; en móvil y tablet). La franja negra de ofertas (por ejemplo "Calcetines 3x2") queda fina, pegada a la foto, y el título "Cada día 1 nueva camiseta" viene después, con aire. En móvil, ese título es un poco más pequeño para que quepa en una sola línea. En ordenador no cambia nada. Los dos cambios van juntos: el primero da forma a la franja y el segundo la deja en su medida final. Por qué: con la franja más alta de antes, la foto perdía sitio.

Las secciones de producto

Orden de la portada después del cambio: "Cada día 1 nueva camiseta", "Explora nuestras camisetas", "Nuestras sudaderas" (nueva), "Nuevas licencias" (nueva) y el resto, como hoy.

• "Explora nuestras camisetas", más corta (UX-HOME-01). Pasa de 20 camisetas a 8 en ordenador (dos filas) y 6 en tablet y en móvil. Por qué: 20 seguidas obligaban a bajar mucho y escondían todo lo que venía después, incluido Bestsellers.
• Vuelve el botón "Ver todo" a las camisetas (UX-HOME-05). Debajo de la sección, un botón lleva a todas las camisetas, como en las demás secciones. Por qué: si se recorta una lista, hay que dar el camino para ver el resto; si no, parece que no hay más.
• Sección nueva: "Nuestras sudaderas" (UX-HOME-02). Justo después de las camisetas: 12 sudaderas en ordenador (tres filas de cuatro) y 6 en tablet y en móvil, con su botón "Ver todo". Por qué: la portada no enseñaba ninguna sudadera como producto, y es el artículo de más precio.
• Sección nueva: "Nuevas licencias" (UX-HOME-03). Después de las sudaderas: 8 productos de licencia en ordenador (dos filas) y 6 en tablet y en móvil, mezclando camisetas, tazas y calcetines, con su botón "Ver todo". Por qué: las licencias oficiales atraen por sí solas y solo aparecían en banners y en el menú.
• Las dos secciones nuevas, con el mismo aspecto que las de siempre (UX-HOME-04). Mismo tipo de tarjeta, misma separación y el mismo botón al final. Es lo que hace que en cada tamaño se vea el número de productos que dicen los dos puntos anteriores.
• Bestsellers, 12 en vez de 20 (UX-HOME-08). Tres filas de cuatro en ordenador, como las demás secciones, y seis filas de dos en móvil. Por qué: era la sección más larga de la portada.
• El botón de "Con mucha categoría" dice "Ver todo" (UX-HOME-09), en vez de "Ver más". Por qué: todos los botones de sección de la portada dicen lo mismo, y "Ver todo" explica mejor adónde lleva.

Los huecos y los servicios

• Huecos de la portada, a la medida de Scuffers (UX-HOME-07). Las rejillas de producto van casi de borde a borde, las tarjetas más juntas, el texto pegado a la foto y más aire entre una sección y la siguiente que entre dos filas de la misma. Por qué: hoy todo se lee como una lista continua; así el ojo ve dónde acaba cada sección y las fotos salen más grandes.
• Los cinco servicios se deslizan de lado en móvil (UX-HOME-06). "Apoyas a los artistas", "serigrafía", "envío", "satisfacción" y "precio" pasan de ocupar dos filas a una sola que se desliza con el dedo: se ven dos enteros y asoma el tercero. En ordenador no cambia. Por qué: en móvil ocupaban más de 400 píxeles de alto para cinco frases cortas.

2. La cabecera, en todas las páginas

• La cabecera vuelve al subir (UX-CAB-03; portada, listados y ficha). Al bajar por la página se va, como hoy. En cuanto se sube un poco, baja deslizando y se queda fija arriba, en blanco. Arriba del todo vuelve a su sitio. La barra rosa de arriba no se mueve. Por qué: para buscar, entrar en la cuenta o ir a la cesta ya no hay que volver arriba del todo, y mientras se miran productos la cabecera no quita pantalla.
• Snoopy y licencias y Comunidad se abren como Catálogo (UX-CAB-08; en ordenador, en las tres páginas). Al pasar el ratón por ellos, la cabecera se pone blanca y debajo sale una banda blanca a todo el ancho, igual que la de Catálogo, con el nombre del apartado y sus enlaces. Por qué: se abrían en una caja pequeña, distinta del menú de Catálogo; así los tres se ven y se usan igual.
• El desplegable del idioma, de cristal oscuro (UX-CAB-07; en ordenador, en las tres páginas). Se abre una tarjeta negra translúcida con esquinas redondas y un pico hacia el idioma; las opciones van en blanco y se ponen rosas al pasar el ratón. En la portada, la cabecera se queda encima de la foto. Por qué: con la cabecera encima de la foto de la portada, la caja blanca de hoy quedaba mal.

3. Los listados

• La cabecera, sin sombra (UX-CAB-02). Por qué: la sombra cortaba la página en franjas.
• El botón "Filtros" se queda en su sitio (UX-CAB-09; móvil y tablet). Con la cabecera que vuelve al subir, un programa de la web haría flotar abajo el botón "Filtros" del listado. Este cambio lo deja en su sitio, como hoy. Por qué: es un efecto no buscado de la cabecera nueva. Hoy no se nota porque la cabecera se va con la página.

4. En todas las páginas

• Fuera la flecha de volver arriba (UX-HOME-12 en la portada y UX-CAT-84 en listados y ficha; es el mismo cambio). Por qué: el círculo negro de la esquina tapaba producto.
• Fuera dos programas que no hacen nada (UX-LIMPIEZA-01 y UX-LIMPIEZA-02). Son el contador de cuenta atrás antiguo y la librería que usaba. Se cargan en cada visita y ya no hacen nada. Quien visite la web no verá ninguna diferencia. Por qué: son peticiones de más en cada página.

5. Lo que tiene que resolver IT en la web

Son cosas que en el laboratorio se hacen con un apaño y en la web conviene hacer bien. El detalle está en el punto 4 del LEEME.md.

• Los productos de las secciones nuevas (sudaderas y licencias) están puestos a mano, como ejemplo. En la web tienen que salir de la tienda, elegidos y ordenados desde el panel de Pampling, sin tocar código.
• Menos productos desde el servidor. En el laboratorio las camisetas y los Bestsellers sobrantes se esconden. En la web, lo limpio es que el servidor mande directamente 8 camisetas y 12 Bestsellers. Lo mismo con la flecha: mejor quitarla de la plantilla que esconderla.
• Los dos programas muertos, fuera de las plantillas, comprobando antes que nada más los usa.
• El botón "Filtros": quitar de la web el trozo de programa que lo hace flotar. Hecho eso, el cambio UX-CAB-09 sobra.
• Los enlaces a categorías no guardan el filtro en la dirección: dependen de la sesión del visitante. Si un enlace se abre donde no llega esa sesión, se aterriza en el catálogo completo. Esto pasa en todas las categorías de la web, no solo en estas; la petición es que cada categoría tenga una dirección propia que funcione sola.