{"id":38,"date":"2007-11-27T16:42:22","date_gmt":"2007-11-27T19:42:22","guid":{"rendered":"http:\/\/www.dialeticavisual.com.br\/archives\/38"},"modified":"2010-03-26T01:35:32","modified_gmt":"2010-03-26T04:35:32","slug":"estudos-de-eye-tracking-23-licoes-praticas","status":"publish","type":"post","link":"https:\/\/blumenthal.com.br\/d\/2007\/estudos-de-eye-tracking-23-licoes-praticas","title":{"rendered":"Estudos de Eye-Tracking: 23 li\u00e7\u00f5es pr\u00e1ticas"},"content":{"rendered":"<p>Algumas conclus\u00f5es adquiridas em pesquisas de Eye-tracking:<\/p>\n<ol>\n<li><strong>Textos atraem aten\u00e7\u00e3o antes das Imagens.<\/strong> Maior parte dos usu\u00e1rios chegam em um site procurando por informa\u00e7\u00f5es, n\u00e3o imagens.<\/li>\n<li><strong>Inicialmente os olhos focam no canto superior direito da p\u00e1gina. <\/strong><\/li>\n<li><strong>Usu\u00e1rios olham para o topo esquerdo e percorrem movendo para direita inferior no formato de um &#8220;F&#8221;. <\/strong> Certifique-se de que os elementos importantes est\u00e3o localizadas nessas \u00e1reas-chave para manter os leitores envolvidos.<\/li>\n<li><strong>Banners s\u00e3o ignorados. <\/strong>Geralmente mant\u00e9m o foco por poucos segundos.<\/li>\n<li><strong>Formata\u00e7\u00f5es enfeitadas s\u00e3o ignoradas.<\/strong> Usu\u00e1rios confundem com an\u00fancios e acham que nestas \u00e1reas n\u00e3o ir\u00e3o encontrar as informa\u00e7\u00f5es que ele precisa. Manter o site racional, sem extravag\u00e2ncia para n\u00e3o confrontar com os elementos mais importantes.<\/li>\n<li><strong>Mostrar n\u00fameros numericamente. <\/strong>S\u00e3o identificados muito mais r\u00e1pido do que n\u00fameros por extenso.<\/li>\n<li><strong>Tamanho das fontes influenciam no comportamento.<\/strong> Fontes menores aumentam o foco (espec\u00edfico) enquanto fontes maiores induzem a varredura dos olhos (geral). O uso adequado ir\u00e1 depender da necessidade.<\/li>\n<li><strong>Usu\u00e1rios apenas olham para um sub-t\u00edtulo se lhe interessar.<\/strong> Apenas inserir subt\u00edtulos para informa\u00e7\u00f5es que possam ser relevantes.<\/li>\n<li><strong>Pessoas geralmente percorrem at\u00e9  partes inferiores da p\u00e1gina.<\/strong> Para tirar vantagem disto, pode-se oferecer algo que o prenda ao longo da p\u00e1gina. Destaques ou listas com marcadores podem demostrar que as informa\u00e7\u00f5es s\u00e3o facilmente achadas no site.<\/li>\n<li><strong>Par\u00e1grafos curtos t\u00eam melhor desempenho do que longos. <\/strong>Informa\u00e7\u00f5es devem ser concebidas para o curto tempo de aten\u00e7\u00e3o dos internautas. Mant\u00ea-las enxutas sempre que poss\u00edvel \u00e9 fundamental.<\/li>\n<li><strong>Formatos de 1 coluna fixam mais os olhos do que os de v\u00e1rias colunas. <\/strong> N\u00e3o sobrecarregar o visitante com muita informa\u00e7\u00e3o. Muitas colunas poder\u00e3o ser ignoradas pelos usu\u00e1rios. Evitar ru\u00eddos com a simplifica\u00e7\u00e3o realmente \u00e9 melhor em alguns casos.<\/li>\n<li><strong>An\u00fancios no topo esquerdo da p\u00e1gina receber\u00e3o maior aten\u00e7\u00e3o do olhar<\/strong>. Integrar an\u00fancios no canto superior esquerdo aumentar\u00e1 sua visibilidade. Claro que n\u00e3o necessariamente ser\u00e3o clicados, portanto, n\u00e3o sacrifique o visual para ganhar visibilidade extra.<\/li>\n<li><strong>An\u00fancios posicionados pr\u00f3ximos ao conte\u00fado principal s\u00e3o vistos com mais frequ\u00eancia. <\/strong><\/li>\n<li><strong>An\u00fancios em texto foram intensamente mais vistos do que qualquer outro tipo testado. <\/strong>N\u00e3o distraem e misturam-se com o conte\u00fado da p\u00e1gina, s\u00e3o visualmente menos irritantes e mais aceitos.<\/li>\n<li><strong>Imagens grandes chamam mais aten\u00e7\u00e3o.<\/strong> As pessoas se interessam mais pelas imagens em que podem ver detalhes e informa\u00e7\u00f5es claras.  A maioria dos usu\u00e1rios t\u00eam conex\u00e3o banda-larga atualmente e n\u00e3o sentem receio em optar por ver imagens grandes.<\/li>\n<li><strong>Imagens &#8220;limpas&#8221; atraem a aten\u00e7\u00e3o dos olhos.<\/strong> Obras de arte podem n\u00e3o atrair tanto o olhar das pessoas. Ao usar fotos de pessoas, prefira fotos limpas, de f\u00e1cil compreens\u00e3o. Inclusive, fotos com pessoas &#8220;reais&#8221;, e n\u00e3o modelos, t\u00eam melhor performance.<\/li>\n<li><strong>T\u00edtulos direcionam os olhos.<\/strong> Primeiras informa\u00e7\u00f5es buscadas pelos leitores ao longo da p\u00e1gina.<\/li>\n<li><strong>Usu\u00e1rios gastam muito tempo olhando para bot\u00f5es e menus.<\/strong> Por isso vale a pena dedicar tempo extra para garantir que ser\u00e3o bem concebidos, afinal, n\u00e3o s\u00f3 apresentam alto grau de fixa\u00e7\u00e3o dos olhos, como tamb\u00e9m \u00e9 um dos mais importantes elementos do site.<\/li>\n<li><strong>Listas prolongam a aten\u00e7\u00e3o do olhar.<\/strong> Quebrar os par\u00e1grafos em listas mant\u00e9m os usu\u00e1rios mais concentrados. Usar n\u00fameros ou marcadores para destacar as informa\u00e7\u00f5es mais importantes torna o site mais fluente e facilita que o usu\u00e1rio encontre as informa\u00e7\u00f5es que procuram.<\/li>\n<li><strong>Longos blocos de texto s\u00e3o evitados.<\/strong> Estudos mostram que internautas n\u00e3o investem tempo lendo blocos longos, por mais relevante que possam ser. \u00c9 preciso quebr\u00e1-los. em par\u00e1grafos menores, destacando \u00e1reas espec\u00edficas.<\/li>\n<li><strong>Formata\u00e7\u00e3o pode chamar a aten\u00e7\u00e3o.<\/strong> Diferenciar a formata\u00e7\u00e3o de um texto destaca uma determinada informa\u00e7\u00e3o, por\u00e9m use com modera\u00e7\u00e3o para n\u00e3o tornar a p\u00e1gina dif\u00edcil de ler.<\/li>\n<li><strong>Espa\u00e7o em branco \u00e9 bom.<\/strong> Deixar \u00e1reas livres de qualquer informa\u00e7\u00e3o, mant\u00e9m as coisas simples e permite melhor acomoda\u00e7\u00e3o visual.<\/li>\n<li><strong>Ferramentas de navega\u00e7\u00e3o funcionam melhor quando posicionadas no topo da p\u00e1gina.<\/strong> Torna a navega\u00e7\u00e3o f\u00e1cil de encontrar.<\/li>\n<\/ol>\n<p>Texto original: <a title=\"eye-tracking\" href=\"http:\/\/www.virtualhosting.com\/blog\/2007\/scientific-web-design-23-actionable-lessons-from-eye-tracking-studies\/\" target=\"_blank\">Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies<\/a>, de Christina Laun &#8211; Dica do <a title=\"Vitor Lourenco\" href=\"http:\/\/www.vlourenco.com\" target=\"_blank\">Vitor Louren\u00e7o<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Algumas conclus\u00f5es adquiridas em pesquisas de Eye-tracking: Textos atraem aten\u00e7\u00e3o antes das Imagens. Maior parte dos usu\u00e1rios chegam em um site procurando por informa\u00e7\u00f5es, n\u00e3o imagens. Inicialmente os olhos focam no canto superior direito da p\u00e1gina. Usu\u00e1rios olham para o topo esquerdo e percorrem movendo para direita inferior no formato de um &#8220;F&#8221;. Certifique-se de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,12],"tags":[],"class_list":["post-38","post","type-post","status-publish","format-standard","hentry","category-design","category-web"],"_links":{"self":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":1,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":392,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts\/38\/revisions\/392"}],"wp:attachment":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}