Eu, particularmente, prefiro rabiscar as primeiras ideias no papel. Nessa hora nem penso em sustentabilidade e uso a quantidade de papel necessária para comunicar uma ideia para o restante da equipe. Um quadro de vidro também é interessante pela facilidade de você poder apagar e iniciar outro desenho de forma rápida.

A 37 Signals publicou em seu site um texto falando sobre as diferenças de estilos de quatro designers que trabalham na empresa. É interessante perceber como cada profissional tem uma forma de pensar própria. São estilos distintos que juntos se completam.

Jamie Dihiansam rabisca de forma mais organizada e legível para que outras pessoas tenham facilidade de leitura e entendimento. Tem o costume de colocar junto com as interfaces explicações sobre o funcionamento. É interessante fazer isso quando você vai compartilhar o esboço com outras pessoas para que elas possam entender sem necessidade de ter você pode perto.

Os rabiscos de Jason Zimdars são mais limpos e detalhados. Ele usa sombras e volumes para representar melhor uma ideia. Costuma trabalhar várias soluções em uma única folha. É um designer sustentável.

Ryan Singer tem um estilo de rabisco mais abstrato e não entra muito no detalhe de funcionamento. Ele utiliza os rabiscos para organizar as ideias e debater com a equipe. Gasta menos tempo desenhando. É um estilo mais pensativo.

Jason Fried é mais desorganizado. Costuma rabiscar uma ideia em cima da outra. Não usa texto e trabalha com desenhos mais abstratos. Ele simplesmente desenha uma ideia sem pensar muito como vai funcionar no final.

Como fazer bons rabiscoframes?

Peiter Buick escreveu um post no site Smashing Magazine falando sobre o método de fazer bons rabiscoframes. Ele explica várias técnicas que utiliza na hora de fazer um bom esboço. No vídeo abaixo, Peiter explica a arte de fazer rabiscos em camadas.

Clique aqui para assistir o vídeo inserido.

O site Brain Doodles te ensina, através de vídeos, como passar uma ideia usando elementos visuais. É o famoso “quer que eu desenhe para você entender o que falei?”. A ideia é conseguir fazer um resumo sobre determinado assunto usando conceitos visuais.

Nos primeiros vídeos você aprende a trabalhar com linhas, retângulos, quadrados, triângulos e elipses. É possível perceber como você consegue fazer várias coisas combinando esses formatos. Já fiz o módulo 1 e aprovo o material. Muito bom. Depois você começa a trabalhar com formatos de letras, números, faces, figuras, etc.

Se pararmos para pensar um pouco, a capa de uma revista ou jornal tem a finalidade de retratar o que leitor vai encontrar no miolo. É como pensar que a capa será feita antes de todas as matérias que vão compor a publicação.

Confesso que mesmo acreditando em um processo de desenvolvimento diferente, poucas vezes consegui colocar em prática um método de trabalho mais inteligente. E pra isso acontecer você precisa ter a companhia de um estrategista de conteúdo ao lado. E pode ficar melhor quando você tem dois.

A metodologia utilizada que estamos todos cansados de ver e que não funciona

O arquiteto de informação recebe o escopo, organiza as informações e desenha as principais interfaces. E sempre começa pela home no puro achômetro do conteúdo que vai existir.

O designer recebe todos os wireframes e desenha a linha visual do site.

O conteudista tem que se virar para transformar lorem ipsum em conteúdo de verdade.

Vimos que o principal do projeto foi feito somente no ciclo final de concepção. Os usuários não entram em um site em busca simplesmente de uma boa usabilidade ou design gráfico bonito. O conteúdo tem que vir antes de tudo.

A metodologia que estou colocando em prática no momento e recomendo

O arquiteto de informação, o redator e um designer definem as páginas que vão gerar valor para a marca e o usuário. O novo trio de criação senta e pensa da seguinte forma:

1. Qual é o objetivo da página existir?

Quais são as metas esperadas pelo cliente e usuário. Após pensar nisso é hora de listar o que a página deve ter para que as pessoas consigam alcançar seus objetivos.

2. O que precisa ter para a pessoa continuar a experiência?

