Relatório da pesquisa de rolagem de 2021

Confira o Relatório da pesquisa de rolagem de 2021 e as palavras da equipe do Chrome sobre como isso afeta as prioridades e os planos do Chromium e da Web.

Adam Argyle

Sam Dutton

Em abril, a equipe do Chrome lançou uma pesquisa sobre rolagem e ação por toque com base nos principais problemas relatados do Relatório de 2019 do MDN Web DNA. O Relatório da pesquisa de rolagem de 2021 está pronto, e a equipe do Chrome gostaria de compartilhar algumas ideias e ações que coletamos com os resultados da pesquisa. Esperamos que esses resultados ajudem os fornecedores de navegadores e os grupos de padrões a entender como melhorar a rolagem da Web.

Confira o Relatório de pesquisa de rolagem de 2021.

Resultados relevantes

A pesquisa coletou 880 envios anônimos, com 366 respostas a todas as perguntas.

Embora os primeiros passos com a rolagem sejam uma linha do CSS, como overflow-x: scroll;, a área de superfície das APIs e opções de rolagem é grande, abrangendo JavaScript e CSS. Os resultados a seguir ajudam a destacar os problemas que os desenvolvedores da Web encontram.

Satisfação geral com a rolagem da Web

Pergunta 27

Essa pergunta foi colocada perto do final da pesquisa intencionalmente, depois de perguntas sobre 26 casos de uso e recursos de rolagem. Pela resposta, fica claro que a comunidade da Web tem dificuldades com a rolagem. Quase metade dos entrevistados relata um nível de insatisfação geral.

Acreditamos que o sentimento geral sobre o trabalho com a rolagem não deve ser tão baixo. Essa métrica precisa ser alterada. É um sinal claro de que há trabalho a ser feito.

Dificuldade para trabalhar com a rolagem

Pergunta 2

De acordo com nossa pesquisa, essas dificuldades vêm da multiplicidade de casos de uso de rolagem. Quando falamos sobre rolagem, isso pode incluir: - Posicionar elementos em áreas roláveis - Rolagem infinita - Animação vinculada à rolagem - Carretéis - Padding da Scrollview - Rolagem cíclica - Rolagem virtualizada

Recursos ausentes do navegador, JavaScript complexo e a necessidade de oferecer suporte a modos de entrada, incluindo toque, teclado e gamepads, dificultam ainda mais as coisas.

Importância das interações por toque

Pergunta 3

Com o aumento dos usuários da Web para dispositivos móveis nas estatísticas de visitas, não foi surpreendente que metade dos entrevistados tenha informado que o toque é muito importante para o trabalho na Web. Isso indica que recursos da Web, como o CSS scroll snap e touch-action, precisam de atenção extra para que a Web possa oferecer interação por toque de alta qualidade.

Dificuldade de navegação com a tecla Tab ou o gamepad

Pergunta 5a

A rolagem inclui métodos de navegação, como setas do teclado, teclas Tab, pressionamentos da barra de espaço e gamepads, e pode ser difícil incluí-los ao fazer trabalhos de rolagem personalizados. Quase metade dos entrevistados relataram que é um pouco ou extremamente difícil incluir essas entradas.

Aprendizado touch-action

Pergunta 9

Algumas das perguntas da pesquisa foram sobre o uso de determinadas APIs com uma possível resposta de "Sim", "Não" ou "Aprendi hoje". Um feedback importante foi o número de pessoas que relataram ter aprendido sobre o touch-action pela pesquisa, já que é uma propriedade essencial para a criação de gestos de toque personalizados que precisam interagir com a rolagem.

Rolagem cíclica

Pergunta 27

Esses números são altos para um recurso de rolagem com pouco ou nenhum suporte fornecido pela plataforma da Web. O recurso geralmente gera grandes quantidades de dívida técnica por causa disso, com duplicação ou JavaScript injetado para forçar o efeito. É muito usado para carrosséis de produtos e ao selecionar o tempo em segundos ou minutos para oferecer rolagem cíclica.

