,
24 tweets,
10 min read
Read on Twitter
0/ Hilo: Springfield Tienda Online cc @springfieldmw
Leyenda:
🛑 Errores objetivos
🤔 Errores subjetivos, apreciaciones personales
✅ Virtudes, cosas destacables
Leyenda:
🛑 Errores objetivos
🤔 Errores subjetivos, apreciaciones personales
✅ Virtudes, cosas destacables
1/ Te da la bienvenida un intrusivo popup con descuento y newsletter.
✅ Accesibilidad: puedes cerrarlo con tecla esc
🛑 Imagen baja calidad
🤔 Alineación rara, centrados título y primer párrafo, pero no el resto
🤔 Área superior draggable, ¿para qué?
✅ Accesibilidad: puedes cerrarlo con tecla esc
🛑 Imagen baja calidad
🤔 Alineación rara, centrados título y primer párrafo, pero no el resto
🤔 Área superior draggable, ¿para qué?
2/ Mensaje de cookies
🤔 Demasiado espacio con los bordes de la página
🤔 No hay interacción con el link “Política de Cookies” y “CERRAR”
🤔 Demasiado espacio con los bordes de la página
🤔 No hay interacción con el link “Política de Cookies” y “CERRAR”
3/ Header
🛑 Anclaje mejorable, da salto
🛑 Salto extraño a ~220px de scroll
🤔 Dropdown del menú sin “escapatoria”, en resoluciones pequeñas sólo desaparece al hacer scroll
🤔 Icono wishlist (percha) poco evidente
✅ Buscador muy rápido
🛑 Anclaje mejorable, da salto
🛑 Salto extraño a ~220px de scroll
🤔 Dropdown del menú sin “escapatoria”, en resoluciones pequeñas sólo desaparece al hacer scroll
🤔 Icono wishlist (percha) poco evidente
✅ Buscador muy rápido
4/ Banner home
🛑 Accesibilidad, la imagen no tiene texto alternativo
✅ Accesibilidad, el texto está maquetado, los enlaces tienen title
🤔 Texto con detalle de la promo a sangre y no hay interacción con el enlace “Ver más”
🛑 Accesibilidad, la imagen no tiene texto alternativo
✅ Accesibilidad, el texto está maquetado, los enlaces tienen title
🤔 Texto con detalle de la promo a sangre y no hay interacción con el enlace “Ver más”
5/ New In home
🤔 Me molesta que el enlace de Hombre “pise” ese espacio en blanco de la imagen
🤔 Mejoraría la legibilidad del título sobre imágenes claras
🤔 Me molesta que el enlace de Hombre “pise” ese espacio en blanco de la imagen
🤔 Mejoraría la legibilidad del título sobre imágenes claras
6/ Best Deals home
🛑 Accesibilidad: enlaces sin title
🤔 No es demasiado evidente qué sección está activa
🤔 SEO: "Best Deals" es el H1 de la home // me gustaría conocer la opinión de @JavierMrt
🛑 Accesibilidad: enlaces sin title
🤔 No es demasiado evidente qué sección está activa
🤔 SEO: "Best Deals" es el H1 de la home // me gustaría conocer la opinión de @JavierMrt
7/ Springfieldisyou home
🤔 Demasiada importancia a las flechas del carrusel
🤔 Subtítulo de la sección no "respira" respecto al carrusel
🤔 Botones con texto demasiado pequeño
🤔 Demasiada importancia a las flechas del carrusel
🤔 Subtítulo de la sección no "respira" respecto al carrusel
🤔 Botones con texto demasiado pequeño
8/ Popup Olapic home
🤔 No queda clara la distribución de la información
🤔 Las flechas del carrusel se confunden con las del carrusel anterior
🛑 El aspa de cerrar es distinta a la del resto de la web
✅ Accesibilidad: se puede cerrar con esc o clicando fuera de su área
🤔 No queda clara la distribución de la información
🤔 Las flechas del carrusel se confunden con las del carrusel anterior
🛑 El aspa de cerrar es distinta a la del resto de la web
✅ Accesibilidad: se puede cerrar con esc o clicando fuera de su área
9/ Footer
🤔 Agruparía los textos legales en menos ítems
🤔 Diseño pobre en páginas como la de países [myspringfield.com/es/es/countrie…]
🛑 Enlaces rotos dentro de Franquicias [myspringfield.com/es/es/inspirate]
🛑 Usabilidad: estando logueado me aparece “Iniciar sesión” en lugar de “Perfil”
🤔 Agruparía los textos legales en menos ítems
🤔 Diseño pobre en páginas como la de países [myspringfield.com/es/es/countrie…]
🛑 Enlaces rotos dentro de Franquicias [myspringfield.com/es/es/inspirate]
🛑 Usabilidad: estando logueado me aparece “Iniciar sesión” en lugar de “Perfil”
10/ Listado
✅ Placeholders en las imágenes // Mejorable con [jmperezperez.com/more-progressi…] o [jmperezperez.com/svg-placeholde…] de @jmperezperez
🤔 Nombre de producto algo pequeño
🤔 Aplicaría algo de transición al rollover en las imágenes
✅ Placeholders en las imágenes // Mejorable con [jmperezperez.com/more-progressi…] o [jmperezperez.com/svg-placeholde…] de @jmperezperez
🤔 Nombre de producto algo pequeño
🤔 Aplicaría algo de transición al rollover en las imágenes
11/ Ficha producto
🛑 Error en el fijado del bloque lateral, hace que se rompa el nombre de producto y botón de compra
🛑 El mensaje de error (al no elegir talla y color) descoloca el botón de compra
🤔 No queda claro el bloque “< Volver a jerséis >”
🛑 Error en el fijado del bloque lateral, hace que se rompa el nombre de producto y botón de compra
🛑 El mensaje de error (al no elegir talla y color) descoloca el botón de compra
🤔 No queda claro el bloque “< Volver a jerséis >”
12/ Wishlist
🛑 La wishlist tiene una imagen de fondo que no se carga por error 404
🤔 Al bloque que incluye la imagen de fondo le añadiría un color de fondo para que, si no se carga dicha imagen, al menos el texto sea legible
🛑 La wishlist tiene una imagen de fondo que no se carga por error 404
🤔 Al bloque que incluye la imagen de fondo le añadiría un color de fondo para que, si no se carga dicha imagen, al menos el texto sea legible
13/ Carrito
🛑 El "Añadir" del Código promocional está mal maquetado
🤔 Se podrían agrupar los bloques de Código promocional y Springfield money para que todo el carrito entrara un monitor 13", así se evitaría tener que hacer scroll para ver el total de la compra
🛑 El "Añadir" del Código promocional está mal maquetado
🤔 Se podrían agrupar los bloques de Código promocional y Springfield money para que todo el carrito entrara un monitor 13", así se evitaría tener que hacer scroll para ver el total de la compra
14/ [Mobile] Header
🛑 Alineación incorrecta entre iconos de la cabecera, aspa para ocultar el bloque de Envío
🛑 Los iconos no tienen suficiente área clicable
🛑 Los botones de hombre/mujer no están exactamente alineados al centro de la página
🛑 Alineación incorrecta entre iconos de la cabecera, aspa para ocultar el bloque de Envío
🛑 Los iconos no tienen suficiente área clicable
🛑 Los botones de hombre/mujer no están exactamente alineados al centro de la página
15/ [Mobile] Enlaces
🛑 Los enlaces y botones no tienen área clicable suficiente. Se solucionaría fácilmente añadiendo algo de padding
🛑 Mejorar UX: cuidar los estados :focus y :active de los enlaces. Se podría añadir tap-highlight-color [developer.mozilla.org/es/docs/Web/CS…]
🛑 Los enlaces y botones no tienen área clicable suficiente. Se solucionaría fácilmente añadiendo algo de padding
🛑 Mejorar UX: cuidar los estados :focus y :active de los enlaces. Se podría añadir tap-highlight-color [developer.mozilla.org/es/docs/Web/CS…]
16/ [Mobile] Menú
🛑 Error crítico: al abrir el menú burger hay ciertos ítems (los referentes a usuario) que quedan visibles y fijos al cerrarlo si antes no has navegado por las categorías principales 😮
🛑 Error crítico: al abrir el menú burger hay ciertos ítems (los referentes a usuario) que quedan visibles y fijos al cerrarlo si antes no has navegado por las categorías principales 😮
17/ [Mobile] Header
🛑 Error crítico de maquetación: el <div> que contiene los iconos de la derecha solapa por encima del logo, lo que hace que no todo el logo sea clicable 😮
🛑 Error crítico de maquetación: el <div> que contiene los iconos de la derecha solapa por encima del logo, lo que hace que no todo el logo sea clicable 😮
18/ [Mobile] Olapic
🛑 La carga de la galería de Olapic es lenta y brusca, se producen muchos saltos en la carga de imágenes ⬆️ Ver tweet #10 del hilo sobre técnicas placeholder
🛑 La carga de la galería de Olapic es lenta y brusca, se producen muchos saltos en la carga de imágenes ⬆️ Ver tweet #10 del hilo sobre técnicas placeholder
19/ [Mobile] Listado
🤔 El nombre de la categoría tiene demasiado margen superior
🤔 La proporción entre el titular y la descripción es mayor en mobile (3,56) que en desktop (2,35)
🤔 El nombre de la categoría tiene demasiado margen superior
🤔 La proporción entre el titular y la descripción es mayor en mobile (3,56) que en desktop (2,35)
20/ [Mobile] Listado
🛑 En iPhone5 (320px de ancho) la maquetación es correcta pero se rompe la alineación si aplicamos algún filtro en el listado
🤔 El listado reúne dos cosas que odio: scroll infinito y botón “scroll to top”
🛑 En iPhone5 (320px de ancho) la maquetación es correcta pero se rompe la alineación si aplicamos algún filtro en el listado
🤔 El listado reúne dos cosas que odio: scroll infinito y botón “scroll to top”
21/ [Mobile] Atención al cliente
🤔 En mobile siempre me gusta hacer enlaces los números de teléfono para que se pueda llamar directamente a ellos, igual que se hace con los emails. Más info [css-tricks.com/the-current-st…]
🤔 En mobile siempre me gusta hacer enlaces los números de teléfono para que se pueda llamar directamente a ellos, igual que se hace con los emails. Más info [css-tricks.com/the-current-st…]
22/ [Mobile] Preguntas Frecuentes
🛑 Usabilidad: cuando clicas en el título de una Pregunta Frecuente, te lleva al ancla de su contenido pero la cabecera fija tapa el título. Hay varias formas de solucionarlo [un ejemplo: gist.github.com/HoundstoothSTL…]
🛑 Usabilidad: cuando clicas en el título de una Pregunta Frecuente, te lleva al ancla de su contenido pero la cabecera fija tapa el título. Hay varias formas de solucionarlo [un ejemplo: gist.github.com/HoundstoothSTL…]
23/ La única finalidad de estos hilos es la de mejorar temas de accesibilidad, usabilidad, maquetación... en definitiva, mimo en el trabajo #frontend Si nuestras tiendas físicas cada día están más cuidadas, ¿por qué no las tiendas online? // FIN.
