Analítica y Usabilidad

Tendencias, novedades, noticias y tips del mundo de Analítica y Usabilidad

📈 Analítica y Usabilidad

05 Nov 2019
Ir a los comentariosSé el primero en comentar

¿Qué son las Progressive Web Apps? ¿Por qué son tan importantes?

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5,00 out of 5)
Cargando…
Mario Vidal

Los que trabajamos en el negocio de las visitas, sabemos que es fundamental cuidar la opinión que la audiencia tiene de nuestros portales, porque de su recurrencia y de su satisfacción depende nuestro éxito. Por eso siempre recomiendo que los departamentos de producto y diseño estén pendientes de cualquier novedad que pueda facilitar la usabilidad o la experiencia de usuario y valoren si es posible implementarla en su sitio, por eso hoy os presento las Progressive Web Apps o PWA.

Aunque este no es un producto nuevo, en los últimos años está adquiriendo una especial relevancia y cada vez tiene más aceptación entre los usuarios por las ventajas que aporta.

También te puede interesar: Diseño UX para móviles: aprendiendo a diseñar la parte visual de la experiencia de usuario

Índice de contenidos: 

¿Qué son las Progressive Web Apps o PWA?

Progressive web apps (PWA) o aplicación web progresiva es una solución basada en la web tradicional que todos conocemos, aunque incorpora algunas particularidades que la hacen parecerse a una app nativa para teléfonos móviles y tabletas. Cada proyecto es independiente y el nivel de adaptación de la web al formato app es progresivo, por lo que puede que visitemos un site con una PWA casi idéntica a una app o quizá sea una web con algunos avances.

Ventajas Progressive Web App (PWA)

  1. La primera ventaja que encontramos con las progressive web apps es que no necesitamos entrar a Google Play o Apple Store para descargar nada. Solo se requiere, al principio, una conexión a internet y un navegador que puede ser Chrome, Safari o Firefox.
  2. El segundo gran avance con la PWA es que cualquier usuario puede ‘instalarla’ en la pantalla de inicio de su dispositivo. Y es que todos hemos tenido, alguna vez, el móvil al borde de capacidad. Hemos borrado fotografías, vídeos o desinstalado aplicaciones porque no cabía nada más. Pero siempre hay espacio para una PWA en cualquier teléfono móvil porque funciona como un acceso directo que te abre la web y recupera el contenido si no hay conexión o lo refresca si el usuario está conectado a la red.

Sí, has leído bien. Con la progressive web app, el usuario puede seguir consultando tu web, aunque haya perdido la conexión. Es una de las ventajas que la hacen tan atractiva y que han provocado que tenga una gran aceptación entre los internautas.

Claves para tu página web o app: Usabilidad y Experiencia de Usuario

Fidelización del usuario

A los que trabajamos en el desarrollo de audiencias nos preocupa el cumplimiento de dos metas:

  • La captación de usuarios nuevos
  • La fidelización de los que ya tenemos reteniéndolos el máximo tiempo posible en nuestro entorno.

Conseguir esa fidelización no es una tarea sencilla porque depende de muchos factores como:

  • Que el contenido sea el esperado por la audiencia
  • La experiencia con la web sea satisfactoria
  • Que exista un reconocimiento de marca
  • O que se cree una necesidad de visita recurrente

Una de las estrategias que llevamos a cabo para ganar visitas recurrentes es el envío de notificaciones push que permiten recordar al usuario que nuestra web o app está ahí, que tienen contenido nuevo o interesante que deberían conocer.

Afortunadamente las progressive web apps permiten también el envío de notificaciones a los teléfonos móviles como si de una app se tratara. Por el momento, esta tecnología solo está disponible en dispositivos Android, aunque ya hay avances para que se amplíe a los iPhone con iOS. El envío de notificaciones push ha supuesto todo un fenómeno en las webs de contenido en las que se han desarrollado estrategias combinadas entre los distintos departamentos para sacar el máximo rendimiento a un producto o noticia.

