Identificando um layout amador.

O que faz a gente bater o olho num site e perceber: esse design está amador? Quando essa dúvida vem, muitas vezes não sabemos explicar o porquê. Foi pensando em responder essa intrigante pergunta que resolvi escrever esse artigo.

Um layout, para ser considerado amador, deve possuir algumas características em comum. As possibilidades são inúmeras mas existem alguns erros que aparecem freqüentemente nesses layouts. São esses erros que apresento agora. Atenção, você, webdesigner, jamais faça o que irei relatar a partir de agora.

JAMAIS ESTIQUE FONTES, IMAGENS E LOGOTIPOS

Erro bem comum entre os iniciantes, essa é uma das características mais vísiveis de um layout amador. Mesmo aos olhos do leigo é perceptível que algo está errado ali. O cérebro interpreta a desproporção das letras, das formas e círculos, dando a impressão clara de que algo foi esticado ou achatado. Jamais cometa esse crime. Ao manusear fontes, imagens ou logotipos, aumente ou diminua suas dimensões de forma proporcional.

EVITE UTILIZAR GAMBIARRAS

Quantas vezes você já tentou corrigir o mal contato no seu fone de ouvido, utilizando um outro fio e uma fita isolante? Isso é o que chamamos de gambiarra. Seria uma maneira errada de se corrigir alguma coisa, evitando ter que fazer tudo de novo. É o que vemos no exemplo acima. O webdesigner em questão pegou um texto vermelho escuro e tacou num fundo azul escuro. Resultado: ninguém conseguiu ler. Então, para que não fosse preciso ter que refazer todo o layout para que o texto vermelho ficasse legível, o nobre webdesigner resolveu colocar um efeito de “glow”, como se uma luz resplandescente iluminasse o fundo da palavra “gambiarra 1″. Aí está um exmeplo de gambiarra muito comum. Utilizou-se um efeito totalmente artificial, mal empregado, deixando a palavra pesada, poluída.

Não satisfeito, o webdesigner abandona a idéia do glow e taca um contorno amarelo na palavra “gambiarra 2″. Agora sim, a palavra ficou mais pesada ainda, como uma grossa barra de ferro.

Evite esse tipo de efeito, ao ver que a fonte não está legível ou sendo ofuscado, troque a cor do fundo ou da fonte até encontrar o melhor contraste. E se for necessário, volte a estaca zero e monte o layout novamente. Ao utilizar efeitos, utilize com muito critério e de uma forma que não fique artificial.

EVITE FONTES COMPLICADAS

Você entendeu o que está escrito aí em cima? Nem eu. Evite fontes de difícil leitura. Utilize o bom-senso.

CADA FONTE, UM SENTIMENTO

A fonte utilizada acima é a Comic Sans. Nota-se seu estilo de “revista em quadrinhos”. O que tem a ver esse tipo de fonte com uma funerária? Por isso utilize sempre um tipo de fonte que transmita o sentimento mais adequado. No caso da funerária, uma simples Times New Roman cairia bem.

TÍTULOS DESLOCADOS PARA A DIREITA

Nossa leitura se faz da esquerda para direita, como qualquer ocidental. Por isso encontramos em quase 100% dos sites ocidentais esse tipo de alinhamento. Deixar deslocado o título um pouco para a direita denota falta de alinhamento com o texto que vem embaixo. Nesse caso, alinhe o título com o texto. Se for um menu, pode colocar o texto que vem abaixo do título principal deslocado para a direita, dando uma idéia de hierarquia.

MENU DESALINHADO

Erro muito comum entre os iniciantes. Transmite falta de cuidado e quebra de leitura. Coloque todos alinhados na mesma linha. Recomendo a utilização de uma linha guia, caso tenha dificuldades em alinhar.

TEXTOS SEM MARGEM

Sempre devemos dar margens no topo, rodapé, esquerda e direita do texto. Além de dar uma sensação de leveza, também serve como uma moldura invisível, destacando o texto como um elemento visual.

EVITE BEVEL

