Não mexa na rolagem
(dontfuckwithscroll.com)- Scrolljacking sobrescreve a velocidade, a direção e os efeitos padrão de rolagem do navegador, abalando a navegação previsível que os usuários esperam na web
- Em um estudo de usabilidade do Nielsen Norman Group, muitos participantes se sentiram desorientados, e alguns interpretaram a rolagem alterada como um bug
- Plug-ins de rolagem com momentum, suave e inercial quebram a memória muscular e os recursos nativos do navegador, dificultando entender a posição atual em páginas longas
- Animações de transição de tela e dependência de JavaScript aumentam o peso de acessibilidade e desempenho em casos de enjoo, tontura, tecnologias assistivas, dispositivos de baixo desempenho e ambientes móveis
- Como os usuários vêm para ver o conteúdo, não encenações de rolagem, é melhor que os sites mantenham a rolagem nativa e rápida como ela é
Como o scrolljacking arruína a navegação na web
- Scrolljacking é a prática de redefinir o comportamento padrão de rolagem do navegador para alterar a velocidade, a direção e os efeitos de rolagem de uma página web
- Plug-ins de rolagem com momentum, rolagem suave e rolagem inercial são formas comuns de scrolljacking
- Podem parecer melhorias, mas atrapalham uma experiência de navegação na web natural, eficiente e previsível
- O dano se manifesta principalmente em usabilidade, acessibilidade e desempenho
Confusão constatada em estudo de usabilidade
- O estudo de usabilidade do Nielsen Norman Group mostra que scrolljacking pode causar desorientação nos usuários
- Muitos participantes tiveram ao menos alguma desorientação
- Alguns usuários interpretaram o comportamento de rolagem alterado como um bug
- Usuários orientados a tarefas demonstraram tolerância muito menor ao scrolljacking do que usuários orientados à exploração
- Um participante reagiu no sentido de que “deslizei completamente e não fui para lugar nenhum”, e disse que, se fosse um cliente em potencial, teria ficado muito irritado
- No mobile, o problema aumenta por causa da longa duração da rolagem e da tela pequena
Violação das expectativas e do controle do usuário
- Usuários esperam o comportamento básico de que, ao rolar, o conteúdo se mova imediatamente
- Plug-ins de rolagem com momentum oferecem um comportamento com animação misturada em vez de um movimento imediato e previsível
- Essa mudança interfere na memória muscular e nos hábitos existentes dos quais os usuários dependem para navegar com eficiência
- Ao sobrescrever a rolagem padrão, a encenação do site passa à frente das preferências ou necessidades do usuário
- Usuários visitam um site para ver conteúdo, não uma experiência de rolagem excessivamente produzida
Enjoo e carga de acessibilidade
- Plug-ins de rolagem com momentum adicionam animações flutuantes ou cambaleantes, o que pode sobrecarregar usuários suscetíveis a enjoo ou tontura
- Muitos sites não oferecem uma opção para desativar isso, dificultando para o usuário evitar desconforto durante a leitura
- Tecnologias assistivas, como leitores de tela e navegação por teclado, podem ser prejudicadas por atrasos de timing
- Usuários com deficiências motoras ou limitações visuais podem ter mais dificuldade para usar o site por causa desses atrasos
- A acessibilidade deve ser tratada não como um recurso opcional, mas como um requisito básico de uso da web
Queda de desempenho e de consistência entre dispositivos
- Plug-ins de rolagem com momentum carregam JavaScript e podem causar atrasos, travamentos e falhas em dispositivos antigos ou de baixo desempenho
- Em dispositivos fracos, a página pode parecer quebrada em vez de “smooth”
- Renderizar animações exige bibliotecas JavaScript inchadas, dependências extras e mais ciclos de CPU
- Como resultado, o tempo de carregamento da página pode ficar mais lento
- Em redes móveis ou regiões com conexão ruim, efeitos de rolagem chamativos tornam a página mais lenta e menos acessível
Recursos nativos do navegador e problemas de percepção de posição
- Navegadores modernos já incluem configurações de rolagem com momentum para quem as deseja
- Plug-ins de terceiros podem sobrescrever esses recursos nativos ou entrar em conflito com eles, quebrando gestos personalizados de rolagem ou a rolagem com momentum
- Preferências do usuário, como a configuração de reduzir movimento em todo o sistema, podem não funcionar como esperado
- Animações de rolagem com momentum adicionam atraso entre a entrada do usuário e o resultado
- Em páginas longas, fica mais difícil identificar com precisão a posição atual, e navegar rapidamente também se torna trabalhoso
Power users e custo de manutenção
- Para power users que querem passar rapidamente por documentos ou se mover com precisão pela página, a rolagem com momentum desacelera o fluxo de trabalho
- Ela conflita com a expectativa de usuários que querem terminar tarefas rapidamente, pois eles precisam esperar animações lentas
- Plug-ins de rolagem com momentum não são um recurso que se instala uma vez e pronto
- Eles exigem atualizações regulares para permanecer compatíveis com navegadores, sistemas operacionais e dispositivos modernos
- A cada atualização há o risco de introduzir novos bugs, e as equipes de desenvolvimento ganham trabalho extra em vez de poderem usar esse tempo e custo para tornar o site mais rápido, seguro ou otimizado
Conclusão: deixe a rolagem no comportamento padrão
- Scrolljacking e plug-ins de rolagem com momentum adicionam complexidade desnecessária, reduzem a usabilidade e frustram usuários
- Como diz o Nielsen Norman Group, “usabilidade é a base do prazer”
- Em vez de reinventar a rolagem, é preciso manter um comportamento de rolagem nativo, previsível e rápido
- Não transforme a rolagem em um evento especial; apenas deixe o usuário rolar
1 comentários
Opiniões no Hacker News
Também não se deve mexer na URL, na navegação do navegador nem no botão de voltar
Parece uma batalha perdida há muito tempo, e as SPAs estragaram a web, tornando tudo muito pior
A History API funciona bem, então dá para fazer uma SPA e seu próprio navegador interno se comportarem de acordo com o navegador e o usuário
Mas muitos desenvolvedores não se importaram com fundamentos da web, como possibilidade de favoritar e navegação, e acabaram quebrando tudo
Uma boa SPA deve se comportar como um site comum, e você não deveria perceber que é uma SPA, exceto pelo fato de ser rápida e responsiva
É verdade que deveria ser possível favoritar ou compartilhar um estado específico, mas, para isso, é muito melhor apenas mudar a URL no lugar do que criar uma nova etapa de navegação
Quem estragou a web foram pessoas que não se importam com os fundamentos da web, URLs, voltar, experiência de rolagem etc.; o problema não é a SPA em si
Os navegadores deveriam corrigir isso, mas a inércia é tão grande que provavelmente não vai acontecer
Acho que a postura de “nós sabemos melhor que o usuário” se aplica não só à rolagem com Momentum, mas também a muitas tendências atuais de design de UX
Fico curioso para saber como chegamos a esse culto à estética a ponto de sacrificar todo o resto
Há por trás uma atitude extremamente condescendente que impede o usuário de assumir qualquer responsabilidade por si mesmo
Ainda hoje procurei como desativar aquele comportamento irritante no macOS de “é necessária a senha para ativar o Touch ID”; entendo a exigência depois de reiniciar, mas a exigência que parece ser baseada em tempo aparentemente não pode ser desativada
O mais próximo que encontrei foi reduzir o limite de tempo com o comando
bioutil, mas não dá para aumentá-loEstou pensando em fazer engenharia reversa para descobrir onde fica a verificação do valor máximo e ver se dá para contornar chamando diretamente uma API de nível inferior
Está mais para ausência de design de UX
Havia um bom post de blog com um título tipo “Button presses You”, mas não consigo encontrá-lo
A ideia central era que o objetivo de um aplicativo está deixando de ser decidir o que o usuário fará o programa fazer, e passando a ser o aplicativo instruir o usuário sobre o que fazer e como fazer
Também não se deve mexer na barra de rolagem
Hoje em dia parece haver uma moda de deixá-la com algo como 1 px de largura em todo lugar
Se você realmente quer tornar o app ergonômico, precisa fazer com que gestos com um ou dois dedos, por exemplo arrastar com o dedo para rolar, funcionem direito
Aí, no desktop, a única forma de rolar acaba sendo selecionar texto arrastando para além da borda do quadro
Tento não usar conteúdo que transborde, mas, quando ele precisa transbordar, a barra de rolagem atrapalha o design e a barra padrão é feia demais, então escondo
Elas aparecem assim que você move o mouse e somem quando ele para
Se quiser ver a posição do progresso, basta mexer um pouco o mouse
Uso a internet desde os tempos do Gopher e gosto do minimalismo da estética de HTML puro
Também gostei muito do link, no fim do texto, para o site que inspirou esse artigo
Ao ver o código-fonte de páginas assim, não é só nostalgia: dá uma sensação calorosa de “essas pessoas sabem o que estão fazendo”
É parecido com aquela cena do documentário Helvetica em que designers descrevem a sensação de poder escolher a nova Helvetica em vez daquelas fontes cursivas ruins ao estilo dos anos 1950
Acho que isso também inclui landing pages chamativas em que o conteúdo exibido no fundo muda conforme a rolagem, ou a própria página é dividida em seções
Ex.: https://webflow.com/made-in-webflow/website/Translate-Webflo...
A rolagem por inclinação no iPad ajuda até pessoas mais velhas a ler e rolar rapidamente, e a rolagem automática também é bastante boa
Continuo odiando tanto quanto na primeira vez que vi quando colocam botões < > em fileiras de itens em páginas que originalmente rolavam apenas para cima e para baixo
Plataformas de streaming de mídia são as mais famosas nesse quesito, mas não são as únicas culpadas
O que mais odeio hoje em dia é interceptar Ctrl+F ou Ctrl+K
Certamente foi preciso código extra no navegador para tornar isso possível, e não teria custado nada para Google, Apple ou Mozilla simplesmente não escreverem esse código
O navegador deveria oferecer um atalho alternativo para esses casos, como Shift+Ctrl+F
Acabei de descobrir que no Firefox o Shift+Cmd+F faz alguma coisa
Não se deve mexer em combinações de teclas padrão
Não se deve tirar uma função de outro aplicativo e surpreender o usuário
Recentemente, no Google Sheets no Mac, o Cmd-F para buscar dentro da planilha deixou de funcionar; esse método de fato interceptava o atalho do sistema, mas não havia nenhuma alternativa real
Então, para pesquisar, era preciso ir até a barra de menus do Sheets e procurar dentro do menu
Também não se deve mexer naquilo em que, ao rolar para baixo, uma animação avança, elementos se movem para o lado e você precisa passar por um portal de rolagem antes de poder continuar descendo a página
É um design horrível, irritante, intrusivo e hostil ao usuário
O mais engraçado é que o link “Back to the normal version” só fica clicável depois de voltar até o topo com rolagem suave
Fui pego direitinho
Fico me perguntando se dá para desativar isso no Firefox via
about:settingsOu será que a detecção de eventos quebraria?
Como alternativa, uma extensão do navegador talvez ajude
A implementação provavelmente varia caso a caso, e o exemplo da página [1] usa a biblioteca luxy.js [2]
Nesta página específica [1], foi possível desativar o comportamento de rolagem suave executando o comando abaixo no console das ferramentas de desenvolvedor
luxy.init({ wrapperSpeed: 1.0});