Você pode ter apenas uma chance de prender a atenção do seu visitante

Quando você faz uma busca no google por webdesigner, por exemplo, ele retorna mais de 14.000.000 resultados. Se ao clicar no primeiro link você for redirecionado para uma página não encontrada, o que parece mais provável?

1 – Você tentará incansávelmente encontrar a página perdida

2 – Você partirá para o segundo site nos resultados da pesquisa

Agora digamos que no dia seguinte, você vai ao google para fazer a mesma busca novamente, ele retorna praticamente os mesmos resultados. quais as chances de você clicar novamente no site que retornou uma página não encontrada no dia anterior?

Dessa forma acredito que fica claro:  uma vez que um visitante escolhe visitar o seu site em uma lista de milhões, você terá apenas uma chance de oferecer a informação que ele procura.

A importância das páginas de erro

Todos nós sabemos a importância da home page de um site. Nós aprendemos que ela é a porta de entrada para o seu site e onde tudo começa e que se você cometer um erro nessa página, a chance de perder o visitante é muito grande.

No entanto, devemos nos lembrar que um site não funciona como um livro ou uma revista. Ele não é linear. Quando editamos um livro, nós sabemos “teoricamente” qual será a primeira e a última página a ser vista, nós podemos controlar a ordem que o visitante recebe a informação e evitar que ele se confunda ou se canse da leitura dando os detalhes a medida que ele se aprofunda no conteúdo. Em um website o visitante pode começar a navegação a partir incluindo páginas de erro.

Além disso, nem tudo funciona perfeitamente todos os dias, e você precisa estar pronto, isso se chama Design Defensivo.

Levando em conta que, na maioria dos casos, os sites de conteúdo tem sua maior fonte de trafego originada nos sites busca, é praticamente impossível determinar quais serão as suas páginas de entrada, alguns estudos simples e softwares podem oferecer essa informação  mas ela muda de acordo com o interesse do visitante e isso é ainda mais visível em sites com grande quantidade de conteúdo, por exemplo, uma noticia antiga que não traz uma grande quantidade de trafego para o site, pode  facilmente seresquecidas, mas pode voltar a ser interessante repentinamente em um período em que um fato similar acontecer.

Se isso não foi o bastante para convencê-lo, pense nos links de referência: um outro site qualquer que mencionou aquela sua materia há muito tempo atrás, e que, por uma razão qualquer, consegue um pico de audiencia em um determinado momento, essa seria a sua melhora chance de aumentar seu trafego sem custo. Mas então essa específica página aprsenta um erro 404, e até você perceber pode ser muito tarde.

Então o que fazer?

Primeiramente é preciso entender as principais razões para que o seu visitante seja direcionado para uma página de erro e como evitá-las

Erros de digitação do visitante

Um visitante pode estar procurando uma página especifica, digitar o endereço errado (esquecer ou trocar uma letra, por exemplo, ou terminar a url com .html quando o site utiliza .htm), nesse caso ele será direcionado para a tela de erro 404, “página não encontrada“.

Para evitar esse tipo de problema, use endereços simples. Em meus artigos sobre cores, é simples saber qual é a url para cada cor, basta digitar o endereço do site seguido do nome da cor ex.: www.danielevsilva.com.br/azul.
Url muito longas além de difícil de memorizar, permitem mais possibilidades de erro, principalmente quando envolvem palavras acentuadas ou separadas por hífen ou underline.

Páginas movidas, excluídas ou com novo endereço

Algumas vezes, quando mudamos a plataforma de desenvolvimento de um site, ou quando precisamos alterar a hierarquia de links, todas as urls do site precisam ser modificadas, e pode levar meses até que os buscadores comecem a indexar as novas urls.

Para evitar esse tipo de problema, utilize os recursos de redirecionamento via .htacces, nesse caso, cada vez que o visitante tentar acessar uma URL inexistente no seu site será redirecionado para a nova página correspondente, veja como funciona.  O wordpress possui alguns plugins que facilitam esse processo.

É preciso ajudar o visitante a encontrar o que ele procura

Uma página de erro, não deve somente informar o problema ocorrido, mas também dar alguma solução para que o visitante encontre o que estava procurando.

Seja Educado

Mesmo que o erro não seja seu, desculpe-se.

Mas não em excesso.

Informe sobre o que aconteceu

É importante que o visitante perceba que o conteúdo que ele procura não está naquela página. Pode parecer obvio dizer isso, mas em alguns casos, uma página de erro com muita informações pode levar o visitante a pensar que o link que o levou até aquela página foi uma enganação e não um erro. Isso acontece facilmente quando o site possui conteúdo muito variado, o visitante encontra uma página de erro com resumo das ultimas materias publicadas e elas não tem qualquer relação com o assunto que ele estava procurando. É possível imaginar que o link que o levou aquela página era falso (coisa que acontece muito já que empresas compram espaços para colocar links em palavras muito procuradas independente de ter relação direta com o assunto)  e isso prejudica a imagem.

Antes de tudo, deixe claro que aconteceu algum erro,  que aquele conteudo deve estar em algum lugar e ajude-o a encontrar.

Indique qual caminho o visitante deve seguir

Não basta dizer que o visitante igitou alguma coisa errada e que deve procurar o erro e corrigir tao pouco dizer que ele deve procurar melhor em alguma outra parte do site.

Se o visitante encontrou a página de erro vindo de um link de outro site, a página de erro pode ser o primeiro contato que ele terá com o seu site. Nesse caso, ele pode não saber do que se trata, se é uma empresa, um site de noticias, um blog, isso pode não ficar claro no layout, então não espere que o visitante encontre, a primeira vista, aquilo que estava procurando. Muitas vezes, mesmo que ele veja o menu do site, ou uma lista com as categorias que você costuma falar, elas podem possuir mais de um significado, que na interpretação contextual dessa pessoa pode se tornar desinteressante.

Explique que essa é uma tela de erro conforme disse antes, que o site/blog/loja virtual, oferece determinado tipo de conteudo nas áreas x e y e que se ele não encontrou o que procurava pode apelar para a página inicial (se ela realmente oferece informação relevante), mapa do site (no caso de haver um), busca interna, links mais procurados ou relevantes para o artigo que ela estaa procurando, etc.

Mas atenção: ainda que essas informações (busca, mapa do site, links relevantes etc) estejam visiveis na tela, é importante citá-los no texto para garantir que o visitante irá percebe-los.

Ex. “Não encontrou o que procurava? Verifique o mapa do site (que poder ter um link) no final dessa página ou utilize o campo de busca ao lado .”.

Links para artigos relacionados

Essa prática pode ser adotada inclusive nas páginas dos artigos.

Existem meios de identificar através do texto url do site quais palavras foram escritas e com isso mostrar outras opções de conteúdo que tratam do mesmo assunto.

Inserir uma caixa de busca

Eu ainda pretendo criar um artigo inteiro sobre a importancia de ter uma ferramenta de busca interna eficiente, porque esse assunto é tão importante quanto longo.

Mas nesse momento acho que posso simplificar: se nada mais funcionou, se o visitante aina não sabe onde está, ou como encontrar o que está procurando, apresente-o um formulário de busca.

O bom é ter o campo de busca visível em todas as páginas do site, mas nesse caso especifico é impressindível.

Mas porque eu sugiro a busca como ultima opção?

