¿Cómo diseñar una aplicación web progresiva (PWA)?

media

10 min

image 2
¿Alguna vez navegando por internet te has encontrado con una página que sugiere que la agregues al inicio.? Probablemente ya hayas interactuado con una Aplicación web progresiva o PWA por sus siglas en inglés.

¿Qué es una aplicación web progresiva (PWA)?

Una Aplicación web progresiva o PWA, de acuerdo con  de Alex Russell quien junto con Frances Berriman,  dice que :

“Las Aplicaciones web progresivas son sólo sitios web que tomaron todas las vitaminas correctas ”

Para ser más específicos las PWA pueden ofrecerte funcionalidades asociadas a las aplicaciones nativas como:

PWA progreso
  • Carga más rápidas (en la segunda visita) debido a su almacenamiento en la caché

  • Acceso con un icono de la aplicación desde la pantalla de inicio de tu celular 

  • Una experiencia de pantalla completa, eliminando la ventana del navegador

  • Acceso sin conexión 

  • Notificaciones push

  • Está más integradas con el hardware del teléfono, que los sitios web.

¿Por qué deberíamos crear una aplicación web progresiva?

Hay muchos casos de éxito de aplicaciones  web progresiva donde se traduce en usuarios más comprometidos, páginas más rápidas, impulsar las conversiones a través de notificaciones push  y reducir la fricción con el usuario al pedirle que instale algo en su dispositivo. Estos puntos, nos puede ayudar a vender  la idea a las personas de negocio de que una PWA puede ser la respuesta de alguno de nuestros problemas

Veamos el enfoque que tiene Google sobre este tipos de aplicaciones, incluso utilizan un acrónimo para describirlas dentro de la organización:. La compañía utiliza un acrónimo F.I.R.E - FAST, INTEGRATED, RELIABLE AND ENGAGING. El cual se traduce en Rápido, Integrado, Confiable, Atractivo. Este acrónimo lo utiliza para responder las preguntas antes planteadas. 

Rápido (Fast)

De acuerdo con el señor Jakob Nielsen para los usuarios es muy importa la velocidad en el diseño de interacción y les interesa por dos razones:

“Limitaciones humanas:  especialmente en las áreas de memoria y atención…Simplemente no actuamos tan bien si tenemos que esperar y sufrir la inevitable de decadencia de la información almacenada en la memoria a corto plazo.

“Aspiraciones Humanas: Nos gusta tener el control de nuestro destino en lugar de someternos a los caprichos de una computadora. Además, cuando las compañías nos hace esperar en lugar de brindar un servicio receptivo, parecen incompetentes”

Una aplicación web progresiva entrega una experiencia más rápida porque puede almacenar información e imágenes en el navegador del usuario, por lo que para visitas posteriores ya no será necesario volverlas a descargar. De acuerdo al sitio pwastats.com hay varios casos de estudio donde se aborda la velocidad y la implementación de una PWA, y cómo esta reduce el tiempo de carga considerablemente. Por ejemplo, Tinder pudo recortar el tiempo de carga de 11.91 segundos a 4.69 segundos , el sitio de Forbes m.forbes.com carga el completamente en .8 segundos, el sitio móvil del Canal del Clima mejoró un 80% en su tiempo de carga.

¿Que tanto afecta la velocidad a nuestro sitio web? 

De acuerdo a un estudio realizado por  Google en el 2017 y actualizado en el 2018 llamado Descubra cómo se compara con los nuevos puntos de referencia de la industria para la velocidad de la página móvil. El equipo encargado de la investigación, descubrió que el visitante al sitio, a medida que esperaba el tiempo de carga de 1 segundo a 10 segundos, provocó una probabilidad de abandono de 123%

Velocidad Sitio Web
Fuente: Google/SOASTA Research, 2017. https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

Por lo tanto debemos de considerar la velocidad como un afecto decisivo que puede impactar significativamente los indicadores del sitio web en cuestión.

Integrado (Integrated) 

Las Aplicaciones web progresivas pueden vivir directamente en el dispositivo, ya sea en el cajón de aplicaciones en dispositivos Android  o como un icono en la pantalla de inicio de un dispositivo iOS, sin necesidad de descargar una aplicación de App Store o Google Play. 

Además una PWA tiene una integración más estrecha al hardware nativo que los sitios web tradicionales, por ejemplo para detectar la ubicación del usuario o conocer el estado de la batería. Lo que se traduce en que la experiencia se sienta más como una aplicación nativa  desde el punto del usuario.

Confiable (Reliable)

