Call to Action, o que são e qual a sua importância.

Chamadas para ação são convites para agir. No Web design e sobretudo no campo da usabilidade, os Call to Actions são elementos precisamente distinguíveis que solicitam ao internauta a realização de uma ação. Obviamente, esses elementos, em interfaces web, apenas pensando no conceito de usabilidade, tornam-se de enorme importância e devem ser considerados com extrema precisão.

Normalmente, os Call To Actions, em interfaces web, assumem a aparência de botões ativos, que, uma vez clicados, remetem o internauta a concluir uma ação bem definida (um pagamento, digitação de dados em um formulário, um procedimento de compra, etc… )

Dada a delicadeza do assunto, existem regras precisas para tornar as chamadas para ações bem-sucedidas e otimizadas. Algumas sugestões muito interessantes são dadas pelo site REVISTA ESMAGADORA, que fornece uma ilustração bastante ampla e detalhada com exemplos reais.

Portanto, para todos os web designers, especialistas e não especialistas, é muito importante avaliar os aspectos que podem influenciar positiva ou negativamente uma Cll To Action. E assim, vamos terminar de falar novamente sobre acessibilidade e usabilidade. Termos que andam caindo no esquecimento ultimamente e não entendo porque.

O copywriting (certo) para sites e redes sociais

O Call To Action, porém, não para apenas no aspecto gráfico:

sendo um elemento importante do marketing persuasivo, é claro que também deverá ser avaliado em termos de conteúdo. Ou seja, o que está por trás de um Call to Action e por que o navegador deve clicar ali mesmo e não em outro lugar.

O Call To Action é um verdadeiro call to action, aquela ação que você tem que induzir ou que você quer que seja feita e se enquadra no escopo de comunicação persuasiva porque uma vez que o usuário chegou ao nosso site, não devemos permitir que ele saia, pelo contrário, devemos até convencê-lo a fazer algo que possa se tornar uma vantagem para ambos, ou seja, para nós e para o usuário. Eu sou da opinião, de fato, convenhamos, eu tenho certeza, que 10.000 visitas diárias com uma taxa de rejeição de 99% são menos úteis do que 500 com uma taxa de rejeição de 10% e uma taxa de conversão de 5 ou até 10% .

Sabemos que o desempenho do site em termos de número de visitantes e taxa de rejeição também depende do tipo de site, mas também é verdade que um site corporativo é feito para "fazendo negócios" e não pentear os bonecos e por isso é fundamental que o visitante permaneça "em nossa casa" ou melhor, no local por mais de 30 segundos, realizando ações que tentamos induzi-lo a realizar. Caso contrário, do que estamos falando?

Por exemplo, no caso de sites corporativos é muito importante fazer contato com o visitante, no caso de sites de comércio eletrônico é necessário vender produtos, no caso de sites de informação é necessário catalisar a atenção possivelmente solicitando um comentário final; há também a eventualidade de querer apenas fazer marcas, e pode levar muito menos tempo, mas isso é outra história.

La apelo à acção é parte integrante de redação persuasiva: você precisa tirar todas as dúvidas do potencial cliente para levá-lo à ação. Não estou dizendo para enganá-lo, veja bem, mas para poder fazê-lo entender o verdadeiro valor do produto (ou serviço) que você está vendendo e, sobretudo, a necessidade real, às vezes não expressa.

A acessibilidade das chamadas para ações está intimamente ligada a dois aspectos: a semântica dos rótulos usados ​​para identificar uma ação e a forma como essa ação é realizada.

A semântica das chamadas para ações deve ser autoexplicativa. Um botão, um link, deve ter um rótulo que identifique exatamente a ação que o usuário vai realizar. Recentemente, vi as mudanças feitas por algumas redes sociais e CMSs na chamada para ações de uploads de imagens: basicamente agora temos dois botões que dizem "Selecionar imagem". Incrivelmente, falta um botão que diz "Carregar fotos". Isso gera confusão para os usuários, lembrando também que quem navega com um leitor de tela tem uma visão serial da página, ou seja, falta o olhar global típico dos usuários que navegam com um navegador visual.

Rótulos vagos devem ser evitados, genérico ou obscuro. Um rótulo que deve ser evitado é "Clique aqui". Se você navegar em uma página que tenha chamadas para ações rotuladas de maneira semelhante com um leitor de tela, ouvirá uma série interminável de "(link) Clique aqui" que não fornecerá nenhuma informação útil sobre a natureza da ação que você ativará .

Outra coisa a evitar é o abuso de atributos title alguns links. Quando usado discretamente, esse atributo pode fornecer informações contextuais valiosas sobre a ação a ser executada, mas, quando usado em excesso, transforma a navegação na página em um calvário. Na verdade, os leitores de tela associam cada link ao seu próprio título e o leem antes do conteúdo do elemento.

Do ponto de vista gráfico, e tendo em vista as necessidades dos usuários com deficiência visual, os elementos que evocam uma ação devem ser claramente visíveis e em relevo, com fontes suficientemente grandes para facilitar a leitura. Mais importante ainda, alguns ajustes no nível do CSS devem ser usados ​​para permitir que esses elementos se adaptem às mudanças no tamanho da fonte que um usuário com deficiência visual pode fazer na página. Por último, mas não menos importante, devem ter um contraste de cores adequado entre texto e fundo, a fim de evitar problemas com daltonismo.