Assim como o glow, o efeito bevel tende a ser artificial. Ao utilizar este tipo de efeito, use com bastante critério, para que não dê esse tom de artificialidade. Exagerar nesse efeito pode poluir a página e deixá-lo mais pesado visualmente.

EVITE SOMBRAS

As sombras também devem ser utilizadas com critério e de forma muito delicada. No exemplo, vemos um exagero do uso da sombra, dando um aspecto de queimado, sujo, poluindo a página e dificultando a leitura.

E então, gostaram? Acredito que esses sejam as principais características de um layout amador. Se você anda cometendo um desses crimes por aí, não tem problema, tenho certeza que depois de ler esse artigo você irá se redimir.

Para o alto e avante!

Por Bruno Ávila

Deixando seu site fácil de navegar!

Os aeroportos, grandes centros ou as cidades exigem um sistema de sinalização eficiente para auxiliar o visitante a se deslocar dentro deles. Essa regra não é diferente para um site web. Através de links, botões, cores de fundo e fotos, podemos guiar o internauta de forma mais eficaz. Para construir um bom sistema de navegação, precisamos responder às seguintes perguntas: “Onde estou?” e ” Aonde posso ir?”

Onde estou?

Assim que o internauta entrar no seu site ele tem que saber, através de uma boa sinalização, do que se trata. Afinal, o usuário poderá ter clicado num banner, num link de uma página de busca ou em alguma lista de urls. Por isso, é arriscado fugir do padrão do logotipo grande do lado esquerdo ( ou no meio, no lado direito, tanto faz ). Conheço muitos sites por aí que não mostram, logo de cara, porque vieram ao mundo. Utilizam cores que não correspondem com o produto, desprezam seu próprio logo ou então utilizam imagens que não tenham nada a ver com o produto ou serviço que oferecem.

Aonde posso ir?

O menu deve ser apresentado de forma clara. Assim o internauta poderá saber logo, sem obstáculos, como chegar a tal seção. Tudo bem, na internet o visitante é que tem o maior poder de escolha. Mas também não é o todo-poderoso. Através de cores, organização de links ou destaques você poderá influenciar sua navegação e levá-lo para onde quiser.

Se o seu site tem muitas páginas ( e conseqüentemente muitos links ), que tal criar grupos ou seções que organizem os links ligados a determinado assunto?

Mostro aqui o exemplo do site das lojas C&A. Existem duas seções básicas: Masculino e Feminino. Quando clicamos em Feminino, vêm suas sub-seções: moda, lingerie e calçado. Clicando em “moda”, temos uma navegação secundária com 21 opções diferentes ligadas ao assunto “moda feminina”.

Viu como as informações ficaram mais organizadas? Imagine se todos os links fossem mostrados logo na home do site? Seria tanta informação que ficaríamos perdidos. A C&A foi guiando o internauta até chegar ao ponto certo. Esse tipo de navegação prende mais o usuário, chegando direto ao ponto, sem riscos de confundir.

Para isso a C&A usou alguns sistemas de navegação padrão. Vejamos:

1 - Home: quando o internauta se perde, ele logo clica no logotipo do site. Já faz parte da cultura internet. ( Confesso que as vezes esqueço de colocar o link home no logotipo, mas prometo não esquecer mais ). E ficaria melhor ainda se a C&A tivesse incluído no menu o link Home ou Início para deixar a intenção mais direta.

2 - Funções globais: opções presentes em todo o site, que incluem links de ajuda, atendimento, mais informações sobre a empresa, como está seu carrinho de compras, etc.

3 - Links para outras seções: aqui, são apresentado os outros conteúdos do site, no caso da C&A, os produtos masculinos.

4 - Navegação secundária: aqui vêm os links especifícos de determinada seção. No exemplo da C&A, temos todo o conteúdo sobre moda feminina, que pode ser acessado com apenas um clique.

Princípios para uma fácil navegação

Clareza

Diferencie o seu sistema de navegação de todo o resto do site. É necessário, antes de tudo, que o usuário perceba que ali está o menu e que, a partir dali, ele terá acesso a todo o conteúdo do site. Para isso, poderá ser necessário um tratamento visual como uma cor diferenciada, palavras sublinhadas em azul ou um simples agrupamento com um título que identifique que aquelas palavras te levam a outros conteúdos.

