Confira o Relatório de pesquisa de rolagem de 2021 e confira as palavras da equipe do Chrome sobre como isso afeta as prioridades e os planos para o Chromium e a Web.
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 de 2019. O Relatório de pesquisa de rolagem 2021 está pronto, e a equipe do Chrome quer compartilhar algumas ideias e ações necessárias que coletamos dos resultados da pesquisa. Esperamos que esses resultados ajudem os fornecedores de navegadores e grupos padrão a entender como melhorar a rolagem na Web.
Confira o Relatório de pesquisa de rolagem de 2021.
Resultados notáveis
A pesquisa coletou anonimamente 880 envios, com 366 respondendo 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 ao
CSS. Os resultados a seguir ajudam a destacar os problemas que os desenvolvedores da Web estão
enfrentando.
Satisfação geral com a rolagem na Web
Pergunta 27
45%
estão um pouco ou extremamente insatisfeitos em geral
com a rolagem na Web.
Essa pergunta foi colocada próximo ao final da pesquisa intencionalmente, após perguntas sobre 26 casos de uso e recursos de rolagem. Na resposta, está 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 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 usar a rolagem
Pergunta 2
43%
informou que é um pouco ou
extremamente difícil
de trabalhar com rolagem.
De acordo com nossa pesquisa, essas dificuldades vêm da grande 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 de rolagem vinculada - Carrosséis - Padding da rolagem da visualização - Rolagem cíclica - Rolagem virtualizada
A falta de recursos do navegador, JavaScript complexo e a necessidade de oferecer suporte a modos de entrada, incluindo toque, teclado e gamepads, tornam tudo isso mais difícil.
A importância das interações de toque
Pergunta 3
51%
considerar as interações de toque como
muito ou extremamente importantes
para o trabalho.
Com os usuários da Web para dispositivos móveis ainda em ascensão nas estatísticas
de visitas,
não é surpresa que metade dos entrevistados afirmem que o toque é muito
importante para seu trabalho na Web. Isso indicou que recursos da Web, como o ajuste de
rolagem CSS e o touch-action, precisam de mais atenção para que a Web possa oferecer
interações de toque de alta qualidade.
Dificuldade de navegação usando a tecla Tab ou o gamepad
Pergunta 5a
44%
informar
um pouco ou extremamente difícil para fazer gamepad e navegação com a tecla Tab.
A rolagem inclui métodos de navegação, como setas do teclado, teclas da tecla 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 relata que é um pouco ou extremamente difícil incluir essas entradas.
Aprendendo touch-action
Pergunta 9
50%
Relatório de aprendizado sobre
`touch-action: manipulação`
da pesquisa.
Algumas das perguntas da pesquisa foram sobre o uso de determinadas APIs com uma possível
resposta: Sim, Não ou "Hoje eu aprendi". Um feedback notável foi o
número de pessoas que relataram ter aprendido sobre touch-action na pesquisa, já que
essa é uma propriedade essencial ao criar gestos de toque personalizados que precisam
interagir com a rolagem.
Rolagem cíclica
Pergunta 27
58%
às vezes, com frequência ou em todos os projetos
usando a rolagem cíclica.
após 60 segundos, 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ébito técnico por causa disso, com duplicação ou JavaScript injetado para forçar o efeito. Ele é muito usado por carrosséis de produto e ao selecionar o tempo em segundos ou minutos para oferecer rolagem cíclica.
As áreas roláveis são importantes?
Pergunta 2
55%
muito ou
extremamente importante
16%
no relatório nada
ou pouco importante
Os participantes sentiram-se fortemente sobre a importância das áreas roláveis, o que dava outro sinal sobre as dificuldades necessárias para oferecer uma rolagem de alta qualidade.
Carrosséis
Pergunta 20
87%
já usou carrosséis.
24%
relatam que são
fáceis de gerenciar.
Quase todos os entrevistados entregam carrosséis no trabalho na Web, enquanto apenas 25% os consideram fáceis de gerenciar. Carrosséis prontos foram populares durante nossa pesquisa, mas essa estatística nos surpreendeu, pois não soa 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 entrevistados apresentam rolagem infinita em seu trabalho na Web, e um relatório de quantidade igual é difícil de fazer. Outro exemplo de alto uso combinado com alta dificuldade, 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, eles não parecem estar ajudando com a UX de rolagem
infinita "carregar mais".
Animações vinculadas à rolagem ou acionadas por rolagem
Pergunta 24
47%
usam às vezes
em todos os projetos
56%
Denunciar um pouco ou
extremamente difícil
Quase metade de todos os entrevistados usa animações de rolagem orquestradas e metade dos participantes acham difícil, mais uma vez vinculando alto uso com dificuldade.
Dispute com a rolagem integrada
Pergunta 26
32%
sempre ou
na maioria do tempo
50%
às vezes
As interações integradas de rolagem e toque de apps para smartphones e tablets costumam ser consideradas um local claro onde a Web pode se atualizar. Os recursos incluem animações com link de rolagem, interfaces programáticas, integração de voz, dicas de rolagem e APIs de arrastar para atualizar.
Apenas metade dos entrevistados acham que às vezes só era possível corresponder à experiência de rolagem integrada.
Satisfação geral com interações de rolagem na Web
Pergunta 27
Aprendizados 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 com a Web, incluindo a compatibilidade com a rolagem.
Os três primeiros problemas de compatibilidade são os seguintes:
1. Compatibilidade com rolagem horizontal.
1. overscroll-behavior em navegadores diferentes.
1. Remover prefixos de -webkit-scrollbar e seguir o padrão.
Educação
Os resultados da pesquisa mostraram que é preciso haver mais informações sobre touch-action e propriedades
lógicas. O navegador está na
vanguarda do layout internacional e está aparentemente subutilizado ou
incompreendido.
Áreas em que 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 recursos de interoperabilidade com bibliotecas e plug-ins conhecidos. Reduzir essa lacuna entre as bibliotecas CSS e de plug-ins vai ajudar na satisfação do desenvolvedor de ajuste de rolagem e da experiência do usuário.
Vamos focar o trabalho da API em scroll-snap:
1. Disponibilidade da API e compatibilidade entre 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 dificuldade com alguns tipos específicos de componentes relacionados à rolagem na Web, já que a plataforma não fornece os primários necessários para criá-los sem plug-ins ou um alto nível de esforço. Esperamos explorar essa área em mais detalhes.
Os desenvolvedores têm dificuldade de criar: 1. Carrosséis 1. Rolagem virtual 1. Rolagem infinita
Recursos
- Relatório de pesquisa de rolagem
- Anúncio da pesquisa
- Mozilla DNA Reports (em inglês)
- Compat2021: eliminação de cinco principais problemas de compatibilidade na Web
Imagem de miniatura: foto de Taylor Wilcox no Unsplash.