Progressive Web Apps: qué son y cómo diseñarlas

El término Progressive Web Apps proviene del equipo de diseño de Google Chrome, allá por 2015. Google definía las PWA como experiencias de usuario similares a las de una app que tienen alcance de web. Con ello quieren decir que son, en esencia y ante todo, páginas web pero que son capaces de proporcionar una experiencia de usuario muy cercana a la de una app nativa instalada en el teléfono.

Las PWA son el término medio entre ambos terrenos: están al alcance de usuarios que viven en prácticamente cualquier dispositivo y sistema operativo, a sólo una URL de distancia, y eliminan el paso adicional de tener que buscar una app en los markets e instalarlas. Las PWA ofrecen beneficios que hasta ahora sólo ofrecían las aplicaciones como son trabajar offline, enviar notificaciones push, hacer uso de funcionalidades del hardware; como el giroscopio.

 

 

(Casi) todo son ventajas

Las Progressive Web Apps:

  • Cargan el contenido de forma casi instantánea, incluso cuando la conexión es mala, gracias a los Service Workers.
  • Permiten hacer scroll sin interrumpir al usuario y sin necesidad de paginaciones ni botones de “cargar más”.
  • Permiten implementar animaciones y transiciones más naturales con menor esfuerzo.
  • Se mantienen siempre actualizadas sin tener que pasar continuamente por el market.
  • Te permiten trabajar a pantalla completa del dispositivo, eliminando la ventana del navegador.
  • Son más baratas de desarrollar que una app multiplataforma, llegando a más usuarios con menos esfuerzo.

Pero no todo es de color de rosa, por supuesto. Hay algunas desventajas o aspectos a tener en cuenta a la hora de generar este tipo de aplicaciones web.

 

 

¿Qué debo tener en cuenta al diseñar Progressive Web Apps?

Piensa en la propuesta de valor offline

Una PWA nos permite tener cierta funcionalidad cuando el dispositivo se encuentra sin conexión, tal y como haría una app. Por ejemplo, una app de lista de tareas puede cargar las listas tal y como las descargó por última vez, y puede permitir al usuario interactuar con ellas, pero no sincronizará sus cambios hasta la próxima vez que el móvil se conecte a internet.

Un e-commerce puede permitir al usuario navegar por el catálogo, pero puede que la información de stock y precios que está mostrando no esté actualizada, de modo que será necesario dejarlo claro de forma prominente en la UI. Un conversor de divisas funcionará perfectamente, pero puede no estar mostrando el último precio de mercado disponible.

¿Cuál podría ser una buena propuesta de valor offline? Pensemos en una compañía aérea. El contenido o funcionalidad que mejor debería funcionar en todas las situaciones posibles, sin duda debería ser la cartera de tarjetas de embarque. La recientemente desaparecida Air Berlin, que tenía una PWA, así lo hacía. Permitía a sus clientes descargar las tarjetas de embarque al hacer el check-in previo al vuelo y posteriormente mostrarlas en el aeropuerto incluso sin conexión en el móvil. Confiamos en que su desaparición no tenga nada que ver con la UX móvil... 😅
 

Necesitas diseñar iconos

Todo el esfuerzo que se pone en la creación de las Progressive Web Apps va dirigido a que los usuarios las perciban como si fueran apps nativas instaladas en su teléfono. Por ello es necesario tener listo un buen set de iconos que se integren bien con el estilo de cada sistema operativo para cuando el usuario cree el acceso directo a la web desde el escritorio.

Por tanto, es necesario familiarizarse con los distintos tipos y estilos de iconos de cada plataforma. En iOS por ejemplo, se utilizan iconos cuadrados con bordes redondeados. En Android es posible tener un símbolo con fondo transparente, aunque los usuarios también tienen la opción de ponerlos en círculos.

 

La independencia del navegador

Las PWA pueden ser instaladas en el escritorio como un acceso directo a las mismas. Al igual que ocurre con las web apps tradicionales, la interfaz no mostrará la ventana del navegador, de modo que habrá ciertas funcionalidades a las que el usuario no tendrá acceso como el botón para volver atrás, compartir, consultar la URL, etc.

Por ello es necesario tener todos estos aspectos en cuenta a la hora de diseñar las pantallas. Entre otros:

  • Diseña pensando en la pantalla completa.
  • Ten siempre lista una navegación clara y que cumpla con las expectativas de los usuarios.
  • Ofrece métodos para compartir contenido desde la propia interfaz.

 

Prevenir el overscroll

Las pantallas de tu PWA siguen estando dentro de un navegador web, independientemente de si el dispositivo muestra el marco o no. Por tanto pueden darse comportamientos o gestos, como el overscroll, que interfieran y/o puedan romper la experiencia de usuario.

Por ejemplo, es común que en un listado móvil se haga un gesto de pull-to-refresh, tirando hacia abajo de la pantalla cuando ya estás en el punto más alto. Si el navegador es Chrome, ese gesto puede iniciar la actualización de la página completa, y rompe la inmersión del usuario. Si el usuario quiere cargar más contenido en la lista, o forzar la sincronización, o sacar un buscador que está oculto bajo la cabecera, no espera que también cargues de nuevo la página completa. ¿Cómo solucionarlo? Desactivando este tipo de gestos para ciertas páginas.

 

Pide permisos en el momento adecuado 

Como en todos los puntos anteriores, la solicitud de permisos también estará condicionada por el hecho de que olvidemos que una PWA se percibe como una app. Al ser realmente una web, los permisos deberán solicitarse en el momento adecuado y con una introducción debidamente narrada. Cuando requieras acceso a la ubicación o los contactos del usuario, hazlo tal y como lo harías normalmente en una app: sólo cuando te vayan a hacer falta de verdad y preferentemente con una explicación muy breve de por qué los necesitas.

 

 

Entonces, ¿necesito una app, una web o una PWA?

Si alguna vez nos has escuchado (o leído) argumentar la viabilidad de usar una arquitectura u otra, ya sabrás que no somos de piñón fijo. Siempre decimos que cada arquitectura es la ideal para un escenario concreto. Lo normal para las aplicaciones que desarrollamos, donde priman de forma obsesiva la experiencia de usuario y tienen un nivel de adaptación al hardware casi al 100%, es que usemos tecnologías nativas. Pero hay otras muchos escenarios donde el uso de tecnologías híbridas, o en este caso PWA, es totalmente aconsejable.

Lo ideal es que tengas claro qué quieres ofrecer, cómo y a quién. Seguro que hay una tecnología, y un equipo, que te ayudarán a llevarlo a cabo.

 

 

Posts relacionados

Diseño de interacción - SDOS
Diseño de interacción: la importancia del feedback...
Como exportar elementos de Sketch a Zeplin - SDOS
Cómo exportar un elemento desde Sketch a Zeplin
Comentaris
¿Qué opinas? Escríbenos. Nos encantará leerte :)