Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Diseñando Experiencias para e-commerce

Coppel UX
December 07, 2019

Diseñando Experiencias para e-commerce

Esta presentación, hecha para DevFest México 2019, habla de cómo las métricas de velocidad (performance) y accesibilidad afectan la experiencia de usuario de un sitio de comercio electrónico como el de Coppel.com, así como las experiencias que el equipo de UX y WebDev han tenido al implementar AMP y PWA para mejorarlas.

Coppel UX

December 07, 2019
Tweet

More Decks by Coppel UX

Other Decks in Technology

Transcript

  1. Mauricio Angulo S. Gerente de Diseño de UX en Coppel

    Omnicanal Trabajo en Gerente de UX en Coppel, soy responsable del diseño de experiencia de los productos digitales de la empresa y de un equipo de diseñadores gráficos e interactivos, investigadores y optimizadores en Culiacán, Guadalajara y Cd. México. Soy mentor del programa de aceleración de startups Google Launchpad y miembro de la comunidad de Microsoft Regional Director como mentor en usabilidad, diseño y desarrollo de software. En 2014 fundé UX Nights, una comunidad sobre experiencia de usuario. Soy escritor, ponente internacional y formador técnico en LinkedIn Learning. > [email protected] > about.me/mauricioangulo
  2. CONFIDENCIAL UX Researcher Visual Designer Front End Developer Interaction/Conversation Designer

    UI (Interface) Designer Product Designer UX Designer UX Engineer INVESTIGACIÓN SÍNTESIS E IDEACIÓN PROTOTIPADO DISEÑO SENSORIAL IMPLEMENTACIÓN VALIDACIÓN Optimización Arq. Información Data Analyzer Data Scientist Design Thinking Coach UX Writer Service Designer VUI Designer
  3. CONFIDENCIAL Imagina cosas grandes e increíbles Experimenta investiga, crea y

    entrega resultados Mide todo, todo el tiempo Aprende comparte y mejora Sorprende a tus clientes y hazlos felices
  4. Es sumamente común escuchar que el rendimiento importa y que

    es esencial que las aplicaciones y sitios web sean rápidos. Pero, a medida que se intenta responder la pregunta ¿qué tan rápida es mi sitio web?, se vuelve claro que "rápido" es un término ambiguo. • ¿Qué significa exactamente "rápido"? • ¿En qué contexto? • ¿Y rápido para quién? Métricas de rendimiento centradas en el usuario RÁPIDAS
  5. Al hablar sobre rendimiento, es importante hacerlo con precisión para

    no generar conceptos erróneos o extender mitos que harían que desarrolladores con buenas intenciones optimicen elementos incorrectos y, en última instancia, perjudiquen la experiencia de usuario en lugar de mejorarla. Para brindar un ejemplo específico, hoy en día es habitual escuchar comentarios como: Probé mi aplicación y se carga en X,XX segundos. El problema con esta declaración no es que sea falsa, sino que distorsiona la realidad. Los tiempos de carga varían considerablemente de un usuario a otro según las capacidades de su dispositivo y las condiciones de red. Métricas de rendimiento centradas en el usuario
  6. En la práctica, el tiempo de carga de una aplicación

    es una recopilación de los tiempos de carga de cada usuario, y la única manera de representarlo es con una distribución como la del histograma:
  7. En lugar de medir la carga con una sola métrica,

    debemos medir los tiempos de cada momento a lo largo de la experiencia que pueden afectar la percepción de carga de los usuarios. • Un segundo ejemplo de un mito de rendimiento es que el rendimiento sólo preocupa en el tiempo de carga. La realidad es que el rendimiento deficiente aparece en cualquier momento, no solo durante la carga. Las aplicaciones que no responden rápidamente a toques o clics y las que no se desplazan ni se animan con facilidad pueden ser tan deficientes como las que se cargan con lentitud. Los usuarios consideran la experiencia completa y, nosotros, como responsables del sitio, debemos hacer lo mismo. Métricas de rendimiento centradas en el usuario
  8. Para asegurarnos de no repetir este error, debemos responder estas

    preguntas: • ¿Qué métricas miden con mayor precisión el rendimiento según la percepción de un humano? • ¿Cómo medimos estas métricas en nuestros usuarios reales? • ¿Cómo interpretamos nuestras mediciones para determinar si una aplicación es "rápida"? • Después de comprender el rendimiento de la aplicación para un usuario real, ¿qué hacemos para evitar las regresiones y, en lo posible, mejorar el rendimiento en el futuro? Métricas de rendimiento centradas en el usuario
  9. Cuando un usuario navega a una página web, generalmente busca

    información visual para reafirmar que todo funciona según lo esperado: Para comprender las situaciones en las que una página entrega esta información a los usuarios, se definieron varias métricas nuevas. ¿Está sucediendo? ¿La navegación se inició correctamente? ¿El servidor respondió? ¿Es útil? ¿Se representó contenido suficiente como para atraer a los usuarios? ¿Es utilizable? ¿Los usuarios pueden interactuar con la página o todavía se encuentra ocupada en la carga? ¿Es agradable? ¿Las interacciones son fluidas y naturales, sin demoras ni bloqueos? Métricas de rendimiento centradas en el usuario
  10. Paint Timing define dos métricas: primer procesamiento de imagen (First

    Paint - FP) y primer procesamiento de imagen con contenido (First Contentful Paint - FCP). Estas métricas indican los puntos, inmediatamente después de la navegación, cuando el navegador representa los píxeles en la pantalla. Es importante para el usuario, ya que responde a la pregunta: ¿está sucediendo? La principal diferencia entre las dos métricas es que FP indica el punto cuando el navegador representa cualquier elemento visualmente diferente de lo que estaba en la pantalla antes de la navegación. En cambio, FCP es el punto cuando el navegador representa el primer bit de contenido desde el DOM, lo que puede ser texto, una imagen, SVG o, incluso, un elemento <canvas>. 1. Primer procesamiento de imagen (FP) y primer procesamiento de imagen con contenido (FCP)
  11. El primer procesamiento de imagen con significado (First Meaningful Paint

    - FMP) es la métrica que responde a la pregunta: "¿es útil?". Si bien el concepto "útil" es sumamente difícil de especificar para aplicarlo de forma genérica a todas las páginas web (por ende, no existe una especificación todavía), es bastante fácil para los diseñador de UX saber las partes de sus páginas que serán más útiles para los usuarios en relación a su objetivo y a su momento en el user journey. 2. Primer procesamiento de imagen con significado (FMP) y tiempo de elemento hero (TH)
  12. 2. Primer procesamiento de imagen con significado (FMP) y tiempo

    de elemento hero (TH) A menudo, las "partes más importantes" de una página web se conocen como elementos hero.
  13. Por ejemplo, en la página de visualización de YouTube, el

    elemento hero es el video principal. En Twitter, estos elementos probablemente son las insignias de notificación y el primer tweet. En una aplicación meteorológica, es el pronóstico para la ubicación especificada. Y, en un sitio de noticias, posiblemente son la historia principal y la imagen destacada. Casi siempre, las páginas web tienen partes más importantes que otras. Si las partes más importantes de una página se cargan de forma rápida, es posible que el usuario ni siquiera note que el resto de la página no se carga. 2. Primer procesamiento de imagen con significado (FMP) y tiempo de elemento hero (TH)
  14. Para responder a las entradas de los usuarios, los navegadores

    agregan tareas a una cola en el subproceso principal para ejecutarlas una por una. Aquí también es donde el navegador ejecuta el JavaScript de la aplicación y, en ese sentido, el navegador mantiene un solo subproceso. En algunos casos, estas tareas pueden demorar más tiempo en ejecutarse y, si eso sucede, el subproceso principal se bloquea y el resto de las tareas en la cola deben esperar. Las tareas de más de 50 ms de duración como potencialmente problemáticas. Se seleccionó la duración de 50 ms para que las aplicaciones cumplan con las pautas de RAIL de responder a una entrada del usuario en 100 ms. 3. Tareas largas
  15. Criterio RAIL RAIL es un modelo de rendimiento centrado en

    el usuario. Todas las apps web tienen estos cuatro aspectos distintivos en sus ciclos de vida, y el rendimiento se adapta a ellos de maneras diferentes:
  16. Esto puede parecer una demora o un bloqueo para el

    usuario y es una fuente importante de malas experiencias en la Web de hoy en día. 3. Tareas largas Tareas Cortas Tareas Largas
  17. La métrica Tiempo hasta que es interactiva (Time To Interact

    - TTI) indica el punto en el que la aplicación se representa visualmente y es capaz de responder de forma confiable a una entrada del usuario. Es posible que una aplicación no pueda responder a una entrada del usuario por diversos motivos: • Todavía no se cargó el JavaScript necesario para que los componentes en la página funcionen. • Existen tareas largas que bloquean el subproceso principal (como se describe en la última sección). La métrica TTI identifica el punto en el que se carga el JavaScript inicial de la página y se inactiva el subproceso principal (sin tareas largas). 4. Tiempo hasta que es interactiva (TTI)
  18. Volviendo a las preguntas que antes identificamos como las más

    importantes para la experiencia de usuario, en esta tabla se describe la forma en que se asigna cada métrica mencionada a la experiencia que se espera optimizar: Experiencia Métrica ¿Está sucediendo? Primer procesamiento de imagen (FP)/Primer procesamiento de imagen con contenido (FCP) ¿Es útil? Primer procesamiento de imagen con significado (FMP)/Tiempo de elemento hero (TH) ¿Es utilizable? Tiempo hasta que es interactiva (TTI) ¿Es agradable? Tareas largas (técnicamente la ausencia de tareas largas) Asignación de métricas a la experiencia de usuario
  19. Estas capturas de pantalla de un cronograma de carga te

    ayudarán a visualizar mejor la ubicación de las métricas de carga en la experiencia de carga: time Asignación de métricas a la experiencia de usuario
  20. Dimensiones de las métricas El rendimiento del contenido web puede

    variar significativamente según el tipo de dispositivo, las propiedades de la red y otras variables. Para ayudar a segmentar y comprender la experiencia del usuario en dichos segmentos clave, el Informe de experiencia del usuario de Chrome proporciona las siguientes dimensiones: Dimensión Descripción Tipo de conexión efectiva Proporciona el tipo de conexión efectiva ("lento-2g", "2g", "3g", "4g" o "fuera de línea") según lo determinado por los valores de ida y vuelta y ancho de banda basados en observaciones de medición reales del usuario. Tipo de Dispositivo Clasificación aproximada del dispositivo ("teléfono", "tableta" o "escritorio"), tal como se comunica a través de User-Agent. Georeferenciación Ubicación geográfica de los usuarios a nivel de país, inferida por su dirección IP. Los países se identifican por sus respectivos códigos ISO 3166-1 alfa-2.
  21. Progressive Web Apps son el futuro de la web en

    móviles, y significa mejorar radicalmente la experiencia de usuario
  22. Progressive Web Apps son progresivas. (No todo funciona en todas

    partes todavía, pero la experiencia del usuario es la clave)
  23. • Disminuyó en un 30% el rebote (Bounce Rate). •

    Disminuyó en más de 100% el rebote (Bounce Rate) en nuevos usuarios que navegan por medio de PWA. • Disminuyó en un 50% el rebote (Bounce Rate) en usuarios recurrentes que navegan por medio de PWA.
  24. • Aumentó en un 53% las páginas visitadas por sesión

    (Pages / Session) en total de los usuarios. • Aumentó en un 100% las páginas visitadas por sesión (Page / Session) de los usuarios nuevos que navegan por medio de la PWA.
  25. • Aumentó en un 74% las páginas visitadas por sesión

    (Page / Session) de los usuarios recurrentes que navegan por medio de la PWA. • Aumentó en un 8% la duración de la sesión (Avg. Session Duration) del total de usuarios.
  26. • Aumentó en un 50% la duración de la sesión

    (Avg. Session Duration) de los usuarios en dispositivos móviles con PWA. • Disminuyó en 2 segundos el tiempo de carga para los usuarios de móviles con PWA.