Através da sugestão, é possível ORIENTAR a navegação de um visitante na página. Sabemos que quando se encontra um problema, usualmente a opção que mostramos primeiro é aquela que ele vai tentar primeiro. e de todas as opções que temos, a busca é aquela em que temos o menor controle. O vistante que cometeu um erro digitando no endereço uma palavra complexa com grafia errada, pode cometer o mesmo erro na busca e por isso não receber nenhum resultado. Ou pode digitar termos que, somados, também não apresentam resultados ou apresentam muitos opção não totalmente relevantes, por exemplo, enquanto você escreveu um artigo sobre “como plantar flores’, ele pode buscar por algo como “cuidado com plantas”.

Se você possui uma forma de identificar pelo endereço da url, o que esse visitante estava procurando, tente mostrar automaticamente  resultados de conteúdo que existam e correspondam aquele assunto.

Uma busca com auto-sugestão baseada no conteúdo do site também pode resolver o problema, mas não é tão simples de implementar.

Notificar o erro ao responsável

Essa é uma situação controversa. Não é de responsabilidade do visitante identificar e notificar o erro. Hoje existem ferramentas específicas para isso, o próprio google analytics fornece esse tipo de informação, então está correto pedir ao visitante para avisá-lo sobre o problema?

Do meu ponto de vista, isso causa uma aparência de descuido, como se o responsável estivesse abrindo mão do problema esperando que o visitante tome alguma atitude, e o que ocorre raramente. Eu mesmo, nunca recebi uma notificação de erro vinda de um visitante em nenhum dos projetos que eu já trabalhei, nem mesmo portais de notícia que tem um número gigantesco de páginas e links de referência.

Por outro lado, inserir uma opção de contato de forma discreta com uma solicitação educada de ajuda, não incomoda ninguém, e quando bem feita pode ter o efeito contrário demonstrando preocupação em resolver os problemas. Mas lembrem-se do feedback, principalmente em sites grandes, se você abre um canal de comunicação com o usuario, esse visitante deve receber uma resposta adequada, se você não possui essa estrutura/tempo não cometa esse erro.

Curiosidades:

Falsa etimologia(ou não)

Circula na internet uma lenda urbana curiosa sobre a origem da expressão. Sua origem remontaria aos escritórios do CERN – Laboratório Europeu de Partículas Físicas -, com sede em Genebra, na Suíça. Nos primórdios da Web, por volta de 1980, no quarto andar do CERN, na sala 404, teria sido montado um banco de dados, controlado por três peritos em computação.

De acordo com a lenda, eles gerenciavam manualmente os pedidos de arquivos e os transferiam para os requisitantes. Quando aconteciam erros, eles alertavam: “Room 404 – File Not Found”. Mais tarde, a expressão teria sido incorporada ao mundo online pelo físico inglês Tim Berners-Lee, o criador da Web (wikipedia).

A grande sacada

No ano de 2000, percebendo que os sites davam pouca importância para as páginas de erro, a Heineken passou a comprar por quantias irrisórias as páginas de erro de diversos sites holandeses para promover uma de suas cervejas, a Murphys. Quando um internauta encontrava uma página de erro em um destes sites, apresentava–se uma página da promoção da cerveja com um link apontando para a promoção dentro do site da própria Heineken.

A campanha fez o maior sucesso, e merece ser considerada um grande case de webvertising. Na época ninguém pensava em vender suas páginas de erro, com isso a Heineken conseguiu montar uma campanha muito barata. Ao mesmo tempo, o internauta se deparava com uma recompensa (a página oferecia um copo de cerveja para quem se inscrevesse na promoção) num lugar um tanto quanto inusitado, uma página de erro (Webinsider).

Links

Quatro passos para criar uma página de erro 404 personalizada - WordPress

The 404 Research Lab -Doretório de informações sobre erros 404, com galeria e artigos

Dashboard, ao pé da letra “Painel de bordo”, é um termo usado em diversas áreas e nada mais do que um painel de indicadores.
Em se tratando de aplicações web, o dashboard é uma forma rápida de visualizar as principais atividades sendo executadas dentro de uma aplicação, e funciona como uma porta de entrada para a maioria das ações que o usuário pode executar. O Dashboard, na maioria das vezes, é dividido em pequenos blocos que exibem as informações referentes as diversas áreas e funcionalidades da aplicação e são chamados Widgets.
Parece complicado, mas é super simples, a maioria dos webdesigners desenvolve pequenos dashboards regularmente sem perceber
Cada aplicação tem a sua própria linguagem de comunicação com o usuário, que é basicamente estabelecida através da regra de negócio determinada pelo tipo de serviço à que o sistema de aplica. Por exemplo: uma aplicação para a área de turismo terá uma necessidade especifica no seu dashboard, que é diferente da necessidade de um sistema de reservas para um restaurante.  Será que podemos chamar isso de algum tipo de Folksonomia?
Mas de modo geral, o dashboard é uma forma simples e rápida de reunir todas as informações importantes em uma única página (ou aba).
Essa pequena definição provavelmente foi suficiente para ajudá-lo a entender como o dashboard é importante, no entanto, normalmente o mínimo de esforço e estudo é aplicado no desenvolvimento dessa área. A intenção desse artigo é passar alguns conceitos básicos que encontrei nas minhas pesquisas e aquilo que considero boas práticas de desenvolvimento.

Desenvolvimento do layout

A maioria dos Conceitos que aplicamos no desenvolvimento de um site também podemos aplicar no dashboard de uma aplicação web.

Organização

A organização é a chave para uma aplicação usável. Muitas vezes, precisamos exibir uma grande quantidade de informação em um espaço muito pequeno, e é muito importante determinar qual conteúdo é realmente relevante e o que podemos exibir em uma página de mais detalhes.
Supondo que se trata de de um sistema de reservas para um restaurante. O responsável pela ocupação das mesas consulta o seu dashboard para saber rapidamente quantas e quais mesas ainda estão disponíveis, nesse caso quais são as informações realmente relevantes? Ele precisa saber efetivamente quais são as mesas livres, talvez por um sistema de numeração, também precisa saber os horários que estarão disponíveis, quantas pessoas aquela mesa comporta e talvez, de acordo com a regra de negócio, qual o posicionamento dela no espaço físico do restaurante.
Mas ele não precisa saber por exemplo, as informações pessoais dos clientes que reservaram as mesas que já estão ocupadas, seus nomes, ou se são clientes antigos do restaurante. Podemos guardar isso para um novo widget, ou para uma página com detalhes da reserva.

Do ponto de vista psicológico, uma das principais funções de um dashboard é saciar a nossa curiosidade e a necessidade que temos de receber informação. Por isso é muito importante conhecer bem o negócio para determinar quais informações são importantes e para que tipo e nível de usuário elas deverão ser exibidas.

Enfim, o Dashboard pode ser pesado, pode não ser muito atraente visualmente, e até cansativo, mas se exibe todas as informações da maneira adequada, ainda assim será útil.

Grids, cores, áreas de atenção e relevância

A natureza humana tem uma predileção pelo belo. A beleza está diretamente ligada ao sendo de prazer e satisfação, mas como nós já sabemos, beleza é uma questão de ponto de vista e gosto pessoal, por isso é é muito importante ser cuidadoso quando escolhemos um estilo pessoal para uma aplicação pois é muito mais fácil errar do que acertar. As aplicações mais eficientes são aquelas que você utiliza sem se quer perceber. Elas não devem causar impacto visual (nem mesmo impacto positivo) apenas manter o usuário confortável para executar as funções a que se propõe de forma eficiente.

O grid

