Palestra apresentada no TDC 2015 Porto Alegre na UniRitter sobre os principais problemas quando um sistema possui implementação de rolagem infinita. Muitas vezes é um erro ou até mesmo excesso de informações para o usuário portanto necessário pensar duas vezes antes de optar por essa técnica de navegação / usabilidade.

1. ROLAGEM INFINITA…
O que muda realmente na experiência do usuário e no front-end?

2. GUSTAVO DAS NEVES
• @gustavodasneves
• fb.com/gustavo.nevesgn
• gustavoneves.com
• gustavo.masterstudioweb.com.br
• about.me/gustavodasneves

3. O QUE É?
Rolagem infinita oferece uma
maneira eficiente de navegar
em grandes quantidades de
informações, sem ter que
esperar pois os itens são
carregados sob demanda.
Em vez disso, o usuário
desfruta de uma experiência
ágil em qualquer dispositivo
que estiver usando.

4. QUEM SE BENEFICIA DIRETAMENTE
DA ROLAGEM INFINITA?
Aplicações onde não há conteúdo com diferença de
relevância. Ex.:Twitter
Portais de conteúdo que “diminuíram" a taxa de rejeição
principalmente das páginas iniciais. Ex.:Terra, G1 e outros

5. PAGINAÇÃO X ROLAGEM INFINITA

7. CONTRAS DA ROLAGEM INFINITA
• TENTAÇÃO
• OTIMISMO
• EXAUSTÃO
• POGOSTICKING
• PERDA DO CONTROLE
• MUDANÇAS PARA OBTER ESTATÍSTICAS
PADRÃO (ANALYTICS)
• ADICIONAR CONTEÚDO DINAMICAMENTE
AUMENTA O CONSUMO DE MEMÓRIA DO
BROWSER, DEPENDENDO DO BROWSER PODE
ELEVAR ATÉ 50MB DE CONSUMO DE MEMÓRIA
RAM.
• SEO MAIS COMPLEXO
• É UM COMPORTAMENTO IRREVERSÍVEL, VOCÊ
NÃO PODE VOLTAR AO ESTADO ANTERIOR.

8. QUANDO USAR ROLAGEM INFINITA?
Onde a paginação é importante e clicar em novas
páginas se torna uma barreira na usabilidade.
O conteúdo completo é muito grande para ser todo
carregado inicialmente.
O conteúdo está disponível em pedaços como
resultados de busca, posts de blog e listagem de
produtos.

9. QUANDO PENSAR DUASVEZES EM
ROLAGEM INFINITA?
Quando houverem dados específicos ou
características para filtragem e ordenação nos
resultados. Ex.: E-commerce

10. QUANDO PENSAR DUASVEZES EM
ROLAGEM INFINITA?

11. BIBLIOTECAS ETECNOLOGIAS PARA
IMPLEMENTAR INFINITE SCROLL
JAVASCRIPT, JAVASCRIPT E + JAVASCRIPT
REACT - facebook.github.io/react
INFINITE-SCROLL - github.com/infinite-scroll ou infinite-
scroll.com (WP / JQuery)
SLY - DARSA.IN/SLY
AJAX??

12. ALGUMAS RECOMENDAÇÕES
DE IMPLEMENTAÇÃO
O usuário precisa saber quando não há mais
conteúdo disponível.
A navegação padrão deve estar presente sempre
que o browser não suportar Javascript, mas a
experiência será mais rica na funcionalidade de
leitura.

13. 4 DICAS PARA FINALIZAR
Produtividade, bem-estar e estilo de vida

14. MOMENTO JABÁ ABSURDO

15. TEM DÚVIDAS?
FALE AGORA OU CALE-SE PARA SEMPRE…
ME MANDA UMTWEET OU E-MAIL :)
@gustavodasneves
gustavo.nevesgn@gmail.com