Dê nomes aos bois de forma direta. “Não chame uma seção de “luz na escuridão” quando ela é na realidade apenas uma mera seção de Ajuda” diz a webdesigner americana Jennifer Nierderst, no seu livro “Learning Web Design”. Deixe bem claro em que seção o usuário está de uma forma bem direta para que todos entendam.

Evite utilizar ícones sem rótulo. Imagine que nem todos irão entender o que significa aquele desenhozinho bem pequenininho de um ícone. Se for utilizar, use ao lado de uma palavra que identifique o que aquele ícone quer dizer e para onde ele te levará ( rótulo ).

Consistência

O menu deve aparecer sempre da mesma forma. Se o internauta for para uma página interna e o menu aparecer diferente do menu da home, tanto no formato como nas cores, isso poderá confundir o usuário. Evite.

Eficiência

Tente adivinhar o que o seu público quer acessar primeiro. No caso de um menu vertical, coloque as opções que interessam ao seu público no topo. Não tente dificultar como fazem os supermercados, que colocam a seção de pães no final da loja só para você ser obrigado a passar por todas as seções. Na Internet é diferente. O clique do internauta é o que manda. Se você dificulta, fazendo com que o internauta clique mais, seu menu não é eficiente e, não restando mais o que fazer, o usuário clica em “fechar” e vai embora.

Além de um bom sistema de navegação, é necessário um design de interface muito bem planejado, integrando todos os elementos de navegação e informação. Até a próxima! Para o alto e avante!

Por Bruno Ávila

Como criar sites utilizáveis.

Um dia desses estava atrás de saber quanto custava um pneu novo para o meu carro. Logo pensei na Internet, uma forma cômoda de fazer pesquisas de preços. Acessei os sites dos maiores revendedores de pneus de Fortaleza. Minha decepção foi encontrar somente folders eletrônicos, cujo conteúdo se restringia a dizer “Compre pneus da marca Fulanestone e pague em 30/60/90 dias!”. E só.

Quantos clientes essa empresa está perdendo? Possui a oportunidade de estar presente na Internet e desperdiça esse espaço poderoso e tão barato. Para manter registrado um domínio basta desembolsar R$ 4,16 por mês. E manter o site hospedado em um bom webhosting pode sair por apenas R$ 8,90 ( o plano básico da http://www.neosite.com.br/, por exemplo ) Para divulgar o endereço da empresa nada melhor do que um site de busca. O público-alvo quando necessita apela para os sites de busca para achar o que precisa. Quando eu precisei de pneus, fui até o Cadê?. Estar presente no banco de dados de um site de pesquisa não custa nada.

Então? Por quê desperdiçar tão poderoso espaço?

Um site web bem-sucedido exige atenção a organização das informações. Elas devem interessar e responder todas as dúvidas do seu público-alvo. Prestar suporte aos clientes já conquistados, criando um programa de fidelização através da Web. Se seus cliente possuem email, custa anotar o email deles a cada venda feita? No final você terá acesso direto a todos eles, enviando promoções ou até um cartão digital de feliz aniversário.

Essa captação de emails vale não só para os clientes conquistados mas também para os visitantes do seu site. Afinal eles se interessam por seus produtos ou serviços.

Dica: site simples, limpo, com conteúdo completo e organizado. Basta isso para ter um site usual. Nada de invenções mirabolantes ou flashs pesados que fazem o seu logo rodar. Seja objetivo. Veja: o meu site é assim. Sempre pensei em criar um site onde pudesse ajudar outros designers e empresários através de relatos de experiências que conquistei nesses anos todos de Internet e ainda ter a oportunidade de mostrar um pouco do meu trabalho. Fui objetivo. No meu meu site você encontra meus textos, meu portfólio e de quebra ainda vê uma foto minha. Utilizando imagens leves e uma apresentação limpa. Pronto, consegui o que queria. Faça o mesmo com o seu site. Seja direto.

Para o alto e avante!

Por Bruno Ávila