Conforme expliquei anteriormente, o Dashboard de uma aplicação web, na maioria dos casos é formado por pequenos blocos alinhados lado a lado e uns sobre os outros, formando linhas e colunas a que chamamos Grid. A idéia de grid fica mais fácil de entender quando nos lembramos do tempo em que desenvolvíamos sites usando tabelas, ele é composto basicamente de linhas e colunas que determinam o posicionamento de cada elemento em um site ou aplicação web. Não vou me aprofundar muito nesse assunto agora pois é assunto para um artigo inteiro. Mas de forma geral, um grid nos ajuda a pensar de forma modular, e widgets são pequenos módulos de conteúdo que deverão ser posicionados dentro do seu dashboard, então, ao invés de trabalhar com uma suposição para as larguras e alturas de seus widgets, experimente trabalhar com algumas especificações básicas, como por exemplo, a largura da tela, considerando os padrões que temos atualmente, o layout deve seguir a resolução de 1024 x 768, nesse caso, sua área util deve ter a largura de 960px, pois é um número que permite uma grande quantidade de divisões (2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 e 480) ou seja, colunas.
Você deve estar pensando: mas ninguém precisa de tantas colunas, eu concordo com você e sugiro dividir em apenas 12 colunas ( isso depende da complexidade) em muitos casos, 3 colunas é suficiente, mas na verdade, quanto mais colunas você tiver,  mais complexo pode ser o seu layout e você pode comprovar isso através dos exemplos de grid ao lado.

As cores e a harmonia do layout

Definido o grid, temos que planejar como trabalhar as cores. Mais uma vez, não vou entrar em muito detalhes sobre a importância das cores e como combina-las pois já falei muito sobre isso. Mas é importante frisar que as cores além de causar uma resposta emocional, também nos auxiliam a distinguir, separar, organizar e classificar conteúdos e ações.

Para começar, você precisa escolher a sua paleta de cores, normalmente ela é baseada nas cores que o cliente já usa, mas eu pessoalmente prefiro trabalhar com cores neutras para o background, bordas e detalhes e utilizar as cores do cliente como um complemento, se elas não forem muito agressivas, podem ser usadas como cores padrão para exibição dos dados, por exemplo.

Uma aplicação muito colorida, pode causar confusão na hora de entender o seu funcionamento,  de memorizar as respostas que receberemos após determinadas ações, ou até mesmo do seu significado no contexto da ferramenta. Por exemplo, o vermelho é a cor que associamos imediatamente a notificações de erros, se o layout da sua aplicação possui essa cor em um contexto diferente, como nas bordas, por exemplo, você terá que encontrar uma outra forma de comunicar os erros, ou seja, você vai sair do padrão que o usuário já está adaptado pela força da experiência passada e seu usuário terá que aprender qual é a forma que a sua aplicação usa para retornar uma resposta de erro. O mesmo para a cor verde, que associamos a uma resposta positiva e a cor amarela que associamos a uma notificação geral ou de atenção.

Também é importante considerar que uma aplicação ou sistema, de forma geral será utilizado varias vezes ao dia, ou por longos períodos e por isso precisa se agradável. Muitas cores, cores muito escuras, ou poucas cores muito contrastantes podem tornar o uso da aplicação cansativo e desagradável. O mesmo para o uso de imagens. Imagens de fundo ou imagens excessivamente repetidas, tudo isso se torna visualmente cansativo.

Do meu ponto de vista, o uso mais inteligente da cor em um Dashboard é optar uma unica cor em diferentes tonalidades, e utilizar cores diferentes somente para determinar as ações do usuário, desse jeito ele vai se sentir confortável, sabendo que tipo de resposta esperar e interpretando-a mais facilmente.

Áreas de atenção e relevância

O seu modelo de negócios deve dizer quais informações são mais importante para o seu usuário naquele momento, e tornas-las  imediatamente identificáveis para o usurário. Mas se temos um grid básico, com 9 módulos visualmente semelhantes posicionados um ao lado do outro, como podemos tornar um determinado widget mais relevante do que o outro?

Um dos mais inteligentes métodos para destacar a informação relevante é baseado no posicionamento. Estudos mostram que as pessoas tendem a scanear o site de uma maneira bem similar, se observa primeiro a área no topo da esquerda para a direita, depois ele desce pelo lado esquerdo até embaixo, em seguida observa o centro da página e por último as informações no lado direito embaixo, veja como isso funciona na figura ao lado.

E para melhorar ainda mais o trabalho de relevância baseada no posicionamento, você pode utilizar blocos que ocupam duas ou mais áreas importantes no layout.

Formatos de Layout para um Dashboard

Não é fácil generalizar os formatos disponíveis para dashboards, isso depende da quantidade de informação que você deseja disponibilizar na mesma tela e também da flexibilidade que a sua linguagem de programação proporciona.

O formato mais comum é aquele onde temos a área principal dividida em duas partes, uma pequena área superior onde colocamos o logitipo, as informações de usuário, logout, etc. E uma área mais ampla abaixo onde colocamos os widgets.

Esse formato, apesar de simples é muito eficiente. É fácil de ser customizado e a organização também é muito mais simples quando você não tem interferência de outros elementos.

Muitas vezes é necessário um menu mais longo do que a largura da tela (960px como sugerido anteriormente), nesse caso, outro formato interessante seria uma segunda versão do anterior, apenas acrescentando um menu extra ao lado esquerdo. Menus verticais em geral tem uma área útil maior do que menus horizontais. Esse formato de layout também é interessante quando é necessário exibir alguma informação que deve estar sempre fixa, uma caixa de pesquisa, por exemplo ou até anúncios, Mas lembre-se que a sua área util será bem reduzida.

Por enquanto é isso…

A principio isso é tudo o que você precisa saber para criar o seu layout.

Eu pretendo prosseguir com um detalhamento de como exibir os dados, que tipos de gráficos utilizar, como transmitir informações através das cores, etc. E também como e porque utilizar icones.

Levando em conta a primeira impressão do visitante como fator determinante para o tempo de permanecia, imediatamente entendemos a importância da Home Page para garantir um resultado positivo.

O que a sua “Página Inicial” diz sobre o site? Ela é suficientemente esclarecedora? Ela transmite a atmosfera que o visitante espera estar no momento que busca o seu produto ou serviço? Ela consegue despertar o interesse para que o visitante queira se aprofundar na visita? Carrega rápido o bastante? O tempo que o navegador necessita para renderizar as informações relevantes para o visitante é ideal?

Características de uma Home Page eficiente

Veja a seguir algumas características importantes para garantir que a sua home seja eficiente. Observe que são apenas recomendações e que, a aplicação de todas elas não garante o sucesso de um site, existem muitos outros fatores envolvidos, como cores, imagens, conteúdo de qualidade, etc, e ao mesmo tempo alguns projetos permitem que vc ignore algumas ou todas essas recomendações.

Tic-tac, tic-tac, tic-tac… Vc tem apenas 7 segundos

Pesquisas indicam que os primeiros 7 segundos definem se o visitante vai permanecer no seu site ou não.
Mesmo nos sites mais rápidos, o tempo de carregamento leva em média de 2 a 3 segundos sendo assim, restam apenas 4 segundos para que você consiga transmitir a sua mensagem.
Para garantir que a sua página seja atraente, reduza o tempo de carregamento da página principal. Quanto mais rápido ela carrega, mas tempo você terá para conseguir atrair o seu visitante.

Veja a seguir algumas dicas de como melhorar o tempo de carregamento de um site.

Pingdom Tools

O site Pingdom Tools oferece informações importantes sobre o tempo de carregamento de cada arquivo do site. Por causa dele eu fiz algumas mudanças importantes eliminando arquivos pesados que não estavam sendo usados e também arquivos não encontrados.

