Ayudamos a los desarrolladores a crear apps web instalables y potentes

Introducción

A principios de 2020, el equipo de Chrome para dispositivos móviles y computadoras de escritorio ideó un plan para mejorar la visibilidad y la participación de las apps web instaladas. Nuestro trabajo generó un aumento superior al 100% en la participación y la instalación de la AWP. Para lograrlo, investigamos las funciones existentes, realizamos experimentos de pruebas A/B y entrevistas con los usuarios para obtener estadísticas sobre sus percepciones y expectativas. En este artículo, se explica cómo llegamos hasta aquí.

Idioma de instalación unificado

El llamado a la acción que activa una instalación de AWP no era coherente en la plataforma web. En el caso de Chrome para Android, nos decidimos por Agregar a la pantalla principal, pero en nuestras plataformas para computadoras de escritorio, enfatizamos Instalar. La justificación de esta discrepancia provino de un estudio que el equipo realizó en 2016 y en el que se compararon diferentes cadenas. El equipo descubrió que Agregar a la pantalla principal funcionaba mejor, aunque solo de forma marginal, en dispositivos móviles.

Un estudio adicional sobre la taxonomía en 2019 no encontró diferencias, por lo que el equipo, que quería unificar la experiencia de instalación de la AWP, decidió actualizar la etiqueta a Install en Android. En otro estudio realizado en 2021, se compararon los términos Instalar, Obtener y Descargar, y descubrimos que los usuarios entendían Instalar como el proceso que estaba ocurriendo. Los usuarios creían que presionar un botón con la etiqueta Obtener los redireccionaría a un sitio web y, con Descargar, suponían que un archivo terminaría en su carpeta de descargas o en un equivalente.

Con todo esto en mente, concluimos que la etiqueta Instalar es la más adecuada para las AWP. Recomendamos a los desarrolladores de la plataforma web que adopten Install como la cadena preferida en el futuro.

Ícono de instalación en la computadora

En nuestras plataformas para computadoras de escritorio, tenemos un patrón de diseño que, cada vez que un sitio web carga una AWP, Chrome muestra una píldora que aparece en el lado derecho de la barra de direcciones y que contiene un ícono y la etiqueta Instalar. Después de eso, cuando un usuario visite un sitio, solo se mostrará el ícono. Si haces clic en esta píldora, se activará la instalación de una AWP para computadoras de escritorio.

Ícono de signo más de la instalación original.
Ícono de signo más de la instalación original.

En un principio, el ícono era un signo más, en parte debido a la metáfora Agregar a la pantalla principal que se usa en dispositivos móviles. Sin embargo, como se mencionó, el lenguaje que usamos fue Install. Los comentarios que recibimos de la comunidad de desarrolladores fueron que este ícono era confuso. Además, si un usuario usaba la función de zoom para agrandar el texto, el ícono del zoom se veía muy similar, lo que confundía aún más al usuario.

Error en el cuadro multifunción con íconos de zoom e instalación presentes.
Error en el cuadro multifunción con íconos de zoom e instalación presentes.

Decidí investigar la percepción de nuestros usuarios, ya que la mayoría de los comentarios eran anecdóticos. Trabajamos con nuestros investigadores de UX y realizamos un estudio con 10,000 usuarios en EE.UU. e Indonesia para determinar el grado de comprensión de los usuarios sobre la iconografía de instalación. Probamos cinco diseños diferentes, incluido el existente, y les preguntamos a los usuarios qué significaba “Instalar”. Descubrimos que el ícono actual, el signo más, era el más confuso para nuestros usuarios. Muchos confundieron el símbolo con “medicina”, “primeros auxilios” y “pilas”.

También descubrimos que los usuarios asociaban principalmente imágenes como flechas y dispositivos con la instalación. En función de estas conclusiones, ejecutamos una prueba A/B/C en Chrome, en la que comparamos el diseño existente con dos alternativas. Nos decidimos por la flecha que apunta hacia abajo en un monitor, que tuvo un rendimiento significativamente mejor que los otros dos. También observamos una disminución en la cantidad de veces que se rechazaba la IU de instalación con este nuevo ícono.

