Patrones para promocionar la instalación de AWP

Penny McLachlan
Penny McLachlan

La instalación de tu app web progresiva (AWP) puede facilitar que los usuarios la encuentren y la usen. Incluso con la promoción del navegador, algunos usuarios no se dan cuenta de que pueden instalar una AWP, por lo que puede ser útil proporcionar una experiencia en la app que puedas usar para promocionar y habilitar la instalación de tu AWP.

Captura de pantalla del botón de instalación simple en la AWP.
Un botón de instalación simple proporcionado en tu AWP.

Este artículo no es exhaustivo, pero ofrece un punto de partida para diferentes maneras de promover la instalación de tu AWP. Sin importar el patrón o los patrones que uses, todos conducen al mismo código que activa el flujo de instalación, que se documenta en Cómo proporcionar tu propia experiencia de instalación desde la app.

Prácticas recomendadas

Existen algunas prácticas recomendadas que se aplican sin importar los patrones de promoción que uses en tu sitio.

  • Mantén las promociones fuera del flujo de tus recorridos del usuario. Por ejemplo, en una página de acceso de AWP, coloca el llamado a la acción debajo del formulario de acceso y el botón Enviar. El uso disruptivo de patrones promocionales reduce la usabilidad de la AWP y afecta de forma negativa tus métricas de participación.
  • Incluye la posibilidad de descartar o rechazar la promoción. Recuerda la preferencia del usuario si hace esto y solo vuelve a preguntar si se produce un cambio en la relación del usuario con tu contenido, por ejemplo, si accedió a su cuenta o completó una compra.
  • Combina técnicas en diferentes partes de tu AWP, pero ten cuidado de no abrumar ni molestar al usuario con la promoción de instalación.
  • Solo muestra la promoción después de que se haya activado el evento beforeinstallprompt.

Promoción automática del navegador

Cuando se cumplen ciertos criterios, la mayoría de los navegadores le indican automáticamente al usuario que tu app web progresiva se puede instalar. Por ejemplo, en Chrome para computadoras de escritorio, se muestra un botón de instalación en el cuadro multifunción.

Captura de pantalla del cuadro multifunción con un indicador de instalación visible.
Promoción de instalación proporcionada por el navegador (computadoras de escritorio).
Captura de pantalla de la promoción de instalación proporcionada por el navegador.
Promoción de instalación proporcionada por el navegador (dispositivos móviles).

Chrome para Android le muestra una minibarra de información al usuario, aunque se puede evitar llamar a preventDefault() en el evento beforeinstallprompt. Si no llamas a preventDefault(), el banner se mostrará la primera vez que un usuario visite tu sitio y cumpla con los criterios de instalación en Android, y se volverá a mostrar después de aproximadamente 90 días.

Patrones promocionales de la interfaz de usuario

Los patrones promocionales de la interfaz de usuario se pueden usar para casi cualquier tipo de AWP y aparecen en lugares como la navegación del sitio y los banners. Al igual que con cualquier otro tipo de patrón promocional, es importante tener en cuenta el contexto del usuario para minimizar la interrupción de su recorrido.

Los sitios que son considerados cuando activan la IU de promoción logran una mayor cantidad de instalaciones y evitan interferir en los recorridos de los usuarios que no están interesados en la instalación.

Botón de instalación simple

La UX más simple posible es incluir un botón "Instalar" o "Obtener app" en una ubicación adecuada de tu contenido web. Asegúrate de que el botón no bloquee otras funciones importantes y no interfiera en el recorrido del usuario por tu aplicación.

Botón de instalación personalizado...
Botón de instalación simple.

Se trata de un botón de instalación que forma parte del encabezado de tu sitio. Otro contenido de encabezado a menudo incluye elementos de marca del sitio, como un logotipo y el menú de opciones. Los encabezados pueden tener el formato position:fixed o no, según la funcionalidad de tu sitio y las necesidades del usuario.

Botón de instalación personalizada en el encabezado.
Botón de instalación personalizado en el encabezado.