Só agora é o momento de pensar em tudo que precisa ter para o usuário continuar navegando pelo site. É tal navegação cruzada que não necessariamente precisa estar no sidebar. São conteúdos relacionados, compartilhamento e etc.

3. O que podemos eliminar?

Esse é o momento de fazer um exame de consciência e ver o que pode ser retirado sem prejudicar o objetivo. Retirar os excessos.

Depois da estrutura definida, os três profissionais começam a fazer os primeiros rabiscos das telas. Então o redator escreve o conteúdo final para que o arquiteto possa documentar o wireframe com a realidade que será levada para frente até o produto entrar no ar.

Sei o quanto é difícil trabalhar dessa forma, mas é fundamental que isso aconteça para que você não perca tempo na frente. Deixo aqui minha recomendação e fique a vontade para dar sua opinião sobre o assunto. Em breve compartilho o resultado do projeto que estou usando o modelo de trabalho citado acima.

Ontem recebi um link de um artigo que complementa bem o post sobre a página inicial ideal. O artigo fala sobre boas práticas que podem ser adotadas quando estamos projetando uma landing page. A landing trata-se de uma página específica de um produto ou informação dentro de um website. É diferente da home page. A home seria a capa de uma revista e a landing page a matéria principal.

Em muitos casos a landing page tem um objetivo comercial. Seja vender um produto ou distribuir uma informação essencial para tomada de decisão.

Algumas boas práticas são importantes de serem adotadas na hora que estivermos projetando a landing page.

O título da página deve ser claro e objetivo. O usuário tem que perceber neste título o que ele tem para fazer ali.

Exibir uma foto ou vídeo de utilização do produto no Mundo real é fundamental. Faz total diferença na tomada de decisão. Um vídeo explicando a utilização do produto aumenta a taxa de conversão consideravelmente. O usuário tem mais certeza daquilo que está comprando. Algumas empresas já utilizam esta abordagem. Magazine Luiza e Netshoes são exemplos.

Bullets, setas, cores e contrates ajudam o usuário a encontrar facilmente o ponto de ação dentro de uma página. O peso e a cor dada ao botão de ação é outra preocupação que o design deve ter na hora desenhar. Ele deve ser atrativo e ficar posicionado em um ponto estratégico.

Utilizar formas de compartilhar é importante, mas isso deve estar na página após o usuário conhecer e gostar de tudo que viu. O ideal é compartilhar aquilo que você já conhece. A utilização do compartilhar junto ao título de uma página só incentiva as pessoas a não lerem o que tem pela frente.

Saiba mais sobre landing pages clicando aqui.

Toda vez que começo projetar um novo site, existem uma série de discussões e uma grande preocupação em definir o que terá na página inicial, para logo em seguida pensar em todo o restante. A verdade é que o conteúdo que está além dessa página deve receber um tratamento especial. A home precisa fazer com que o usuário sinta-se motivado a descobrir novos conteúdos existentes no site. Funciona como uma página inicial de um livro, revista ou jornal.

O livro “Design de Navegação – Otimizando a experiência do usuário” há um capítulo onde o autor explica que é muito importante pensar nas principais páginas de conteúdo antes de projetar a página inicial, pois o foco está mesmo nessas páginas internas. Nem sempre o usuário entra em um site a partir da primeira página, sendo que muitas vezes ele pode vir de um mecanismo de busca como Google ou Bing, lançado recentemente pela Microsoft.

Analisando alguns sites que consideramos bem resolvidos, percebemos que existe uma simplicidade e um objetivo muito claro na conversão de um cadastro ou mesmo de uma venda, dependo da empresa.

Esses sites possuem uma divisão muita clara na página inicial.

Como devemos fazer isso

O objetivo é fazer com a que ação que você quer que as pessoas tomem seja realizada. A página inicial precisa fazer com que os usuários conheçam, sejam persuadidos e sintam-se seguros em suas decisões.

O site para baixar a última versão do Firefox é um bom exemplo de tudo aquilo que falei acima. A página apresenta imediatamente a opção para baixar a nova versão, acompanhada de uma vitrine listando os benefícios que a ferramenta proporciona aos usuários. É possível ver também um tour com algumas vantagens do Browser.

