O artigo com dicas para call to actions eficientes foi interessante, mas faltou algum detalhamento extra, algo a mais sobre a prática de se fazer chamadas à ação. Por isso, indicar os 4 elementos de design para um bom call to action vai ser de muita valia para complementar. Depois de ler este texto, você está apto a fazer melhores call to actions e vai incrementar a usabilidade de seu site.

Tamanho

Faça a sua chamada à ação grande o suficiente para que se destaque bastante na página! É o foco principal, certo? De modo geral, quanto maior é um elemento em uma página, mais visível será, consequentemente, deve ter maior importância. Um bom call to action é grande o suficiente para que ele seja reconhecido facilmente.

Antes de fazer botões enormemente e exageradamente gigantes, bastante atenção! Se você criar uma chamada muito grande, uma call to action enorme, os visitantes podem não compreender que o elemento é clicável e você vai perder completamente o “apelo” àquela ação. A dica é criar chamadas à ação grandes em relação aos outros elementos da página, tomando o cuidado para não cair no exagero ridículo e ineficiente.

Alternativamente, se você tiver mais de uma chamada à ação, utilize o tamanho segundo sua importância. O primeiro call to action deve ser maior do que o segundo e assim por diante.

Forma

Normalmente os melhores call to actions são os que tem forma de botão, chamam bastante atenção e são instantaneamente identificados como clicáveis – experimente usar os cantos arredondados ou circulares nas extremidades de call to actions para lhes dar a forma de um botão. Cantos arredondados funcionam bem, porém alguns usuários podem interpretar mal a chamada à ação, tomando por um anúncio ou banner. Como sempre no desenvolvimento web, o que vale é o bom senso!

Na intenção de fazer os call to actions parecidos com botões, um bom passo nessa direção é usar uma fonte tipográfica única, diferente das do restante da página, de modo a reforçar o “apelo” à ação. A diferença na forma da letra a ajudará a atrair a atenção para o call to action. Mais uma vez, bom senso na escolha para não destoar completamente do estilo e identidade visual do site.

Cor

Não é possível dizer que algum dos 4 elementos para um bom call to action que estão sendo abordados tem mais importância do que os demais, no entanto, a cor de seu call to action tem muita importância. Uma das formas mais rápidas para agarrar a atenção do usuário é usando um contrastante e visualmente interessante call to action. Escolher uma cor que se destaca do resto das cores utilizadas na página irá cumprir sua função.

Escolha uma cor que é especificamente exclusiva para sua chamada à ação; uma cor que não seja usada em qualquer outro lugar da página. Por exemplo, se o texto do site é preto e todos os links e botões são azuis, você deve usar cores diferentes de azul ou preto para o seu call to action. Ao invés disso, use uma cor mais clara e contrastantes como, por exemplo, o laranja. Ao utilizar laranja, a chamada à ação não ficará despercebida com o resto do azul e preto e vai receber bastante destaque em relação aos outros elementos da página.

Também é recomendável que você pratique o uso de cores de forma apropriada. É conveniente escolher cores chamativas e contrastantes, mas certifique-se de escolher as cores que se encaixam no esquema de cores geral do site. Também tome cuidado ao usar mais de uma chamada à ação na página: se você transformar a página em um arco-íris vai “drenar” o impacto do primeiro call to action e colocar os usuários em estado “não responsivo”.

Posição

Posicionar sua call to action “instintivamente”, no caminho dos olhos dos usuários, é extremamente importante. Não importa o quão grande, de forma estranha ou brilhantemente e coloridos seja sua chamada à ação seja, os visitantes nunca o verão caso não seja colocado em uma posição intuitiva. A posição exata para a sua chamada para a ação vai depender do layout da página, mas, regra geral, o melhor é manter a chamada para ação acima da dobra, numa área de destaque e com a abundância de espaço.

Deixando uma boa quantidade de espaço em branco em torno da call to action evita que outros elementos da página interfiram com a importância necessária de estarem ali. Posicione a chamada para ação num local intuitivo, sem qualquer confusão na forma como vai angariar o maior número de conversões.

Conclusão sobre bons call to actions

O mais importante é que você não pode ignorar o design de seu call to action! 4 elementos de design descritos aqui podem não parecer muito, mas, se bem utilizados, podem fazer maravilhas em sua taxas de conversão!

Veja diversos exemplos de call to actions no artigo da Smashing Magazine sobre o assunto. Inspire-se e avalie se você está indo no caminho certo; se está acertando nos julgamentos de design e estratégia de conversões de seus projetos. Fazer revisões e aprimoramentos constantes em seus trabalhos é um grande passo para garantir sua qualidade profissional, ao mesmo tempo em que ajudará com que você seja visto como alguém confiável, que não “abandona” os jobs realizados, simplesmente.