Ele mostra em amarelo o momento em que é feita a requisição do arquivo até o momento em que inicia-se a conexão, em verde o tempo que demora entre o momento que se inicia a conexão até o inicio do download do arquivo, e em azul o tempo de download da página.

Sendo assim, se as barras amarelas e verdes estão muito longas é bom verificar se o seu servidor realmente tem um bom desempenho e se a barra azul for muito longa, melhor rever o tamanho dos seus arquivos.

Diminuindo a quantidade de arquivos:

Como vc pode ver pelo Pingdom Tools , cada arquivo que a sua página solicita passa por dois processos antes de ser efetivamente carregado: a requisição e a conexão, sendo assim, podemos concluir que agrupando múltiplos arquivos em um só, o tempo de carregamento da página deve ser reduzido. Vou mostrar duas situações básicas:
1 – Se vc tem um menu ou botão que muda quando se passa o mouse (hover) e cria uma imagem para o estado normal e outra para o estado ” hover” , o servidor fará duas requisições e duas conexões, uma para cada imagem e ainda somaremos a isso o tempo de carregamento de cada uma. O ideal seria juntas as duas imagens em uma só e trabalhar com posicionamento. A imagem ficará maior e conseqüentemente mais pesada, no entanto faremos apenas uma requisição e uma conexão. Não sabe como fazer isso? O Rodrigo Medeiros explicou muito bem no artigo “Mudando o background-image no hover”

2 – Em se tratando de arquivos css externos , algumas classes e propriedades podem não ser usadas em todas as páginas e por isso nos vemos tentados a fazer arquivos separados. Por exemplo, porque eu deveria inserir o css de formatação do “formulário de contato” da página “contato” no mesmo css que é usado na home “home” ou nas outras páginas do site? Faz sentido criar um arquivo especifico para esses casos, mas também devemos lembrar que isso aumenta o tempo de carregamento da “Página de Contato” pois teremos que carregar um novo arquivo.
Lembrando que arquivos CSS são cacheados automaticamente, ou seja, ficam gravados no computador e não são recarregados a cada nova requisição, talvez seja interessante termos toda a formatação em um único arquivos que será carregado uma única vez.

Mas então você vai pensar: “Ora Daniele, mas você não está falando sobre a necessidade de termos uma ‘Página Inicial’ rápida para garantir que o visitante encontre a informação que procura nos primeiros segundos?” Sim, eu estou, mas tarde eu vou explicar que muitas pessoas entram no seu site pelos mecanismos de busca, e por isso acabam caindo em outras páginas as quais também vale a regra dos 7 segundos, não adianta reduzir o tempo de carregamento da “Home” aumentando o tempo de carregamento das outras páginas.

Trabalhando com “url amigáveis”

Não vou explicar o que é ou para que servem, pois o Bruno Torres já explicou muito bem no artigo “Gerenciamento de URLs – Criando URLs amigáveis“, o que é importante saber é que essas URLs Amigáveis sempre deve terminar com uma barra (/). Por exemplo: ao invés de colocarmos http://www.danielevsilva.com.br/blog, devemos colocar http://www.danielevsilva.com.br/blog/. Isso é necessários porque quando o servidor recebe uma requisão que não especifica qual é o tipo de arquivo que ele irá abrir, antes de iniciar o carregamento, ele fará uma checagem em todas as extensões possiveis (.htm, .html. jpg, .gif., etc etc) isso leva alguns milisegundos, mas pode fazer diferença. Colocando uma barra no final, ficará claro que se trata de uma pasta e a resposta será entregue muito mais rapidamente. * fonte: http://www.wordpressthemes.com.br/7-dicas-para-carregar-seu-blog-em-wordpress-mais-rapido/

Otimizando o tempo de carregamento em sites usando WordPress

Se como eu, vc utiliza o wordpress como ferramenta de gerenciamento do seu site ou blog, existem algumas informações que vc deve considerar:

Limpeza do seu banco de dados: O WordPress 2.9 possui um recurso de limpeza e otimização do banco de dados, para isso basta adicionar a seguinte informação no seu “wp-config.php”:

define('WP_ALLOW_REPAIR',true);

Em seguida acesse: http://seu_site/wp-admin/maint/repair.php e siga os procedimentos.

Arquivos não encontrados: Para cada arquivo não encontrado no site, o wordpress gera uma página de erro 404. Ou seja, você uma super-otimização no seu site, mas esqueceu de eliminar uma imagenzinha que estava lá naquele css esquecido, no momento que o WordPress se depara com uma requisição aquela imagenzinha de menos de 1kb, ele interrompe o que está fazendo, gera uma página de erro 404, e em seguida retoma a sua atividade de carregamento da página. Tá… Isso leva só alguns milisegundos também, mas pode comprometer o carregamento. O Site Pingdom Tools ajuda a identificar esses arquivos, depois é só elimina-los ou corrigi-los.

O Gilberto “Knuttz” escreveu uma solução bem interessante no artigo “Acalmando o WordPress – 404 amigável“.

Favicon: Uma das requisições que o wordpress sempre faz, é para o Favicon, aquela imagem que é exibida ao lado da URL ou do Titulo da sua página em alguns navegadores. Sendo assim é importante você sempre criar um favicon.ico para o seu site em wordpress, do contrario ele vai gerar um erro 404 para esse arquivo também. Não sabe o que é isso ou como fazer? Veja o artigo “21 melhores geradores de favicon da Internet“.

