Direção do olhar na tela e visualização da informação

3.517 visualizações

Publicada em

Aula do curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da PUC-Rio. Mais informações em http://www.eduardobrandao.com/aulas/design-telas/direcao-do-olhar-na-tela-e-visualizacao-da-informacao/

Publicada em: Educação
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

Direção do olhar na tela e visualização da informação

  1. 1. direção do olhar natela e visualizaçãoda informaçãoEduardo Rangel Brandão, M.Sc.A reprodução, total ou parcial, dos textos e imagens deste documento só é permitida para fins não comerciais,sendo obrigatória a citação da fonte.
  2. 2. O conteúdo desta aula foi ministrado no Curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da Pontifícia Universidade Católica do Rio de Janeiro
  3. 3. direção do olhar na telaPrimeiro, os usuários vêem as telas comograndes massas de formatos e cores,com os elementos do primeiro planocontrastando com a área de fundo.
  4. 4. direção do olhar na telaEm seguida, os usuários começam aidentificar informações específicas:•  Primeiro os gráficos (quando presentes).•  Depois eles começam a analisar•  gramaticalmente o texto e a ler as•  palavras e frases que o compõem.
  5. 5. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton direção do olhar na tela Exploração visual da estrutura da tela ao longo do tempo Título Menu 1 Lorem ipsum dolor sit amet, consectetuer Menu 2 adipiscing elit. Ut nisi Menu 3 nisl, scelerisque sed, Menu 4 egestas ut, dictum Menu 5 eget, nibh. Quisque ac Menu 6 augue. Donec molestie, lacus vitae porta cursus, lectus lectus dapibus nisl, in sagittis quam mi et odio. Exploração visual Exploração visual Início da leitura preliminar mais atenta do conteúdo
  6. 6. direção do olhar na telaSe não for dada uma ordem explícita, atrajetória de exploração de uma imagempelo olho torna-se uma rede de linhasquebradas.Verifica-se que a trajetória é modificadapela introdução de ordens particulares.
  7. 7. * Fonte: artigo "A evolução da atenção em direção às interfaces digitais e a world wide web", de Jacques Chueke e Vera Nojima“ Um olhar informado desloca-se de outro modo no campo que explora.”
  8. 8. * Fonte: artigo "A evolução da atenção em direção às interfaces digitais e a world wide web", de Jacques Chueke e Vera Nojima direção do olhar na tela Trajetória de exploração da imagem pelo olho.
  9. 9. * Fonte: artigo "A evolução da atenção em direção às interfaces digitais e a world wide web", de Jacques Chueke e Vera Nojima direção do olhar na tela: movimento dos olhos Customização da interface de acordo com ordens particulares de visualização.
  10. 10. * Fonte: artigo "A evolução da atenção em direção às interfaces digitais e a world wide web", de Jacques Chueke e Vera Nojima direção do olhar na tela: movimento dos olhos 4 5 1 2 3 6 7 Leitura ordenada e consciente na cultura ocidental.
  11. 11. * Fonte: artigo "A evolução da atenção em direção às interfaces digitais e a world wide web", de Jacques Chueke e Vera Nojima direção do olhar na tela: movimento dos olhos zona ótica primária zona morta zona morta zona terminal Zonas de leitura.
  12. 12. * Fonte: artigo "The best of Eyetrack III: what we saw when we looked through their eyes", de Steve Outing e Laura Ruel - <http://www.poynterextra.org/eyetrack2004/main.htm> direção do olhar na tela Como os olhos de uma pessoa se movimentam na tela.
  13. 13. * Fonte: artigo "The best of Eyetrack III: what we saw when we looked through their eyes", de Steve Outing e Laura Ruel - <http://www.poynterextra.org/eyetrack2004/main.htm> direção do olhar na tela Como os olhos de uma pessoa se movimentam na tela.
  14. 14. * Fonte: artigo "You look where they look", de James Breeze - <http://usableworld.com.au/2009/03/16/you-look-where-they-look/> direção do olhar
  15. 15. * Fonte: artigo "You look where they look", de James Breeze - <http://usableworld.com.au/2009/03/16/you-look-where-they-look/> direção do olhar
  16. 16. * Fonte: artigo "You look where they look", de James Breeze - <http://usableworld.com.au/2009/03/16/you-look-where-they-look/> direção do olhar
  17. 17. * Fonte: artigo "You look where they look", de James Breeze - <http://usableworld.com.au/2009/03/16/you-look-where-they-look/> direção do olhar
  18. 18. * Fonte: artigo "You look where they look", de James Breeze - <http://usableworld.com.au/2009/03/16/you-look-where-they-look/> direção do olhar
  19. 19. movimento dos olhos•  Primeiro os olhos fixam-se no topo•  esquerdo da tela.•  Então deslocam-se ao longo desta área,•  até mover-se para o lado direito da tela.•  Só depois de explorar a parte superior,•  os olhos dirigem-se para a parte de•  baixo da tela.
  20. 20. * Fonte: artigo "The best of Eyetrack III: what we saw when we looked through their eyes", de Steve Outing e Laura Ruel - <http://www.poynterextra.org/eyetrack2004/main.htm> movimento dos olhos Representação dos padrões de movimentos oculares mais comuns.
  21. 21. hot spots: zonas de prioridadeO instinto das pessoas faz com que elasolhem para a área localizada no cantosuperior esquerdo da tela.Ao desenvolver uma interface, deve-sedar grande importância para asinformações que estarão contidas nestaárea.
  22. 22. * Fonte: artigo "The best of Eyetrack III: what we saw when we looked through their eyes", de Steve Outing e Laura Ruel - <http://www.poynterextra.org/eyetrack2004/main.htm> hot spots: zonas de prioridade Gráfico de zonas de prioridade da tela.
  23. 23. * Fonte: artigo "Viewing patterns for homepages", de Laura Ruel e Steve Outing - <http://www.poynterextra.org/eyetrack2004/viewing.htm> hot spots: zonas de prioridade
  24. 24. * Fonte: artigo "Navigation placement on news homepages", de Steve Outing e Laura Ruel - <http://www.poynterextra.org/EYETRACK2004/navigation.htm> hot spots: zonas de prioridade
  25. 25. * Fonte: artigo "Navigation placement on news homepages", de Steve Outing e Laura Ruel - <http://www.poynterextra.org/EYETRACK2004/navigation.htm> hot spots: zonas de prioridade
  26. 26. * Fonte: artigo "Navigation placement on news homepages", de Steve Outing e Laura Ruel - <http://www.poynterextra.org/EYETRACK2004/navigation.htm> hot spots: zonas de prioridade
  27. 27. * Fonte: artigo "F-shaped pattern for reading web content", de Jakob Nielsen - <http://www.useit.com/alertbox/reading_pattern.html> hot spots: zonas de prioridade
  28. 28. * Fonte: artigo "Horizontal attention leans left", de Jakob Nielsen - <http://www.useit.com/alertbox/horizontal-attention.html> hot spots: zonas de prioridade As pessoas gastam o dobro do tempo olhando para o lado esquerdo da tela. •  Lado esquerdo da tela: •  69% do tempo de •  visualização. •  Lado direito da tela: •  30% do tempo de •  visualização.
  29. 29. visualização da informaçãoA parte superior da tela compreende aárea mais visível da interface.Por conta disso, a navegação horizontal,posicionada no topo, possui um melhordesempenho do que a navegaçãovertical, posicionada na coluna daesquerda.
  30. 30. visualização da informaçãoLogo, a posição dos elementos faz toda adiferença: a densidade de links no topoda tela deve ser máxima para ofereceruma navegação eficiente.Esses links serão visualizados por umamaior porcentagem de pessoas, numperíodo de tempo maior.
  31. 31. densidade dos links no topo da tela A Globo.com abandonou o menu vertical...
  32. 32. densidade dos links no topo da tela... e adotou o menu horizontal em seus produtos.
  33. 33. densidade dos links no topo da tela... e adotou o menu horizontal em seus produtos.
  34. 34. densidade dos links no topo da tela... e adotou o menu horizontal em seus produtos.
  35. 35. densidade dos links no topo da tela... e adotou o menu horizontal em seus produtos.
  36. 36. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton visualização da informação Área visível da tela (em um monitor com resolução de 1024 x 768 pixels). Os usuários terão que utilizar a barra de rolagem para visualizar esta área.
  37. 37. visualização da informaçãoUm browser em 800 x 600 pixels é capaz de exibir apenas parte da informação.
  38. 38. visualização da informaçãoUm browser em 800 x 600 pixels é capaz de exibir apenas parte da informação.
  39. 39. visualização da informaçãoUOL: layout projetado para funcionar em 800 x 600 e em 1024 x 768 pixels.
  40. 40. visualização da informaçãoUOL: layout projetado para funcionar em 800 x 600 e em 1024 x 768 pixels.
  41. 41. visualização da informaçãoUtilização de 5% da área útil da tela para a exibição da matéria.
  42. 42. visualização da informaçãoUtilização de layout “líquido” (a interface se adapta à diferentes resoluções).
  43. 43. visualização da informaçãoUtilização de layout “líquido” (a interface se adapta à diferentes resoluções).
  44. 44. visualização da informaçãoAntigamente, recomendava-se autilização de um volume de conteúdoequivalente a 1 ou 2 telas (utilizando abarra de rolagem)...
  45. 45. * Fonte: artigo "The myth of the page fold: evidence from user testing", de Joe Leech - <http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm> visualização da informação Não se preocupe, os usuários utilizam a barra de rolagem!
  46. 46. * Fonte: artigo "Scrolling and attention", de Jakob Nielsen - <http://www.useit.com/alertbox/scrolling-attention.html> visualização da informação Não se preocupe, os usuários utilizam a barra de rolagem!
  47. 47. * Fonte: artigo "The myth of the page fold: evidence from user testing", de Joe Leech - <http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm> visualização da informação Disposição da barra de rolagem em relação ao comprimento da página.
  48. 48. * Fonte: artigo "Eye tracking: Facebook and LinkedIn usability", de D. Brendant - <http://eyetrackingupdate.com/2010/02/19/eye-tracking-facebook-linkedin-usability/> visualização da informação Facebook Linked In Usuários consideram o layout em lista mais agradável e eficaz, pois uma única coluna é mais fácil de ler do topo até embaixo do que um layout com 3 colunas.
  49. 49. * Fonte: artigo "The myth of the page fold: evidence from user testing", de Joe Leech - <http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm> visualização da informação Menos conteúdo acima do scroll pode incentivar a exploração abaixo do scroll.
  50. 50. * Fonte: artigo "The myth of the page fold: evidence from user testing", de Joe Leech - <http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm> visualização da informação A longa linha azul age como uma barreira, desencorajando a rolagem do conteúdo.
  51. 51. * Fonte: artigo "The myth of the page fold: evidence from user testing", de Joe Leech - <http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm> visualização da informação As imagens um pouco acima do scroll indicam que há mais conteúdo na parte de baixo.
  52. 52. * Fonte: artigo "Scrolling and attention", de Jakob Nielsen - <http://www.useit.com/alertbox/scrolling-attention.html> visualização da informação Embora os usuários utilizem o scroll, apenas 20% da sua atenção se concentra abaixo dele. As pessoas gastam 80% do seu tempo olhando para a informação acima da barra de rolagem da página.
  53. 53. direção do olhar na tela e visualização da informação: referências bibliográficas
  54. 54. referências bibliográficas: livros
  55. 55. referências bibliográficas: livros •  Guia de estilos da web: princípios básicos de design para a criação de web sites Patrick J. Lynch Sarah Horton
  56. 56. referências bibliográficas: artigos
  57. 57. referências bibliográficas: artigos•  The best of Eyetrack III: what we saw when we looked through•  their eyes•  Steve Outing•  Laura Ruel•  http://www.poynterextra.org/eyetrack2004/main.htm•  You look where they look•  James Breeze•  http://usableworld.com.au/2009/03/16/you-look-where-they-look/•  Viewing patterns for homepages•  Laura Ruel•  Steve Outing•  http://www.poynterextra.org/eyetrack2004/viewing.htm•  Navigation placement on news homepages•  Steve Outing•  Laura Ruel•  http://www.poynterextra.org/EYETRACK2004/navigation.htm
  58. 58. referências bibliográficas: artigos•  F-shaped pattern for reading web content•  Jakob Nielsen•  http://www.useit.com/alertbox/reading_pattern.html•  Horizontal attention leans left•  Jakob Nielsen•  http://www.useit.com/alertbox/horizontal-attention.html•  The myth of the page fold: evidence from user testing•  Joe Leech•  http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_•  evidence_from_user_testing.htm•  Scrolling and attention•  Jakob Nielsen•  http://www.useit.com/alertbox/scrolling-attention.html
  59. 59. referências bibliográficas: artigos•  Eye tracking: Facebook and LinkedIn usability•  D. Brendant•  http://eyetrackingupdate.com/2010/02/19/eye-tracking-facebook-linkedin-•  usability/•  A evolução da atenção em direção às interfaces digitais e a world•  wide web•  Jacques Chueke•  Vera Nojima•  6º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design (2004)
  60. 60. direção do olhar na tela e visualização da informação: sobre o professor
  61. 61. sobre o professor Eduardo Rangel Brandão atua desde 1995 na criação de produtos digitais. É gestor da equipe de UX (User eXperience) na área de novas mídias da Globosat, onde desenvolve projetos de sites e aplicativos (smartphones, tablets, smart-TVs, set-top boxes, consoles de games, etc.) para canais de televisão como GNT, SporTV, Multishow, Viva, Gloob, Telecine, Universal Channel, GloboNews, Canal Brasil, MegaPix, SyFy, Futura, PremiereFC, Combate, Sexy-Hot, Off, Muu, Philos, entre outros. É professor em cursos de pós-graduação, em disciplinas correlatas a arquitetura de informação, design de interfaces, usabilidade, interação humano-computador e metodologia de pesquisa. Participa do comitê organizador e do comitê técnico científico de congressos internacionais nas áreas de ergonomia, usabilidade, design de interfaces e interação humano-computador. Trabalhou como arquiteto de informação na Globo.com e como designer de interfaces nas empresas Agência Click, Starmedia, Cadê?, MTEC Informática e Rio Datacentro. Atuou em projetos para Amil, Banco do Brasil, Brasil Telecom, Oi, Petrobras, White Martins, Fundação Planetário, Museu Villa-Lobos, Projeto Portinari, Plaza Shopping Niterói, Pinto de Almeida Engenharia, Decta Engenharia, Programa das Nações Unidas para o Desenvolvimento e Programa de Despoluição da Baía de Guanabara. Publicou diversos trabalhos (entre capítulos de livros, monografias, dissertações e artigos em congressos), concluiu 7 orientações e 38 co-orientações de monografias de alunos de pós-graduação lato sensu e participou de 44 bancas examinadoras em cursos de pós-graduação lato sensu. TITULAÇÃO: mestre em interação humano-computador, especialista em ergonomia e usabilidade e bacharel em desenho industrial, nas habilitações de comunicação visual e projeto de produto.
  62. 62. fim :-)Eduardo Rangel Brandão, M.Sc.brandaoedu@gmail.comwww.eduardobrandao.com

×