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.
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
45%
estão um pouco ou extremamente insatisfeitos
com a rolagem da Web.
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
43%
informou que um pouco ou
é
extremamente difícil trabalhar com a rolagem.
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
51%
informam que as interações por toque são
muito ou extremamente importantes
para o trabalho.
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
44%
relatam que é um pouco ou extremamente difícil
usar o gamepad e a navegação por guias.
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
50%
informe o que aprendeu sobre
`touch-action: manipulation`
da pesquisa.
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
58%
informar
às vezes, com frequência ou em todos os projetos
usando rolagem cíclica.
após 60 segundos, ele começa em 0 novamente.
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
55%
muito ou
extremamente importante
16%
informaram que nada
ou pouco importante
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
87%
usaram carrosséis.
24%
e são
fáceis de gerenciar.
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
65%
usar às vezes
em todos os projetos
60%
um pouco ou
extremamente difícil.
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
47%
usar às vezes
em todos os projetos
56%
informe um pouco ou
extremamente difícil
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
32%
sempre ou
a maior parte do tempo
50%
às vezes
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.