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

Idioma de instalación unificado

El llamado a la acción que activa la instalación de la AWP no era coherente en la plataforma web. Para Chrome en Android, nos establecimos la opción Agregar a la pantalla principal, pero en nuestras plataformas de escritorio, enfatizamos Instalar. La lógica de esta discrepancia provino de un estudio que el equipo realizó en 2016 y que comparó diferentes cadenas. El equipo descubrió que la función Agregar a la pantalla principal funciona mejor, aunque solo sea marginal, en los dispositivos móviles.

En un estudio adicional sobre la taxonomía realizado en 2019, no se encontró ninguna diferencia. Por lo tanto, el equipo que deseaba unificar la experiencia de instalación de AWP decidió actualizar la etiqueta a Instalar en Android. En otro estudio realizado en 2021, se comparó el lenguaje Instalar, Obtener y Descargar, y se descubrió que los usuarios entendían Instalar como el proceso que se desarrollaba. Los usuarios sentían que presionar un botón con la etiqueta Obtener dirigía al usuario a un sitio web y, con Descargar, asumían que un archivo terminaría en su carpeta de descargas o equivalente.

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

Ícono de instalar en el escritorio

En nuestras plataformas de escritorio, contamos con un patrón de diseño que establece que cada vez que un sitio web carga una AWP, Chrome muestra una píldora que aparece a la derecha del cuadro multifunción con un ícono y la etiqueta Instalar. Luego, cuando un usuario visite un sitio, solo estará presente el ícono. Cuando haces clic en este botón, se activa 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 Agregar a la pantalla principal que se usa en dispositivos móviles. Sin embargo, como se mencionó, el lenguaje que usamos fue Instalar. Los comentarios 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 de zoom era muy similar, lo que confundía aún más al usuario.

Error del cuadro multifunción con los íconos de zoom y de instalación presentes.
Se produce un error del cuadro multifunción con íconos de instalación y zoom.

Decidí investigar la percepción de nuestros usuarios, ya que la mayoría de los comentarios fueron anecdóticos. En colaboración con nuestros investigadores de UX, realizamos un estudio con 10,000 usuarios de Indonesia y EE.UU. para determinar qué tan bien comprenden la iconografía de instalación. Probamos cinco diseños diferentes, incluido el existente, y 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 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 se comparó el diseño existente con dos alternativas. Nos encontramos en la flecha que apunta hacia abajo, en un monitor, que tuvo un rendimiento significativamente mejor que los otros dos. Con este nuevo ícono, también observamos una disminución en los descartes de la IU de instalación.

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

El resultado es el diseño que ves hoy en día, con el que la tasa de instalación de las AWP aumentó más del doble en 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 permitió a la comunidad usar la iconografía que nos pareció más atractiva.

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

Ayuda en el producto

La Ayuda en el producto es un cuadro de ayuda azul que incorpora a los usuarios nuevas funciones 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 respaldar aún más el nuevo diseño del ícono.

Cuadro de ayuda en el producto
Cuadro de información de ayuda en el producto que brinda información a los usuarios sobre las funciones

Cuando un usuario visita un sitio web con regularidad, Chrome utiliza un servicio conocido como Participación en el sitio. Proporciona información sobre el nivel de participación de un usuario en un sitio. Si visitas chrome://site-engagement/, puedes ver los sitios con los que interactúas con regularidad. Con estas puntuaciones, podemos determinar si un usuario está interesado en un sitio web. Si el sitio fuera una AWP y el usuario estaba interesado, le mostraremos la IU de ayuda en el producto para la instalación. Esto significa que solo nos enfocamos en los usuarios comprometidos y no en molestar a los usuarios que visitan un sitio una vez.

Mediante el uso de la ayuda integrada en el 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 aplicaciones web.

IU de instalación más enriquecida

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, siempre que instalen una app, verán una descripción, capturas de pantalla y otros metadatos que los ayudarán a decidir si quieren una app.

Con las AWP, la IU que mostramos cuando un usuario decidió instalar una aplicación web era relativamente escasa. Por lo tanto, el equipo decidió explorar una experiencia de instalación más completa que brindara contexto a nuestros usuarios sobre la app web y les permitiera a los desarrolladores celebrar las AWP que estuvieran a la par de las experiencias nativas.

IU de instalación más enriquecida
IU de instalación más enriquecida, 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 permite a los desarrolladores agregar capturas de pantalla a su manifiesto. Los desarrolladores también pueden agregar una descripción, lo cual se recomienda, pero no es necesario. Debido a esta IU más nueva, observamos que se duplicó la tasa de instalación de algunas AWP, lo que demuestra que los usuarios tienen más confianza en la instalación de apps web cuando les damos más contexto y experiencias más completas. Actualmente, estamos trabajando en la versión para computadoras de escritorio de esta IU.

Conclusión

El equipo dedicó los últimos dos años a explorar y experimentar con funciones 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 juntos podemos mejorar y enriquecer la vida de nuestros usuarios y respaldar aún más la Web abierta.