Carregado porVítor Teixeira
The infinite scroll - recomendações para um final feliz
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.
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