Redesign da página inicial do Be on the Net

Vinicius Manhães Teles — Mon, 04 May 2009 04:51:04 -0300

Há pouco mais de uma semana eu e o Leandro redesenhamos a página inicial do Be on the Net e ela ficou assim:

Para efeito de comparação, antes ela era assim:

Na nossa opinião, a página inicial do Be on the Net melhorou muito com este exercício. Mas, meu objetivo aqui não é falar tanto sobre o resultado final, mas sim sobre o exercício que nos conduziu a ele. Experimentamos uma técnica que nunca tínhamos usado e deu certo.

A estrutura do exercício

Para simplificar e acelerar a conversa, desenhei um retângulo no quadro branco que seria usado para experimentar idéias para a nova página. Do lado esquerdo dele, coloquei três palavras que resumem a essência da mensagem que queríamos transmitir, ao lado de tópicos importantes que também deveriam ser tratados. Em seguida, imprimi as páginas iniciais de vários sites que consideramos interessantes. Elas foram coladas no quadro, com fita crepe, em torno do retângulo que mencionei antes. Veja:

Talvez fique mais fácil identificar cada parte com as legendas abaixo:

Em busca de inspiração

As imagens acima mostram o exercício já em sua fase mais avançada. No início o retângulo que chamei acima de área de trabalho estava vazio.

Começamos o exercício analisando os sites que havíamos impresso. É importante mencionar que não estávamos interessado no conteúdo completo da página inicial dos sites. Só queríamos projetar aquela parte da página que aparece à primeira vista, assim que entramos em um site. É uma área de aproximadamente 960 x 630 px, considerando-se uma resolução de 1024 pixels e as devidas perdas com barra de rolagem, barra de programas etc.

Avançando de página em página dos demais sites, eu e o Leandro nos perguntávamos: o que há de bom no design dessa página? O que não funcionou bem? Por que?

Um detalhe importante é que estávamos acomodados em puffs bem confortáveis, a uma distância de uns três metros do quadro. Isso era o suficiente para não conseguirmos ler cada detalhe do que estava escrito nas páginas. Em princípio, isso seria ruim, mas logo revelou-se uma das melhores partes do exercício, praticamente por acaso.

Efeitos inesperados

Logo que começamos o exercício, percebemos que os tamanhos das fontes importam bastante, além do posicionamento dos elementos. Quando olhávamos para sites que tinham muito texto na primeira página, a única coisa que conseguíamos ver era um borrão onde havia o texto. Se a fonte fosse suficientemente grande, como em um título, por exemplo, a gente conseguia ler o título. Caso contrário, era apenas um borrão.

Isso acontecia com a própria página do Be on the Net que estávamos tentando mudar. Olhando à distância, ela ficava assim:

Logo me dei conta que isso não acontece apenas quando olhamos a página à três metros de distância. Efeito semelhante tende a acontecer assim que o visitante entra no site pela primeira vez. Nos primeiros três segundos, a pessoa tem uma impressão geral da página que está visitando. Dependendo dessa impressão, ela fica um pouco mais ou simplesmente navega para outro site.

Três segundos é pouquíssimo tempo (se é que chega a tanto). Então a pessoa só passa o olho. Na parte em que o texto é pequeno e abundante, tudo o que ela vê é um borrão. Portanto, esse texto é inútil nesses primeiros segundos. Pior, ele é um desperdício de espaço, que poderia ser melhor aproveitado.

Construção do texto

As percepções que obtivemos na primeira parte do exercício, quando analisamos cada um dos sites na nossa frente, nos ajudaram a compreender que é necessário eliminar tanto texto quanto possível e focar apenas no essencial. Daí começou a parte mais difícil, que foi escrever o texto zilhões de vezes, eliminando cada vez mais, até que não tivéssemos mais o que tirar.

O texto final, que pode ser visto se você desabilitar o CSS, ficou assim:

"Seu negócio encontrado, adorado, disputado.
Fazemos seu site em 24 horas, lindão, sem limite de imagens e vídeos e super bem posicionado nas buscas.
Só R$ 99 por mês.
Peça o seu."

É óbvio que há muito mais a se explicar sobre o Be on the Net. Mas, essa é a essência. Repare que a maior frase é:

"Fazemos seu site em 24 horas, lindão, sem limite de imagens e vídeos e super bem posicionado nas buscas."

Para facilitar a leitura e dar destaque às partes, criamos quadrados coloridos, nos quais colocamos cada parte da frase. Jogando com spans e CSS, eliminamos as pontuações da frase. Embora elas possam ser vistas normalmente, se o CSS não estiver habilitado. Com isso, o site transmite a mensagem adequadamente, mesmo quando o CSS não está presente.

De um modo geral, procuramos utilizar fontes em tamanho grande, justamente para evitar que o texto ficasse "borrado" se visto de longe ou na correria. Isso só foi possível porque reduzimos absurdamente a quantidade de texto.