Requisições ao banco de dados desnecessárias: Como o wordpress é um gerenciador de conteudo desenvolvido para ser usado em qualquer site, algumas informações precisam ser facilmente customizadas, e uma delas é, evidentemente, o endereço do site, . A solução que o wordpress escolheu foi gravar o endereço do site no Banco de Dados, e então cada vez que ele precisa utilizar essa informação ele vai até o banco, pesquisa, e retorna a informação para o site, chamamos isso de requisição ou consulta ao banco. Se vc parar para analisar a quantidade de vezes que o wordpress vai ao banco para solicitar essa informação em cada página é gigantesca, para ajudar a resolver esse problema podems substituir algumas informações dinâmicas por outras estáticas, ou seja, ao invés de inserir as tags especiais (dinâmicas: <?php echo bloginfo(‘url’); ?>) do WordPress, nós podemos inserir as urls completas (estáticas: http://www.seu_site.com.br).

O Guga Alvez explicou muito bem como fazer isso no artigo “Deixe seu site WordPress mais limpo e mais rápido”

Ufa!

Eu ainda não escrevi nem 10% de tudo o que tenho pra falar sobre assunto, e o artigo já ficou imenso. Vou continuar amanhã algum dia

Até mais

Logotipo ou logomarca?

Uma pequena explicação antes de tudo: A palavra logomarca é um neologismo, ou seja, um termo novo que acaba sendo introduzido a língua portuguesa devido a grande utilização na expressão popular, ou seja, muitas pessoas falando. A explicação mais coerente que encontrei para justificar porque devemos sempre usar a palavra Logotipo está no site DesignGráfico, não vou entrar em muitos detalhes, mas basicamente, a palavra Logomarca é a união de Logo+marca.

Logo = Latim “Lógos” significa a grosso modo: “Significado“.
Marca = Germânico “Marka” significa a grosso modo: “Significado“.
Assim, com a palavra logomarca temos esta redundância “Significado+significado“.

Princípios básicos

O seu Logotipo não é a sua Marca, mas é certamente o item mais importante da identidade visual de uma empresa é o logotipo. Ele aparece em quase todos os materiais divulgação online ou offline, por isso representa uma grande responsabilidade.
Segundo Jacob Cass um bom logotipo deve seguir 5 princípios básicos:
1 – Simples: ser fácil de distinguir e identificar.
2 – Memorizável: fácil de se lembrar.
3 – Atemporal: que não envelheça ou fique obsoleto, por isso é melhor não seguir uma tendência.
4 – Versátil: que possa ser adaptável a qualquer tipo de mídia e situação.
5 – Adequado: que demonstre o conceito da empresa.
Memorizando essas características e colocando em prática você tem boas chances de criar um bom projeto. No entanto, como eu falei anteriormente, um bom logotipo não caracteriza uma boa marca ele é apenas uma representação visual do conceito que a marca deseja transmitir, e ainda assim a criação de um logotipo efetivo depende de uma série de habilidades experiências e muita prática. A seguir algumas dicas para quem esta começando.

Analise, estudo e briefing!

Como eu já falei em outros posts aqui você nunca deve começar um projeto sem saber exatamente o que vai desenvolver. Então pegue papel e lápis e comece a rabiscar, faça muitas pesquisas (no final desse artigo seguem alguns links de referências) converse com o cliente, de novo e de novo, enquanto você não tiver certeza de qual direção seguir. Faça alguns esboços, 20, ou 30 e teste combinações de cores diferentes… Um designer eficiente não é aquele que tem uma imaginação que nunca se esgota, mas aquele que sabe pesquisar.

Equilibro!

Quando você tem cores, formas e tamanhos diferentes você também terá graus de interesse diferentes, e é a distribuição desse interesse que você precisa controlar. Nós percebemos um design bem equilibrado como uma coisa mais agradável e atraente, então seja cuidadoso com o peso dos elementos. Cuide para ter um contraste de cores eficiente, e lembre-se mais uma vez que um bom logotipo deve funcionar para todo tipo de mídia. Não existe uma receita onde podemos dizer que “você deve usar vermelho porque chama a atenção” porque o destaque dos elementos e o interesse que ele desperta depende também de como ele se relaciona com os outros objetos, uma outra parte da imagem pode chamar mais a atenção pelo seu conteúdo do que pela cor propriamente. (ok, eu também concordo que isso deve render um outro post).

O equilibro é uma coisa muito delicada principalmente quanto a forma. Se levarmos em conta a simetria, um logotipo deveria ter os dois lados iguais ou ao menos na mesma proporção, mas em alguns casos isso pode ser mudado de forma eficiente. No entanto, se você não é um especialista e não se sente confortável para desenvolver um projeto inovador e arriscado, aposte em formatos e alinhamentos que deixem o contorno reto formando quadrados ou retângulos ou invés de estruturas angulares que são difíceis de adaptar como você pode ver nos exemplos anteriores.

Tamanhos e proporções

Quando falamos de logotipo, o tamanho importa muito. Além boa aparência, ele precisa ser visível e legível quando for o caso, em todos os tamanhos. Ele precisar ser visível em um favico ou em um outdoor. Mas como fazer isso? Você pode criar estilos de aplicação diferentes, por exemplo criando uma representação gráfica que pode ser usada sozinha (sem o nome da empresa) em áreas muito pequenas. E precisa testar. Faça reduções e ampliações, imprima, verifique qual o tamanho mínimo e o se existe um tamanho máximo para a legibilidade.

Uso das cores

Não vou detalhar muito pois você pode pesquisar sobre isso em praticamente todos os artigos desse site. Basicamente o que você deve saber é:

• Use cores próximas umas das outras no disco de cores, por exemplo, para uma “paleta quente”, use vermelho combinado com laranja e/ou tons de amarelo).
• Não use cores muito brilhantes pois são cansativas as olhos.
• O logotipo deve ficar legível mesmo quando impresso em preto e branco, tons de cinza ou duas cores.

Conceituação

Não existe um estilo certo para logotipos. Você pode usar qualquer estilo e acertar ou errar. O fundamental estar completamente entendi sobre qual o objetivo da marca. As tendências podem ser bem interessantes, mas também podem ser perigosas. Nesse momento ainda estamos vivendo o Boom de logos web 2.0 com gradientes, relevos, reflexos e sombras, mas lembre-se: eles funcionam muito bem para empresas de web 2.0 ou serviços de tecnologia, mas pode não ser eficaz para empresas mais conservadoras ou outro tipos de marcas.
Antes de tudo você deve investigar seu cliente e o publico alvo isso vai ajudar a determinar o melhor caminho a seguir e evitar que você precise recomeçar muitas vezes.

Tipografia

Acho que todos vocês sabem como é difícil escolher uma boa tipografia, e eu fico realmente impressionada quando encontro um designer capaz de trabalhar as fontes de forma sempre eficiente. Quando eu encontro um projeto com uma tipografia impecável eu sempre penso: “essa deve ser a obra prima, é impossível que ele consiga fazer isso de novo!”, porque é realmente difícil. E não se trata só de escolher fonte correta, você também precisa acertar no tamanho, no espaçamento, na altura entre as linhas, no kern… Quando você decide criar um logo composto por uma forma gráfica e um texto, seja para o nome da empresa ou para o slogan, você precisará de uma pesquisa delicada no universo das fontes.Experimente fontes serifadas e sem-serifas, itálico, negrito e fontes personalizadas. Considere 3 pontos importantes:

• Evite as fontes mais comuns, como comic sans, ou seu projeto pode perder a originalidade.
• Certifique-se que o texto é legível ou ao menos identificável quando reduzida.
• Evite mais de um tipo de fonte.

Você pode aprender um pouco mais sobre tipografia no artigo específico que escrevi anteriormente.

Reconhecimento

O objetivo principal de se desenvolver um logotipo é encontrar uma forma de tornar a empresa identificável no primeiro olhar. Como você alcança isso varia em cada caso. Um exemplo disso são logotipos como Pepsi, Coca-cola, Nike, McDonald’s, basta uma olhada rápida em qualquer uma dessas marcas e você sabe exatamente a que elas se referem.
Um teste rápido para determinar se seu logo é reconhecível é invertê-lo usando qualquer software básico de edição de imagem. Você deve ter em mente que que em situações reais o logo será visto de cabeça para baixo ou invertido e deve garantir que ele seja reconhecível nessas situações.

A aplicação do logo tipo na web

Como eu já falei anteriormente, quando você cria uma logotipo ele deve ser funcional em todas as mídias, on e offline.
A pouco tempo atrás não existia qualquer preocupação com a visualização do logo na web e quando existia, ainda não haviam estudos suficientes para dizar quais efeitos um logo mal aplicado ou deficiente pode causar.
Como webdesigner, eu recebo freqüentemente projetos onde o logotipo simplesmente não é funcional, pois não foi projetado para mídias online. Vou citar os principais problemas que eu, ou meus colegas já enfrentamos:
1 – Logotipo com formato arredondado - Existem logotipos arredondados realmente incríveis, eu concordo, mas eles também são muito perigosos. Tudo que é arredondado, numa diagramação padrão, ocupa um espaço muito maior do que as formas retas, como você pode ver na figura ao lado. Quando temos um logo arredondado, a tendência é arredondar os outros elementos (não é uma regra, mas e mais comum) então temos um grande chance de que tudo fica muito grande e que vc precise de mais espaço para transmitir as mesmas informações.

2 – Logotipo impossível de ser reduzido ou redesenhado – Logotipos muito complexos muitas vezes podem ser uma tragédia. Eu Já recebi logo com foto, 3D, logos com todos os tipos de bevel and emboss e drop shadows imagináveis. E já recebi esses logos pequenos demais ou scaneados precisando ser redesenhados, essa complexidade torna impossível um redesenho, porque dificilmente você consegue chegar no mesmo nível exato de gradiente, ou textura ou todos esses efeitos prontos que vc encontra por aí. Um logotipo eficiente é aquele que vc consegue desenhar com papel e caneta e ainda assim ficar identificável. Outras vezes, o logo é tão complexo e tão detalhista que quando reduzido os detalhes não são visíveis e ela perde os efeitos ou vira um grande borrão. E tenha mais cuidado ainda se você usa fontes finas elas pode desaparecer!

