Diseñando para la aparición de la velocidad

El jurado ha hablado: el rendimiento, la conversión y el compromiso con la marca están inextricablemente conectados. Amazon ha demostrado que cada 100 ms de latencia les cuesta un 1% en ventas. Walmart obtiene un 2% extra de conversiones con cada segundo de mejora en el rendimiento. Cualquier comprador en línea le dirá que más rápido es mejor que más lento, pero ¿es la velocidad tan simple como la distancia más corta desde el punto A al B?

"La velocidad, me parece, proporciona el placer genuinamente moderno". - Aldous Huxley

Por qué es importante el diseño para el rendimiento

El rendimiento juega un papel importante en la configuración de cómo los clientes perciben su marca y puede afectar la intención de compra de un cliente. Un estudio de 2013 sobre los efectos del rendimiento de la web móvil en el compromiso emocional del usuario descubrió que un simple retraso de 500 milisegundos resultó en un aumento del 26% en la frustración del usuario y una caída del 8% en el compromiso. En el mismo estudio, los sitios lentos redujeron drásticamente las dimensiones emocionales medidas en torno a la intención de compra y la funcionalidad de la marca. Si eso no es una pistola humeante, ¡no sé qué es!

En el mundo occidental tampoco podemos pasar por alto nuestro sesgo del primer mundo: mientras que las conexiones 4G LTE se han convertido en el estándar móvil de facto para los consumidores norteamericanos, la mayor parte del mundo depende de las velocidades de red 3G (sub 15 mbps). Para poner esto en contexto, ¡imagine esperar casi 8 segundos para que Amazon.com se cargue por completo en una conexión 3G! Teniendo en cuenta estas limitaciones, es más importante que nunca diseñar conexiones para el mundo real y optimizarlas siempre que sea posible, para garantizar la carga más rápida posible para sus compradores.

Rendimiento medible vs percibido

¿Es la velocidad tan simple como la distancia más corta desde el punto A al B?

El rendimiento en el mundo real (estadísticamente medible) y el rendimiento percibido (una medición cualitativa de la eficiencia) son cosas diferentes.

Hace décadas, en un intento por calmar las quejas de los clientes sobre las largas esperas en el reclamo de equipaje, el aeropuerto de Houston aumentó la cantidad de empleados que trabajan manejando turnos para mejorar el rendimiento medible de la descarga de su equipaje. Los tiempos de espera disminuyeron considerablemente, pero las quejas continuaron llegando.

Una medida objetiva de rendimiento ignora lo que realmente importa: el viaje del cliente.

Los ejecutivos del aeropuerto no habían podido ver el verdadero problema en cuestión: una propensión humana a detestar el tiempo desocupado. Mientras los tiempos de espera se redujeron, el viaje a pie desde la puerta de la terminal hasta el reclamo de equipaje fue un trote corto, por lo que los viajeros pasaron la mayor parte del tiempo esperando. Al alejar estratégicamente las puertas de arribo más lejos del carrusel de equipaje, aumentaron el tiempo de caminata del viajero hasta el reclamo de equipaje, y casi eliminaron cualquier tiempo desocupado. Las quejas se detuvieron. Este es un ejemplo real de cómo el desempeño que sienten las personas es más importante que el desempeño “bajo el capó”. Una medida objetiva de rendimiento ignora lo que realmente importa: el viaje del cliente. No olvide consultar este artículo del jefe de producto de Mobify, Peter McLachlan, sobre cómo hemos estado midiendo mal el rendimiento web.

Cómo puede cambiar las percepciones de los usuarios

Como descubrió el aeropuerto de Houston, satisfacer a los usuarios es más que agregar recursos, también se trata de comprender lo que hace que la gente funcione. Aquí hay tres formas en que puede comenzar a aprovechar las percepciones de los clientes sobre el rendimiento:

1. Abrace el ahora: transiciones de carga instantánea

En 2013, Luke Wroblewski discutió por primera vez los inconvenientes del uso de hiladores de carga en las experiencias en pantalla, y habló a favor de lo que llamó "pantallas de esqueleto".

