O documento fornece recomendações para implementar o scroll infinito de forma a proporcionar uma boa experiência ao utilizador. Aborda questões como manter o estado da página após clicar em links, garantir acesso ao rodapé, gerir recursos e analíticas, e considerar ambas paginação e scroll infinito de acordo com o objetivo do utilizador.

1. THE ∞SCROLL
Recomendações para um final feliz
VítorTeixeira - Qualidade &
Usabilidade @ SAPO
Monday, June 17, 13
Algumas recomendações para uma implementação “problem-free” do scroll infinito.

2. INFINITE SCROLL
Permite ter um stream constante de informação que
vai sendo carregada na mesma página
Substitui listas paginadas (?)
∞
Quais as vantagens do scroll infinito?
2
Monday, June 17, 13
Começamos a ver uma difusão cada vez maior deste padrão
Vem substituir a paginação tal como a conhecíamos. Será que vem?
Vantagens do scroll infinito?
Informação em real-time - Social Media Sites
Grandes volumes de dados
Adequado para a experiência mobile

3. INFINITE SCROLL FTW
Simplifica a experiência mobile
Retém melhor os utilizadores
Pode melhorar o load time para páginas com muito
conteúdo
O que vocês disseram também...
3
Monday, June 17, 13

4. THE TWISTS AND TURNS
4
Monday, June 17, 13

5. SEO & PROGRESSIVE
ENHANCEMENTS
URLs Estáticos no backend
do Site
Implementar infinite scroll
por cima de uma estrutura
funcional apenas com
HTML
5
Monday, June 17, 13
A melhor forma de implementar é começar por construir a estrutura e navegação apenas com HTML,
depois tendo as páginas, links e conteúdo no sitio, pode-se implementar infinite scroll e outras
funcionalidades para melhorar a interface. É bom para os crawlers dos motores de pesquisa que
olharão para o HTML, assim como é para os utilizadores com e sem Javascript ativado.

6. IS IT LOADED?
6
Dar feedback visual enquanto novo conteúdo é
carregado
Monday, June 17, 13

7. BACK TO TOP!
7
Monday, June 17, 13
Mesmo em páginas “longas” que não usem o infinite scroll devemos considerar um botão que
permita regressar rapidamente à área superior do site (para redefinir pesquisa ou aceder ao
menu, por exemplo). Com infinite scroll essa necessidade é ainda mais óbvia. Contudo, deve
ser óbvia a ação que pressionar esse botão terá (Acompanhar com texto é uma
recomendação)

8. I WANNA GO “BACK”!
Note to SELF: Não partir o
funcionamento do “Back”!
Permitir regressar para a mesma
posição em que estava na lista após
fazer “back”
Sugestão: http://tumbledry.org/2011/05/12/
screw_hashbangs_building
8
Monday, June 17, 13
Um dos principais problemas do scroll infinito é não manter o estado da página após o click
num link. Existem algumas sugestões de implementação para reparar esta falha, ficam com
uma sugestão de leitura sobre uma implementação que me agradou porque também
considera progressive enhancements

9. WHERE’S THE FOOTER?
9
Monday, June 17, 13
Um problema que o infinite scroll introduz é o acesso aos links ou eventual conteúdo do
footer.
No Facebook, p.ex., é impossível interagir com o Footer. Sempre que este entra no viewport,
é carregado mais conteúdo enviando-o para “longe” outra vez

10. WHERE’S THE FOOTER?
Sticky Footer
10
Monday, June 17, 13
Um sticky footer resolve o problema de acesso e é especialmente útil quando existem
elementos relevantes para a visibilidade do produto apenas nesse elemento. Social icons,
contatos, newsletter...

11. WHERE’S THE FOOTER?
Sticky Footer
11
Monday, June 17, 13
Aqui um exemplo com todos esses elementos

12. WHERE’S THE FOOTER?
12
Monday, June 17, 13
Se implementada a solução “Mostrar Mais” o footer pode manter-se no fundo da página,
dado que enquanto o utilizador não interagir com esse botão poderá ver e interagir com os
elementos do footer.

13. WHAT’S EXCLUSIVE?
• Implementar Destaques ou escolhas do Staff quando
aplicável
13
Monday, June 17, 13
A solução de infinite scroll coloca todos os conteúdos com a mesma relevância, assim pode
ser útil uma área de destaques cuidada para que utilizadores voltem para a consultar pelo
menos uma vez por semana. Também é bom para criar interesse nos utilizadores que não
sabem o que ver, se em paralelo for implementado um sistema de relacionados

14. RESOURCES & STATS
Gerir os recursos exigidos
pelo carregamento de mais
informação
• Lazy loading
• Lazy unloading
14
Soluções de Analytics não
apanham o evento por
defeito, são necessárias
alterações para contar
pageviews, etc.
Monday, June 17, 13
Uma galeria com 3000 fotos numa página pode tornar-se um pesadelo... gerir memória é um
must
Os bots indexam as diferentes páginas, portanto se o conteúdo não tiver uma página
correspondente não vai ser contado como pageview.
Mais info online.

15. INFINITE PAGES
Adicionar um indicador de progresso, um menu fixo ou
um mapa quando aplicável e possível.
15
Nota: Não esconder Scroll Bar!
Monday, June 17, 13
Utilizadores gostam de saber o seu progresso e posição numa página. Nunca devemos
esconder o scroll dado ser uma hint para a distância ao topo e ao fundo.
Numa perspetiva mais prática podem implementar-se: Menus fixos, verticais ou horizontais

16. EVERYTHING COMES TO AN
END...
16
Monday, June 17, 13
Como nada é realmente infinito, o utilizador deve ser informado quando não houverem mais
dados para carregar.

17. I’M A HUMAN, SO TREAT ME
THAT WAY...
Utilizadores são orientados a tarefas
Usar a melhor solução para conclusão
eficaz dessa tarefa
Lista infinita só faz sentido se
suportar o objetivo dos utilizadores...
17
Monday, June 17, 13
Utilizadores são orientados a tarefas, mas precisam de ser guiados para a conclusão eficaz
dessas tarefas. Utilizarão o que lhes apresentarmos, mas poderão ficar frustrados se não
atingirem o seu objetivo ou alguma satisfação.
Só devemos utilizar infinite scroll se suportar o objetivo dos utilizadores. Caso contrário...

18. THE GOOD OL’ NUMBERS...
Paginação existe desde os
primórdios... E funciona!
Não descartar sem analisar
especifidades da tarefa.
http://developer.yahoo.com/ypatterns/navigation/pagination/
search.html
http://developer.yahoo.com/ypatterns/navigation/pagination/
item.html
Sugestão
18
Monday, June 17, 13
Não colocar de parte a paginação tradicional só porque surgiu um novo padrão. O Infinite
scroll não substitui a paginação. Ambos têm utilidade em situações diferentes.

19. RULE OF THUMB
19
I want to find something Entertain me!
Monday, June 17, 13
Se o objetivo for permitir ao utilizador encontrar algo, a recomendação vai para a lista
paginada
Se o objetivo for entreter e permitir ações básicas então Infinite scroll ftw

20. THE HYBRID...
20
http://travisisaacs.com/2008/02/24/improving-on-infinite-scrolling/
Monday, June 17, 13

21. THE ∞SCROLL
Recomendações para um final feliz
vitor-s-teixeira@telecom.pt
http://www.slideshare.net/vsdteixeira
@vsdteixeira
QUESTÕES?
Monday, June 17, 13