Concluindo

Essas são as características principais que um logotipo precisa ter para ser funcional e efetivo, mas devo dizer mais uma vez: para desenvolver um grande logotipo é preciso muita prática e experiência aliada a criatividade e entendimento do conceito da marca e do seu publico alvo.

Com milhões de combinações possíveis, nós designers acabamos desistindo antes mesmo de começar. No entanto, temos que agradecer a perseverança de alguns de nossos colegas, que por não desistirem acabaram criando as maravilhas que serão listadas no final desse artigo.

Apesar do meu gosto pela analise mais profunda da tipografia, esse artigo tratará apenas da tipografia como elemento fundamental do design: títulos, manchetes e áreas de destaque, etc. Pretendo publicar brevemente algum material sobre “legibilidade na web”.

A tipografia tem tudo para ser a parte mais elegante de um projeto.

Os resultados finais, normalmente, são o que chamamos de clean: elegantes e legíveis.

A boa escolha da tipografia pode reduzir consideravelmente a necessidade de fotos e ilustrações, porem, como eu falei no artigo sobre “Estilo retrô”, somando uma boa família de fontes a esses elementos o projeto pode ficar muito mais interessante.

É importante lembrar que cada sistema operacional possui a sua família tipográfica e que, caso você utilize uma fonte que não existe no computador do usuário, ela será substituída por outra previamente definida ou pela fonte padrão do sistema.

Apesar das fontes existentes no Internet Explorer serem muito parecidas com as fontes do Mac, é preciso lembrar que existem outros sistemas operacionais e que é necessário garantir que o conteúdo terá o mesmo aspecto (ou o mais parecido possível) em todos eles. No caso do linux, por exemplo, o número de fontes instaladas varia de versão pra versão.

Para trabalhar com fontes alternativas, a melhor solução, na minha opinião é através da técnica “Image Replacement“. Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas css, assim é possível utilizar qualquer fonte sem a preocupação se ela será exibida corretamente, pois imagens são sempre imagens. Dessa forma ganhamos em compatibilidade!

Veja no “Pinceladas da Web“a técnica mais comum para trabalhar com substituição de textos por imagens, ou então, faça uma comparação entre os principais métodos conhecidos no “Mezzoblue” (em inglês).

Tudo depende do contexto. Uma mesma fonte pode apresentar diversos aspectos bastando apenas mudar a cor do fundo, adicionar uma borda ou uma imagem…Veja alguns exemplos se pode fazer:

Exemplo 1 – Fonte Sofia Script

Fonte – Sofia Script – Fonte manuscrita e sem acentuação. Perfeita para estilos arrojados, pode ser moderna ou retrô dependendo somente de como vem acompanhada.

Exemplo 2 – Fonte Logomotive

Uma fonte básica desenvolvida por um designer gráfico Acentuada, com maiúsculas, minúsculas, pontuação e números.

Mais uma vez eu digo: procure sempre a compatibilidade na maioria das plataformas possíveis, dispensando a necessidade de instalação de programas, plugins ou acessórios para o funcionamento do site.

Entenda isso aqui

O modo como você estiliza e formata seus formulários é crucial para torna-lo aparentemente útil pois na maioria das vezes é preciso convencer o visitante a preencher as informações. Para formulários pequenos, basta adapta-los ao site, mas quando se trata de formulários mais complexos onde uma grande quantidade de informações é exigida ter um estilo bem elaborado e fácil de usar se torna o principal motivo de sucesso ou fracasso.

Antes de tudo é preciso entender a importância e o significado de um formulário: eles são hoje a forma mais usada de interação entre usuário e o site, é o modo pelo qual o visitante transmite para o site (ou para os responsáveis) tudo aquilo que ele desejar ver ou fazer. Mesmo quando não aparenta exatamente o tipo de formulário convencional, em algum lugar deve haver uma tag “input” escondida. A palavra “input” tem exatamente esse significado: passar, enviar informações.

Tags fundamentais

Form

A tag <form> cerca um formulário, ela que vai conter os parâmetros que garantem o seu funcionamento. Você pode colocá-la em qualquer lugar dentro do <body>, e todas as tags “input“, “selects“, “textareas“, etc devem ficar dentro dela

Seu atributo principal é o “action“, ele é o responsável por linkar o seu formulário ao arquivo que contem a programação responsável pelo envio dos dados quando o botão de envio for acionado. Ele deve conter o link para um arquivo cgi, php, asp ou outra linguagem de programação capaz de processar esses dados.

Outro parâmetro importante é o “method“, que é a forma como os dados são enviados. Se seu formulário envia resultados com mais de 100 caracteres ou acentuação fora do código ASCII, você deve usar pelo método “post“, pois o método “get” adiciona o resultado do formulário ao endereço da página e isso pode causar problemas. Ex.: danielevsilva.com.br/?name=value&name=value

A tag “form” pode receber “Classes” ou “ID“, por isso você pode usá-la como uma div para formatar seu formulário e reduzir o código.

De acordo com a especificação do HTML 4.0, a Tag <form> é obrigatória para formulários. Não esqueça que ela deve ser fechada no final “</form>”

<form id=”form1″ name=”form1″ method=”post” action=”form.php”>
Aqui devem ficar os campos do seu formulário
</form>

Input

O <input> tag principal para um formulário. É a responsável por receber as informações que serão enviadas.

Seu atributo principal é o “type” que determina qual o tipo de campo que será usado e quais dados ele poderá receber. Existem 10 tipos de campos “input”

Button

<input type=”button” name=”daniele” id=”daniele”value=”botão” />

É o tipo que deve ser usado para criar botões que não tenham o efeito de enviar ou limpar um formulário. Normalmente usamos quando é necessário chamar um javascript sem enviar as informações até que seja processado pelo JS. Por padrão o campo ficará em branco, você pode usar o atributo “value=” se quiser escrever algo.

Checkbox

<input type=”checkbox” name=”daniele” id=”daniele” />

Cria uma lista de opções de múltipla ou única escolha. Se você tiver um grupo de checkboxes, deve relacioná-los através da tag “name=”

File

<input name=”daniele” type=”file” id=”daniele” />

É o tipo usado para fazer upload de arquivos, ele adiciona um input com propriedade de texto e um botão de envio com um padrão automático.

Hidden:

<input name=”daniele” type=”hidden” id=”daniele” />

Campos ocultos são usados para passar alguma informação sem que ela seja visível na tela.

Image

<input name=”daniele” type=”image” id=”daniele” src=”imagem.gif” />

Permite que você uma imagem como botão, isso dá muita flexibilidade ao layout. No entanto, não é possível acessar um botão com tipo “image” através da tecla “tab“, o que diminui a usabilidade.

Password

<input name=”daniele” type=”password” id=”daniele” />

Funciona exatamente como um campo de texto, mas os caracteres digitados ganham o aspecto de senha usando asteriscos *****

Radio

<input name=”daniele” id=”daniele” value=”sim” type=”radio” />

São conjuntos de opções que permitem apenas uma seleção. Para criar um grupo devemos colocar o mesmo “name=” para todos eles com “value“especifico para cada um:

<input type=”radio” name=”radio” value=”sim” />
<input type=”radio” name=”radio” value=”não” />