Tem mais alguma dica, exemplo ou comentário a fazer sobre call to actions?

Desenvolvedores de interfaces de sites (e pessoal de desenvolvimento web, em geral), além de serem criadores de interfaces de usuário e experiências, também são “consumidores” de interfaces. E, a cada vez que eu encontramos um site em que a experiência do usuário e usabilidade não foram bem trabalhados, queremos abandonar esse site imediatamente! Geralmente é isso que a maioria das pessoas faz ao invés de perder tempo.

A seguir, confira algumas dicas rápidas para o desenvolvimento de interfaces de sites e sistemas virtuais. Dicas essas que são alguns dos mais importantes caminhos que um designer deve abraçar ao projetar uma user interface.

Faça botões com “cara de botões”: call to action explícito

Muitos sites apresentam esse problema: os botões são inacessíveis ou tem baixa visibilidade, fazendo com que o call to action (“chamada para a ação”) não seja explícito. Ao criar uma página, uma interface com o usuário, a primeira coisa que você deve considerar é fazer botões call to action explícito, que seja claro e não haja dúvidas de que se trata de um botão que desencadeará uma ação específica.

Reduza o número de cliques

Como já foi abordado por diversas vezes nos artigos sobre SEO, o número de cliques não é um fator tão incômodo quando se pensava em outrora; mas, quando é preciso clicar 7-8 vezes para baixar um arquivo, isso pode se tornar um grande problema.

Alguns autores/especialistas aconselham a manter o número de cliques para “ações comuns” em, no máximo, 3 ou 4. Dessa forma você “se força” a criar não somente uma melhor experiência do usuário, mas, também, faz com que uma boa arquitetura da informação esteja presente em seu site.

Defina um objetivo

Cada site deve ter um objetivo. Ao definir um objetivo, você economiza tempo precioso tanto de si mesmo, quanto do usuário. Também, tente conduzir o visitante para o mesmo objetivo através de elementos de sua user interface. Isso só pode significar menos tempo desperdiçado por parte do usuário.

Aumente a performance de seu site

Outro fator contra a perda de tempo do usuário é ter um site rápido, com boa performance e desempenho. Isso significa que o usuário irá se concentrar em encontrar o conteúdo ao invés de esperar que o conteúdo seja carregado. Existem inúmeros recursos para melhorar sua velocidade do site, confira o artigo sobre o aumento de performance e desempenho de sites e blogs.

Conclusão sobre user interfaces eficientes

Como dito, essas são dicas rápidas para incrementar a experiência do usuário em sites e permitir a criação de user interfaces eficientes e úteis para os visitantes. Tendo essas dicas em mente – e efetivamente as colocando em prática – certamente vai fazer com que você desenvolva melhores interfaces e, consequentemente, faça com que as interações em seu ambiente online sejam melhores e a experiência final de seus visitantes seja otimizada.

Há muitas dicas úteis na internet sobre como otimizar seu blog Wordpress. Algumas delas são boas, mas difíceis de serem implementadas pelo “usuário médio”. Da experiência advinda da blogagem é possível saber de dicas para tornar seu site mais rápido e com melhor desempenho e performance.

É interessante que um web designer/desenvolvedor tenha em sua máquina o Firebug e Web Developer Toolbar, duas das mais importantes ferramentas de depuração em desenvolvimento web. Também tenha em mente que este artigo é dedicado, principalmente, aos sem possibilidade de configurar o PHP e MySQL diretamente, devido a condicionalismos e/ou restrições de hospedagem.

Otimize seu código HTML dentro de seu template

Esta é uma etapa que, geralmente, não é considerada importante quando, na verdade, deveria estar no topo de sua lista! É muito importante que seu código HTML esteja validado e que você não tenha código redundante. Certifique-se que seu tema é escrito com uma quantidade mínima de código possível. Não faça uso abusivo de tags como div e span.

Comprima seu CSS

Para que seu site seja mais rápido e de melhor performance e desempenho, existem vários truques que você pode aplicar no CSS, dentre eles:

• Usar declarações únicas no CSS. Você pode usar declaração única para margin, padding, background, border, font e list-style.
• Usar nomes pequenos em classes e IDs. Cada letra conta para o tempo de resposta do site. Por isso, é útil para o tamanho do CSS usar nomes simples e mais curtos ao invés de longos e descritivos nomes.
• Evitar seletores complexos. Tente fazer com que seus seletores sejam eficientes utilizando a maneira mais simples que for possível.
• Comprimir seu CSS. Depois que seu arquivo CSS estiver pronto, você pode ganhar velocidade adicional usando um compressor de CSS online - lembre-se de sempre ter um arquivo de backup com o código original.