Ejemplos de pantallas de esqueleto de toda la web.No importa cómo lo corte, los hilanderos, cargadores y barras de progreso llaman la atención sobre el hecho de que el usuario está esperando.

El concepto detrás de las pantallas de esqueleto es el uso de páginas vacías que se llenan progresivamente de contenido a medida que está disponible: las regiones inmutables de una página se representan instantáneamente al cargarlas, aparecen como bloques de colores neutros y se reemplazan gradualmente con contenido como imágenes, encabezados y etiquetas de interfaz. En Mobify, hemos convertido las pantallas de esqueleto en una parte integral de nuestro marco de trabajo progresivo para web móvil en la forma de lo que llamamos Transiciones de carga instantánea.

Transiciones de carga instantánea de crabtree-evelyn.com, un sitio creado con la tecnología web móvil progresiva de Mobify.

Este enfoque contrasta con el uso de una ruleta de carga. Una ruleta es excelente para comunicar que el usuario está esperando, ¡pero eso es un problema! Como recordamos en la anécdota del reclamo de equipaje del aeropuerto, el estado de espera es una terrible experiencia. En otras palabras, los diseñadores pueden hacer que la espera parezca más larga y desagradable sin darse cuenta frotando el período de espera en la cara del usuario. ¿Cómo es eso para una elección de diseño no centrada en el usuario?

Las Transiciones de carga instantánea mitigan la espera al proporcionar una sensación percibida de movimiento y actividad al cargar marcadores de posición en lugar de hacer el acto de esperar a la estrella del espectáculo como lo hacen los hilanderos. Es similar a cómo algunos de los mejores dentistas encienden el televisor de la sala de operaciones con su programa favorito mientras realizan su endodoncia. Del mismo modo, los sitios de compras mejor diseñados pueden distraerlo del acto de esperar a que se carguen las páginas, al decir que aparentemente no hay que esperar.

2. Inmutabilidad y movimiento

El poder visual de la inmutabilidad.

Las Transiciones de carga instantánea (ILT) mejoran la experiencia de espera al proporcionar de manera preventiva una sensación perceptible de progreso constante, pero un papel importante desempeñado por los marcadores de posición representados por ILT es proporcionar una experiencia visual consistente, entre, por ejemplo, una página de inicio y un página de descripción del producto.

¿Con qué frecuencia ha visto que se cargan sitios con gran cantidad de imágenes con el pie de página del sitio donde se esperaba una hermosa imagen de producto llamativa? Segundos después, la imagen se renderiza, empujando el pie de página y otros elementos de la IU hacia abajo en la página. Este destello de un diseño en su estado inactivo de carga tiene el poderoso efecto de hacer que el sitio se sienta lento y desorientador.

Mantenga una experiencia visual coherente y transmita la sensación de una carga de página eficaz mediante el diseño de una carga de primera página altamente controlada. En otras palabras, mantenga los elementos de la página, especialmente los elementos de la interfaz, en la posición en la que estarían después de que la página se haya cargado por completo. Use alturas y anchos establecidos para los elementos de la página para evitar cualquier reorganización inesperada o errática de los elementos en sus páginas a medida que se carga contenido como texto e imágenes.

Movimiento consciente

La animación en una interfaz puede afectar la percepción del tiempo y la duración de los visitantes de su sitio. Los estudios muestran que la animación cuidadosamente implementada tiene un efecto directo sobre la carga cognitiva (la carga cognitiva es una medida del esfuerzo mental). Esencialmente, es posible que cuando las animaciones estén mal diseñadas, sean demasiado complejas o simplemente no funcionen como se esperaba, puede hacer que sus compradores piensen más y gasten más energía mental, lo que puede afectar indirectamente su proceso de toma de decisiones.

Como Allen Pike comenta en un artículo sobre el rendimiento en aplicaciones nativas, intenta mantener tus animaciones fluidas a 60 cuadros por segundo. Pike también recomienda el uso de desplazamiento de impulso frente a cualquier tipo de desplazamiento "falso", para crear una sensación verdaderamente nativa (porque es un comportamiento natural nativo). Idealmente, las animaciones de interfaz deberían ser una respuesta instantánea al toque de un usuario; cualquier otra cosa sería simplemente comunicar un retraso o desconexión entre sus compradores y su interfaz.

