Eu atualmente não desenvolvo sites, mas é uma área que sempre atraiu meu interesse (como qualquer pessoa que navega demais na internet, eu acabei desenvolvendo meu próprio olhar crítico sobre o assunto). Esse é um artigo com algumas considerações sobre design, mas que são, de maneira geral, apenas a minha opinião – digo isso desde já para que ninguém queira achar que estou querendo me passar por “sabichona” da área quando sou incapaz de desenhar meu próprio layout de maneira satisfatória.

Algumas vezes eu já li sobre desenvolver “de dentro para fora”: primeiro desenvolver o núcleo da aplicação, a parte realmente relevante e depois colocar as “perfumarias” e detalhes ao redor. No caso de sites, isso significa ter um design voltado ao conteúdo.

Eu acho isso muito relevante, e de suma importância nos tempos de hoje, já que, quando eu entro em um site, eu quero logo ver o que me levou até ele.  Não o logotipo enorme, não as dúzias de propagandas, não as dezenas de “outros artigos que podem me interessar”…

Por isso me entristece ao ver que tantos sites não tem esse enfoque.

O que me levou a escrever esse artigo hoje foi um site qualquer, que eu abri e tive de usar a barra de rolagem para COMEÇAR a ler o artigo. Sério:

Claro, você poderia dizer: “não é um site profissional”, “provavelmente ninguém foi pago para fazer isso”, etc.

E o site da Época? Certamente alguém foi contratado para fazê-lo, não?

Então como explicar isso:

Três linhas de texto antes do leitor ser obrigado a rolar o texto para baixo.

A questão não é o esforço em usar a barra de rolagem, claro. A questão é como o conteúdo parece não ser a parte mais relevante da página, e sim as propagandas. Tem propaganda de assinatura da revista, propaganda da GE, propaganda de outras matérias…

Imagine você, recebendo sua Época da semana em mãos, e abrindo na matéria que mais lhe interessou, apenas para ver dúzias de quadrinhos de propaganda, e menções a “não perca nossa excelente matéria de capa na página 36!”. Seria um pouco complicado de simplesmente se manter focado no conteúdo da matéria, não é mesmo? Pelo contrário, o que vemos é uma atenção muito grande ao texto em si, no qual imagens, infográficos, gráficos, etc, servem apenas para acompanhar o texto e para deixá-lo mais coerente e atrativo aos leitores. Por que, então, é tão difícil transportar isto para o mundo online?

O pior é que o G1, que também é da Globo, já possui um design muito melhor nesse sentido:

Claro, ele ainda tem falhas (a maior nessa imagem sendo o fato de que eu esqueci a miniatura do site da Época ali do lado… mas, uh, fica a título de comparação, algo assim), mas nesse caso o título da matéria já é a primeira coisa que chama a atenção, e eu já leio um resumo da matéria e seus primeiros parágrafos antes de usar a barra de rolagem.

Novamente, a questão não é ter de usar a barra de rolagem, já que para ler qualquer artigo você acaba tendo de usar a barra de rolagem, de qualquer maneira. A questão é o foco do site, do design em si: eu sei que estou num site cheio de coisas interessantes mas, por favor, me deixe ler meu artigo em paz?

Esse problema é mais comum em grandes portais, já que o design de um blog costuma ser voltado ao conteúdo a priori. O próprio Disk Chocolate é exemplo disso: o foco dele é todo no conteúdo, tanto pelas cores utilizadas (a parte clara constrasta com a escura e chama a atenção para a parte mais clara, a do texto), quanto pelo próprio espaço do texto, que eu considero ideal para ler artigos grandes com conforto (claro, isso é a minha opinião mas, enfim).

Já em grandes portais, parece que eles não sabem ao certo qual o seu foco e partem para o “olhe isso que legal!”, “essa outra matéria é legal, leia leia leia”, “você já visitou nossos anunciantes hoje?”, “nosso site tem mais de dez seções, não se esqueça de conferir todas!”, etc.

Não estou dizendo que os responsáveis pelo design desses sites não saibam o que estão fazendo – pelo contrário, creio que alguns desses designs tenham se tornado grandes sucessos, e tem algumas sacadas muito bem planejadas sobre como mostrar tantas matérias diferentes para o leitor. Por exemplo, ao visitar uma categoria qualquer do G1 você irá ver diversas manchetes, com aquela de destaque com letras maiores:

Embora eu acredite que ter sub-categorias mais bem demarcadas ajudaria (como aparece a sub-categoria de “pesquisas” nessa página), assim como poder navegar por tags mas, novamente, isso é apenas a minha opinião. De qualquer maneira, observar esses detalhes provavelmente mostra porque o layout do G1 é um dos mais copiados atualmente*.

*reference needed, of course. Baseado na pesquisa do Achismo do Disk Chocholate de maio de 2010.

Enquanto eu estava escrevendo esse artigo, acabei percebendo outro “culpado”. Em um sistema de blogs, o que é mais importante para o seu autor? O que deve ser o núcleo? Você imaginaria que é escrever o bendito texto, não é mesmo? Oras, por padrão, o sistema do WordPress praticamente “expreme” seu editor em meio a tantas opções:

Claro, como o WordPress é um dos sistemas mais bacanas da atualidade, ele te dá a opção de tirar aquela coluna da direita, deixando o editor com um espaço muito mais razoável. Mas sabe quando eu descobri isso? Hoje, quando comecei a pensar “mas que diabos, seria melhor ter mais espaço para o editor, eu vivo me perdendo nas barras de rolagem…”, enquanto escrevia esse texto. Para mim, a opção com uma única coluna deveria ser o padrão, já que eu passo a maior parte de um artigo… escrevendo o artigo, e não editando suas meta-informações como tags e categorias, e costumo usar o botão de “publicar” uma única vez.

Em todo caso, se você quiser testar o modo com uma coluna, basta ir ali em cima, em opções de tela (fica ali em cima, meio na direita…) e selecionar “1 coluna”‘. There, problem solved. Único detalhe é que se você voltar a ter duas colunas depois vai ter de ficar arrastando suas ferramentas para a direita de novo :p

Para finalizar, eu gostaria de ressaltar a importância de colocar o design/apresentação a serviço do conteúdo, do propósito do site/aplicativo/etc. É o tipo de design presente nas melhores aplicações e cuja relevância tem sido muito ressaltada especialmente em dispositivos móveis, nos quais mostrar o que interessa e apenas isso é essencial para ter aplicações utilizáveis em dispositivos com telas pequenas.