Permitidme que me detenga un poco más en este punto porque creo que es importante que conozcamos hasta qué punto nos puede llevar una ventaja de estas características.

Imaginad que 20.000 usuarios han generado un acceso directo a nuestra web a través de la PWA. Pensad que unos segundos después de publicar una entrada en nuestro blog, enviamos un push a esa base de datos de 20.000 personas informándoles de que hay un nuevo contenido que deberían conocer. La reacción de esas miles de personas visitando nuestra página en un breve espacio de tiempo suponen un pico de tráfico inusual que se traslada en un aumento de las posibilidades de posicionar mejor en Google, pero también en un crecimiento de la viralidad puesto que es probable que esos usuarios compartan el enlace en sus redes sociales, apps de mensajería o agregadores de noticias. Esto supondrá, en definitiva, un volumen sostenido de visitas a ese post.

Antes comentaba que en algunos equipos se han combinado las estrategias de diferentes departamentos. Reflexionad sobre hasta qué punto podríamos optimizar cada visita si el envío de push está consensuado con SEO, redes sociales, desarrollo de audiencias y experiencia de usuario para lograr que ese visitante recircule por el resto del site a través de módulos y enlaces situados estratégicamente en el post de aterrizaje.

Recordatorio de marca

La recurrencia de la visita del usuario depende de la necesidad que hayamos creado en él, sí. Pero también influyen el recordatorio de marca y la facilidad que tenga para acceder a nuestro sitio. Esta es otra de las ventajas de las progressive web apps que permite ‘instalarla’ en el escritorio del teléfono móvil con una visualización idéntica al icono de una app. Aunque con una ventaja: el usuario no ha instalado nada.

Para conseguir esto, es muy frecuente que desarrollemos un pequeño botón en nuestra web móvil que indique al usuario que puede crear un acceso directo en el escritorio. Ese será el punto de acceso a la PWA y que recordará, cada vez que se pase por esa pantalla, nuestra marca e icono.

Progressive Web Apps

Es fundamental que dentro de nuestra estrategia de implementación de la PWA decidamos cuándo es más conveniente mostrarle al usuario que puede crear un acceso directo a la web a través de su pantalla de inicio. Por supuesto, cada audiencia y cada soporte requieren una estrategia distinta.

Aunque siempre recomiendo hacernos algunas preguntas: ¿qué pensará mi usuario si nada más entrar a mi web por primera vez lo bombardeo con pop-ups de aviso de cookies, instalación de la PWA, activación de notificaciones push y suscripción a la newsletter? o ¿debe ver el botón de crear acceso directo el usuario que ya lo tiene creado?

¿Cómo funciona una Progressive Web Apps (PWA)?

Ester Ribas nos explica el funcionamiento de una PWA: Uno de los elementos más importantes que conforman las PWA es el manifiesto de la aplicación y que está en formato JSON. Este, nos permite controlar cómo se verá nuestra aplicación en áreas donde normalmente los usuarios tienen aplicaciones nativas.

Este archivo o manifiesto contiene lo siguiente:

  • Name: Nombre de la aplicación que aparecerá en el menú mobile del usuario.
  • Description: Indicar la descripción de nuestra aplicación móvil
  • Icons: Crear distintos iconos, con resoluciones distintas, para que de esta manera, se vea bien en todos los dispositivos.
  • Start url: URL de inicio cuando abrimos la aplicación
  • Display: En este caso, podemos elegir varias configuraciones (standalone, fullscreen, minimal-ui, entre otros)
  • Orientation: Cuando hablamos de orientación nos referimos a si queremos que la aplicación web se deba usar en modo retrato o en modo paisaje.
  • Theme_color: el color que se usará para la barra superior de la aplicación.
  • Background_color: color para la pantalla antes de la carga completa de la aplicación.

