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

908 visualizações

Publicada em

Apresentado no primeiro encontro "Usability Days" a 11 de Junho de 2013 em Lisboa. (http://lx.usabilitydays.com/)

Publicada em: Tecnologia
1 comentário
0 gostaram
Estatísticas
Notas
  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
908
No SlideShare
0
A partir de incorporações
0
Número de incorporações
16
Ações
Compartilhamentos
0
Downloads
0
Comentários
1
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 1. THE ∞SCROLLRecomendações para um final felizVítorTeixeira - Qualidade &Usabilidade @ SAPOMonday, June 17, 13Algumas recomendações para uma implementação “problem-free” do scroll infinito.
  2. 2. INFINITE SCROLLPermite ter um stream constante de informação quevai sendo carregada na mesma páginaSubstitui listas paginadas (?)∞Quais as vantagens do scroll infinito?2Monday, June 17, 13Começamos a ver uma difusão cada vez maior deste padrãoVem substituir a paginação tal como a conhecíamos. Será que vem?Vantagens do scroll infinito?Informação em real-time - Social Media SitesGrandes volumes de dadosAdequado para a experiência mobile
  3. 3. INFINITE SCROLL FTWSimplifica a experiência mobileRetém melhor os utilizadoresPode melhorar o load time para páginas com muitoconteúdoO que vocês disseram também...3Monday, June 17, 13
  4. 4. THE TWISTS AND TURNS4Monday, June 17, 13
  5. 5. SEO & PROGRESSIVEENHANCEMENTSURLs Estáticos no backenddo SiteImplementar infinite scrollpor cima de uma estruturafuncional apenas comHTML5Monday, June 17, 13A 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 outrasfuncionalidades para melhorar a interface. É bom para os crawlers dos motores de pesquisa queolharão para o HTML, assim como é para os utilizadores com e sem Javascript ativado.
  6. 6. IS IT LOADED?6Dar feedback visual enquanto novo conteúdo écarregadoMonday, June 17, 13
  7. 7. BACK TO TOP!7Monday, June 17, 13Mesmo em páginas “longas” que não usem o infinite scroll devemos considerar um botão quepermita regressar rapidamente à área superior do site (para redefinir pesquisa ou aceder aomenu, por exemplo). Com infinite scroll essa necessidade é ainda mais óbvia. Contudo, deveser óbvia a ação que pressionar esse botão terá (Acompanhar com texto é umarecomendação)
  8. 8. I WANNA GO “BACK”!Note to SELF: Não partir ofuncionamento do “Back”!Permitir regressar para a mesmaposição em que estava na lista apósfazer “back”Sugestão: http://tumbledry.org/2011/05/12/screw_hashbangs_building8Monday, June 17, 13Um dos principais problemas do scroll infinito é não manter o estado da página após o clicknum link. Existem algumas sugestões de implementação para reparar esta falha, ficam comuma sugestão de leitura sobre uma implementação que me agradou porque tambémconsidera progressive enhancements
  9. 9. WHERE’S THE FOOTER?9Monday, June 17, 13Um problema que o infinite scroll introduz é o acesso aos links ou eventual conteúdo dofooter.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. 10. WHERE’S THE FOOTER?Sticky Footer10Monday, June 17, 13Um sticky footer resolve o problema de acesso e é especialmente útil quando existemelementos relevantes para a visibilidade do produto apenas nesse elemento. Social icons,contatos, newsletter...
  11. 11. WHERE’S THE FOOTER?Sticky Footer11Monday, June 17, 13Aqui um exemplo com todos esses elementos
  12. 12. WHERE’S THE FOOTER?12Monday, June 17, 13Se 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 oselementos do footer.
  13. 13. WHAT’S EXCLUSIVE?• Implementar Destaques ou escolhas do Staff quandoaplicável13Monday, June 17, 13A solução de infinite scroll coloca todos os conteúdos com a mesma relevância, assim podeser útil uma área de destaques cuidada para que utilizadores voltem para a consultar pelomenos uma vez por semana. Também é bom para criar interesse nos utilizadores que nãosabem o que ver, se em paralelo for implementado um sistema de relacionados
  14. 14. RESOURCES & STATSGerir os recursos exigidospelo carregamento de maisinformação• Lazy loading• Lazy unloading14Soluções de Analytics nãoapanham o evento pordefeito, são necessáriasalterações para contarpageviews, etc.Monday, June 17, 13Uma galeria com 3000 fotos numa página pode tornar-se um pesadelo... gerir memória é ummustOs bots indexam as diferentes páginas, portanto se o conteúdo não tiver uma páginacorrespondente não vai ser contado como pageview.Mais info online.
  15. 15. INFINITE PAGESAdicionar um indicador de progresso, um menu fixo ouum mapa quando aplicável e possível.15Nota: Não esconder Scroll Bar!Monday, June 17, 13Utilizadores gostam de saber o seu progresso e posição numa página. Nunca devemosesconder 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. 16. EVERYTHING COMES TO ANEND...16Monday, June 17, 13Como nada é realmente infinito, o utilizador deve ser informado quando não houverem maisdados para carregar.
  17. 17. I’M A HUMAN, SO TREAT METHAT WAY...Utilizadores são orientados a tarefasUsar a melhor solução para conclusãoeficaz dessa tarefaLista infinita só faz sentido sesuportar o objetivo dos utilizadores...17Monday, June 17, 13Utilizadores são orientados a tarefas, mas precisam de ser guiados para a conclusão eficazdessas tarefas. Utilizarão o que lhes apresentarmos, mas poderão ficar frustrados se nãoatingirem o seu objetivo ou alguma satisfação.Só devemos utilizar infinite scroll se suportar o objetivo dos utilizadores. Caso contrário...
  18. 18. THE GOOD OL’ NUMBERS...Paginação existe desde osprimórdios... E funciona!Não descartar sem analisarespecifidades da tarefa.http://developer.yahoo.com/ypatterns/navigation/pagination/search.htmlhttp://developer.yahoo.com/ypatterns/navigation/pagination/item.htmlSugestão18Monday, June 17, 13Não colocar de parte a paginação tradicional só porque surgiu um novo padrão. O Infinitescroll não substitui a paginação. Ambos têm utilidade em situações diferentes.
  19. 19. RULE OF THUMB19I want to find something Entertain me!Monday, June 17, 13Se o objetivo for permitir ao utilizador encontrar algo, a recomendação vai para a listapaginadaSe o objetivo for entreter e permitir ações básicas então Infinite scroll ftw
  20. 20. THE HYBRID...20http://travisisaacs.com/2008/02/24/improving-on-infinite-scrolling/Monday, June 17, 13
  21. 21. THE ∞SCROLLRecomendações para um final felizvitor-s-teixeira@telecom.pthttp://www.slideshare.net/vsdteixeira@vsdteixeiraQUESTÕES?Monday, June 17, 13

×