El desplazamiento de impulso (izquierda) es mucho más deseable que un desplazamiento artificial basado en JavaScript. Las soluciones de desplazamiento artificial crean regularmente frustración para los usuarios.El uso de una velocidad de fotogramas óptima para las animaciones de la interfaz principal como este cajón de navegación puede comunicar volúmenes sobre el resto de la experiencia del usuario de este sitio.

Para obtener el mejor rendimiento con el hardware que utilizan los visitantes de su sitio, base sus animaciones en transformaciones CSS de posición (traducción), escala, rotación y opacidad, que son transformaciones CSS que se aceleran con un procesador de gráficos de hardware. Al utilizar estas propiedades CSS aceleradas por hardware, tendrá una mejor oportunidad de alcanzar ese codiciado umbral de 60 fotogramas por segundo.

Menos es más cuando se trata de animación en la web, y los objetivos siempre deben ser el rendimiento y la funcionalidad sobre cualquier otra cosa.

3. La persistencia es clave

En Mobify, hemos construido nuestra visión de la web en torno a las aplicaciones web progresivas, un enfoque para crear experiencias de compras móviles con navegador que busca suplantar la corona de confiabilidad y compromiso de las aplicaciones nativas. Debido a que los enfoques comunes para crear aplicaciones web progresivas implican almacenar en caché partes clave de una interfaz móvil, los sitios se cargan rápidamente y las visitas repetidas se cargan al instante.

Las aplicaciones web progresivas se basan comúnmente en lo que se llama un modelo de shell de aplicaciones, lo que significa que la cantidad mínima absoluta de HTML, CSS y Javascript se carga en un navegador web en la primera carga. Por ejemplo, elementos de la interfaz como una barra de encabezado de navegación están integrados en este shell de la aplicación.

Mencioné anteriormente lo importante que es una primera carga controlada para configurar las expectativas del usuario. Al priorizar ciertos aspectos de la interfaz y cargar contenido en su lugar, creamos una carga de página suave y no abrupta. Lo más importante, al almacenar en caché estas partes clave de la interfaz, aparecen cargas repetidas de la interfaz casi al instante. En esencia, el almacenamiento en caché de la interfaz hace que no sea dependiente de una conexión de red, lo que le permite comportarse más como una aplicación y nativa porque el código existe localmente en el dispositivo de destino.

Además, con la presencia de un pequeño fragmento de Javascript conocido como trabajador de servicio, las aplicaciones web progresivas pueden incluso cargarse sin conexión para proporcionar una experiencia de compra casi completa, todo sin una conexión de red. Como beneficio adicional, también está reduciendo la cantidad de datos que usan los compradores cuando navegan por su sitio.

Transformar progresivamente las percepciones

Hemos aprendido que el rendimiento, tanto percibido como real, afecta el compromiso de la marca, la conversión y la toma de decisiones del comprador. Hemos visto cómo las decisiones de diseño pueden administrar el estado emocional, la carga cognitiva y las expectativas visuales de los usuarios al tiempo que mitigan los retrasos de latencia percibidos al cargar sitios web en conexiones de red más lentas. También hemos aprendido cómo las aplicaciones web progresivas, que utilizan un enfoque de shell de aplicaciones, pueden proporcionar una experiencia de carga casi instantánea para los visitantes habituales.

El rendimiento percibido es la única forma de rendimiento que debe aplicarse a nuestra perspectiva de la web. Común entre la mayoría de los consumidores es una visión mal informada de un futuro cercano en el que todas las redes son, como mínimo, capaces de LTE y esa latencia de red pronto será cosa del pasado. Pero con miles de millones de nuevos consumidores móviles en aumento en los países en desarrollo donde las velocidades de red son un obstáculo significativo, la lucha por construir experiencias de usuario con rendimiento nunca ha sido más real.

¿Interesado en aprender más sobre el diseño de la experiencia del usuario? Mire nuestro seminario web para obtener más de 30 mejores prácticas para el diseño de UX de comercio móvil.

Publicado originalmente en www.mobify.com el 23 de marzo de 2017.