Reset

<input name=”daniele” id=”daniele” type=”reset” />

É um tipo de botão que ao ser pressionado, limpa todos os campos que foram preenchidos pelo usuário. Por padrão o botão aparecerá como “reset”, você pode usar o atributo “value=“se quiser escrever algo.

Submit

<input name=”daniele” id=”daniele” type=”submit” />

Essa tag gera o botão responsável por enviar os dados para o servidor. Por padrão o botão aparecerá como “submit“, você pode usar o atributo “value=“se quiser escrever algo.

Text

<input name=”daniele” id=”daniele” type=”text” />

É o tipo mais comum de campo de formulário em html. Permite que os usuários digitem qualquer tipo de informação textual.

Textarea

<textarea name=”daniele” id=”daniele”></textarea>

A tag <textarea></textarea> cria um campo formado por múltiplas linhas. Ou seja, é possível enviar um texto maior mais facilmente.
Seus atributos mais comuns são:
“Cols” – indica quantas colunas serão visíveis (qual a largura do campo)
“Rows“- Indica quantas linhas serão visíveis (altura do campo)

Select

<select name=”daniele” id=”daniele”>

A tag “select” é responsável por criar uma lista de muitos itens ocupando um espaço pequeno. Cria uma espécie de “menu de Salto”, mantendo as opções ocultas até ser acionado com um click. É composta pelas tags: <select> e <option>

A etiqueta seleta tem vários atributos, e o fechamento </select> A etiqueta é exigida.

A tag select, assim como os botões de rádio, permitem que se escolha uma ou mais de uma opção.

Deve ser inicado sempre com a tag <select> e cada opção disponível deve ser colocada dentro de uma tag <option>, dessa forma:
<select name=”1″>
<option>sim</option>
<option>não</option>
</select>

Coisas que você deve saber para deixar seus formulários mais legais

A semântica

Eu ainda me surpreendo com a quantidade de pessoas que procuram motivos mais diversos para aumentar a quantidade de opções de tags que podemos usar para de formatar e organizar os campos de seus formulários, já vi pessoas que usam, <div></div>, <p></p>, <span></span>, até mesmo as tags <ul><li></li></ul> alegando que formulários podem ser considerados uma lista de informações. Bem eu não concordo. Formulários devem ser vistos como formulários, não são listas, nem tabelas, nem nada parecido, apenas formulários. São individuais e possuem suas próprias tags especificas. É uma categoria própria de conteúdo, assim como as tabelas e as próprias listas, não acho correto tentar colocá-los dentro de uma dessas duas categorias. Assim como uma tabela possui suas <tr>, <td>, <thead> etc, o formulário possui seus <fieldsets> e <labels>, que usados de forma correta são capazes de organizar todo tipo de dados de formulários.

Vamos conhecer melhor essas tags

Label

<label for=” “></label>

A função principal do label é rotular os campos. Quando usada corretamente ajuda a resolver problemas de usabilidade em campos muito pequenos, como botões de Radio e Checkboxes, esses campos não tem mais do que 10px de largura e altura, e através da tag label conseguimos expandir a área do clique para a região do label. Por exemplo, no final desse artigo, no formulário de comentários, clicando na palavra “nome“, o campo input “nome” é imediatamente ativado e você pode escrever. Isso acontece pois o atributo “for=” da tag <label> está relacionada a tag <input> pelos atributos “name” e ou “id“, ou seja:  o atributo “for=” da tag <label> deve ser igual ao atributo “name” ou “id” do input.

<label for=”author”>Nome:</label><input name=”author” type=”text”>

A tag label também auxilia a navegação para deficientes visuais (leitores de tela) pois cria uma relação entre o rótulo e o campo que não existe normalmente.

Além disso, a tag “label” também pode receber “class” ou “Id“, sendo assim, ela pode receber qualquer tipo de formatação. Pode ser usada para alinhar os rótulos de um formulário sempre ao lado direito, por exemplo, criar margens, etc…

O input pode ser colocado dentro ou fora da Tag label.

<label for=”author”>Nome:</label><input name=”author” type=”text”>
<label for=”author”>Nome:<input name=”author” type=”text”></label>

O resultado é o mesmo, o que muda é a formatação. Eu prefiro trabalhar com o primeiro modo, pois tenho mais flexibilidade podendo trabalhar a tag label e a tag input individualmente. Isso ajuda na composição dos meus layouts.

Fieldset

<fieldset></fieldset>

A tag fieldset cria um caixa agrupando elementos de um formulário. Você não precisa usar uma div sempre que quiser separar os campos de dados pessoais e as informações de pagamentos, basta colocá-los dentro de um fieldset e ele insere uma caixa que contorna os campos.

E mais legal ainda: você pode usar junto com o fieldset a tag “legend“, ela coloca um título no fieldset.

<fieldset><legend>Aqui vai a legenda</legend></fieldset>

Veja aqui um exemplo de formulário simples, formatado com uma semântica correta, observe o código fonte e a forma como usei o a propriedade “float” no css para alinhar as label ao lado dos input.

A formatação

Quando se trata de formatação de formulários, é importante lembrar que algumas vezes os visitante confiam informações secretas como senhas, números de documentos e cartão de credito, por isso modificar completamente o layout de um formulário nem sempre é uma boa idéia, pois pode deixar os visitantes confusos ou desconfiados.

Como falei no inicio, formatar um formulário básico é simples, basta adaptá-lo ao estilo do seu layout, e uma boa forma de se fazer isso é trabalhando com imagens.

O principio é simples: basta cria uma imagem e com css colocá-la atrás de seus campos input, depois mudar a cor de fundo e a borda do campo para a mesma cor de fundo da imagem, o campo ficará disfarçado e vai parecer que o visitante está digitando sobre a imagem.

Um outro jeito interessante de fazer isso é colocar o input dentro do label e trabalhar com uma imagem de fundo no label, como fiz no site www.pontoaponto.com.br. Nesse caso, eu usei a mesma imagem com gradiente no label e no input, ambas alinhadas abaixo, retirei as bordas do input e adicionei bordas no label. Veja como ficou certinho.

Cuidados que você deve ter

Não mudar a forma básica dos elementos!

As pessoas estão acostumadas a preencher os campos padronizadas pelo sistema operacional e já sabem o que fazer com eles, quando se deparam com um formato muito diferente se sentem constrangidos e simplesmente abandonam o preenchimento. E isso é muito comum na verdade, o que é claro pra mim, pode ser estúpido para outro e inutilizado para um terceiro.

Rótulos claros e curtos

Sempre utilize rótulos (label) curtos. Tente resumir a sua pergunta em poucas palavras. Há uma regra que diz que eles não devem exceder 200px depois de estilizados, mas acho que isso vai do bom senso.

Campos maiores, respostas maiores.

Deixe o tamanho dos campos proporcional ao tamanho da informação que você espera receber. As pesquisas mostram que quando usamos campos muito pequenos, as pessoas tendem a escrever respostas bem resumidas, e quando os campos são maiores elas tendem a escrever mais. Então se a sua idéia e estabelecer uma comunicação com o seu visitante, como em comentários de blogs, fóruns e formulários de contato, deixe seus campos de texto maiores e terá respostas maiores e mais detalhadas.

Da mesma forma se um campo exige informações curtas, use campos curtos. Nunca use 300px num campo de senha de 8 dígitos, por exemplo. O visitante certamente vai pensar que não entendeu bem a finalidade do campo.

Sinais de identificação