Faça um exercício e tente perceber a estratégia por trás de alguns sites bacanas que você acessa durante o seu dia.

Vou listar alguns que acho bem resolvidos.

Remember the milk
TweetDeck
Skype

Mas esses sites não são simples demais?

Alguns clientes não entenderiam ou aprovariam uma interface que pode ser considerada simples, e isso é fácil de entender. Normalmente os donos de projetos web têm que negociar entre as diversas unidades de negócio de uma empresa o que é mais importante *para o usuário* na web, e essa é uma tarefa ingrata que acaba influenciando no resultado.

E esse portfólio de produtos/serviços da empresa disputam espaço de tela e atenção das pessoas. É o mesmo problema que eu enfrentava quando trabalha com impressos. Normalmente os clientes queriam colocar todas as informações possíveis em um cartão de visitas.

Cabe a nós, que projetamos sites, fazer com que a página inicial transmita o objetivo que o cliente deseja atingir. É um trabalho de evangelização dos nossos clientes.

Temos que educar nossos clientes que nem tudo em uma página web precisa estar em uma resolução 800 x 600. Pesquisas apontam que todas as resoluções maiores que 800 x 600 já dominam. Dessa forma temos muito mais espaço para mostrar os conteúdos mais relevantes. O conteúdo é fundamental, pois se o usuário ficar interessado no que está na primeira parte do site, eles irão rolar a página sem o menor problema.

Um estudo feito pela ClickTale com 120 mil páginas da web entre novembro e dezembro de 2006 apontam algumas justificativas e respostas para que os sites não fiquem limitados a uma determinada resolução. Veja alguns números da pesquisa:

96% das páginas na web possuem rolagem;
76% dos usuários que encontram páginas com rolagem fazem uso da mesma, pelo menos pelas 2 ou 3 páginas abaixo da resolução;
22% dos usuários costumam fazer a rolagem até o final, independente do tamanho da página.

O estudo recomenda ainda que apertar uma página para deixá-la mais compacta é um benefício mínimo para os usuários. O interessante é pensar e analisar quais são os conteúdos mais importantes para que fiquem acima da rolagem. A rodinha do mouse também é um fator que contribui para a queda desse mito, facilitando a rolagem. Lembra como era chato rolar uma página sem essas rodinhas?

Pedro Borges, Coordenador de usabilidade e interação da Talk Interactive, chamou o Marcelo Ottoni e eu para mostrar uma solução muito interessante no site da MSNBC.COM, que apresenta o seu conteúdo em uma única página com uma navegação muito inteligente entre textos, fotos, imagens e vídeos.

Na mesma página o usuário consegue visualizar todo o conteúdo. Você consegue navegar facilmente entre as possibilidades com um move menu, que identifica em qual conteúdo você está no momento. Pena que o site não utiliza esse formato diferenciado para todas as notícias, empregando somente em editorias que merece um espaço com mais evidência.

Outra coisa que vale a pena ser comentada é sobre o menu do site, no qual o usuário consegue ver as principais notícias dentro da categoria ao ser clicada.

Temos mais dois exemplos de soluções interessantes no Brasil. O portal da Fiat possui uma única página que apresenta todas as informações do carro como ficha técnica, acessórios, cores, itens de série, entre outros. O menu possui o comportamento de acompanhar o usuário durante a rolagem.

Trabalhei em uma agência que criava um hotsite a cada novo empreendimento que era lançado. O hotsite seguia sempre a mesma arquitetura de informação, mudando apenas a linha visual que normalmente acompanhava a campanha off-line. A Tecnisa criou uma solução bacana pra isso. Cada empreendimento novo tem uma página onde o usuário consegue visualizar fotos, mapas, características, localização, data de lançamento, vídeos, valores e etc.

Não sou nenhum guru da arquitetura de informação e usabilidade e não cabe a mim fazer previsões, mas é preciso repensar a concepção de grandes portais e aproveitar melhor as resoluções, não criando empecilhos desnecessários na navegação. Por isso na hora de projetar uma interface, pense se realmente vale a pena criar uma nova página. Será que á mais chato abrir várias páginas ou se satisfazer com aquilo que você deseja em um único lugar?