Em abril, a equipe do Chrome lançou uma pesquisa sobre rolagem e ação de toque com base nos principais problemas relatados no MDN Web DNA Report de 2019. O Relatório da pesquisa de rolagem de 2021 já está pronto, e a equipe do Chrome gostaria de compartilhar algumas ideias e itens de ação que extraímos dos resultados da pesquisa. Esperamos que esses resultados ajudem os fornecedores de navegadores e grupos de padrões a entender como melhorar a rolagem na Web.
Acesse o Relatório da pesquisa de rolagem de 2021.
Resultados notáveis
A pesquisa coletou anonimamente 880 envios, com 366 respostas a todas as perguntas.
Embora a rolagem 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 destacam 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
com a rolagem na Web.
Essa pergunta foi colocada intencionalmente perto do final da pesquisa, após 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 participantes relata um nível de insatisfação geral.
Acreditamos que o sentimento geral sobre o trabalho com a rolagem não deveria ser tão baixo. Essa métrica precisa ser alterada. É um sinal claro de que há trabalho a ser feito.
Dificuldade de trabalhar com a rolagem
Pergunta 2
43%
relataram que é um pouco ou
extremamente difícil
trabalhar com a rolagem.
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, tornam tudo isso mais difícil.
Importância das interações de toque
Pergunta 3
51%
relatam que as interações de toque são
muito ou extremamente importantes
para o trabalho deles.
Como os usuários da Web para dispositivos móveis ainda estão em ascensão nas estatísticas
de visitas,
não foi surpreendente ver metade dos participantes relatar que o toque é muito
importante para o trabalho deles na Web. Isso sinalizou que recursos da Web, como o ajuste de rolagem CSS e a touch-action, precisam de atenção extra para que a Web possa oferecer uma interação de 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
fazer a navegação com gamepad e tecla Tab.
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 incluir esses elementos ao fazer um trabalho de rolagem personalizado. Quase metade dos participantes relata que é um pouco ou extremamente difícil incluir essas entradas.
Aprendizado touch-action
Pergunta 9
50%
relatam aprender sobre
`touch-action: manipulation`
com a pesquisa.
Algumas das perguntas da pesquisa eram sobre o uso de determinadas APIs com uma possível resposta de "Sim", "Não" ou "Hoje eu aprendi". Um feedback notável foi o número de pessoas que relataram ter aprendido sobre touch-action com a pesquisa, já que é uma propriedade essencial ao criar gestos de toque personalizados que precisam interagir na rolagem.
Rolagem cíclica
Pergunta 27
58%
relatam às vezes, com frequência ou em todos os projetos
usar a rolagem cíclica.
após 60 segundos, ela começa novamente em 0.
Esses números são altos para um recurso de rolagem com pouco ou nenhum suporte fornecido pela plataforma da Web. O recurso geralmente incorre em grandes quantidades de dívida técnica por causa disso, com duplicação ou JavaScript injetado para forçar o efeito. Ele é popular para carrosséis de produtos 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%
relatam não ser nada
ou ligeiramente importante
Os entrevistados expressaram grande preocupação com a importância das áreas roláveis, o que indica mais uma vez as dificuldades enfrentadas para oferecer uma rolagem de alta qualidade.
Carrosséis
Pergunta 20
87%
já usaram carrosséis.
24%
relatam que eles são
fáceis de gerenciar.
Quase todos os participantes oferecem carrosséis no trabalho da Web, enquanto apenas 25% acham que eles são mais fáceis de gerenciar. Os carrosséis pré-criados eram populares durante nossa pesquisa, mas essa estatística nos surpreendeu, já que não parece muito resolvida.
Rolagem infinita
Pergunta 22
65%
usam às vezes
para todos os projetos
60%
um pouco ou
extremamente difícil.
Dois terços dos participantes oferecem rolagem infinita no trabalho da Web, e um número igual relata que é difícil fazer isso. Outro exemplo de uso alto 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 roláveis longas, isso não parece ajudar com a rolagem infinita "carregar mais"
da UX.
Animações vinculadas ou acionadas por rolagem
Pergunta 24
47%
use it às vezes
to todos os projetos
56%
relatam um pouco ou
extremamente difícil
Quase metade de todos os participantes usa animações orquestradas por rolagem, e metade dos participantes acha isso difícil, mais uma vez vinculando o uso alto à dificuldade.
Concorrer com a rolagem integrada
Pergunta 26
32%
sempre ou
na maioria das vezes
50%
às vezes
As interações de rolagem e toque integradas de aplicativos para smartphones e tablets são frequentemente 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 pull-to-refresh.
Apenas metade dos participantes achou que só às vezes 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
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 de diminuir o número de problemas de compatibilidade da Web, incluindo a compatibilidade de rolagem.
Os três primeiros problemas de compatibilidade em que se concentrar: 1. Compatibilidade de rolagem horizontal.
1. overscroll-behavior entre navegadores.
1. Remover prefixos de -webkit-scrollbar e seguir o 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 lacuna entre o CSS e as bibliotecas de plug-ins vai ajudar na satisfação do desenvolvedor e da experiência do usuário de ajuste de rolagem.
Vamos concentrar o trabalho da API em scroll-snap: 1. Disponibilidade e compatibilidade da API em navegadores.
1. Começar a trabalhar em novas APIs CSS
como scroll-start.
1. Começar 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 à rolagem na Web, já que a plataforma não fornece as primitivas necessárias para criá-los sem plug-ins ou um alto nível de esforço. Essa é uma área que esperamos explorar mais profundamente.
Os recursos que os desenvolvedores têm dificuldade em criar incluem: 1. Carrosséis 1. Rolagem virtual 1. Rolagem infinita