Introdução
No início de 2020, a equipe do Chrome em dispositivos móveis e computadores tratou um plano para melhorar a detecção e o engajamento de apps da Web instalados. Nosso trabalho levou a um aumento de mais de 100% na instalação e no engajamento do PWA. Para isso, pesquisamos os recursos atuais, realizamos experimentos de teste 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 uma instalação de PWA era inconsistente em toda a plataforma da Web. Para o Chrome no Android, escolhemos Adicionar à tela inicial, mas, nas nossas plataformas para computadores, enfatizamos Instalar. A lógica dessa discrepância veio de um estudo realizado pela equipe em 2016 que comparou strings diferentes. A equipe descobriu que Adicionar à tela inicial funcionava melhor, mesmo que apenas de forma parcial, em dispositivos móveis.
Um outro estudo sobre taxonomia em 2019 não encontrou diferenças. Portanto, a equipe que quer unificar a experiência de instalação do PWA, decidiu atualizar o rótulo para Instalar no Android. Um outro estudo em 2021 comparou idioma, Instalar, Instalar e Fazer o download, e descobrimos que os usuários entendiam Instalar como o processo que estava acontecendo. Os usuários achavam que tocar em um botão com o marcador Obter enviaria o usuário para um site e, com Download, eles presumiam que um arquivo chegaria na pasta de downloads ou equivalente.
Com tudo isso em mente, concluímos que o marcador Instalar é melhor para PWAs. Recomendamos que os desenvolvedores em toda a plataforma da Web adotem Install como a string preferencial daqui em diante.
Ícone de instalação no computador
Nas nossas plataformas de computador, temos um padrão de design que, sempre que um site carrega um PWA, o Chrome mostra uma pílula que aparece no lado direito da omnibox contendo um ícone e o marcador Instalar. Depois disso, quando um usuário visitar um site, apenas o ícone estará presente. Clicar nessa pílula aciona a instalação de um PWA para computador.
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 Instalar. O feedback que recebemos da comunidade de desenvolvedores foi de 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 ficaria muito semelhante, confundindo ainda mais o usuário.
Decidi investigar a percepção do usuário, já que a maior parte do feedback era interessante. Com nossos pesquisadores de UX, realizamos um estudo com 10.000 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 confundiam o símbolo com "medicamento", "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, realizamos um teste A/B/C no Chrome, comparando o design atual com duas alternativas. Caímos na seta que apontava para um monitor, que teve um desempenho significativamente melhor do que os outros dois. Também observamos uma diminuição nas dispensas da interface de instalação com esse novo ícone.
O resultado é o design mostrado hoje, que teve a taxa de instalação de PWAs mais do que duas vezes maior 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 achamos 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 a novos recursos que podem ser do interesse deles 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 à nova reformulação do ícone.
Quando um usuário acessa um site regularmente, o Chrome usa um serviço conhecido como Engajamento com o site.
Elas fornecem informações sobre o engajamento do usuário com um site. Ao
acessar chrome://site-engagement/, você pode ver os sites com que
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 engajado, mostraríamos a interface de ajuda de instalação no produto.
Isso significava que nos concentramos apenas nos usuários engajados, e não irritando os usuários
que podem acessar um site uma vez.
Ao usar a ajuda no produto no computador, registramos um aumento maior de 100% na instalação de PWAs, mostrando que o foco em usuários engajados melhorava a capacidade de instalação dos apps da Web.
interface de instalação mais avançada
O paradigma de instalação para a maioria dos usuários é uma loja. Desde meados dos anos 2000, informamos aos usuários que, sempre que instalarem um app, eles verão uma descrição, capturas de tela e outros metadados para ajudá-los a decidir se querem um app.
Com os PWAs, a IU exibida quando o usuário decidiu instalar um app da Web era relativamente escassa. Por isso, a equipe decidiu explorar uma experiência de instalação mais completa que daria contexto aos usuários sobre o app da Web e permitisse que os desenvolvedores comemorassem os PWAs que fossem equivalentes às experiências nativas.
No início deste ano, lançamos a Instalação mais avançada, uma interface de instalação estendida no Chrome no 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 necessário. Devido a essa interface mais recente, vimos uma taxa de instalação de alguns PWAs dobrar, 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 completas. A versão para computador dessa interface ainda está em desenvolvimento.
Conclusão
A equipe passou os últimos dois anos explorando e experimentando recursos mais recentes no Chrome, que possibilitaram e capacitaram os desenvolvedores de PWAs e ajudou a informar os usuários sobre os benefícios das experiências na Web. Ainda há muito trabalho a fazer, mas, coletivamente, podemos melhorar e enriquecer a vida dos nossos usuários e apoiar ainda mais a Web aberta.