nginx: um novo servidor web

JavaScript e seu uso correto

Em relação a como essas ações são acionadas, precisamos pensar no JavaScript.

Lembremos que JavaScript e acessibilidade não são incompatíveis, contanto que você respeite algumas práticas recomendadas simples. Uma delas diz respeito aos links e como mantê-los acessíveis mesmo com o JavaScript desabilitado ou sem suporte. Nesse sentido, é necessário distinguir entre links efetivos (que levam o usuário a uma nova página ou que, em qualquer caso, apontam para recursos) e links de gatilho, ou seja, links sem conteúdo real, mas que servem para "acionar" ações JavaScript.

Uma prática a ser evitada é o de links sem valor para o atributo href, quanto <a href="" id="trigger" >...</a>. Em navegadores sem suporte a JavaScript, como o Lynx, esse link fará com que a página seja totalmente recarregada. É claro que podemos gerar totalmente o gatilho com JavaScript, mas o link não estará disponível se o JavaScript não for suportado ou desativado. Muitos sites estáticos também usam essa técnica para gerar links permanentes, pois o navegador considerará a página atual como o valor do atributo ausente href.

Portanto é necessário dar um valor a este atributo, considerando também o fato de que para as especificações XHTML o atributo href Não pode estar vazio. Mas qual? Muitos optaram por usar o caractere hash (#) como preenchimento. No entanto, mesmo esta solução tem limitações, pois com o JavaScript desabilitado ou não suportado teremos o efeito de criar uma referência a uma âncora inexistente, o que pode desorientar aqueles que navegam na Web com tecnologia assistiva não visual.

A solução, é claro, está em algum lugar no meio: podemos de fato criar uma âncora que aponte para o conteúdo real da página. No caso de conteúdo gerado via JavaScript, podemos usar uma abordagem como esta:

Ajuda O e-mail deve estar no formato nome de usuário@domínio.extensão

Vamos estilizar nosso div, que ocultaremos com JavaScript. Se o JavaScript não for suportado ou desativado, nosso div simplesmente permanecerá visível. Para ocultá-lo, vamos usar uma classe CSS para vincular quando o documento for carregado:

.hidden { posição: absoluto; topo: -1000em; }

Tanto o jQuery quanto o Prototype possuem métodos para ocultar um elemento, mas lembre-se de que eles fazem uso da declaração display: none. Esta declaração infelizmente é interpretada por leitores de tela, que possuem suporte parcial para JavaScript, impedindo-os de ler o conteúdo de um elemento. Neste ponto, se usarmos jQuery, podemos escrever:

$('#trigger').click(function() { $('#email-help').removeClass('hidden'); });

Evitei deliberadamente inserir a declaração return false; porque alguns leitores de tela são capazes de interpretar um evento click, equiparando-o a um evento de teclado em alguns casos. Se eu tivesse inserido tal declaração, tais programas não teriam seguido o destino do link e, portanto, não seriam capazes de ler o conteúdo de nosso div. O único efeito desagradável para navegadores normais é ver a âncora adicionada ao URL da página atual, mas isso não afeta de forma alguma sua acessibilidade e usabilidade.

Com as devidas modificações, as mesmas observações também se aplicam aos botões, obviamente tendo em vista as diferenças na casuística dos eventos JavaScript disponíveis.

O primeiro princípio de usabilidade que se aplica às chamadas para ações é oidentificabilidade. Uma chamada à ação deve ser sempre imediatamente reconhecível pelo usuário e sua função facilmente compreendida. Há dois aspectos envolvidos:

• layout da chamada para ação
• rotulagem da chamada para ação

Cada aspecto está intimamente ligado ao outro. O layout de uma chamada para ação nunca deve afetar seu reconhecimento. Um botão em um formulário, por mais modificado que seja usando CSS, deve sempre fazer o usuário pensar "Agora eu clico aqui". De fato, segundo Steve Krug, o usuário deve clicar sem pensar se o que vê é um botão ou não. A ação deve ser imediata (dentro de 300 milissegundos ou mais, exatamente conforme estabelecido por pesquisas recentes sobre a experiência do usuário).

O segundo aspecto está relacionado a como uma chamada à ação é definida literalmente. Os rótulos devem ser simples, claros e autoexplicativos. Um exemplo é a tradução do item "Salvar" no menu de contexto dos aplicativos do Mac OS X: em italiano, esse item foi renderizado como "Gravar", o que certamente não é o melhor em termos de clareza. Portanto, se um botão iniciar um mecanismo de pesquisa, o rótulo deve ser "Pesquisar" e assim por diante. Neste caso a imaginação deve dar lugar ao bom senso: as convenções neste caso são muito úteis.

É claro que ainda haveria muito o que escrever sobre o assunto, mas o objetivo deste longo artigo é mais do que qualquer outra coisa fazer as pessoas pensarem, tomarem conhecimento do que está sendo feito e, acima de tudo, entender que um simples botão que deve induzir a entrar em contato com você ou enviar um e-mail ou uma solicitação, não é uma coisa tão trivial.

Design para empresas, Sketchin: “Sempre comece pela mudança…”