{"id":70,"date":"2007-10-14T23:32:09","date_gmt":"2007-10-15T02:32:09","guid":{"rendered":"http:\/\/marmota.org\/blog\/cinco-dogmas-do-design-que-estao-sendo-derrubados"},"modified":"2007-10-14T23:32:09","modified_gmt":"2007-10-15T02:32:09","slug":"cinco-dogmas-do-design-que-estao-sendo-derrubados","status":"publish","type":"post","link":"https:\/\/marmota.org\/blog\/cinco-dogmas-do-design-que-estao-sendo-derrubados\/","title":{"rendered":"Cinco dogmas do design que est\u00e3o sendo derrubados"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/marmota.org\/blog\/secoes\/top5.gif\" align=\"right\" \/>Sempre fico mais \u00e0 vontade dando palpite em conte\u00fado, nunca na forma. Conhe\u00e7o muita gente gabaritada para dizer se tal site \u00e9 bonito, claro, us\u00e1vel&#8230; Tamb\u00e9m fico feliz ao saber que muitos profissionais do ramo est\u00e3o sendo devidamente valorizados, sempre derrubando os obst\u00e1culos que separam os usu\u00e1rios daqulo que eles realmente desejam. Mais do que isso: tal import\u00e2ncia dada a pesquisas, testes e toda sorte de experi\u00eancias praticamente &#8220;matou&#8221; a figura do webmaster, aquele sujeito (normalmente o &#8220;filho do dono&#8221;) que quase programava bem, quase desenhava bem, quase escrevia bem&#8230; E pensar que muitas empresas ainda contam com esse tipo de aberra\u00e7\u00e3o para tocar seus projetos.<\/p>\n<p>Mas enfim. Como tudo que envolve a Internet, a grande solu\u00e7\u00e3o visual de hoje pode se tornar ultrapassada amanh\u00e3. Especialmente em grandes portais, onde h\u00e1 muita gente de olho na concorr\u00eancia, as <a href=\"http:\/\/sobre.uol.com.br\/historia\/album\/paginas_album.jhtm\" target=\"_blank\" title=\"a evolu\u00e7\u00e3o do UOL\"><b>mudan\u00e7as<\/b><\/a> a favor do internauta s\u00e3o constantes &#8211; a ponto do navegador ass\u00edduo identificar alguns padr\u00f5es, indicando uma clara inspira\u00e7\u00e3o m\u00fatua &#8211; ainda que cada um permane\u00e7a com sua identidade pr\u00f3pria. Trocando em mi\u00fados: &#8220;nossa, como ficou parecido com o site tal&#8230;&#8221;.<\/p>\n<p>E aqui cabe um pitaco: ainda bem que nenhum portal brasileiro se &#8220;inspirou&#8221; no <a href=\"http:\/\/www.20minutos.es\" target=\"_blank\"><b>20 Minutos<\/b><\/a>, da Espanha, uma das piores homes do mundo.<\/p>\n<p>O exemplo da semana \u00e9 o <a href=\"http:\/\/g1.globo.com\" target=\"_blank\"><b>G1<\/b><\/a>, que lan\u00e7ou sua nova cara, sintonizada com a do <a href=\"http:\/\/g1.globo.com\/Noticias\/Tecnologia\/0,,MUL95922-6174,00.html\" target=\"_blank\"><b>portal<\/b><\/a>. N\u00e3o pude deixar de perceber uma s\u00e9rie de detalhes semelhantes ao visual clean promivido pelo <a href=\"http:\/\/www.estadao.com.br\" target=\"_blank\"><b>Estad\u00e3o.com<\/b><\/a>, que por sua vez redividiu suas editorias usando cores &#8211; como fazia a <a href=\"http:\/\/www.folha.com.br\" target=\"_blank\"><b>Folha Online<\/b><\/a>. Ali\u00e1s, as tonalidades diferentes separando not\u00edcias, esportes e entretenimento tamb\u00e9m inspiraram o <a href=\"http:\/\/www.ig.com.br\" target=\"_blank\"><b>Ig<\/b><\/a>&#8230; O novo visual do G1 ati\u00e7ou meus sentimentos nost\u00e1lgicos. Fui buscar em meus alfarr\u00e1bios algum &#8220;manual de design&#8221; antigo, atr\u00e1s de algum cap\u00edtulo repleto de &#8220;regras que precisam ser executadas&#8221;.<\/p>\n<p>Encontrei a edi\u00e7\u00e3o do livro <i>Websites que Funcionam<\/i>, publicado em 1997, do consagrado <a href=\"http:\/\/www.rogerblack.com\" target=\"_blank\"><b>Roger Black<\/b><\/a>, profissional que viveu uns trinta anos de carreira m\u00eddia impressa antes de desenhar para a Internet. Bom, \u00e9 de autoria dele a identidade visual da pior fase da revista Placar, aquela do &#8220;futebol, sexo e Rock&#8217;n Roll&#8221;. Imaginava encontrar outros deslizes al\u00e9m desse, mas me surpreendi ao reencontrar defini\u00e7\u00f5es ainda atuais, como ambientes colaborativos e controle total do usu\u00e1rio. Outra, emprestada do bom e velho Jakob Nielsen: &#8220;toda a ind\u00fastria vai perceber que a Internet n\u00e3o tem nenhum significado sem boas hist\u00f3rias, bons personagens e uma boa dire\u00e7\u00e3o. Conte\u00fado \u00e9 rei&#8221;.<\/p>\n<p>Ainda assim, consegui pin\u00e7ar cinco &#8220;regras valiosas&#8221; que funcionavam h\u00e1 uns dez anos, mas totalmente rediscutidas.<\/p>\n<p><font size=\"4\" color=\"#CC0000\">#5<\/font> <b>N\u00e3o use todas as cores<\/b> &#8211; Coincidentemente, as cores deste blog s\u00e3o as mesmas sugeridas Roger Black como sendo a &#8220;escolha infal\u00edvel&#8221;: o trio branco, preto e vermelho resulta no melhor contraste poss\u00edvel. Bem diferente das combina\u00e7\u00f5es envolvendo verde-lim\u00e3o, azul-beb\u00ea, laranja-fosforescente&#8230; Analisando friamente, a lei da menor quantidade de cores, em busca de identidade e consist\u00eancia visual (para n\u00e3o causar a impress\u00e3o de &#8220;sites diferentes no mesmo&#8221;) \u00e9 v\u00e1lida.<\/p>\n<p>N\u00e3o \u00e9 preciso clicar muito para descobrir sites horrendos, verdadeiros carnavais psicod\u00e9licos. O abuso ainda \u00e9 conden\u00e1vel. Mas boa parte dos sites noticiosos, acostumados a usar tons de azul (que denotam sobriedade) em conjunto com fundo branco e letras pretas, encontraram solu\u00e7\u00f5es muito interessantes ao dosar cores distintas para diferenciar editorias. Na home da Globo.com, esporte \u00e9 verde, not\u00edcia \u00e9 vermelho e entretenimento \u00e9 amarelo. J\u00e1 o <a href=\"http:\/\/esporte.uol.com.br\" target=\"_blank\"><b>UOL Esporte<\/b><\/a> utiliza uma cor para cada modalidade relevante.<\/p>\n<p><font size=\"4\" color=\"#CC0000\">#4<\/font> <b>Nada de atrasos<\/b> &#8211; &#8220;Em um mundo de banda estreita, n\u00e3o h\u00e1 atraso aceit\u00e1vel&#8221;. Ah, os bons e velhos tempos em que uma foto grande carregava ap\u00f3s quase um minuto de espera&#8230; Em 1997, projetar qualquer conte\u00fado considerando usu\u00e1rios com modem de 28.8 ou 56kbps era obriga\u00e7\u00e3o. Atualmente, j\u00e1 \u00e9 poss\u00edvel dizer que essa preocupa\u00e7\u00e3o sumiu. S\u00f3 no Brasil, s\u00e3o 6,5 milh\u00f5es de assinantes de banda larga (uns 20% do total de usu\u00e1rios). Estimativa que considero baixa. Quem costuma navegar no trabalho ou na lan house j\u00e1 consegue baixar fotos, filmes, programas&#8230;<\/p>\n<p>Assim, j\u00e1 podemos dizer: conte\u00fado multim\u00eddia deixou de ser um problema. Mas h\u00e1 um desafio que n\u00e3o mudou em dez anos: ao inv\u00e9s de simplesmente reproduzir a mesma informa\u00e7\u00e3o em todas as linguagens poss\u00edveis, por que n\u00e3o integr\u00e1-las em um \u00fanico produto, concebido especialmente para a rede? \u00c9 poss\u00edvel pin\u00e7ar alguns bons exemplos (o <a href=\"http:\/\/www.clarin.com\/diario\/especiales\/piqueteros\/index.html\" target=\"_blank\"><b>Clarin<\/b><\/a> faz muito disso), mas se a web j\u00e1 superou o obst\u00e1culo da banda larga, ainda estamos longe do dia em que o potencial multim\u00eddia ser\u00e1 devidamente explorado.<\/p>\n<p><font size=\"4\" color=\"#CC0000\">#3<\/font> <b>Use pouco texto<\/b> &#8211; &#8220;A \u00fanica pessoa que vai ler tudo que voc\u00ea escreve para a Internet \u00e9 a sua m\u00e3e&#8221;, dizia Roger Black em 97. Ele n\u00e3o era o \u00fanico: especialistas em usabilidade e webwriting empurravam f\u00f3rmulas matem\u00e1ticas para garantir a absor\u00e7\u00e3o total da sua mensagem: no m\u00e1ximo tr\u00eas blocos de texto, com cem palavras cada. Anotou? Pois tem muito designer que ainda se preocupa em &#8220;repartir&#8221; blocos de texto em uma por\u00e7\u00e3o de p\u00e1ginas&#8230;<\/p>\n<p>Tenho que admitir: ler qualquer coisa na tela de um computador cansa. Al\u00e9m disso, temos t\u00e3o pouco tempo para ler tudo aquilo que gostar\u00edamos&#8230; Felizmente o usu\u00e1rio j\u00e1 pode contar com os leitores de feeds, que n\u00e3o s\u00f3 &#8220;descolam&#8221; o texto do layout, como tamb\u00e9m garante a leitura daquilo que realmente importa. Nesse contexto, \u00e9 poss\u00edvel dizer que a &#8220;passadinha de olhos&#8221; n\u00e3o \u00e9 a regra, mas sim a leitura em profundidade. Ali\u00e1s, os dados preliminares da pesquisa <a href=\"http:\/\/gjol.blogspot.com\/2007\/03\/teste-do-poynter-quebra-mito-da-ateno.html\" target=\"_blank\"><b>Eyetrack<\/b><\/a>, do Instituto Poynter, apontam essa tend\u00eancia. Vamos escrever, pessoal!<\/p>\n<p><font size=\"4\" color=\"#CC0000\">#2<\/font> <b>Sem rolagem!<\/b> &#8211; Entre todos os itens, talvez este seja o mais sintom\u00e1tico. &#8220;75% dos usu\u00e1rios observam apenas a primeira parte da p\u00e1gina&#8221;, dizia Roger Black. Havia uma preocupa\u00e7\u00e3o absurda em impedir a barra de rolagem em qualquer p\u00e1gina, gra\u00e7as a essa not\u00edcia triste. E eu me arrisco a dizer: os blogs contribuiram um bocado para que esse mito fosse derrubado. J\u00e1 imaginou como seria um blog sem rolagem?<\/p>\n<p>Vou tomar mais uma vez o exemplo do <a href=\"http:\/\/www.clarin.com\" target=\"_blank\"><b>Clarin<\/b><\/a>. D\u00ea um clique ali, e mantenha a primeira p\u00e1gina na aba padr\u00e3o, a do &#8220;\u00faltimo momento&#8221;. Repare que os eventos mais importantes aparecem em ordem descrescente, com destaque para o hor\u00e1rio de publica\u00e7\u00e3o. Como se fosse um blog. E usando uma senhora rolagem. Claro que a \u00e1rea superior continua sendo a mais nobre, com maior visibilidade&#8230; Mas responda com sinceridade: voc\u00ea realmente deixa de conferir o que est\u00e1 na parte de baixo?<\/p>\n<p><font size=\"4\" color=\"#CC0000\">#1<\/font> <b>640 x 480<\/b> &#8211; &#8220;A maioria dos usu\u00e1rios utilizam monitores de 14&#8221;. Por isso pare de se enganar e projete seus sites para 640 x 480&#8243;. Essa sim \u00e9 uma &#8220;regra de ouro&#8221; perfeita para dar risada. At\u00e9 porque, a discuss\u00e3o sobre &#8220;qual resolu\u00e7\u00e3o \u00e9 melhor&#8221; vai muito al\u00e9m de uma simples escolha, tal como &#8220;ah, agora 800 x 600 <a href=\"http:\/\/fatorw.com\/2006\/07\/20\/800-600-disfarcado\" target=\"_blank\"><b>\u00e9 bem mais popular<\/b><\/a>, n\u00e3o tem conversa&#8221;.<\/p>\n<p>Talvez o primeiro grande site a investir em uma \u00e1rea \u00fatil maior, o 1024 x 768, foi a <a href=\"http:\/\/www1.folha.uol.com.br\/folha\/brasil\/ult96u78760.shtml\" target=\"_blank\"><b>Folha Online<\/b><\/a>, em maio de 2006. &#8220;O ganho permite incluir fotos maiores e adotar mais chamadas&#8221;, diz o texto explicativo. Faltou citar a valorizada monstruosa na \u00e1rea de an\u00fancios&#8230; Mas enfim. Depois de um ano e meio, boa parte das m\u00e9tricas revela um aumento consider\u00e1vel no volume de navegadores ajustados em 1024 x 768 (algo como 60%).<\/p>\n<p>Antes de perguntar aos amigos especialistas quantas besteiras eu cometi acima, vale uma sugest\u00e3o de leitura mais abalizada: <a href=\"http:\/\/www.carreirasolo.org\/archives\/a_experiencia_perfei.html\" target=\"_blank\"><b>Design para a Internet<\/b><\/a>, de Felipe Mem\u00f3ria, o cidad\u00e3o que prega a experi\u00eancia perfeita dos usu\u00e1rios &#8211; para que todos &#8220;achem, usem, compartilhem e expandam o conhecimento&#8221;.<\/p>\n<p><b>Ah, sim,<\/b>, o Cleverson Braga <a href=\"http:\/\/cleversonbraga.wordpress.com\/2007\/10\/16\/dogmas\" target=\"_blank\"><b>j\u00e1 amplificou<\/b><\/a> a discuss\u00e3o em seu rec\u00e9m-inaugurado blog. Vai l\u00e1 ver!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sempre fico mais \u00e0 vontade dando palpite em conte\u00fado, nunca na forma. Conhe\u00e7o muita gente gabaritada para dizer se tal site \u00e9 bonito, claro, us\u00e1vel&#8230; Tamb\u00e9m fico feliz ao saber que muitos profissionais do ramo est\u00e3o sendo devidamente valorizados, sempre derrubando os obst\u00e1culos que separam os usu\u00e1rios daqulo que eles realmente desejam. Mais do que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-70","post","type-post","status-publish","format-standard","hentry","category-top-5"],"_links":{"self":[{"href":"https:\/\/marmota.org\/blog\/wp-json\/wp\/v2\/posts\/70","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marmota.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marmota.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marmota.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marmota.org\/blog\/wp-json\/wp\/v2\/comments?post=70"}],"version-history":[{"count":0,"href":"https:\/\/marmota.org\/blog\/wp-json\/wp\/v2\/posts\/70\/revisions"}],"wp:attachment":[{"href":"https:\/\/marmota.org\/blog\/wp-json\/wp\/v2\/media?parent=70"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marmota.org\/blog\/wp-json\/wp\/v2\/categories?post=70"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marmota.org\/blog\/wp-json\/wp\/v2\/tags?post=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}