Cuando se usa de forma adecuada, promocionar la instalación de la AWP desde el encabezado de tu sitio es una excelente manera de facilitar que tus clientes más leales vuelvan a tu experiencia. Los píxeles del encabezado de la AWP son muy valiosos, por lo que debes asegurarte de que el llamado a la acción de instalación tenga el tamaño adecuado, sea más importante que otro contenido del encabezado posible y no sea invasivo.

Botón de instalación personalizado en el encabezado
Botón de instalación personalizado en el encabezado

Asegúrese de seguir estos pasos:

  • No muestres el botón de instalación, a menos que se haya activado beforeinstallprompt.
  • Evalúa el valor del caso de uso instalado para los usuarios. Considera la segmentación selectiva para presentar tu promoción solo a los usuarios que es probable que se beneficien de ella.
  • Usa espacio valioso en el encabezado de manera eficiente. Considera qué más sería útil ofrecer al usuario en el encabezado y sopesa la prioridad de la promoción de instalación en relación con otras opciones.
Botón de instalación personalizada en el menú de navegación
Agrega un botón o una promoción de instalación en un menú de navegación deslizante.

El menú de navegación es un excelente lugar para promocionar la instalación de tu app, ya que los usuarios que lo abren indican interés en tu experiencia.

Asegúrese de seguir estos pasos:

  • Evita interrumpir el contenido de navegación importante. Coloca la promoción de instalación de AWP debajo de los elementos del menú.
  • Ofrece una presentación breve y relevante sobre los motivos por los que el usuario se beneficiaría con la instalación de tu AWP.

Página de destino

El propósito de una página de destino es promocionar tus productos y servicios, de modo que este es un lugar adecuado para promocionar los beneficios de instalar tu AWP.

Un mensaje de instalación personalizado en una página de destino
Mensaje de instalación personalizado en una página de destino

Primero, explica la propuesta de valor del sitio y, luego, informa a los visitantes qué obtendrán de la instalación.

Asegúrese de seguir estos pasos:

  • Apela a las funciones más importantes para tus visitantes y haz hincapié en las palabras clave que podrían haberlos llevado a tu página de destino.
  • Haz que la promoción de instalación y el llamado a la acción sean atractivos, pero solo después de haber aclarado tu propuesta de valor. Después de todo, esta es tu página de destino.
  • Considera agregar una promoción de instalación en la parte de la app en la que los usuarios pasan la mayor parte del tiempo.

La mayoría de los usuarios encontraron banners de instalación en las experiencias para dispositivos móviles y están familiarizados con las interacciones que ofrecen. Los banners deben usarse con cuidado, ya que pueden interrumpir al usuario.

Banner de instalación personalizado en la parte superior de la página.
Un banner descartable en la parte superior de la página.

Asegúrese de seguir estos pasos:

  • Espera hasta que el usuario haya demostrado interés en tu sitio antes de mostrar un banner. Si el usuario descarta el banner, no se muestre de nuevo, a menos que active un evento de conversión que indique un mayor nivel de participación con tu contenido, como una compra en un sitio de comercio electrónico o un registro para obtener una cuenta.
  • Proporciona una breve explicación del valor de instalar tu AWP en el banner. Por ejemplo, puedes diferenciar la instalación de una AWP de una app para iOS o Android mencionando que casi no usa almacenamiento en el dispositivo del usuario o que se instalará al instante sin un redireccionamiento a la tienda.

IU temporal

La IU temporal, como el patrón de diseño Snackbar, notifica al usuario y le permite completar fácilmente una acción, en este caso, instalar la app. Cuando se usan correctamente, estos tipos de patrones de IU no interrumpen el flujo del usuario y, por lo general, se descartan automáticamente si el usuario los ignora.

Banner de instalación personalizado como barra de notificaciones
Una barra de notificaciones descartable que indica que la AWP se puede instalar

Muestra la barra de notificaciones después de algunas interacciones con la app. Si aparece cuando se carga la página o fuera de contexto, podría pasarla por alto con facilidad o provocar una sobrecarga cognitiva. Cuando esto sucede, los usuarios simplemente descartan todo lo que ven. Recuerda que es posible que los usuarios nuevos en tu sitio no estén listos para instalar tu AWP. Por lo tanto, es mejor esperar hasta tener indicadores de interés importantes del usuario antes de utilizar este patrón; por ejemplo, visitas repetidas, acceso de un usuario o un evento de conversión similar.