Gracias a un componente clave de las PWA es la implementación de la API de Service Worker, es posible el almacenamiento en caché de páginas web fuera de línea o en entornos conexión de internet limitados. Esto se vuelve más relevante si observamos el estudio realizado por Speedtest global index, empresa dedicada a comparar la velocidad del internet en 200 países alrededor del mundo, en él nos damos cuenta  que varios países con mejor internet de LATAM están en cerca de la  velocidad  promedio de bajada en internet móvil: 34.67 Mbps como Cuba, México, Uruguay, y otros  más tantos  por debajo del promedio como Argentina, Colombia, Chile.

El resultado, es que los usuarios pueden seguir utilizando la PWA independientemente de las condiciones de internet limitadas.

Atractivo. (Engaging)

La velocidad y la confiabilidad  son clave para un mayor compromiso del usuario. Además de esto,  los PWA también facilitan el envío de notificaciones push, lo que ayuda a impulsar el compromiso continuo con la experiencia.

Un ejemplo de esto, es  Alibaba que aumentó las conversiones en la web móvil en un 76%, con un 14% más de usuarios activos mensuales en iOS y un 30% más en Android, utilizando notificaciones push.

Sumando a todo anterior hay un par de elementos que son sumamente importantes en las aplicaciones web progresivas:

Capacidad de descubrimiento.

La PWA existe en la web, es como otro sitio y puede ser encontrado en la mayoría de motores de búsqueda, redes sociales y enlaces de otros sitios web. Lo cual se traduce en mejor posicionamiento SEO.

La seguridad

Las PWA deben de ejecutarse bajo el protocolo HTTPS ¿Por qué? Por que es necesario para acceder a muchas de las API más nuevas (y más sensibles), como geolocalización  service workers. Además, el protocolo HTTPS garantiza que tanto el código como el contenido que envíe a sus usuarios lleguen intactos.

¿Cómo debemos de diseñar una PWA?

Ahora si la parte del diseño. Para diseñar una  Aplicación web progresiva, que proporcione una gran experiencia, recomiendo seguir los siguientes consejos:

Resalta la opción de “Agregar a la pantalla de inicio”

Resaltar la opción de agregar a inicio con una breve descripción de los beneficios puede ayudar a hacer más evidentes los beneficios de una PWA.

Usa barra navegación inferior

Esto permite al usuario ir de una sección a otra rápidamente, además fomentamos  la capacidad de descubrimiento de las secciones más relevantes de un sitio web.

Páginas de carga de esqueletos

Las páginas de esqueletos son una versión en blanco de  la página en donde el contenido va cargando gradualmente, este patrón de carga  afecta la percepción  del usuario en relación al  tiempo de carga, lo percibe como si fuera menor a lo que en realidad es

Cuidado con las fuentes que no son estándar

Las fuentes que no son estándar pueden presentar problemas para renderizar, por lo tanto evita usar estas lo más que se pueda. Pero, si es realmente necesario como para un logo o utilizarlo para un encabezado, una alternativa es usar svg o imágenes.

Evita Gestos complicados

Algunos gestos como deslizar a la izquierda o derecha no funcionan del todo bien,  mi consejo es que mantengas las cosas simples, usando gesto de toque. Pero, si es una batalla que estás dispuesto a luchar, hay alternativas que te pueden ayudar a solucionar este asunto. Echale un ojo a esta libreria de componentes  https://react-swipeable-views.com/

Cuidado con los problemas de renderizado de los Scrolls infinitos

Las PWA tienen fallas cuando hay scrolls con un número elevado de ítems. ¿Qué es lo que pasa?  el usuario hace scroll en esta pantalla y en algunas secciones de la lista la pantalla en blanco y no se renderizan los componentes de la lista.

Hay formas en las que se puede solucionar esto con diseño como implementar paginaciones o limitar el número de elementos, pero si realmente es importante un scroll infinito puedes utilizar lo que se llama “Lista virtualizada” esto quiere decir que cuando un componente sale de la pantalla, esta librería lo remueve de la página

http://bvaughn.github.io/react-virtualized/#/components/List    

Incluir retroalimentación táctil

Lo más probable , es que el dispositivo que utilice tu usuario para entrar a la aplicación web progresiva, sea un móvil de pantalla táctil, así que te recomiendo agregar una retroalimentación mediante pistas visuales y/o táctiles en el dispositivo 

Asegúrate de agregar un botón para regresar.

No todos los dispositivos  tienen un botón para para regresar físico, así que es mejor que te asegures de incluirlo en el flujo.

Diseñar las pantallas de estado sin conexión

Cuando no tengas conexión disponible una buena práctica es considerar esta pantalla, porque le damos al usuario retroalimentación de lo que está pasando y nuestra aplicación parece que funciona sin ningun problema

Espero que este artículo haya sido de utilidad para ti. Si tienes alguna duda o comentario sobre el mismo o en relación a UX Diario nos encantaría saber de ti en nuestras redes sociales @uxdiario @ixdagdl en instagram,  UX.diario en Facebook, LinkedIn