Instala variantes de íconos del conjunto de íconos de Material Design.
Variantes de nuestra iconografía de instalación que puedes descargar de nuestro conjunto de íconos de Material Design.

El resultado es el diseño que ves hoy, que aumentó más del doble la tasa de instalación de las AWP en comparación con los sitios web. También agregamos este ícono y un equivalente para dispositivos móviles a nuestro conjunto de íconos de Material Design, lo que permite que la comunidad use la iconografía que consideremos más atractiva.

Por supuesto, un solo ícono no cambiará el mundo, lo que nos lleva a nuestro siguiente componente.

Ayuda en el producto

La ayuda en el producto es una burbuja azul con información sobre herramientas que informa a los usuarios sobre las funciones nuevas que podrían interesarles en función de criterios específicos. Decidimos lanzar este patrón de diseño para informar a los usuarios sobre las funciones de instalación y admitir mejor el nuevo rediseño del ícono.

La burbuja de ayuda del producto.
Burbuja de información sobre herramientas de ayuda en el producto que informa a los usuarios sobre las funciones.

Cuando un usuario visita un sitio web con frecuencia, Chrome usa un servicio conocido como Participación en el sitio. Esto proporciona información sobre el nivel de participación de un usuario con un sitio. Si vas a chrome://site-engagement/, puedes ver los sitios con los que interactúas con frecuencia. Con estas puntuaciones, podríamos determinar si a un usuario le interesa un sitio web. Si el sitio fuera una AWP y el usuario estuviera interactuando, le mostraríamos la IU de ayuda en el producto. Esto significaba que solo nos enfocamos en los usuarios comprometidos y no molestamos a los usuarios que podrían visitar un sitio una vez.

Cuando usamos la ayuda en el producto en computadoras de escritorio, observamos un aumento superior al 100% en la instalación de AWP, lo que demuestra que enfocarse en los usuarios comprometidos mejoró la capacidad de instalación de las apps web.

IU de instalación más enriquecida

El paradigma de instalación para la mayoría de los usuarios es una tienda. Desde mediados de la década de 2000, les enseñamos a los usuarios que, cada vez que instalen una app, verán una descripción, capturas de pantalla y otros metadatos para ayudarlos a decidir si es algo que quieren.

Con las AWP, la IU que mostrábamos una vez que un usuario decidía instalar una app web era relativamente escasa. Por lo tanto, el equipo decidió explorar una experiencia de instalación más enriquecida que les brindara contexto a nuestros usuarios sobre la app web y permitiera a los desarrolladores celebrar las AWP que estaban a la par de las experiencias nativas.

IU de instalación más completa.
IU de instalación más completa, estados contraídos y expandidos.

A principios de este año, lanzamos Instalación enriquecida, una IU de instalación extendida en Chrome para Android que permite a los desarrolladores agregar capturas de pantalla a su manifiesto. Los desarrolladores también pueden agregar una descripción, que es recomendable, pero no obligatoria. Debido a esta IU más reciente, observamos que el porcentaje de instalaciones de algunas AWP se duplicó, lo que demuestra que los usuarios tienen más confianza en instalar apps web cuando les brindamos más contexto y experiencias más enriquecidas. La versión para computadoras de esta IU está en proceso de desarrollo.

Conclusión

El equipo pasó los últimos dos años explorando y experimentando con funciones más nuevas de Chrome que habilitaron y empoderaron a los desarrolladores de AWP y ayudaron a educar a los usuarios sobre los beneficios de las experiencias web. Aún queda mucho trabajo por hacer, pero, en conjunto, podemos mejorar y enriquecer la vida de nuestros usuarios, y respaldar aún más la Web abierta.