Banner de instalación personalizado como barra de notificaciones
Una barra de notificaciones descartable que indica que la AWP se puede instalar

Asegúrese de seguir estos pasos:

  • Muestra la barra de notificaciones durante entre 4 y 7 segundos a fin de darles a los usuarios tiempo suficiente para verla y reaccionar, sin interferir en ella.
  • Evita mostrarlo sobre otra IU temporal, como banners, etcétera.
  • Espera hasta tener indicadores de interés importantes del usuario antes de usar este patrón; por ejemplo, visitas repetidas, acceso de un usuario o un evento de conversión similar.

Después de la conversión

Inmediatamente después de un evento de conversión de usuario, por ejemplo, después de una compra en un sitio de comercio electrónico, es una excelente oportunidad para promocionar la instalación de tu AWP. El usuario está claramente interactuando con tu contenido, y una conversión a menudo indica que volverá a interactuar con tus servicios.

Una promoción de instalación después de la conversión.
Una promoción de instalación después de que un usuario completa una compra.

Recorrido de reserva o confirmación de la compra

Muestra una promoción de instalación durante o después de un recorrido secuencial, como después de los flujos de reserva o confirmación de la compra. Si muestras la promoción después de que el usuario haya completado el recorrido, a menudo puedes hacerla más destacada, ya que el recorrido se completó.

Una promoción de instalación después del recorrido del usuario.
Una promoción de instalación después de un recorrido del usuario.

Asegúrese de seguir estos pasos:

  • Incluye un llamado a la acción relevante. ¿Qué usuarios se beneficiarán con la instalación de tu app y por qué? ¿Qué importancia tiene para el recorrido que realiza actualmente?
  • Si tu marca tiene ofertas únicas para los usuarios de apps instaladas, menciónalas.
  • Mantén la promoción fuera del camino de los próximos pasos en tu recorrido o puedes afectar negativamente las tasas de finalización del recorrido. En el ejemplo de comercio electrónico anterior, observa que el llamado a la acción clave para la confirmación de la compra está por encima de la promoción de instalación de la app.

Flujo de registro, acceso o salida

Esta promoción es un caso especial del patrón promocional recorrido en el que la tarjeta promocional puede destacarse más.

Un botón de instalación personalizado en la página de registro
Un botón de instalación personalizado en la página de registro.

Por lo general, solo los usuarios comprometidos ven estas páginas, ya que la propuesta de valor de tu AWP ya se estableció. Además, a menudo hay poco contenido útil para colocar en estas páginas. En consecuencia, hacer un llamado a la acción más grande es menos molesto siempre que no sea un obstáculo.

Asegúrese de seguir estos pasos:

  • Evita interrumpir el recorrido del usuario dentro del formulario de registro. Si se trata de un proceso de varios pasos, te recomendamos esperar hasta que el usuario complete el recorrido.
  • Promociona las funciones más relevantes para los usuarios registrados.
  • Considera agregar una promoción de instalación adicional dentro de las áreas en las que accediste a tu app.

Patrones de promoción intercalados

Las técnicas de promoción intercaladas entrelazan las promociones con el contenido del sitio. A menudo, esto es más sutil que la promoción en la interfaz de usuario, que tiene desventajas. Tu promoción debe destacarse lo suficiente como para que los usuarios interesados la noten, pero no tanto como para perjudicar la calidad de la experiencia del usuario.

In-feed

Una promoción de instalación in-feed aparece entre artículos de noticias o entre otras listas de tarjetas de información de tu AWP.

Una promoción de instalación dentro de un canal de contenido.
Una promoción de instalación dentro de un feed de contenido.

Tu objetivo es mostrarles a los usuarios cómo acceder al contenido que disfrutan de manera más conveniente. Concéntrate en promocionar características y funciones que sean útiles para los usuarios.

Asegúrese de seguir estos pasos:

  • Limita la frecuencia de las promociones para evitar molestar a los usuarios.
  • Brinda a tus usuarios la posibilidad de descartar las promociones.
  • Recuerda la elección del usuario para descartarlo.