Relatório da pesquisa de rolagem de 2021

Confira o relatório da pesquisa Scroll de 2021 e saiba 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 de toque com base nos principais problemas relatados no Relatório de DNA da Web da MDN de 2019. O Relatório da pesquisa sobre rolagem de 2021 está pronto, e a equipe do Chrome quer compartilhar algumas ideias e ações que extraímos dos 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 da pesquisa de rolagem de 2021.

Resultados notáveis

A pesquisa coletou anonimamente 880 envios, com 366 respostas para todas as perguntas.

Embora começar a rolar seja uma linha de 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 estão enfrentando.

Satisfação geral com a rolagem da Web

Pergunta 27

Essa pergunta foi colocada intencionalmente perto do final da pesquisa, 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 trabalhar com rolagem não deveria ser tão baixo. Essa métrica precisa ser mudada. É um sinal claro de que há trabalho a ser feito.

Dificuldade para trabalhar com rolagem

Pergunta 2

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

A falta de recursos do navegador, o JavaScript complexo e a necessidade de oferecer suporte a modos de entrada, incluindo toque, teclado e gamepads, dificultam tudo isso.

Importância das interações por toque

Pergunta 3

Como os usuários da Web em dispositivos móveis ainda estão em alta nas estatísticas de visitas, não foi surpreendente ver metade dos entrevistados relatar que o toque é muito importante para o trabalho deles na Web. Isso indicou que recursos da Web, como CSS scroll snap e touch-action, precisam de mais atenção 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. Pode ser difícil incluir esses métodos ao fazer um trabalho de rolagem personalizado. Quase metade dos entrevistados relata que é um pouco ou extremamente difícil incluir essas entradas.

Aprendizado touch-action

Pergunta 9

Algumas perguntas da pesquisa eram sobre o uso de determinadas APIs com uma possível resposta de "Sim", "Não" ou "Hoje aprendi". Um feedback notável foi o número de pessoas que relataram ter aprendido sobre touch-action na pesquisa, já que é uma propriedade essencial ao criar gestos de toque personalizados que precisam interagir dentro da 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. Por isso, o recurso geralmente incorre em grandes quantidades de dívida técnica, com duplicação ou JavaScript injetado para forçar o efeito. É uma opção comum para carrosséis de produtos e ao selecionar tempo em segundos ou minutos para oferecer rolagem cíclica.

As áreas roláveis são importantes?

Pergunta 2

Os participantes enfatizaram a importância das áreas roláveis, o que indica as dificuldades necessárias para oferecer rolagem de alta qualidade.

Carrosséis

Pergunta 20

Quase todos os participantes usam carrosséis no trabalho na Web, mas apenas 25% acham que eles são 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 entrevistados usam a rolagem infinita no trabalho na Web, e a mesma quantidade diz que é difícil fazer isso. Outro exemplo de uso e dificuldade altos, 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 em áreas roláveis longas, isso não parece ajudar com a experiência do usuário de rolagem infinita "carregar mais".

Animações vinculadas ou acionadas por rolagem

Pergunta 24

Quase metade dos entrevistados usa animações orquestradas por rolagem, e metade deles acha isso difícil, mais uma vez vinculando o uso intenso à dificuldade.

Competir com rolagem integrada

Pergunta 26

As interações de rolagem e toque integradas de aplicativos para smartphones e tablets são geralmente consideradas um lugar claro em que a Web pode alcançar. 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 entrevistados achou que às vezes era possível corresponder à experiência de rolagem integrada.

Satisfação geral ao criar interações de rolagem na Web

Pergunta 27

Principais conclusões da pesquisa

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

Compatibilidade

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

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

Educação

Os resultados da pesquisa mostraram que é necessário mais educação sobre touch-action e propriedades lógicas. O navegador está na vanguarda do layout internacional, e é evidente que ele é subutilizado ou mal compreendido.

Áreas de foco: 1. touch-action 1. Propriedades lógicas

APIs

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

Vamos concentrar o trabalho da API em scroll-snap: 1. Disponibilidade e compatibilidade da API em 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 a rolagem na Web, já que a plataforma não oferece as primitivas necessárias para criá-los sem plug-ins ou um alto nível de esforço. Esperamos analisar essa área com mais profundidade.

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

Recursos

• Relatório da pesquisa de rolagem
• Aviso sobre a pesquisa
• Relatórios de DNA da Mozilla
• Compat2021: eliminando cinco principais problemas de compatibilidade na Web

Imagem em miniatura: foto de Taylor Wilcox no Unsplash.