Rolagem infinita... o que muda realmente na experiência do usuário e no front-end?

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

GUSTAVO DAS NEVES

• @gustavodasneves

• fb.com/gustavo.nevesgn

• gustavoneves.com

• gustavo.masterstudioweb.com.br

• about.me/gustavodasneves

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.

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

PAGINAÇÃO X ROLAGEM INFINITA

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.

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.

QUANDO PENSAR DUAS VEZES EM ROLAGEM INFINITA?

Quando houverem dados específicos ou características para filtragem e ordenação nos resultados. Ex.: E-commerce

QUANDO PENSAR DUAS VEZES EM ROLAGEM INFINITA?

BIBLIOTECAS E TECNOLOGIAS 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??

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.

4 DICAS PARA FINALIZAR

Produtividade, bem-estar e estilo de vida

MOMENTO JABÁ ABSURDO

TEM DÚVIDAS?

FALE AGORA OU CALE-SE PARA SEMPRE… ME MANDA UM TWEET OU E-MAIL :)

@gustavodasneves

gustavo.nevesgn@gmail.com