Introdução
No início de 2020, a equipe do Chrome em dispositivos móveis e computadores planejou um plano para melhorar a descoberta e o engajamento dos apps da Web instalados. Nosso trabalho levou a um aumento de mais de 100% na instalação e engajamento do PWA. Conseguimos isso pesquisando os recursos atuais, realizando testes A/B e entrevistas com usuários para ter insights sobre as percepções e expectativas dos usuários. Este artigo aborda como chegamos lá.
Idioma de instalação unificado
A call-to-action que aciona a instalação de um PWA era inconsistente em toda a plataforma da Web. Para o Chrome no Android, definimos a opção Adicionar à tela inicial, mas nas nossas plataformas para computadores, enfatizamos Instalar. A justificativa para essa discrepância veio de um estudo realizado pela equipe em 2016 que comparou strings diferentes. A equipe descobriu que a opção Adicionar à tela inicial funcionava melhor, se for apenas parcialmente, em dispositivos móveis.
Um estudo adicional sobre taxonomia em 2019 não encontrou diferença. Portanto, a equipe que queria unificar a experiência de instalação do PWA decidiu atualizar o rótulo para Instalar no Android. Outro estudo em 2021 comparou os idiomas Instalar, Baixar e Fazer o download, e descobrimos que os usuários entendiam a opção Instalar como o processo que estava acontecendo. Os usuários sentiram que tocar em um botão com o rótulo Obter levaria o usuário a um site e, com Download, eles presumiram que um arquivo iria para a pasta de downloads ou equivalente.
Com tudo isso em mente, concluímos que o rótulo Instalar é mais adequado para PWAs. Recomendamos que os desenvolvedores em toda a plataforma da Web adotem "Instalar" como a string preferencial daqui em diante.
Ícone de instalação na área de trabalho
Em nossas plataformas para computadores, temos um padrão de design que, sempre que um site carrega um PWA, o Chrome mostra um círculo no lado direito da omnibox, contendo um ícone e o rótulo Instalar. Depois disso, quando um usuário acessar um site, apenas o ícone estará presente. Clicar nesse botão aciona a instalação de um PWA de desktop.
Inicialmente, o ícone era um símbolo de adição, em parte devido à metáfora Adicionar à tela inicial usada em dispositivos móveis. No entanto, como mencionado, a linguagem que usamos foi Install. O feedback que recebemos da comunidade de desenvolvedores era 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 seria muito semelhante, confundindo ainda mais o usuário.
Decidi investigar a percepção dos nossos usuários, já que a maior parte do feedback foi andotal. Trabalhando com nossos pesquisadores de UX, realizamos um estudo com 10 mil usuários nos EUA e na Indonésia para determinar a compreensão dos usuários sobre a iconografia de instalação. Testamos cinco designs diferentes, incluindo o atual, e perguntamos aos usuários o que significava "Instalar". Descobrimos que o ícone atual, o símbolo de adição, era o mais confuso para nossos usuários. Muitos confundiram o símbolo com "remédio", "primeiro socorro" e "baterias".
Também descobrimos que os usuários associavam principalmente imagens, como setas e dispositivos, à instalação. Com base nessas conclusões, fizemos um teste A/B/C no Chrome, comparando o design atual a duas alternativas. Encontramos uma seta apontando para baixo em um monitor, que teve um desempenho muito melhor do que os outros dois. Também notamos uma redução nas dispensas da interface de instalação com esse novo ícone.
O resultado é o design que você vê hoje, com a taxa de instalação de PWAs mais do que o dobro para 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 consideramos mais interessante.
É claro que 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 balão azul que integra os usuários sobre novos recursos que possam interessar a eles 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 ainda mais suporte ao novo design do ícone.
Quando o usuário acessa um site regularmente, o Chrome usa um serviço conhecido
como Engajamento do site.
Ela fornece informações sobre o nível de engajamento do usuário com um site. Ao
acessar chrome://site-engagement/, é possível ver os sites com que
você interage regularmente. Usando essas pontuações, podemos determinar
se um usuário está interessado em um site. Se o site fosse um PWA e o
usuário estivesse envolvido, mostraríamos a instalação da interface de ajuda no produto.
Isso significa que nos concentramos apenas nos usuários engajados, e não em incomodar os usuários que acessam um site uma vez.
Ao usar a ajuda no produto para computadores, notamos um aumento de mais de 100% na instalação de PWAs, mostrando que focar em usuários engajados melhorou a instalação de apps da Web.
interface de instalação mais avançada
Para a maioria dos usuários, o paradigma de instalação é uma loja. Desde meados dos anos 2000, informamos aos usuários que, sempre que instalam um app, eles veem uma descrição, capturas de tela e outros metadados para ajudá-los a decidir se um app é algo que eles querem.
Com os PWAs, a interface que mostramos quando um usuário decidiu instalar um app da Web era relativamente reduzida. Por isso, a equipe decidiu testar uma experiência de instalação mais avançada que fornecesse contexto aos usuários sobre o app da Web e permitisse aos desenvolvedores comemorar os PWAs que eram semelhantes às 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 que os desenvolvedores adicionem capturas de tela ao manifesto. Os desenvolvedores também podem adicionar uma descrição, o que é recomendado, mas não necessário. Devido a essa interface mais nova, vimos uma taxa de instalação para alguns PWAs duas vezes, mostrando que os usuários têm mais confiança na instalação de apps da Web quando oferecemos mais contexto e experiências mais ricas. A versão para computadores dessa interface ainda está em desenvolvimento.
Conclusão
A equipe passou os últimos dois anos explorando e testando recursos mais recentes do Chrome que ativaram e capacitaram os desenvolvedores de PWA e ajudaram a educar os usuários sobre os benefícios das experiências na 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.