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 lanzó un plan para mejorar la visibilidad y la participación de las aplicaciones web instaladas. Nuestro trabajo generó un aumento de más del 100% en la instalación y la participación de las AWP. Para lograrlo, investigamos las funciones existentes, ejecutamos experimentos de pruebas A/B y entrevistas con los usuarios para obtener estadísticas sobre las percepciones y expectativas de los usuarios. Este artículo explica cómo llegamos hasta allí.

Lenguaje de instalación unificado

El llamado a la acción que activa la instalación de una AWP no era coherente en la plataforma web. En el caso de Chrome en Android, nos decidimos por la opción Agregar a la pantalla principal. Sin embargo, en las plataformas de escritorio, destacamos la opción Instalar. El motivo de esta discrepancia provino de un estudio que el equipo realizó en 2016 que comparó diferentes cadenas. El equipo descubrió que la función Agregar a la pantalla principal funcionaba mejor en dispositivos móviles, aunque de forma marginal.

En un estudio posterior sobre la taxonomía de 2019, no se encontró ninguna diferencia, por lo que el equipo que quería unificar la experiencia de instalación de la AWP decidió actualizar la etiqueta a Instalar en Android. En un estudio posterior de 2021, se comparó el lenguaje Instalar, Obtener y Descargar, y se descubrió que los usuarios comprendían el proceso Instalar como el proceso que se realizaba. Los usuarios sintieron que presionar un botón con la etiqueta Obtener lo dirigiría a un sitio web y, con Descargar, suponían que un archivo terminaría en su carpeta de descargas o en uno equivalente.

Con todo esto en mente, concluimos que la etiqueta Instalar se adapta mejor a las AWP. Recomendamos que los desarrolladores de toda la plataforma web adopten la instalación como la cadena preferida de ahora en adelante.

Ícono de instalación del escritorio

En nuestras plataformas de escritorio, tenemos un patrón de diseño que, cuando un sitio web carga una AWP, Chrome muestra un botón que aparece en el lado derecho del cuadro multifunción con un ícono y la etiqueta Instalar. Después de eso, cuando un usuario visite un sitio, solo estará presente el ícono. Si haces clic en este botón, se activará la instalación de una AWP de escritorio.

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

Inicialmente, el ícono era un símbolo más, en parte debido a la metáfora de Agregar a la pantalla principal que se usa en dispositivos móviles. Sin embargo, como se mencionó, el lenguaje que usamos fue Install. La comunidad de desarrolladores nos comentó que este ícono era confuso. Además, si un usuario usó la función de zoom para ampliar el texto, el ícono de zoom se veía muy similar, lo que confundió aún más al usuario.

Hay un error en el cuadro multifunción con íconos de instalación y zoom.
Se muestra un error en el cuadro multifunción con íconos de instalación y zoom.

Decidí investigar la percepción de nuestro usuario, ya que la mayoría de los comentarios eran anecdóticos. Trabajamos con nuestros investigadores de UX para llevar a cabo un estudio con 10,000 usuarios en Indonesia y EE.UU. para determinar cómo los usuarios comprenden la iconografía de la 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 símbolo más, era el más confuso para nuestros usuarios. Muchos confundieron el símbolo con "medicina", "primeros auxilios" y "baterías".

También descubrimos que los usuarios asociaban principalmente con la instalación imágenes, como flechas y dispositivos. En función de esas conclusiones, ejecutamos una prueba A/B/C en Chrome comparando el diseño existente con dos alternativas. Llegamos a 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 los descartes de la IU de instalación con este nuevo ícono.

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

El resultado es el diseño que ves hoy, con un índice de instalación de AWP que aumentó más del doble en el de 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 nos pareció más atractiva.

Por supuesto, un solo ícono no cambiará el mundo, lo que nos llevará a nuestra próxima función.

Ayuda en el producto

La Ayuda en el producto es un cuadro de información azul que integra a los usuarios en funciones nuevas que pueden interesarles según criterios específicos. Decidimos lanzar este patrón de diseño para informar a los usuarios sobre las funciones de instalación y admitir aún más el nuevo diseño del ícono.

El cuadro de ayuda del producto.
Cuadro de información de ayuda en el producto que educa 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. Proporciona información sobre el nivel de participación de un usuario en un sitio. En chrome://site-engagement/, puedes ver los sitios con los que interactúas con regularidad. Con estas puntuaciones, podríamos determinar si un usuario está interesado en un sitio web. Si el sitio fuera una AWP y el usuario participara, le mostraremos la IU de ayuda en el producto para la instalación. Esto significaba que solo nos enfocamos en los usuarios comprometidos y no a los usuarios molestos que podían visitar un sitio una vez.

Cuando usamos la ayuda del producto en computadoras de escritorio, observamos un aumento de más del 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 completa

Para la mayoría de los usuarios, el paradigma de instalación es una tienda. Desde mediados de la década de 2000, les informamos 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 quieren una app.

Con las AWP, la IU que mostramos una vez que un usuario decidió instalar una app web era relativamente escasa. Por lo tanto, el equipo decidió explorar una experiencia de instalación enriquecida que les brindara a los usuarios contexto sobre la app web y les 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 amplia, estados contraídos y expandidos.

A principios de este año, lanzamos la Instalación enriquecida, una IU de instalación extendida en Chrome para Android que les permite a los desarrolladores agregar capturas de pantalla a su manifiesto. Los desarrolladores también pueden agregar una descripción, lo cual es recomendable, pero no es necesario. Debido a esta IU más nueva, notamos que la tasa de instalación de algunas AWP se duplicó, lo que demuestra que los usuarios tienen más confianza en la instalación de aplicaciones web cuando proporcionamos más contexto y experiencias enriquecidas. La versión para computadoras de escritorio de esta IU está en desarrollo.

Conclusión

El equipo dedicó los últimos dos años a explorar y experimentar con funciones nuevas de Chrome que habilitaron y potenciaron a los desarrolladores de AWP, y ayudaron a educar a los usuarios sobre los beneficios de las experiencias web. Todavía queda mucho trabajo por hacer, pero, colectivamente, podemos mejorar y enriquecer la vida de nuestros usuarios y respaldar aún más la Web abierta.