Otro elemento que encontramos es el Service Workers, se trata de uno o varios scripts que funcionan en un segundo plano y que nos permiten generar una experiencia offline, descargando los contenidos imprescindibles para que la aplicación funcione, así como generar notificaciones push.

El Service Workers es realmente importante ya que nos permite optimizar la retención de los usuarios. Hasta la fecha, esta funcionalidad solo la tenían las aplicaciones nativas, pero se ha convertido en una de las funcionalidades más importantes para poder mejorar el retorno del usuario a nuestra app. No obstante, con el aumento de notificaciones en todas las app, esta funcionalidad o característica cada vez queda más oculta.

Además, es importante tener en cuenta que esta funcionalidad no funciona para todos los dispositivos, como es el caso de los dispositivos que utilizan iOS. Podemos comprobar si un sitio utiliza Service Worker mediante Chrome, realizando los pasos siguientes:

  • Abrir la página https://billingsgazette.leeaws.com/pwa/
  • Hacer clic con el botón derecho y darle a inspeccionar
  • Ir a la pestaña “Application” y “Service Workers”
  • Podemos ver que el Service Workers está activo

Si nos fijamos en el apartado “Cache Storage”, podremos ver los archivos que han sido descargados y cacheados por el Service Worker.

Tener la posibilidad de usar el portal sin tener conexión es un gran avance, pero implica que deberemos desarrollar un sistema para recabar todos los datos obtenidos de la navegación offline, y que estos, sean mandados a Google Analytics o cualquier otro programa de medición de datos que estemos utilizando.

Elementos más importantes del DOM de una Progressive Web App

Las Progressive Web Apps se componen de dos partes principales, el App-Shell, que hace referencia a la estructura de la página y el contenido, que puede variar entre las distintas páginas de nuestra aplicación.

Dependiendo de la tecnología que se haya usado para desarrollar la página, el contenido se puede mandar desde el servidor en formato de código HTML o mediante script JSON, sin embargo, a la hora de utilizar JSON debemos ir con cuidado, ya que esta técnica nos puede dar problemas de indexación en caso de que se implemente mal. Este detalle es importante tenerlo en cuenta, sobre todo para a lo que el SEO se refiere.

Medir la velocidad de una PWA

El principal beneficio de las PWA son su peso, se trata de páginas que completas pueden tener un peso de menos de 1MB, ofreciendo una experiencia veloz para los usuarios. Esto aporta una gran ventaja al mundo mobile-first al que nos encontramos.

En definitiva, la fidelización del usuario a través de los push, el acceso directo, la UX y la velocidad de carga son las grandes ventajas de las progressive web apps, que te ayudarán a que tu web siga ganando relevancia. Miles de negocios de todo el mundo han identificado estos avances y ya están trabajando con ellos para lograr el mayor número de ventas posibles en este mercado tan competido. ¿A qué esperas para explotar al máximo tu web?

¿Quieres aprender más sobre le mundo de las app-web y cómo optimizar el máximo la experiencia del usuario? Te recomendamos el Postgrado en UX & UI Prodcut Design, con el que aprenderás a identificar qué necesita el usuario y ha poder desarrollar las facilidades que demanda.

Postgrado en UX & UI Product Design

Aprende a realizar un programa centrado en el cliente y con enfoque a medios digitales

¡Me interesa!

Comparte y comenta este artículo!

Ideas, noticias y mucha formación en tu bandeja de correo
Suscríbete ahora y recibe los mejores contenidos sobre Emprendedores, Marketing, Negocios e Internet

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

SUSCRÍBETE AL BLOG
Ideas, noticias y mucha formación en tu bandeja de correo
Sucríbete ahora y recibe todo el contenido de nuestro blog
SUBCATEGORÍAS
LO MÁS LEÍDO HOY

BUSCA EN EL BLOG

IEBS EN LAS REDES

Si lo prefieres puedes seguir nuestro RSS: