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.
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.
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.
Encabezado fijo
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.
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.
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.
Menú de navegación
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.
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.
Instalar banner
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.
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.
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.
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.
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ó.
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.
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.
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.