Lembre de usar o * para classificar um campo como obrigatório. As pessoas estão acostumadas com isso. E o ideal é usá-lo antes do campo do formulário, a direita ou esquerda do label, pois em leitores de tela, é preciso que o programa avise que é obrigatório antes de ler o campo. E não esqueça de explicar o que significa o * antes de sua primeira ocorrência.

Cuidado com o vermelho

Vermelho significa erro. Por isso cuidado ao rotular campos com essa cor ou usá-la em informação textual, pois no final, quando o visitante enviar um formulário incompleto, você vai precisar dessa cor para explicar isso.

Agrupamentos

Agrupe sempre muito. Agrupe informações semelhantes, complementares. Agrupe campos obrigatórios, ou campos opcionais. Agrupe, agrupe agrupe. E use fieldset para isso!

Alinhamentos:

Pesquisas demonstram que o tempo de preenchimento pode aumentar ou diminuir de acordo com a forma que os elementos estão organizados.

Alinhando o label a esquerda do input

A associação do rótulo com o campo é rápida e fácil, mas o tempo de preenchimento aumenta pois o mouse algumas vezes precisa percorrer uma distancia maior

Alinhando label a esquerda do input e alinhando o conteúdo do label a direita

A associação do rótulo com o campo é rápida e fácil, e o tempo de preenchimento é reduzido pela metade

Alinhando o Label acima do input

Essa foi a forma mais eficaz de organizar as informações de um formulário, pois o visitante consegue entender a ordem das informações apenas com uma olhada rápida

E tudo fica mais legal ainda com a JQuery

Bem, agora que eu descobri a Jquery, vejo Jquery em tudo. :)

Se você não sabe o que é isso, pode descobrir aqui, e se você não sabe inglês o suficiente para entender então leia isso. E se você já entendeu o que é e quer começar a usar, leia isso aqui (em português)

jNice, styled forms – Modificar os campos dos seus formulários deixando com uma aparência mais interessante. Muito legal

Autocomplete – cria uma lista de opções para todos os campos que serve como um “auto-completar”.

Checkbox ShiftClick – Esse é ótimo. Permite que você marque muitos campos do tipo checkbox usando o shift

Form Validation – Meu sistema de validação favorito

Terminando…

Bom, eu não falei a metade do que gostaria e esse texto já ficou imenso, então, logo logo, eu vou trazer uma segunda parte onde abordarei temas como Validação, Capcha, tabulação,

A Técnica

É excencialmente uma cor fria. Mas a medida que acrescentamos sombra ao azul, ele se torna mais quente, sendo assim quanto mais escuro o azul, mais calor ele transmite podendo até deixar de ser uma cor fria.

Uma vantagem em se usar o azul é que praticamente não existem distúrbios de visão relacionados a ela, apenas os problemas mais sérios afetam a identificação dessa cor. O azul é azul pra praticamente todo mundo.

Se o contexto cultural e temático é favorável, o azul é uma excelente cor de fundo, já que contribui par a tornar as linhas de rasterização mais difusas.

A natureza do azul

É a cor do céu e isso é universal, em qualquer contexto cultural ou linguagem o azul está diretamente relacionado ao celestial. O efeito frio e tranquilo do azul causa a impressão de fazer o tempo passar mais rapidamente e pode ajudar a dormir, por isso é uma boa cor para pintar paredes em quartos e áreas de relaxamento. No entanto, excesso do azul pode deixar uma impressão de umidade e isso causaria desconforto.

Azul transmite confiança e seriedade sem ser sombrio ou sinistro. A maior prova disso é o fato dele ser quase padrão nos ternos de executivos nas grandes corporações e também em carros e uniformes da polícia. Quando em tons mais escuros é associado a inteligência, a experiência, a estabilidade e ao conservadorismo.

Um fundo em azul bem vivo ou azul-celeste transmite riqueza e algumas vezes um toque de superioridade.

Da mesma forma que ao vermelho atribuímos o extremo das emoções fortes, o azul representa o extremo dos sentimentos leves.

Cultura

Em muitas culturas o azul tem significados religiosos, está relacionado a paz e pureza e algumas vezes é atribuída a ele a capacidade de afastar maus espíritos. No Irã, o azul é a cor de luto e em outros países árabes é a cor da tradição nupcial representando o amor.

Combinações

Combinações de azul e verde remetem a qualidade de vida, estão diretamente relacionadas a saúde e a natureza. São as cores dos spas, das farmácias homeopáticas, das empresas que valorizam o desenvolvimento sustentável. São as cores da moda. Adicione um pouco de cinza e você terá ecologia com um toque de sofisticação. Combinando o azul celeste com tons claros de marrom ou bege também conseguimos uma paleta com conotações de natureza.

Utilize o azul para esfriar uma paleta quente com tons de vermelho ou laranja. Mas essa combinação e perigosa, pode ficar escura e causar sensações estranhas. Lembro também que o uso de alguns tons de vermelho ao lado do azul pode causar efeitos de ilusão de optica deixando uma “faixa cinza” entre as duas cores. Use contrastes de azul e amarelo para atrair a atenção, mas cuidado pois também pode se tornar gritante e consequentemente cansativo.

A combinação do azul com branco é extremamente refrescante principalmente o azul marinho, é a combinação náutica. É uma combinação intyeressante para projetos mais cleans, leves ou minimalistas e também pode ficar ótimo adicionar alguns elementos em vermelho escuro para dar destaque e aquecer um pouco a paleta, principalmente linhas e titulos. Sugiro o azul escuro com toques de prata para uma aparência elegante e rica.

Embora o azul seja diretamente relacionado ao inverno, pode ser relacionado também a primavera, quando usado em tons pasteis junto com cor-de-rosa ou amarelos pálidos. Gradientes sutís de azul trazem um pouco de sofisticação sem perder o conservadorismo, e isso fica mais evidente se adicionamos o bege e outras cores neutras e claras.

Mais paletas em: Colourlovers

Um pouco da história

Até o inicio da idade média, a cor azul foi considerada nobre devido a dificuldade de se conseguir pigmentos dessa cor. O vermelho, o preto e o branco eram as cores mais fáceis de serem fabricadas e por isso mais baratas, sendo assim pigmentações azuis ficavam restritas a uma pequena parte da nobreza.Os egípcios, no entanto, já utilizavam o azul como pigmento mais de 5 mil anos antes. Ele era extraído de uma pedra semipreciosa o lápis-lazúli.

No sec.VI a técnica egípcia de chegou a Europa, mas a pedra chegava a custar mais do que o ouro. Com a descoberta do caminho para as Índias no final do séc. XV, o pigmento conhecido como Indigo indiano passou a ser muito utilizado na Europa, mas foi proibido sob pena de morte para tentar preservar o tom produzido com a pedra, muito mais rentável, logicamente.

Em 1704 foi descoberto um pigmento na Alemanha, numa experiência com oxidação de ferro. Custava um décimo do preço da tinta feita a partir do lápis-lazúli e fez sucesso entre os pintores da época. Logo a indústria química evoluiu e possibilitou o desenvolvimento de centenas de outros pigmentos mais baratos, o que foi crucial para o surgimento do impressionismo, no séc, 19, com Monet, por exemplo que valorizava muito a cor, mas como os pigmentos da época ainda não possuíam grande resistência, muitos trabalhos da época sofreram descoloração.

Conotações do azul

Patriotismo, estabilidade, poder, credibilidade, conservadorismo, á;gua, frieza, divertimento, frio, derrota, problema, luz firme, forte tranqüila, confiante amigável, inteligência incorporada, unidade, depressão, riqueza, superioridade, harmonia, acadêmica, nobre, fiel, leal sincero, limpeza, tecnologia.