Utilize Sprites CSS

Ao invés de usar vários arquivos de imagem no seu site/blog, experimente reunir o maior número possível de elementos gráficos em uma única imagem. Então usando a propriedade CSS background, você pode exibir os elements que quiser – essa é a técnica de CSS Sprites.

No caso dos Sprites CSS, o tamanho do arquivo de uma imagem é um menor que o de várias e o número de requisições HTTP também diminui – e esse é um dos fatores-chave para a performance de um site, como será visto a seguir.

Faça poucas requisições HTTP

Ultimamente esse tem sido um grande tema em debates sobre otimização e performance de sites. Alguns especialistas pensam que este é o aspecto mais importante a respeito do carregamento de uma página. A ideia principal é ter menos elementos na página, como imagens, arquivos CSS, javascript, etc. Alguns dizem que o ideal é faze menos de 25 requisições, se possível.

Evite carregar elementos externos

Esse é um dos mais importantes aspectos referentes à performance de web sites porque, ultimamente, os sites estão cheios de código javascript e iframes de sites de terceiros. Portanto, tente manter seu site longe de conexões a desnecessárias a elementos externos. Alguns fazem isso somente para mostrar um widget sem grande importância ou um “selinho” sobre alguma coisa que não acrescenta a navegação do visitante. Encontre alternativas ou tente hospedar os widgets em seu próprio dominio.

Deixe o tamanho da página inicial menor que 150KB

Para realizar essa “tarefa” selecione, no Web Developer, Informações > Visualizar Tamanho do Documento. Isto irá mostrar o tamanho de sua página e os elementos que fazem parte dela, como arquivos CSS, imagens, scripts, etc. Tente manter todos esses componentes no valor máximo de 150KB.

Exiba o resumo ao invés do artigo completo

Outra forma de otimizar sua página inicial é mostrar apenas uma parte de seus artigos. Dessa forma você exibe menos caracteres e faz com que o tempo de carregamento seja menor.

Reduza o número de plugins

A maioria dos plugins tem seus próprios arquivos CSS e/ou imagens. Então, se possível, é melhor manter baixo o número de plugins instalados para baixo. Dessa forma, você irá reduzir o número de requisições HTTP.

Exiba no máximo 20 imagens na index

Isso vale também para o objetivo de diminuir o número de requisições HTTP. As imagens podem estender o tempo de carregamento do site e é indicado que você não utilize mais de 15-20 imagens na index, quando possível. Quanto a páginas de artigos artigo, o número máximo de imagens deve ser de 5. Dessa forma, você pode ter artigos mais limpos e um site WordPress melhor.

Limpe sua sidebar

Coisas como calendário ou blogroll não são adequados para todo e qualquer blog/site WordPress. E estes componentes também diminuem a velocidade de carregamento de seu site. Você pode desabilitá-los, removendo o código do seu tema WordPress.

Caminho absoluto para algumas template tags

Quando você conhece os caminhos para determinados elementos, você pode usar os caminhos absolutos ao invés de usar as template tags do WordPress. Com isso, você pode reduzir o tempo de carregamento de seu site.

Por exemplo, em vez de usar a template tag bloginfo(‘’stylesheet_url’), você pode colocar o caminho absoluto: http://www.seusite.com/wp-content/themes/seutema/style.css.

Outros exemplos são:

• bloginfo(‘name’)
• wp_title()
• bloginfo(’stylesheet_url’)
• bloginfo(‘pingback_url’)
• bloginfo(‘template_url’)
• bloginfo(‘version’)
• bloginfo(‘atom_url’)
• bloginfo(‘rss2_url’)
• bloginfo(‘url’)
• bloginfo(‘name’)
• bloginfo(‘html_type’)
• bloginfo(‘charset’)

Impulsione seu WordPress com .htaccess

Esta é uma outra maneira de você aumentar o desempenho e performance de seu site/blog WordPress. Com base nas configurações do site e workflow, você pode personalizar o seu .htaccess usando as informações de “Ultimate .htaccess Tutorial” (além de informações sobre .htaccess em outros lugares). Lá você pode encontrar informações sobre cache, cabeçalhos, compressão gzip, etc.

Conclusão sobre otimização WordPress

A razão para este artigo foi a quantidade de blogs e sites WordPress atualmente disponíveis na internet. Seu número está aumentando e a maioria dos blogs não tem uma hospedagem com um nível tão bom.

Essas hospedagens não são tão rápidas, mas com uma pequena ajuda noo HTML, CSS e WordPress, a velocidade de blogs WordPress pode aumentar. Certamente essas dicas irão ajudar se seu objetivo e aumentar o desempenho e performance de seu site ou blog WordPress.