As áreas de rolagem são importantes

Pergunta 2

Os participantes sentiram fortemente a importância das áreas roláveis, dando outro indicador sobre as dificuldades necessárias para oferecer rolagem de alta qualidade.

Carrosséis

Pergunta 20

Quase todos os entrevistados entregam carrosséis no trabalho na Web, enquanto apenas 25% acham fáceis de gerenciar. Os carrosséis prontos foram populares durante nossa pesquisa, mas essa estatística nos surpreendeu, já que não parece muito resolvida.

Rolagem infinita

Pergunta 22

Dois terços dos participantes usam rolagem infinita no trabalho da Web, e uma quantidade igual informa que é difícil fazer isso. Outro exemplo de uso alto combinado com dificuldade alta, o que indica uma área que precisa de atenção.

Embora content-visibility e contain-intrinsic-size possam ser combinados para reduzir os custos de renderização de áreas longas de rolagem, não parece que isso ajude com a UX de rolagem infinita "carregar mais".

Animações vinculadas por rolagem ou acionadas por rolagem

Pergunta 24

Quase metade dos participantes usa animações orquestradas por rolagem, e metade deles acha isso difícil, novamente associando o uso intenso à dificuldade.

Competir com a rolagem integrada

Pergunta 26

As interações de rolagem e toque integradas de aplicativos de smartphone e tablet são muitas vezes anunciadas como um lugar claro em que a Web pode se atualizar. Os recursos incluem animações vinculadas à rolagem, interfaces programáticas, integração de voz, dicas de rolagem e APIs de puxar para atualizar.

Apenas metade dos participantes achou que era possível corresponder à experiência de rolagem integrada.

Satisfação geral com a criação de interações de rolagem na Web

Pergunta 27

Aprendizados da pesquisa

Os resultados da pesquisa são divididos em quatro categorias: compatibilidade, educação, APIs e recursos.

Compatibilidade

A equipe do Chrome definiu uma meta para diminuir o número de problemas de compatibilidade na Web, incluindo a rolagem.

Os três primeiros problemas de compatibilidade em que você deve se concentrar: 1. Compatibilidade com rolagem horizontal. 1. overscroll-behavior entre navegadores. 1. Removendo prefixos de -webkit-scrollbar e seguindo o padrão.

Educação

Os resultados da pesquisa mostraram que é necessário haver mais informações sobre touch-action e propriedades lógicas. O navegador está na frente do layout internacional, e é evidente que ele não está sendo usado ou entendido corretamente.

Áreas para se concentrar: 1. touch-action 1. Propriedades lógicas

APIs

O uso do ajuste de rolagem está crescendo, e os desenvolvedores responderam que querem usar os recursos de forma interoperável com bibliotecas e plug-ins conhecidos. Reduzir essa lacuna entre CSS e bibliotecas de plug-ins vai ajudar a satisfação do desenvolvedor e a experiência do usuário.

Vamos focar o trabalho da API em scroll-snap: 1. Disponibilidade e compatibilidade da API em vários navegadores. 1. Comece a trabalhar em novas APIs CSS, como scroll-start. 1. Comece a trabalhar em novos eventos JS, como snapChanged().

Recursos

Os resultados da pesquisa mostraram que os usuários têm dificuldades com alguns tipos específicos de componentes relacionados ao rolagem na Web, já que a plataforma não oferece as primitivas necessárias para criá-los sem plugins ou um alto nível de esforço. Essa é uma área que queremos explorar mais a fundo.

Os recursos que os desenvolvedores têm dificuldade para criar incluem: 1. Carrosséis 1. Rolagem virtual 1. Rolagem infinita

Recursos

• Relatório da pesquisa de rolagem
• Anúncio da pesquisa
• Relatórios do DNA do Mozilla
• Compat2021: como eliminar cinco problemas de compatibilidade na Web

Imagem em miniatura: foto de Taylor Wilcox no Unsplash.