Introdução
No início de 2020, a equipe do Chrome para dispositivos móveis e computadores estabeleceu um plano para melhorar a visibilidade e o engajamento dos apps da Web instalados. Nosso trabalho levou a um aumento de mais de 100% na instalação e no engajamento com o PWA. Para isso, pesquisamos os recursos existentes, realizamos experimentos de teste A/B e entrevistas com usuários para entender melhor as percepções e expectativas deles. Neste artigo, explicamos como chegamos até aqui.
Idioma de instalação unificado
A call-to-action que aciona uma instalação de PWA era inconsistente em toda a plataforma da Web. No Chrome para Android, definimos Adicionar à tela inicial, mas nas plataformas para computador, destacamos Instalar. A justificativa para essa discrepância veio de um estudo realizado pela equipe em 2016 que comparou diferentes strings. A equipe descobriu que a opção Adicionar à tela inicial funcionava melhor, mesmo que marginalmente, em dispositivos móveis.
Um estudo adicional sobre a taxonomia em 2019 não encontrou diferenças. Por isso, a equipe, querendo unificar a experiência de instalação de PWA, decidiu atualizar o rótulo para Instalar no Android. Outro estudo de 2021 comparou os termos Install, Get e Download e descobriu que os usuários entendiam Install como o processo que estava acontecendo. Os usuários achavam que tocar em um botão com o rótulo Get os levaria a um site, e com Download, eles presumiam que um arquivo seria salvo na pasta de downloads ou equivalente.
Com tudo isso em mente, concluímos que o rótulo Instalar é o mais adequado para PWAs. Recomendamos que os desenvolvedores da plataforma da Web adotem "Install" como a string preferencial daqui em diante.
Ícone de instalação no computador
Nas plataformas para computador, temos um padrão de design que, sempre que um site carrega um PWA, mostra um botão no lado direito da caixa de pesquisa com um ícone e o rótulo Instalar. Depois disso, quando um usuário visitar um site, apenas o ícone vai estar presente. Clicar nessa pílula aciona a instalação de um PWA para computadores.
O ícone era inicialmente um símbolo de adição, em parte devido à metáfora Adicionar à tela inicial usada em dispositivos móveis. No entanto, como mencionado, o idioma usado foi Install. O feedback que recebemos da comunidade de desenvolvedores foi que esse ícone era confuso. Além disso, se um usuário usasse a função de zoom para ampliar o texto, o ícone de zoom parecia muito semelhante, confundindo ainda mais o usuário.
Decidi investigar a percepção do usuário, já que a maioria dos feedbacks era anecdotal. Em parceria com nossos pesquisadores de UX, realizamos um estudo com 10.000 usuários nos EUA e na Indonésia para determinar o entendimento dos usuários sobre a iconografia de instalação. Testamos cinco designs diferentes, incluindo o atual, e perguntamos aos usuários o que "Instalar" significava. Descobrimos que o ícone atual, o símbolo de adição, era o mais confuso para nossos usuários. Muitas pessoas confundiram o símbolo com "medicamentos", "primeiros socorros" e "baterias".
Também descobrimos que os usuários associavam principalmente imagens, como setas e dispositivos, à instalação. Com base nessas conclusões, executamos um teste A/B/C no Chrome, comparando o design atual com duas alternativas. A seta apontando para baixo em um monitor, que teve um desempenho significativamente melhor do que as outras duas. Também observamos uma redução nas dispensas da interface de instalação com esse novo ícone.
O resultado é o design que você vê hoje, que aumentou mais que o dobro da taxa de instalação de PWAs em relação aos sites. Também adicionamos esse ícone e um equivalente para dispositivos móveis ao nosso conjunto de ícones do Material Design, permitindo que a comunidade use a iconografia que achamos mais interativa.
Claro, um único ícone não vai mudar o mundo, o que nos leva ao nosso próximo recurso.
Ajuda no produto
A ajuda no produto é uma dica de ferramenta azul que orienta os usuários sobre novos recursos que podem ser interessantes com base em critérios específicos. Decidimos lançar esse padrão de design para informar os usuários sobre os recursos de instalação e oferecer suporte ao novo ícone reformulado.
Quando um usuário visita um site regularmente, o Chrome usa um serviço conhecido
como Engajamento do site.
Isso fornece informações sobre o engajamento de um usuário com um site. Ao
acessar chrome://site-engagement/, você pode conferir os sites que
você acessa regularmente. Usando essas pontuações, podemos determinar
se um usuário tem interesse em um site. Se o site fosse uma PWA e o
usuário estivesse interagindo, mostraríamos a interface de ajuda no produto.
Isso significa que nos concentramos apenas nos usuários engajados e não incomodamos os usuários
que visitam um site apenas uma vez.
Ao usar a ajuda no produto em computadores, observamos um aumento de mais de 100% na instalação de PWAs, mostrando que o foco em usuários engajados melhorou a capacidade de instalação de apps da Web.
Interface de instalação mais completa
O paradigma de instalação para a maioria dos usuários é uma loja. Desde meados de 2000, ensinamos os usuários que, sempre que instalarem um app, eles vão ver uma descrição, capturas de tela e outros metadados para ajudar a decidir se um app é o que eles querem.
Com os PWAs, a interface que mostrávamos quando um usuário decidia instalar um app da Web era relativamente pequena. Então, a equipe decidiu explorar uma experiência de instalação mais rica que daria contexto aos nossos usuários sobre o app da Web e permitiria que os desenvolvedores comemorassem as PWAs que estavam no mesmo nível das experiências nativas.
No início deste ano, lançamos o Richer Install, uma interface de instalação estendida no Chrome para Android que permite aos desenvolvedores adicionar capturas de tela ao manifesto. Os desenvolvedores também podem adicionar uma descrição, o que é recomendado, mas não obrigatório. Devido a essa nova interface, a taxa de instalação de alguns PWAs dobrou, mostrando que os usuários têm mais confiança para instalar apps da Web quando oferecemos mais contexto e experiências mais ricas. A versão para computador desta interface está em desenvolvimento.
Conclusão
Nos últimos dois anos, a equipe explorou e testou recursos mais recentes no Chrome que permitiram e capacitaram desenvolvedores de PWA e ajudaram a educar os usuários sobre os benefícios das experiências da Web. Ainda há muito trabalho a ser feito, mas coletivamente podemos melhorar e enriquecer a vida dos nossos usuários e apoiar ainda mais a Web aberta.