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.
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
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
THE TWISTS AND TURNS
4
Monday, June 17, 13
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.
IS IT LOADED?
6
Dar feedback visual enquanto novo conteúdo é
carregado
Monday, June 17, 13
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)
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
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
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...
WHERE’S THE FOOTER?
Sticky Footer
11
Monday, June 17, 13
Aqui um exemplo com todos esses elementos
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.
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
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.
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
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.
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...
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.
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
THE HYBRID...
20
http://travisisaacs.com/2008/02/24/improving-on-infinite-scrolling/
Monday, June 17, 13
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

The infinite scroll - recomendações para um final feliz

  • 1.
    THE ∞SCROLL Recomendações paraum 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 terum 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 Simplificaa 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 ANDTURNS 4 Monday, June 17, 13
  • 5.
    SEO & PROGRESSIVE ENHANCEMENTS URLsEstá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 Darfeedback 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? StickyFooter 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? StickyFooter 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? • ImplementarDestaques 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 Geriros 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 umindicador 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 TOAN 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 Iwant 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.
  • 21.
    THE ∞SCROLL Recomendações paraum final feliz vitor-s-teixeira@telecom.pt http://www.slideshare.net/vsdteixeira @vsdteixeira QUESTÕES? Monday, June 17, 13