Finalização

O redesign consumiu pouco mais de dois dias. No primeiro, fizemos esse exercício no quadro que nos ajudou a alcançar a idéia rapidamente. O Leandro foi para o Photoshop e montou uma imagem representando o que viria a ser a página.

Depois do primeiro dia, o Leandro consumiu outro dia e meio para fazer o CSS e, voilà, agora temos uma página inicial bem melhor!

O que aprendemos

Mais uma vez, percebemos o poder de um quadro branco bem utilizado. Colocar tanta informação quanto possível na nossa frente, em um quadro ou uma parede, ajuda muito. Além disso, fazer a modelagem de uma solução em conjunto com outra pessoa ou outras pessoas, acelera bastante as coisas.

Olhando os demais sites pudemos perceber a importância de cada detalhe e isso nos levou a uma preocupação maior com os detalhes do que estávamos construindo. Isso é particularmente verdadeiro no que diz respeito ao texto. É possivelmente a parte mais difícil: encontrar as palavras certas, na medida certa.

Gostamos muito do exercício e voltaremos a usá-lo outras vezes para aprimorar as demais partes do site, incluindo o restante da página inicial.

"Redesign da página inicial do Be on the Net" by Leandro Mello

Wed, 06 May 2009 16:23:01 -0300

Vinicius, você encontra uma lista com alguns de nossos clientes aqui na barra lateral do blog ou em:

http://beonthe.net/texto/clientes

"Redesign da página inicial do Be on the Net" by Vinicius

Wed, 06 May 2009 01:06:53 -0300

Onde encontro um "quem está usando?" o Be on the net?

"Redesign da página inicial do Be on the Net" by Luiz Faias Jr

Wed, 06 May 2009 00:53:44 -0300

Parabéns aos dois pelo trabalho. A página antiga já era bonita mas a nova ficou execelente.

Como disse o Thiago Brito em um comentário anterior lembrou bem um dos conceitos do Getting Real de que "menos é mais".

Abraço

"Redesign da página inicial do Be on the Net" by Leandro Mello

Tue, 05 May 2009 15:13:39 -0300

A cadeira tem encosto sim. Curiosamente, não o uso muito...

"Redesign da página inicial do Be on the Net" by Thiago Brito

Tue, 05 May 2009 13:42:55 -0300

Ah, outra coisa, a cadeira de vocês não tem encosto não ? Coitado do Leandro ele vai ficar com uma bela dor nas costas no final do dia....

"Redesign da página inicial do Be on the Net" by Thiago Brito

Tue, 05 May 2009 13:41:46 -0300

Bacana Vinicius, o mais interessante é que este mesmo modelo (de página) também é seguido pela 37signals.

Na página principal deles, mostra alguns balões apresentando os produtos deles com uma pequena descrição logo de cara e depois eles mostram outras informações conforme o usuário for usando a barra de rolagem.

"Redesign da página inicial do Be on the Net" by Gobr

Tue, 05 May 2009 09:35:53 -0300

Gostei bastante do exercício, muito interessante este ponto de vista.

Você poderia também disponibilizar imagens maiores do quadro? Seria interessante. =D

"Redesign da página inicial do Be on the Net" by elomarns

Mon, 04 May 2009 17:47:34 -0300

A nova versão da página inicial do Be on the Net realmente melhorou substancialmente. Antes era bonita, agora é bonita e direta.

Ainda sobre essa página, eu fiquei em dúvida sobre o elemento title, uma vez que o seu conteúdo é imenso. Sendo assim, fiquei curioso pra saber se é por questões relativas a SEO, como eu imagino que seja.

Abraços.

"Redesign da página inicial do Be on the Net" by Roger Leite

Mon, 04 May 2009 11:29:17 -0300

Olá Vinicius! Realmente a nova página ficou muito legal!

O "estranho" deste post é que acabei de ler o livro "Não me faça pensar" e vocês aplicaram exatamente as regras essenciais, que faz com o que o usuário não precisa pensar para obter informações, simples, direto e rápido!

Sucesso!

Desenvolvimento Ágil - Blog da Improve It: Redesign da página inicial do Be on the Net

Redesign da página inicial do Be on the Net

A estrutura do exercício

Em busca de inspiração

Efeitos inesperados

Construção do texto

Finalização

O que aprendemos

"Redesign da página inicial do Be on the Net" by Leandro Mello

"Redesign da página inicial do Be on the Net" by Vinicius

"Redesign da página inicial do Be on the Net" by Luiz Faias Jr

"Redesign da página inicial do Be on the Net" by Leandro Mello

"Redesign da página inicial do Be on the Net" by Thiago Brito

"Redesign da página inicial do Be on the Net" by Thiago Brito

"Redesign da página inicial do Be on the Net" by Gobr

"Redesign da página inicial do Be on the Net" by elomarns

"Redesign da página inicial do Be on the Net" by Roger Leite